LINE DC REVUP 2021で発表した資料です。 https://linedevelopercommunity.connpass.com/event/224003/
会津大生７０人を集めて勉強会付きハッカソンを開催した話LINE Developer Community REVUP 2021会津大学学部一年 しんぶんぶん（高棟 雄斗）
View Slide
#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など、勉強会では教えていない高度な技術も使えている１作品目 秘書BOT2. LINE賞受賞作品について
- Todoと推定所用時間を入力すると自動で予定を組んでくれるLINEBot- リッチメニューを活用して機能がわかりやすくなっている- Todoリストの編集画面やスケジュール画面はLIFFで作られている- ESP32を使用してIoTポモドーロタイマーも制作した- 全体的に完成度が高い２作品目 TODOスケジューリングBOT2. LINE賞受賞作品について
- 学校のシステムがバラバラで使いにくいため、それを１つのBotに集約しようという作品- リッチメニュー、FlexMessageなどのMessaging APIの技術をしっかり使っていることに加えて、デザインの完成度がとても高い- 外部APIとの通信やDBも活用しており、技術的なレベルも高い３作品目 Assignment Manager2. 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
ご清聴ありがとうございました
shinbunbun_
bkeepers
jmmastey
hatefulcrawdad
michaelherold
pedronauck
chriscoyier
holman
ufuk
brianwarren
eileencodes
thekraken
malarkey