Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
@inoue2002
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
/ / 🎉 # 2
Slide 5
Slide 5 text
About Me ( ) - B1 - 2020 - LINE API Expert JAWSDAYS2021 Civictech Challenge Cup U-22 2021 Code for japan SGG - - (1.5km 10km) LINEAPI @inoue2002
Slide 6
Slide 6 text
Activities • • Web • LINE • / • / @inoue2002
Slide 7
Slide 7 text
/ / 🎉 # 2
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
• • • • • •
Slide 11
Slide 11 text
• • • • • • • etc..
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
SGGとは • 73 • 2 • Slack 3.2 • • • Flutter • LINEAPI • • • • • • CTF • •
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
生息地
Slide 19
Slide 19 text
• ScrapBox • • • GitHub • • Twitter • • • Youtube • • • Discord • • Qiita org • 主な活動場所
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
※個人の感想 小学生 中学生 高校生 大学生 大人 イ ベ ン ト で 見 か け る 頻 度 中高生あんまりいないよね問題 IoT/VR/RPA/LINE 各種界隈.. 小学生プログ ラミング教室
Slide 23
Slide 23 text
※個人の感想 中高生の参加率をあげたい!! 小学生 中学生 高校生 大学生 大人 なんとかして中高生を盛り上げたい イ ベ ン ト で 見 か け る 頻 度
Slide 24
Slide 24 text
「小学生向け」のプログラミング教室 「エンジニア向け」の勉強会… 「高校生向け」の？？ 中高生が集まるイベントがないからじゃね？ なぜ中高生の参加が少ないの？
Slide 25
Slide 25 text
じゃあ作ればいいやん!!
Slide 26
Slide 26 text
数少ない 中高生が集まって情報共有することで 知識が増える・開発の相談可・モチベーション向上 ＋ ⼤⼈も巻き込んでいろいろ刺激をもらえたい!! ＋ ⼤⼈の⽅にも楽しんでもらいたい!!
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
反響
Slide 29
Slide 29 text
SNS ＠sggorg
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
チームとしての活動
Slide 33
Slide 33 text
SGGでさまざまな知見をお互い得ることができる • / • • • • w • • •
Slide 34
Slide 34 text
https://sugokunatitai.dev
Slide 35
Slide 35 text
＃すごくなりたいがくせいぐるーぷ
Slide 36
Slide 36 text
@sggorg
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
@inoue2002 [LINEAPI]どれぐらい開発しているかというと サービス/ツールetc.. 50+
Slide 39
Slide 39 text
@inoue2002 https://www.civichat.jp/
Slide 40
Slide 40 text
https://the-scratch.jp/ @inoue2002
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
https://shiga-lg.jp/showcase/result @inoue2002
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
@inoue2002 生徒会の子にも協力してもらい モザイクアートに挑戦する
Slide 45
Slide 45 text
@inoue2002 学校にも協力してもらい 校⻑先⽣の許可をもらいにいく 情報科の先⽣を仲間にする 学年団の先⽣と職員会議 学校の公式企画として開始
Slide 46
Slide 46 text
@inoue2002 投票は「Bot追加して画像をとにかく投げるだけ」
Slide 47
Slide 47 text
@inoue2002 学校の公式文章配布とともに募集開始 4日で目標の倍の数集まった
Slide 48
Slide 48 text
@inoue2002 上映会
Slide 49
Slide 49 text
@inoue2002 上映会
Slide 50
Slide 50 text
@inoue2002 上映会
Slide 51
Slide 51 text
@inoue2002 上映会
Slide 52
Slide 52 text
@inoue2002 上映会
Slide 53
Slide 53 text
@inoue2002 上映会
Slide 54
Slide 54 text
@inoue2002 ポストカードも作ってみた
Slide 55
Slide 55 text
@inoue2002
Slide 56
Slide 56 text
@inoue2002
Slide 57
Slide 57 text
@inoue2002 技術構成 学校管理のサーバー 実はコード⾃体は2⾏
Slide 58
Slide 58 text
@inoue2002 みんなからものすごく褒めてもらえた🎉
Slide 59
Slide 59 text
@inoue2002 学校のHPで紹介された🙌(してもらった?)
Slide 60
Slide 60 text
• • • • 話 • •
Slide 61
Slide 61 text
普通科高校生の 情報共有にある壁
Slide 62
Slide 62 text
どこでも誰もがやってそうな会話①
Slide 63
Slide 63 text
どこでも誰もがやってそうな会話②
Slide 64
Slide 64 text
僕は思った。これが全校で展開されてるんじゃないか。って。 同じ情報が複数の場所で やりとりされるんじゃない？
Slide 65
Slide 65 text
それが頻繁に起こっている可能性 ⽉ ⽕ ⽔ ⽊ ⾦ ⼟ ⽇ 漢字テスト 英単語テスト 課題提出 英⽂法テスト 課題提出 週末課題 ⽉曜の漢字テストの範囲教えてー 次のコミ英の提出物なんだっけ ⾦曜⽇の課題の範囲くれー！
Slide 66
Slide 66 text
送る側 負のサイクルの始まり始まり 聞く側 送るのめんどくさい いつ⾃分が聞く側に なるかわからないか ら送るしかない k 毎回毎回申し訳ない 聞いてからの時差 お互いのモチベが下がっていく可能性もある
Slide 67
Slide 67 text
なんか⼀括で共有できた⽅がよくね？ ⼤勢の前で発⾔するのは抵抗が多い⼈も結構いる グループLINEでいいやん→ そこで.. 共有は⼀回だけでいい&みたい時に待ち時間無しで⾒れたらいい感じ✨
Slide 68
Slide 68 text
• ⾼校⽣みんなが導⼊しやすい • 広めやすい • 開発/運営しやすい • ⾼校⽣の普及率ほぼ100パーセントのLINE • QRコードやトークからアカウントをそのまま共有できる • LINEBotを使うことでみんなが慣れたチャットUIをベースに開発できる どこに作ろうか・・・
Slide 69
Slide 69 text
そうして出来上がった 新しい情報共有ツール「ようかんBot」
Slide 70
Slide 70 text
実際に⼆年半同級⽣は使ってくれたの？ ３１０ ２５１ 割と⼝コミが広がってみんな使ってくれるようになった
Slide 71
Slide 71 text
三⽇前に⼤型アップデートを迎えたばかり！ 実際にLIVEDEMOしていきましょう！↑
Slide 72
Slide 72 text
DEMO①クラス設定をする DEMO⾼校 ⼀年⼀組で登録する
Slide 73
Slide 73 text
DEMO②画像を共有する（教える側）
Slide 74
Slide 74 text
DEMO②画像を共有する（教える側） アップロードするLIFFが開く ↓ 画像の種類を選択する ↓ 画像を選択してアップロードする
Slide 75
Slide 75 text
DEMO②画像を共有する（教える側）（動画が⾒れなかった時⽤） LIFFが開く 画像の種類を選択 画像を選択する 画像の種類を選択
Slide 76
Slide 76 text
DEMO③画像を確認する（聞く側）
Slide 77
Slide 77 text
DEMO③画像を確認する（聞く側） 共有された画像を⾒るLIFFが開く ↓ 知りたい画像を選択 ↓ 保存ボタンを押してトークに保存
Slide 78
Slide 78 text
DEMO③画像を確認する（聞く側）（動画が⾒れなかった時⽤） LIFFが開く 画像を保存 トークに残る
Slide 79
Slide 79 text
DEMO④画像を確認する（聞く側）
Slide 80
Slide 80 text
DEMO④画像を確認する（聞く側） 「時間割を確認」を押す ↓ 秒で時間割を送ってくれる
Slide 81
Slide 81 text
DEMO④画像を確認する（聞く側）（動画が⾒れなかった時⽤） ボタンを押す 秒で返してくれる
Slide 82
Slide 82 text
DEMO⑤拡散
Slide 83
Slide 83 text
DEMO⑤拡散 ボタンを押す ↓ QRとかURLとか⾊々送ってくれる
Slide 84
Slide 84 text
DEMO⑤拡散 スクリーンショット LINEで送信 URLをコピペで共有
Slide 85
Slide 85 text
DEMO⑥お問い合わせ 特にお問い合わせアカウントなど を設けず、頭に#をつけるだけでお 問い合わせできる お問い合わせグループにNotifyでお問い合わせがくる
Slide 86
Slide 86 text
DEMO⑥お問い合わせ（まとめ）
Slide 87
Slide 87 text
この⼤型アップデートはほぼ完成形？ • この形になるまでに⼆年かかった • プログラミング未経験から運営を始めた • 最初は全て⼿動で更新していた • なかなか使ってもらえなかった • 運営コストやみんなに使ってもらうための課題が⼭盛り どんなふうに進化していったのか振り返っていきます
Slide 88
Slide 88 text
LINE BOOT AWARDS 2018 LINEBotの魅⼒に刺激を受け、なんにもできない状態でLINE＠を触ってみた
Slide 89
Slide 89 text
LINE＠のみで動く第⼀号 ⾃分で準備して、LINEオフィシャルアカウントマネージャーで更新
Slide 90
Slide 90 text
⼀年⽣の間に100⼈を超え、来年もやることにした ⾼校⽣への宣伝は 基本インスタ 友達からの⼝コミ 陸上部→各クラス→いろんなグループに⼝コミで広がる
Slide 91
Slide 91 text
時間を重ねるごとに登録者が増えるが、だんだん限界に近く • いろんな⼿を使って宣伝 • あだなが「ようかんBot」になったりする （ほぼ⼿動やし完全Botではなかった • なかなか200に到達しない →ユーザーの声を聞いて満⾜度や期待をあげたい
Slide 92
Slide 92 text
初めてユーザーの声に⽿を傾けてみた
Slide 93
Slide 93 text
⾊々課題がわかってきた
Slide 94
Slide 94 text
きっとこれなんだよなぁ（Webhookってなんやねん）
Slide 95
Slide 95 text
とりあえず教えてもらう • ネットで調べまくった • ハンズオンに参加した
Slide 96
Slide 96 text
基本知識がついた/LINEBotが作れるようになった🎉
Slide 97
Slide 97 text
記事を⾒ながらコピペで実装（GAS）Google Apps Script • キーワード応答からリッチメニュー に • 画像のアップロードをGdriveに • キーワードの応答はスプレッドシート →以前より運営もしやすく →ユーザーも少しは使いやすく
Slide 98
Slide 98 text
ついに本物のBotなった！⾼2夏 • アイコンは同級⽣に書いてもらった • 登録者が結構増えた • G driveに権限を与えて運営を増やせる • 学校の先⽣から連絡を頼まれたり
Slide 99
Slide 99 text
また⾊々問題点が.. GASは応答が若⼲もっさり
Slide 100
Slide 100 text
AWSLambdaを⽤いたサーバレス構成を学習 ぶんせんせい本当にありがとう！！
Slide 101
Slide 101 text
さらにLINEAPIドキュメントが読めるようになった&技術⼒が上がった • Flexメッセージ • Quick Reply • nodeJS ⾊々思い通りにできるようになってきた できることが増えてUI・UXが爆上がり
Slide 102
Slide 102 text
No content
Slide 103
Slide 103 text
Lambdaを使うようになってまた⾊々成果が 約⼀週間で900回応答とか
Slide 104
Slide 104 text
コロナ休校のせいで仕事を奪われた
Slide 105
Slide 105 text
泣きそう
Slide 106
Slide 106 text
休校明け、ユーザーは帰ってきたけど、僕が忙しくなり運営が疎かに
Slide 107
Slide 107 text
気がつけばそんな中登壇⼆週間前w このままじゃ登壇できない
Slide 108
Slide 108 text
アップデート内容を考える lineBotは設計図を作 ると開発しやすい🔥
Slide 109
Slide 109 text
ということで今週頭に開発、四⽇前リリース、週末登壇が実現しました🎉
Slide 110
Slide 110 text
• みんながアップロードできるから運営コスト０ • LIFFを使い倒してDB５つ、エンドポイント７つ • 同級⽣だけでなく、他学年、他校までも使えるように • 今後使ってもらいつつ⾼校⽣の情報共有の壁壊したい • 三年間の知⾒や経験がとっても活かせたものができた 最終形態のまとめ
Slide 111
Slide 111 text
アーキテクチャ
Slide 112
Slide 112 text
同時並⾏で⽣まれた副産物
Slide 113
Slide 113 text
同時並⾏で⽣まれた仕事 学校内で技術を認めてもらえて、本当にありがたい
Slide 114
Slide 114 text
未踏ジュニア https://jr.mitou.org/ © 未踏社団 未踏ジュニア実行委員会
Slide 115
Slide 115 text
未踏ジュニア • CPUを自作してコンピュータが 魔法でないことを証明したい! • 全く新しいエアガンを開発したい! • 勉強のモチベーションを維持する タスク管理アプリを作りたい! • VRで体を鍛えるゲームを作りたい! • Webアクセシビリティの問題を 指摘する仕組みを作りたい! ほかにも色々!! https://jr.mitou.org/ © 未踏社団 未踏ジュニア実行委員会
Slide 116
Slide 116 text
未踏ジュニア 「未踏エコシステム」 「未踏」 未踏IT人材発掘育成 「未踏Advanced」 未踏的IT企業家・事業家育成 「未踏Target」 次世代先端IT技術者育成 「未踏ジュニア」 U17未踏IT人材育成
Slide 117
Slide 117 text
• • • • • etc
Slide 118
Slide 118 text
• • • • • •
Slide 119
Slide 119 text
@inoue2002