Tweet
Tweet

Slide 1

Slide 1 text

-*/PUϋϯζΦϯ΍ͬͯΈͨ 即興 2020/7/24 ようかん（@inoue2002）

Slide 2

Slide 2 text

@inoue2002

Slide 3

Slide 3 text

ようかん（井上陽介） ・滋賀の普通科⾼校3年⽣（現在進⾏形） ・元陸上競技部キャプテン ・LDGKオンラインハッカソン LINE賞受賞 ・レッドハッカソン2020 奨励賞受賞 ・「⾼校⽣主催のIT勉強会」を主催(#⾼校⽣ミーティング) ⾃⼰紹介 ・Twitter（＠inoue2002 ） → ・11LINEBot作った ・ポートフォリオ作った！！( youkan.me ) Q . コロナ休校期間何してた?? Q .最近してることは?? ・ LINEBot布教

Slide 4

Slide 4 text

みんなでLINEbot知りましょう！ みんなでLINEbotを作っていきましょう！ ：今⽇の⽬標

Slide 5

Slide 5 text

：教材 https://qiita.com/inoue2002/items/a87df2b520f8b6e37f42

Slide 6

Slide 6 text

以後補⾜資料！

Slide 7

Slide 7 text

2019/2にコミュニティに出会う ↓ コミュニティにϋϚΔ ↓ 2020/7時点で80近くのイベントに参加 ↓ 最近は登壇にハマって好き勝⼿喋ってる ようかんは⼀体何者??←よく⾔われる しかし残念ながら、割とその辺にいる⾼校⽣です。

Slide 8

Slide 8 text

得意なことはNode.jsとLINEAPIとAWS

Slide 9

Slide 9 text

なんでそんなLINEBot 作ってるん?? LINEが好きだから

Slide 10

Slide 10 text

LINEBot作ったことありますか?? まだ触った事ない⼈に朗報！いまLINEBot⼊⾨する ● 無料で開発できる！ ● バックエンドやフロントエンドなどの触った事ないところを触れるきっかけになれる！ ● いろんな課題解決をできるのでみんなに褒められる！ ● 「LINEミニアプリ」の話題の波に乗れる！ ● ようかんの記事を読めば楽チンに始められる！ このLTを聞いて皆さんにLINEBot開発をしたくなっていただきます！！

Slide 11

Slide 11 text

過去に作ったLINEBot 並べるだけ

Slide 12

Slide 12 text

ようかんbot（開発期間2週間） ・これのおかげでプログラミングを始めた ・沢⼭登壇しているので詳細は去年版の登壇動画へ↓ 課題 ・⾼校⽣活の中、時間割とかをいつでも確認したい ・プリントが多すぎて管理が⼤変 特徴 ・リリース初⽇でユーザー200⼈越えの⼈気 ・先⽣から⼀⻫送信頼まれることもある 備考

Slide 13

Slide 13 text

料理当番Bot（開発期間１⽇） ・詳細はnoteにまとめてあります→ 課題 ・みんな家にいるようになって⺟のストレス↑ ・料理作ったりやることが増えた 特徴 ・家族グループに「当番発表」と送るだけ ・異なる家族構成版の作成依頼を受けた 備考

Slide 14

Slide 14 text

部活動紹介Bot（開発期間１⽇） ・過去の登壇動画(youtube）→ 課題 ・休校再開で部活オリエンテーションが中⽌ ・新⼊⽣と部員とのコミュニケーションが取れない 特徴 ・企画/構成/開発/リリースまで１⽇ ・オープンチャットを活かした匿名利⽤と荒らしに強い 備考

Slide 15

Slide 15 text

studyTimer（開発期間5時間） 勉強グループでのこのメッセージが由来 ・リリースツイート→ 課題 ・家で勉強するも、モチベが続きにくい ・友達の勉強時間を気軽に視覚化できたらモチベになる 特徴 ・DBやキャッシュを利⽤せず、postbackで処理 ・勉強グループに招待して利⽤可能 備考

Slide 16

Slide 16 text

コロナ⾷ロスbot（開発期間１⽇） ・LDGKハッカソンLINE賞 ・詳細は感想を書いたnote→ 課題 ・コロナによる⾷ロスが多発 ・SNSに慣れておらず、商売しにくい会社がある 特徴 ・Share Target PickerやIcon/Nickname Switch APIを実装 ・リアルサービスへ実装する話が出てきている 備考

Slide 17

Slide 17 text

画像アップローダー（開発期間１⽇） 課題 ・画像URLを⼀瞬で発⾏したい時がある ・画像をURLで共有したい 特徴 ・写真を投げるだけで⼀瞬でURLを発⾏してくれる ・⾃分のs3バケットを使っているので他⼈には共有できない ・aws-sdkの練習に作った 備考 ・詳細ツイート→

Slide 18

Slide 18 text

Twitter動画ダウンローダー（開発期間3時間） ・詳細ツイート→ 課題 ・ツイッターの動画をダウンロードしたい ・サイトを使うと広告とか出てうっとしい 特徴 ・LINEで勝⼿にやってくれるのでなかなか便利 ・たまにできない動画もある（プロモーションとか） 備考 ・友達登録→

Slide 19

Slide 19 text

カップ麺タイマー (開発期間3ヶ⽉） ・とりあえず試してみるべし→ 課題 ・何気ないカップ麺にお湯を⼊れたあとの待ち時間 ・普段出会わない記事に出会いたい 特徴 ・1~10分までのタイマーに対応 ・DBでユーザーのタイマーを管理 備考

Slide 20

Slide 20 text

sosmapjapan（開発期間1ヶ⽉） ・友達登録→ 課題 ・直感的にSOSに会える ・SNSに慣れておらず、商売しにくい会社がある 特徴 ・AWSで運⽤しており素早いレスポンス ・リアルサービスで運⽤中(sosmap.pw) 備考

Slide 21

Slide 21 text

トラべる！（開発期間１⽇） ・レッドハッカソン奨励賞 ・コンセプトを書いたQiita→ ・諸事情により運⽤停⽌中 課題 ・コロナによる⾷ロスが多発 ・SGG3⼈で参加 特徴 ・コロナが収まった後の観光業を⽀援する ・旅⾏の計画が⽴てられる 備考

Slide 22

Slide 22 text

事例はわかった。 LINEBot作ればいろんな課題を解決できるんだね。 でもどうやって作り始めたらいいのかわからないよ。。 「LINEBot」で検索してもいろんな⾔語の記事が転がってたり、記事が古かったりで何がいいのかわからん！！ なんやかんや⼊⾨はきついねん！ 安⼼してください。おすすめの構成とLINEBotが学べる記事をご紹介します！！

Slide 23

Slide 23 text

AWSCDKのやつ

Slide 24

Slide 24 text

僕がAWSCDKを知ったきっかけ CDKを布教しているLTを聞いた TypeScriptとかCloudFormation とか知らない⾔葉が多かったけ れど、快適になるなら！と思っ て勉強を始めた

Slide 25

Slide 25 text

勉強始めて数時間後・・ ①TypeScriptかけなくてもNode.jsで書いて も動くので余裕で⼊⾨できた ②備忘録に記事書いた 開発で使うようになり、どんどん好きになった

Slide 26

Slide 26 text

#PUͷΠϯϑϥߏங͸$%,Ͱૣ͘ͳΔͷ͔ 検証していきます

Slide 27

Slide 27 text

条件 ・⾃分が書いたQiitaを⾒ながらコードはコピペ ・CDKを使って⾊々できるスキルを持っている ・ディレクトリを作るタイミングでスタート ・BotがLambdaを通して応答したらストップ

Slide 28

Slide 28 text

まず普通にコンソール画⾯から作ってみた

Slide 29

Slide 29 text

結果は15分ほど。 コンソール画⾯を久しぶりにぽちぽちした

Slide 30

Slide 30 text

CDKを使って作ってみた

Slide 31

Slide 31 text

結果 ディレクトリを作ってBotが応答するまで9分を切った！ （半分くらいがインストールやデプロイ時間） インフラ構築がちょー楽になってBot開発に専念できます！！

Slide 32

Slide 32 text

ディレクトリやファイルを作る ↓ Qiitaからテンプレートをコピペ ↓ 必要なモジュールをインストール ↓ いくつかのエラーが出るので修正する ↓ yarn build ↓ cdk deploy やったこと

Slide 33

Slide 33 text

作業⼯程を⽐較してみる

Slide 34

Slide 34 text

例）LambdaとAPIGatwayを設定する CDKだとこのほんの20⾏くらい書いてデプロイするだけ

Slide 35

Slide 35 text

めちゃめちゃ⼯数がおおい！ 僕の経験上、設定ミスでなかなか上⼿くいかない コンソールで操作すると

Slide 36

Slide 36 text

実際に⾃分の⼿で確かめてみたい⽅は

Slide 37

Slide 37 text

↓CDKを使って作る.ver ↓AWSコンソールを使って作る.ver ※頻繁アップデートにより動かない場合があります

Slide 38

Slide 38 text

CDKにハマった他の理由

Slide 39

Slide 39 text

構築するアーキテクチャごとコードで管理できる！ ←「⾚枠にxxと⼊⼒して次に進みます」 こういう説明をしなくても済むようになる LINEBotを頻繁に作る⼈は、毎回毎回コン ソールで同じ作業をやるのがめんどくさ い！勝⼿にやってほしい！ →コードをコピペすればいい GitHubで管理できる！

Slide 40

Slide 40 text

いらなくなったら destroy !! ハンズオンの最後にもあったようにいらなくなったら 「destroy」コマンドを⼊⼒するだけで、関係するものを 全部消してくれます！

Slide 41

Slide 41 text

良い点/悪い点 毎週のようにアップデートが来る先週動いてたコードが動かなくなる←本当の話 開発の回数を重ねるほどありがたみがわかる アーキテクチャ丸々GitHubで管理できるのがものすごく気持ちいいい 構成が⼤きくなっていくと、デプロイに結構時間がかかる TypeScriptわからなくてもJSでなんとかなる CDKの公式workshopが割とわかりやすい

Slide 42

Slide 42 text

-今後に向けて- CDK×LINEBotの記事がまだまだ少ないのでTipsをどんどんアウトプットしていく S３などとも連携してCDKでできる開発を技術をあげる！ 今話題のミニアプリの開発にも使えそう →みなさんでLINEBot × AWSCDKを盛り上げていきましょう!!

Slide 43

Slide 43 text

休校期間のやつ

Slide 44

Slide 44 text

昨⽇引退試合を無事終え、陸上としばらくお別れ！ ⼈⽣の3分の1くらい全⼒になってたのでちょっと寂しい １年⽣も沢⼭⼊ってくれて、安⼼して引退できた

Slide 45

Slide 45 text

⼀⾒普通に、いい話に思えますが

Slide 46

Slide 46 text

これまでいろんな問題がありました

Slide 47

Slide 47 text

これまでのあらすじ

Slide 48

Slide 48 text

休校延⻑が発表される

Slide 49

Slide 49 text

・休校が再開する→部活動の新⼊⽣勧誘などが禁⽌ ・⻑期休校で新⼊⽣の部活動意欲低下のおそれ ・部活動への関⼼を休校中も維持することが⼤切。

Slide 50

Slide 50 text

同級⽣（各部活の部員） え！学校休み？？せっかく準備してたのに部活動紹介の時間無くなった。。 私たちいつの間にか引退になりそうやけど後輩⼊ってくるかな？ 妹（新⾼校⼀年⽣） 仮⼊部楽しみにしてたのに。 実際に先輩と喋ってじっくり部活決めたい。。 お互いの課題解決できないかなぁ 課題：お互いがコミュニケーション取れる場所がないこと

Slide 51

Slide 51 text

じゃあ作ったらええやん。

Slide 52

Slide 52 text

・各部活のキャプテンに賛同を求め ・LINEBotのコードをカキカキ ・怪しまれそうだったので経緯を書いたホームページ作成 ・アイコンやメニュー画⾯のデザイン…

Slide 53

Slide 53 text

Ver.1

Slide 54

Slide 54 text

実際の利⽤イメージ

Slide 55

Slide 55 text

その後、学校再開が発表

Slide 56

Slide 56 text

折⾓ならまだ使ってない⼀年⽣に使ってほしい！！！ → 学校公式にすれば全員に使ってもらえるのでは??

Slide 57

Slide 57 text

「⽣徒会の先⽣ー！僕、こんなサービス開発したんですけど、学校公式にしません?? 」 「そうだねぇ。素晴らしいんだけど、、、、、、 責任とかどうする? 職員会議で反対が出そう。。」 先⽣のおっしゃることは理解できるけど、もうちょっと前向きに検討して欲しかった。。 話にならん！！！

Slide 58

Slide 58 text

学校が協⼒してくれないなら、意地でも⾃分で成功させる！！

Slide 59

Slide 59 text

やった事① -デザインの改案-

Slide 60

Slide 60 text

やった事② -QRコードとサービスの宣伝- →

Slide 61

Slide 61 text

やった事③ -利⽤者アンケート-

Slide 62

Slide 62 text

⾃由回答に寄せられた意⾒ 「⾯と向かってはきけない各部活の細かいことまできけて本当に助かりました！」（新⼊⽣） 「質問をしたりトークを⾒たりして各部活の様⼦などよく分かって⼤変助かりました」（新⼊⽣） 「先輩の⽬を気にせず質問できたのでとても良かったです！作ってくれた⽅に感謝です！」（新⼊⽣） 「部活のことを詳しく部活の内容を教えて下さり助かりました！」 （新⼊⽣） 「匿名聞けるところとかとても聞きやすくて、先輩もわかりやすく答えてくれたので満⾜です！！」（新⼊⽣） 「こういう時期だからこそこのような形で1年⽣と話す機会を作ってもらえて嬉しかったです〜」（先輩） 「とても役に⽴って部活も無事きめられました。」（新⼊⽣） 「多くの新⼊部員に⼊っていただきました！相談サービスを作ってくださったおかげです。」（先輩）

Slide 63

Slide 63 text

やった事⑤ -⾃⼰振り返り、報告書作成-

Slide 64

Slide 64 text

1⼈でも「ありがとう！」と⾔ってくれる⼈がいてよかった 僕⼈⾝が部活動⼤好き⼈間だったので真剣に相談して部活を決め てくれる⼈がいてよかった これからも⼈の⼒になれるサービス開発をしていきます！ まとめ ⚠荒らしがいろんなところで発⽣するので、戦うのが⼤変だった

Slide 65

Slide 65 text

お疲れ様です！