会津大生７０人を集めて勉強会付 きハッカソンを開催した話 LINE Developer Community REVUP 2021 会津大学学部一年 しんぶんぶん（高棟 雄斗）

#linedc_revup_C ツイートお願いします！！

- 会津大学学部一年生 - 高校一年生の時からLINE Developer Communityで活動 - LINE API実践ガイド LINEログイン章著者 - 普段はNuxt.jsやNode.jsでWeb開発をしている - 最近のマイブームはアイデンティティ管理/認証系 - WebAuthnとかDIDとか 自己紹介 @shinbunbun_ https:/ /shinbunbun.info

1. 今回実施したハッカソン（ AizuHack）について 2. LINE賞受賞作品について 3. LINEBot勉強会についての概要 4. プログラミング未経験者に向けた勉強会資料を作る上で気をつけたこと 5. 新しく立ち上げた会津大生のプロダクト開発コミュニティ（ ASCs）について アジェンダ

1. AizuHackについて

- 今回僕が会津大学で実施した勉強会付きハッカソンのこと - 参加者７０名（ほとんどが１ , ２年生でプログラミング初心者 /未経験者） - スタッフ１４名 - サークルの先輩などを中心に声をかけてお手伝いしてもらった - 勉強会１ヶ月（週１×４回）、ハッカソン１ヶ月の２ヶ月間で実施した - LINE Developer Community協賛でLINE賞を提供して頂いた AizuHackの概要 1.AizuHackについて

- LINEBotコース、IoTコース、Webコース、デザインコースの４ コースにわかれて実施 - LINEBot勉強会は僕が講師を担当し、他のコースは先輩にお 願いした - LINEBot勉強会は他コース参加者も受講可にしたため、実際 にLINEBot勉強会を受講したのは２０人弱ほど - 勉強会は全て対面で実施した 勉強会について 1.AizuHackについて コース 人数 LINEBot １２ IoT １４ Web ３０ デザイン ８

- 勉強会終了後、１８チームにわけた - 下記のようなチーム構成をこちらで用意し、希望の構成を選んでもらう形にした - １チーム１人、先輩をアシスタントをつけてサポートを行った ハッカソンのチーム編成について 1.AizuHackについて

- 講師・アシスタント陣に以下の項目で評価をつけてもらった - 共通項目 - 発表資料は見やすかったか？（ 5点満点） - プロダクトの魅力は発表で伝わったか？（ 5点満点） - 以上2つは、発表時間超過 1分あたり素点の 10%減点（小数点以下切り捨て） - ワクワクする作品か？（ 10点満点） - アイデアの創造性（ 10点満点） - 作品は最低限動作するか？（ 10点満点） - 技術的なレベルは高いか？（ 10点満点） - 個別項目（該当作品のみ、各１０点満点） - IoT技術の活用度・完成度 - Web技術の活用度・完成度 - デザインの完成度 ハッカソンの評価方法について 1.AizuHackについて

- 前述の評価点から以下の賞を決めた ● IoT賞: IoT技術の活用度・完成度がもっとも高かった作品に贈られる賞（ 1〜3位まで表彰） ● Web賞: Web技術の活用度・完成度がもっとも高かった作品に贈られる賞（ 1〜3位まで表彰） ● デザイン賞: デザインの完成度がもっとも高かった作品に贈られる賞（ 1〜3位まで表彰） ● 奨励賞: レベル1, 2のチームでもっとも総合点が高いチームに贈られる賞（ 1位のみ表彰） ● オーディエンス賞: オーディエンス投票で最多票だった作品に贈られる賞です（ 1位のみ表彰） ● Geek賞: 「技術的なレベルは高いか？」の評点がもっとも高いチームに贈られる賞（ 1位のみ表彰） ● LINE賞: LINE Developers Community様の協賛賞。LINE API Expertによって選出される（3チーム表彰） ● 準々グランプリ: 共通評価項目の総合点が 3番目に高い作品へ贈られる賞 ● 準グランプリ: 共通評価項目の総合点が 2番目に高い作品へ贈られる賞 ● グランプリ: 共通評価項目の総合点がもっとも高い作品へ贈られる賞 各賞について 1.AizuHackについて

- 各賞１位〜３位：Aizu Geek Dojoのレーザーカッターで作ったストラップ - 各賞１位受賞作品：Aizu Geek Dojoのレーザーカッターで作った盾 - LINE賞受賞作品：LINE Friendsグッズ 賞品について 1.AizuHackについて

2. LINE賞受賞作品について

- 「日々の生活をより豊かなものに」というコンセプ ト - 選択した日のイベントを表示、近くのお店を表 示、イベントのリマインド通知の機能がある - カレンダーはFlexMessage、地図はLIFFで作ら れており、Messaging APIをちゃんと活用してい る - Nuxt.jsやAWSなど、勉強会では教えていない 高度な技術も使えている １作品目　秘書BOT 2. LINE賞受賞作品について

- Todoと推定所用時間を入力すると自動で予定 を組んでくれるLINEBot - リッチメニューを活用して機能がわかりやすく なっている - Todoリストの編集画面やスケジュール画面は LIFFで作られている - ESP32を使用してIoTポモドーロタイマーも制作 した - 全体的に完成度が高い ２作品目　TODOスケジューリングBOT 2. LINE賞受賞作品について

- 学校のシステムがバラバラで使いにくいため、 それを１つのBotに集約しようという作品 - リッチメニュー、FlexMessageなどの Messaging APIの技術をしっかり使っていること に加えて、デザインの完成度がとても高い - 外部APIとの通信やDBも活用しており、技術的 なレベルも高い ３作品目 Assignment Manager 2. LINE賞受賞作品について

- 全体的にレベルの高い作品が多かった - Messaging APIの機能をちゃんと活用できており、とてもプログラミング初心者 /未経験者の作品とは思 えなかった - ここまでの作品が作れた理由 - もちろん参加者の努力が一番の理由だが、勉強会のやり方が良かったことにもその一端があるの では...？ 主催者としての感想 2. LINE賞受賞作品について

3. LINEBot勉強会についての概要

- 基本勉強会３回＋エクストラ勉強会１回の構成 - 各勉強会の内容 - 第１回：Webコースと合同でJavaScript勉強会 - 第２回：サンプルコードを使って Botを動かしてみる & Messaging APIで受け取れるイベントや送れるメッセージ についての解説 - 第３回：LINE Bot Designer & FlexMessage & リッチメ ニュー & PUSHメッセージについて - Ex回：外部APIとの通信(axios)、SheetDBの使い方、LIFF の作り方、ESLintの使い方 - 勉強会資料はQiitaで公開中 LINEBot勉強会の概要 3. LINEBot勉強会について

4. 勉強会資料を作る上で気をつけたこと

- 今回の勉強会の目的は「 LINEBotに触れてみること」ではなく「自分で LINEBotを作れるようにすること」 - 色々なハンズオンや記事があるが、その多くが「触ってみる」というところで止まっている - 今回の資料は、「この資料があれば勉強会終了後に１人でも新しい LINEBotが作れるようになる」ということを 念頭において作成した - 改造しやすいサンプルコード - 今回の勉強会でBotのコードを完全に理解する（１から自分でBotのコードが書けるようになる）必要はなく、「サンプル コードのどこをどういじればどのように動くか」が理解できれば、サンプルコードをベースにして新しいBotが作れる - 「なんで動くかはわからないけど、とりあえずここをいじればこう動くらしい」ということがわかれば良い 応用が利く資料にする 4. 勉強会資料を作る上で気をつけたこと

具体的にどんな工夫をしたの？

- それぞれのイベントやメッセージオブジェクトについての解説を一通り書いた （資料: AizuHack LINEBot勉強会 Vol.1） - 全部知っておきたいけどリファレンスは難しくて読みにくい - →リファレンスを噛み砕く形で解説を書いた - メッセージオブジェクトについては各々の画像を掲載した イベントやメッセージの解説を一通り書く 4. 勉強会資料を作る上で気をつけたこと

- 前述の通り、「サンプルコードのどこをどういじればど のように動くか」を理解してもらう必要がある - 演習課題を用意して、実際にソースコードをいじるこ とで理解を深めてもらった 積極的に手を動かしてもらう 4. 勉強会資料を作る上で気をつけたこと

- Messaging APIで一般的に使われるほぼ全ての機能をサンプルで実装した - 各EventやMessage、プロフィール情報の取得など サンプルコードを工夫する① 4. 勉強会資料を作る上で気をつけたこと

- 機能ごとに関数/ファイルを細かく分割して、どこに何が書いてあるのか わかりやすくした - 「ここをいじればこんなことができる」 ということが直感的にわかる構造 サンプルコードを工夫する② 4. 勉強会資料を作る上で気をつけたこと イベントごとにファイルを分割 → イベントの中でも機能ごとに関数を分割 ↓

- コメントを大量に書いた - これでもかというくらい大量のコメントを書いて、その行がなんの 処理をしているのか分かりやすくした - JSの構文をきちんと理解していなくても、コメントが書いてあれ ばその行で何をしているかがわかる - 「このコードはよくわからないけど、ここではこんな処理をしている んだな」というのが理解してもらえるように サンプルコードを工夫する③ 4. 勉強会資料を作る上で気をつけたこと

- 拡張性を重視する以上、ローカルで サーバを立ててngrokを使うというあり がちな手法は不採用 - Google Apps Scriptは拡張性が低い - AWS Lambdaなどは若干難易度が高 い - ではどうするか→Vercelが最適解で は？ ホスティング先の選定 4. 勉強会資料を作る上で気をつけたこと - 永続的に使えるという面で応用がきく - AWSのように設定が複雑でない - サンプルコードに設定ファイルを用意してお けば、コマンド１つでデプロイできる - サーバのログも確認しやすい - Expressを使えばLIFFで使うフロントエンドも 一緒にデプロイできる - ただ、VercelでExpressを使うのはアンチパ ターンなのでもうちょっと良い方法を考えたい 感はある Vercelを使うメリット

5. さいごに

- 会津大で新しく立ち上げたプロダクト開発コミュニティのこと - 今回実施したハッカソンも、このコミュニティを立ち上げる前準 備として行った - 活動内容は主にチーム開発や開発に関する勉強会 - ASCsは学校と独立した組織のため、活動資金などを自分たち で調達する必要があります - 勉強会やハッカソンなどのイベントに協賛してくださる企業の方 がいらっしゃいましたら是非ご連絡ください 🙏 ASCsについて 5. さいごに

- イベントレポートを公開しました - 今回のセッションよりも多くの情報が書かれているので、興味ある方はぜひ！ AizuHackのイベントレポートについて 5. さいごに https://blog.ascs.dev

ご清聴ありがとうございました