Upgrade to Pro — share decks privately, control downloads, hide ads and more …

会津大学生70人を集めて勉強会付きハッカソンを実施した話

Yuto Takamune
October 02, 2021
830

 会津大学生70人を集めて勉強会付きハッカソンを実施した話

LINE DC REVUP 2021で発表した資料です。
https://linedevelopercommunity.connpass.com/event/224003/

Yuto Takamune

October 02, 2021
Tweet

Transcript

  1. - 会津大学学部一年生 - 高校一年生の時からLINE Developer Communityで活動 - LINE API実践ガイド LINEログイン章著者

    - 普段はNuxt.jsやNode.jsでWeb開発をしている - 最近のマイブームはアイデンティティ管理/認証系 - WebAuthnとかDIDとか 自己紹介 @shinbunbun_ https:/ /shinbunbun.info
  2. - 今回僕が会津大学で実施した勉強会付きハッカソンのこと - 参加者70名(ほとんどが1 , 2年生でプログラミング初心者 /未経験者) - スタッフ14名 -

    サークルの先輩などを中心に声をかけてお手伝いしてもらった - 勉強会1ヶ月(週1×4回)、ハッカソン1ヶ月の2ヶ月間で実施した - LINE Developer Community協賛でLINE賞を提供して頂いた AizuHackの概要 1.AizuHackについて
  3. - 講師・アシスタント陣に以下の項目で評価をつけてもらった - 共通項目 - 発表資料は見やすかったか?( 5点満点) - プロダクトの魅力は発表で伝わったか?( 5点満点)

    - 以上2つは、発表時間超過 1分あたり素点の 10%減点(小数点以下切り捨て) - ワクワクする作品か?( 10点満点) - アイデアの創造性( 10点満点) - 作品は最低限動作するか?( 10点満点) - 技術的なレベルは高いか?( 10点満点) - 個別項目(該当作品のみ、各10点満点) - IoT技術の活用度・完成度 - Web技術の活用度・完成度 - デザインの完成度 ハッカソンの評価方法について 1.AizuHackについて
  4. - 前述の評価点から以下の賞を決めた • 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について
  5. - Todoと推定所用時間を入力すると自動で予定 を組んでくれるLINEBot - リッチメニューを活用して機能がわかりやすく なっている - Todoリストの編集画面やスケジュール画面は LIFFで作られている -

    ESP32を使用してIoTポモドーロタイマーも制作 した - 全体的に完成度が高い 2作品目 TODOスケジューリングBOT 2. LINE賞受賞作品について
  6. - 全体的にレベルの高い作品が多かった - Messaging APIの機能をちゃんと活用できており、とてもプログラミング初心者 /未経験者の作品とは思 えなかった - ここまでの作品が作れた理由 -

    もちろん参加者の努力が一番の理由だが、勉強会のやり方が良かったことにもその一端があるの では...? 主催者としての感想 2. LINE賞受賞作品について
  7. - 基本勉強会3回+エクストラ勉強会1回の構成 - 各勉強会の内容 - 第1回:Webコースと合同でJavaScript勉強会 - 第2回:サンプルコードを使って Botを動かしてみる &

    Messaging APIで受け取れるイベントや送れるメッセージ についての解説 - 第3回:LINE Bot Designer & FlexMessage & リッチメ ニュー & PUSHメッセージについて - Ex回:外部APIとの通信(axios)、SheetDBの使い方、LIFF の作り方、ESLintの使い方 - 勉強会資料はQiitaで公開中 LINEBot勉強会の概要 3. LINEBot勉強会について
  8. - 今回の勉強会の目的は「 LINEBotに触れてみること」ではなく「自分で LINEBotを作れるようにすること」 - 色々なハンズオンや記事があるが、その多くが「触ってみる」というところで止まっている - 今回の資料は、「この資料があれば勉強会終了後に1人でも新しい LINEBotが作れるようになる」ということを 念頭において作成した

    - 改造しやすいサンプルコード - 今回の勉強会でBotのコードを完全に理解する(1から自分でBotのコードが書けるようになる)必要はなく、「サンプル コードのどこをどういじればどのように動くか」が理解できれば、サンプルコードをベースにして新しいBotが作れる - 「なんで動くかはわからないけど、とりあえずここをいじればこう動くらしい」ということがわかれば良い 応用が利く資料にする 4. 勉強会資料を作る上で気をつけたこと
  9. - 拡張性を重視する以上、ローカルで サーバを立ててngrokを使うというあり がちな手法は不採用 - Google Apps Scriptは拡張性が低い - AWS

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