Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
⾼校の同級⽣250⼈に使われるLINEBot
を開発/運営して⾒えてきたもの
ようかん（@inoue2002）
普通科
Slide 3
Slide 3 text
⾃⼰紹介
Slide 4
Slide 4 text
ようかん（井上陽介）
⾃⼰紹介
• 滋賀の普通科⾼校3年⽣（現在進⾏形）
• 陸上競技部キャプテン（過去形）
• LDGKオンラインハッカソン LINE賞受賞
• レッドハッカソン2020 奨励賞受賞
• 「⾼校⽣主催のIT勉強会」を主催(#⾼校⽣ミーティング)
• 今までに40くらいLINEBotをリリースしてる
• LINEDCによくいる⾼校⽣エンジニア
• ポートフォリオ( youkan.me )
• Twitter（＠inoue2002 ） →
• LINE Green Badge貰った
Slide 5
Slide 5 text
＃LPF_REVUP_O
Slide 6
Slide 6 text
@inoue2002
Slide 7
Slide 7 text
今⽇の発表の要約とまとめ！
• ⾼校三年間開発/運営したサービスの総まとめ発表
• LINEAPIを使った⾼校⽣の事例紹介
• LINEAPIを使った開発の参考になる部分があると嬉しい！
• ⾼校⽣らしく⾃由に喋ります！
REVUP最後の登壇セッションとなります。
みなさんお疲れだと思いますのでぜひリラックスして聞いていただけると嬉しいです
とか⾔いつつもコミュニティカンファレンス！いつもの感じでゆるーくやっていきます！
←この30分僕が喋ること
Slide 8
Slide 8 text
本編スタート▶
Slide 9
Slide 9 text
普通科⾼校⽣の
情報共有にある壁
Slide 10
Slide 10 text
どこでも誰もがやってそうな会話①
Slide 11
Slide 11 text
どこでも誰もがやってそうな会話②
Slide 12
Slide 12 text
僕は思った。これが全校で展開されてるんじゃないか。って。
同じ情報が複数の場所で
やりとりされるんじゃない？
Slide 13
Slide 13 text
それが頻繁に起こっている可能性
⽉ ⽕ ⽔ ⽊ ⾦ ⼟ ⽇
漢字テスト 英単語テスト 課題提出 英⽂法テスト 課題提出 週末課題
⽉曜の漢字テストの範囲教えてー
次のコミ英の提出物なんだっけ
⾦曜⽇の課題の範囲くれー！
Slide 14
Slide 14 text
送る側
負のサイクルの始まり始まり
聞く側
送るのめんどくさい
いつ⾃分が聞く側に
なるかわからないか
ら送るしかない
k
毎回毎回申し訳ない
聞いてからの時差
お互いのモチベが下がっていく可能性もある
Slide 15
Slide 15 text
なんか⼀括で共有できた⽅がよくね？
⼤勢の前で発⾔するのは抵抗が多い⼈も結構いる
グループLINEでいいやん→
そこで..
共有は⼀回だけでいい&みたい時に待ち時間無しで⾒れたらいい感じ✨
Slide 16
Slide 16 text
• ⾼校⽣みんなが導⼊しやすい
• 広めやすい
• 開発/運営しやすい
• ⾼校⽣の普及率ほぼ100パーセントのLINE
• QRコードやトークからアカウントをそのまま共有できる
• LINEBotを使うことでみんなが慣れたチャットUIをベースに開発できる
どこに作ろうか・・・
Slide 17
Slide 17 text
そうして出来上がった
新しい情報共有ツール「ようかんBot」
Slide 18
Slide 18 text
実際に⼆年半同級⽣は使ってくれたの？
３１０
２５１
割と⼝コミが広がってみんな使ってくれるようになった
Slide 19
Slide 19 text
三⽇前に⼤型アップデートを迎えたばかり！
実際にLIVEDEMOしていきましょう！↑
Slide 20
Slide 20 text
DEMO①クラス設定をする
DEMO⾼校
⼀年⼀組で登録する
Slide 21
Slide 21 text
DEMO②画像を共有する（教える側）
Slide 22
Slide 22 text
DEMO②画像を共有する（教える側）
アップロードするLIFFが開く
↓
画像の種類を選択する
↓
画像を選択してアップロードする
Slide 23
Slide 23 text
DEMO②画像を共有する（教える側）（動画が⾒れなかった時⽤）
LIFFが開く 画像の種類を選択 画像を選択する 画像の種類を選択
Slide 24
Slide 24 text
DEMO③画像を確認する（聞く側）
Slide 25
Slide 25 text
DEMO③画像を確認する（聞く側）
共有された画像を⾒るLIFFが開く
↓
知りたい画像を選択
↓
保存ボタンを押してトークに保存
Slide 26
Slide 26 text
DEMO③画像を確認する（聞く側）（動画が⾒れなかった時⽤）
LIFFが開く 画像を保存 トークに残る
Slide 27
Slide 27 text
DEMO④画像を確認する（聞く側）
Slide 28
Slide 28 text
DEMO④画像を確認する（聞く側）
「時間割を確認」を押す
↓
秒で時間割を送ってくれる
Slide 29
Slide 29 text
DEMO④画像を確認する（聞く側）（動画が⾒れなかった時⽤）
ボタンを押す 秒で返してくれる
Slide 30
Slide 30 text
DEMO⑤拡散
Slide 31
Slide 31 text
DEMO⑤拡散
ボタンを押す
↓
QRとかURLとか⾊々送ってくれる
Slide 32
Slide 32 text
DEMO⑤拡散
スクリーンショット
LINEで送信
URLをコピペで共有
Slide 33
Slide 33 text
DEMO⑥お問い合わせ
特にお問い合わせアカウントなど
を設けず、頭に#をつけるだけでお
問い合わせできる
お問い合わせグループにNotifyでお問い合わせがくる
Slide 34
Slide 34 text
DEMO⑥お問い合わせ（まとめ）
Slide 35
Slide 35 text
この⼤型アップデートはほぼ完成形？
• この形になるまでに⼆年かかった
• プログラミング未経験から運営を始めた
• 最初は全て⼿動で更新していた
• なかなか使ってもらえなかった
• 運営コストやみんなに使ってもらうための課題が⼭盛り
どんなふうに進化していったのか振り返っていきます
Slide 36
Slide 36 text
LINE BOOT AWARDS 2018
LINEBotの魅⼒に刺激を受け、なんにもできない状態でLINE＠を触ってみた
Slide 37
Slide 37 text
LINE＠のみで動く第⼀号 ⾃分で準備して、LINEオフィシャルアカウントマネージャーで更新
Slide 38
Slide 38 text
⼀年⽣の間に100⼈を超え、来年もやることにした
⾼校⽣への宣伝は
基本インスタ
友達からの⼝コミ
陸上部→各クラス→いろんなグループに⼝コミで広がる
Slide 39
Slide 39 text
時間を重ねるごとに登録者が増えるが、だんだん限界に近く
• いろんな⼿を使って宣伝
• あだなが「ようかんBot」になったりする
（ほぼ⼿動やし完全Botではなかった
• なかなか200に到達しない
→ユーザーの声を聞いて満⾜度や期待をあげたい
Slide 40
Slide 40 text
初めてユーザーの声に⽿を傾けてみた
Slide 41
Slide 41 text
⾊々課題がわかってきた
Slide 42
Slide 42 text
きっとこれなんだよなぁ（Webhookってなんやねん）
Slide 43
Slide 43 text
とりあえず教えてもらう
• ネットで調べまくった
• ハンズオンに参加した
Slide 44
Slide 44 text
基本知識がついた/LINEBotが作れるようになった
Slide 45
Slide 45 text
記事を⾒ながらコピペで実装（GAS）Google Apps Script
• キーワード応答からリッチメニュー に
• 画像のアップロードをGdriveに
• キーワードの応答はスプレッドシート
→以前より運営もしやすく
→ユーザーも少しは使いやすく
Slide 46
Slide 46 text
ついに本物のBotなった！⾼2夏
• アイコンは同級⽣に書いてもらった
• 登録者が結構増えた
• G driveに権限を与えて運営を増やせる
• 学校の先⽣から連絡を頼まれたり
Slide 47
Slide 47 text
また⾊々問題点が..
GASは応答が若⼲もっさり
Slide 48
Slide 48 text
AWSLambdaを⽤いたサーバレス構成を学習
ぶんせんせい本当にありがとう！！
Slide 49
Slide 49 text
さらにLINEAPIドキュメントが読めるようになった&技術⼒が上がった
• Flexメッセージ
• Quick Reply
• nodeJS
⾊々思い通りにできるようになってきた
できることが増えてUI・UXが爆上がり
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
Lambdaを使うようになってまた⾊々成果が
約⼀週間で900回応答とか
Slide 52
Slide 52 text
コロナ休校のせいで仕事を奪われた
Slide 53
Slide 53 text
泣きそう
Slide 54
Slide 54 text
休校明け、ユーザーは帰ってきたけど、僕が忙しくなり運営が疎かに
Slide 55
Slide 55 text
気がつけばそんな中登壇⼆週間前w
このままじゃ登壇できない
Slide 56
Slide 56 text
アップデート内容を考える
lineBotは設計図を作
ると開発しやすい
Slide 57
Slide 57 text
ということで今週頭に開発、四⽇前リリース、週末登壇が実現しました
Slide 58
Slide 58 text
• みんながアップロードできるから運営コスト０
• LIFFを使い倒してDB５つ、エンドポイント７つ
• 同級⽣だけでなく、他学年、他校までも使えるように
• 今後使ってもらいつつ⾼校⽣の情報共有の壁壊したい
• 三年間の知⾒や経験がとっても活かせたものができた
最終形態のまとめ
Slide 59
Slide 59 text
アーキテクチャ
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
LINEコミュニティとLINEAPIで⼈⽣がたぶん変わった
Slide 65
Slide 65 text
LINEBot開発したことないけどしてみたい⽅！
Slide 66
Slide 66 text
ご質問/感想などをお待ちしています！
slido
＃lpf_revup_o
Slide 67
Slide 67 text
⾼校の同級⽣250⼈に使われるLINEBot
を開発/運営して⾒えてきたもの
ようかん（@inoue2002）
普通科
Slide 68
Slide 68 text
時間があればスライド
Slide 69
Slide 69 text
ようかんBotに遊び機能
Slide 70
Slide 70 text
LINEPAYガチャガチャを
作ってみた話 v2
＠ LIFFアプリ LT祭り 2020/10/20
ようかん(＠inoue2002)
Slide 71
Slide 71 text
みなさん、ガチャガチャを⾃作したくなることありますよね！
Slide 72
Slide 72 text
- 先⽇段ボールでガチャガチャを作った
Slide 73
Slide 73 text
結構いいね付く
決済
Slide 74
Slide 74 text
加川さんの影響を受けました
ちなみに・・・
Slide 75
Slide 75 text
No content
Slide 76
Slide 76 text
Botデザインしてみた⚒
Slide 77
Slide 77 text
試作品 最新版
Slide 78
Slide 78 text
%&.0
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
最新版
デザインはまだですw
Slide 81
Slide 81 text
最新版_裏側
Slide 82
Slide 82 text
LINEPAYAPIを初めて使った
• ドキュメントはわかりやすいが、仕組みがむずかった
• 近頃ソースコードと記事（qiitaかZenn）書くのでお楽しみに
Slide 83
Slide 83 text
ΞʔΩςΫνϟ LINEBot/PayConfirm
デバッグ
Slide 84
Slide 84 text
まとめ
• 時間が空いたらデザインを含めて改造していきたい！
• LIFFをもっと凝っていきたい！
• LINEAPIをもっとマスターしたい！
Slide 85
Slide 85 text
LINEPAYガチャガチャを
作ってみた話 v2
＠ LIFFアプリ LT祭り 2020/10/20
ようかん(＠inoue2002)