声がかかったので即興LINEbotハンズオンやってみた

非エンジニア高校生にオフラインでLINEBotを作れるようになるハンズオンを行ってきました

Transcript

1. -*/&#PUϋϯζΦϯ΍ͬͯΈͨ 即興 2020/7/24 ようかん（@inoue2002）
2. @inoue2002
3. ようかん（井上陽介） ・滋賀の普通科⾼校3年⽣（現在進⾏形） ・元陸上競技部キャプテン ・LDGKオンラインハッカソン LINE賞受賞 ・レッドハッカソン2020 奨励賞受賞 ・「⾼校⽣主催のIT勉強会」を主催(#⾼校⽣ミーティング) ⾃⼰紹介 ・Twitter（＠inoue2002 ） → ・11LINEBot作った ・ポートフォリオ作った！！( youkan.me ) Q . コロナ休校期間何してた?? Q .最近してることは?? ・ LINEBot布教
4. みんなでLINEbot知りましょう！ みんなでLINEbotを作っていきましょう！ ：今⽇の⽬標
5. ：教材 https://qiita.com/inoue2002/items/a87df2b520f8b6e37f42
6. 以後補⾜資料！
7. 2019/2にコミュニティに出会う ↓ コミュニティにϋϚΔ ↓ 2020/7時点で80近くのイベントに参加 ↓ 最近は登壇にハマって好き勝⼿喋ってる ようかんは⼀体何者??←よく⾔われる しかし残念ながら、割とその辺にいる⾼校⽣です。
8. 得意なことはNode.jsとLINEAPIとAWS
9. なんでそんなLINEBot 作ってるん?? LINEが好きだから
10. LINEBot作ったことありますか?? まだ触った事ない⼈に朗報！いまLINEBot⼊⾨する • 無料で開発できる！ • バックエンドやフロントエンドなどの触った事ないところを触れるきっかけになれる！ • いろんな課題解決をできるのでみんなに褒められる！ • 「LINEミニアプリ」の話題の波に乗れる！ • ようかんの記事を読めば楽チンに始められる！ このLTを聞いて皆さんにLINEBot開発をしたくなっていただきます！！
11. 過去に作ったLINEBot 並べるだけ
12. ようかんbot（開発期間2週間） ・これのおかげでプログラミングを始めた ・沢⼭登壇しているので詳細は去年版の登壇動画へ↓ 課題 ・⾼校⽣活の中、時間割とかをいつでも確認したい ・プリントが多すぎて管理が⼤変 特徴 ・リリース初⽇でユーザー200⼈越えの⼈気 ・先⽣から⼀⻫送信頼まれることもある 備考
13. 料理当番Bot（開発期間１⽇） ・詳細はnoteにまとめてあります→ 課題 ・みんな家にいるようになって⺟のストレス↑ ・料理作ったりやることが増えた 特徴 ・家族グループに「当番発表」と送るだけ ・異なる家族構成版の作成依頼を受けた 備考
14. 部活動紹介Bot（開発期間１⽇） ・過去の登壇動画(youtube）→ 課題 ・休校再開で部活オリエンテーションが中⽌ ・新⼊⽣と部員とのコミュニケーションが取れない 特徴 ・企画/構成/開発/リリースまで１⽇ ・オープンチャットを活かした匿名利⽤と荒らしに強い 備考
15. studyTimer（開発期間5時間） 勉強グループでのこのメッセージが由来 ・リリースツイート→ 課題 ・家で勉強するも、モチベが続きにくい ・友達の勉強時間を気軽に視覚化できたらモチベになる 特徴 ・DBやキャッシュを利⽤せず、postbackで処理 ・勉強グループに招待して利⽤可能 備考
16. コロナ⾷ロスbot（開発期間１⽇） ・LDGKハッカソンLINE賞 ・詳細は感想を書いたnote→ 課題 ・コロナによる⾷ロスが多発 ・SNSに慣れておらず、商売しにくい会社がある 特徴 ・Share Target PickerやIcon/Nickname Switch APIを実装 ・リアルサービスへ実装する話が出てきている 備考
17. 画像アップローダー（開発期間１⽇） 課題 ・画像URLを⼀瞬で発⾏したい時がある ・画像をURLで共有したい 特徴 ・写真を投げるだけで⼀瞬でURLを発⾏してくれる ・⾃分のs3バケットを使っているので他⼈には共有できない ・aws-sdkの練習に作った 備考 ・詳細ツイート→
18. Twitter動画ダウンローダー（開発期間3時間） ・詳細ツイート→ 課題 ・ツイッターの動画をダウンロードしたい ・サイトを使うと広告とか出てうっとしい 特徴 ・LINEで勝⼿にやってくれるのでなかなか便利 ・たまにできない動画もある（プロモーションとか） 備考 ・友達登録→
19. カップ麺タイマー (開発期間3ヶ⽉） ・とりあえず試してみるべし→ 課題 ・何気ないカップ麺にお湯を⼊れたあとの待ち時間 ・普段出会わない記事に出会いたい 特徴 ・1~10分までのタイマーに対応 ・DBでユーザーのタイマーを管理 備考
20. sosmapjapan（開発期間1ヶ⽉） ・友達登録→ 課題 ・直感的にSOSに会える ・SNSに慣れておらず、商売しにくい会社がある 特徴 ・AWSで運⽤しており素早いレスポンス ・リアルサービスで運⽤中(sosmap.pw) 備考
21. トラべる！（開発期間１⽇） ・レッドハッカソン奨励賞 ・コンセプトを書いたQiita→ ・諸事情により運⽤停⽌中 課題 ・コロナによる⾷ロスが多発 ・SGG3⼈で参加 特徴 ・コロナが収まった後の観光業を⽀援する ・旅⾏の計画が⽴てられる 備考
22. 事例はわかった。 LINEBot作ればいろんな課題を解決できるんだね。 でもどうやって作り始めたらいいのかわからないよ。。 「LINEBot」で検索してもいろんな⾔語の記事が転がってたり、記事が古かったりで何がいいのかわからん！！ なんやかんや⼊⾨はきついねん！ 安⼼してください。おすすめの構成とLINEBotが学べる記事をご紹介します！！
23. AWSCDKのやつ
24. 僕がAWSCDKを知ったきっかけ CDKを布教しているLTを聞いた TypeScriptとかCloudFormation とか知らない⾔葉が多かったけ れど、快適になるなら！と思っ て勉強を始めた
25. 勉強始めて数時間後・・ ①TypeScriptかけなくてもNode.jsで書いて も動くので余裕で⼊⾨できた ②備忘録に記事書いた 開発で使うようになり、どんどん好きになった
26. #PUͷΠϯϑϥߏங͸$%,Ͱૣ͘ͳΔͷ͔ 検証していきます
27. 条件 ・⾃分が書いたQiitaを⾒ながらコードはコピペ ・CDKを使って⾊々できるスキルを持っている ・ディレクトリを作るタイミングでスタート ・BotがLambdaを通して応答したらストップ
28. まず普通にコンソール画⾯から作ってみた
29. 結果は15分ほど。 コンソール画⾯を久しぶりにぽちぽちした
30. CDKを使って作ってみた
31. 結果 ディレクトリを作ってBotが応答するまで9分を切った！ （半分くらいがインストールやデプロイ時間） インフラ構築がちょー楽になってBot開発に専念できます！！
32. ディレクトリやファイルを作る ↓ Qiitaからテンプレートをコピペ ↓ 必要なモジュールをインストール ↓ いくつかのエラーが出るので修正する ↓ yarn build ↓ cdk deploy やったこと
33. 作業⼯程を⽐較してみる
34. 例）LambdaとAPIGatwayを設定する CDKだとこのほんの20⾏くらい書いてデプロイするだけ
35. めちゃめちゃ⼯数がおおい！ 僕の経験上、設定ミスでなかなか上⼿くいかない コンソールで操作すると
36. 実際に⾃分の⼿で確かめてみたい⽅は
37. ↓CDKを使って作る.ver ↓AWSコンソールを使って作る.ver ※頻繁アップデートにより動かない場合があります
38. CDKにハマった他の理由
39. 構築するアーキテクチャごとコードで管理できる！ ←「⾚枠にxxと⼊⼒して次に進みます」 こういう説明をしなくても済むようになる LINEBotを頻繁に作る⼈は、毎回毎回コン ソールで同じ作業をやるのがめんどくさ い！勝⼿にやってほしい！ →コードをコピペすればいい GitHubで管理できる！
40. いらなくなったら destroy !! ハンズオンの最後にもあったようにいらなくなったら 「destroy」コマンドを⼊⼒するだけで、関係するものを 全部消してくれます！
41. 良い点/悪い点 毎週のようにアップデートが来る先週動いてたコードが動かなくなる←本当の話 開発の回数を重ねるほどありがたみがわかる アーキテクチャ丸々GitHubで管理できるのがものすごく気持ちいいい 構成が⼤きくなっていくと、デプロイに結構時間がかかる TypeScriptわからなくてもJSでなんとかなる CDKの公式workshopが割とわかりやすい
42. -今後に向けて- CDK×LINEBotの記事がまだまだ少ないのでTipsをどんどんアウトプットしていく S３などとも連携してCDKでできる開発を技術をあげる！ 今話題のミニアプリの開発にも使えそう →みなさんでLINEBot × AWSCDKを盛り上げていきましょう!!
43. 休校期間のやつ
44. 昨⽇引退試合を無事終え、陸上としばらくお別れ！ ⼈⽣の3分の1くらい全⼒になってたのでちょっと寂しい １年⽣も沢⼭⼊ってくれて、安⼼して引退できた
45. ⼀⾒普通に、いい話に思えますが
46. これまでいろんな問題がありました
47. これまでのあらすじ
48. 休校延⻑が発表される
49. ・休校が再開する→部活動の新⼊⽣勧誘などが禁⽌ ・⻑期休校で新⼊⽣の部活動意欲低下のおそれ ・部活動への関⼼を休校中も維持することが⼤切。
50. 同級⽣（各部活の部員） え！学校休み？？せっかく準備してたのに部活動紹介の時間無くなった。。 私たちいつの間にか引退になりそうやけど後輩⼊ってくるかな？ 妹（新⾼校⼀年⽣） 仮⼊部楽しみにしてたのに。 実際に先輩と喋ってじっくり部活決めたい。。 お互いの課題解決できないかなぁ 課題：お互いがコミュニケーション取れる場所がないこと
51. じゃあ作ったらええやん。
52. ・各部活のキャプテンに賛同を求め ・LINEBotのコードをカキカキ ・怪しまれそうだったので経緯を書いたホームページ作成 ・アイコンやメニュー画⾯のデザイン…
53. Ver.1
54. 実際の利⽤イメージ
55. その後、学校再開が発表
56. 折⾓ならまだ使ってない⼀年⽣に使ってほしい！！！ → 学校公式にすれば全員に使ってもらえるのでは??
57. 「⽣徒会の先⽣ー！僕、こんなサービス開発したんですけど、学校公式にしません?? 」 「そうだねぇ。素晴らしいんだけど、、、、、、 責任とかどうする? 職員会議で反対が出そう。。」 先⽣のおっしゃることは理解できるけど、もうちょっと前向きに検討して欲しかった。。 話にならん！！！
58. 学校が協⼒してくれないなら、意地でも⾃分で成功させる！！
59. やった事① -デザインの改案-
60. やった事② -QRコードとサービスの宣伝- →
61. やった事③ -利⽤者アンケート-
62. ⾃由回答に寄せられた意⾒ 「⾯と向かってはきけない各部活の細かいことまできけて本当に助かりました！」（新⼊⽣） 「質問をしたりトークを⾒たりして各部活の様⼦などよく分かって⼤変助かりました」（新⼊⽣） 「先輩の⽬を気にせず質問できたのでとても良かったです！作ってくれた⽅に感謝です！」（新⼊⽣） 「部活のことを詳しく部活の内容を教えて下さり助かりました！」 （新⼊⽣） 「匿名聞けるところとかとても聞きやすくて、先輩もわかりやすく答えてくれたので満⾜です！！」（新⼊⽣） 「こういう時期だからこそこのような形で1年⽣と話す機会を作ってもらえて嬉しかったです〜」（先輩） 「とても役に⽴って部活も無事きめられました。」（新⼊⽣） 「多くの新⼊部員に⼊っていただきました！相談サービスを作ってくださったおかげです。」（先輩）
63. やった事⑤ -⾃⼰振り返り、報告書作成-
64. 1⼈でも「ありがとう！」と⾔ってくれる⼈がいてよかった 僕⼈⾝が部活動⼤好き⼈間だったので真剣に相談して部活を決め てくれる⼈がいてよかった これからも⼈の⼒になれるサービス開発をしていきます！ まとめ ⚠荒らしがいろんなところで発⽣するので、戦うのが⼤変だった
65. お疲れ様です！