Tweet
Tweet

Slide 1

Slide 1 text

どっぷりLINEAPIに使った2020 ようかん（@inoue2002） ようかん ＠SGG忘年会2020 LT スライド108枚あります スライド後で共有します

Slide 2

Slide 2 text

⾼校にもたらしたLINEAPIの可能性 ようかん（@inoue2002） 普通科 ＠LINEDC忘年会2020 LT スライドは23枚あります おそらく早⼝になります スライド後で共有します

Slide 3

Slide 3 text

＃LINEDC

Slide 4

Slide 4 text

⾃⼰紹介 ようかん（井上陽介） - ⾼校⽣エンジニア LDGKオンラインハッカソンLINE賞受賞 オンラインレッドハッカソン2020奨励賞受賞 未踏ジュニア2020修了 LPF REV UP2020 登壇 ⼤学を決めた ヒーローズリーグLINE賞受賞 - 今年やったこと - 得意なこと ⻑距離を⾛ること(1.5km ‒ 10km) LINEAPIをいじること イベントを主催したり登壇したりすること 学校の同級⽣や後輩を巻き込んでいろいろやる 絵:同級⽣の⽥中君作

Slide 5

Slide 5 text

2020年を少し振り返り… ハンズオン講師 1回(LINEBot) イベント参加 62回 イベント登壇 26回(LINEAPI関連24回) ▼ 開発に参加したサービス

Slide 6

Slide 6 text

LINE BOOT AWARDS 2018 ▷ LINEAPIに出会う ▷ プログラミングを始める

Slide 7

Slide 7 text

▷ ⾼校の同級⽣や後輩にLINEAPIを使ったツールを作ってみた

Slide 8

Slide 8 text

▷ 1つめ

Slide 9

Slide 9 text

LINEで部活動相談サービス(2020/4) 背景 思ったこと LINEAPIを活⽤して、なんとか解決できないかと考えた。リリースまでに与えられた期間はわずか2⽇ ⾃分も部活選び悩んだので、新⼊⽣にもじっくり選択して欲しい。

Slide 10

Slide 10 text

▷ モック&チラシ

Slide 11

Slide 11 text

新⼊⽣ LINEBot オープンチャット キャプテン・部員 ▷ 全24部活中21部活が参加 / 最終190名が利⽤してくれた キャプテン・部員 キャプテン・部員

Slide 12

Slide 12 text

▷ 利⽤中の様⼦

Slide 13

Slide 13 text

利⽤者アンケート 1⼈でもありがとう！って⾔ってくれる⼈がいてくれたならやって良かったと思えた 「沢⼭部員が⼊ってきてくれた！」「無事部活動決めることができました！」 ▷ サービスを終えて ▼活動報告書

Slide 14

Slide 14 text

▷ 2つめ

Slide 15

Slide 15 text

LINEで同級⽣と情報共有ツール 背景 思ったこと 毎回毎回聞いたり送ったりするのめんどくさいし、⼀括でできるツールがあればいいなと。 同じようなやりとりが全校で⾏われているんじゃないか。 セッションアーカイブ ▶

Slide 16

Slide 16 text

教える⼈ LINEBot ▷ 同級⽣の80%以上が利⽤してくれている・最近は他学年＋他校まで展開 画像をupload user user user 画像を⾒る/保存

Slide 17

Slide 17 text

▷ 画像を共有する（教える側） LIFFが開く 画像の種類を選択 画像を選択する 画像の種類を選択

Slide 18

Slide 18 text

▷ 画像を確認する（聞く側） LIFFが開く 画像を保存 トークに残る

Slide 19

Slide 19 text

▷ 時間割を確認する（聞く側） ボタンを押す 秒で返してくれる

Slide 20

Slide 20 text

⾃分の⾼校に向けてサービスを2つ展開 → ⾼校⽣ × LINEAPI の可能性を感じた ⾊んな意味で

Slide 21

Slide 21 text

▷ ⾼校⽣にLINEAPIを展開して ・たくさんの感謝(機会)(反響)を得た ・⾊んな学びを得た ・⾼校⽣の⽣活にはまだまだLINEAPIで変えられる部分があるということ 便利になった / 助かった > 利⽤者の声 滋賀県で再⽣回数Topに!! ▶ 学校からオーキャン動画の制作依頼 コミュニティに出会った プロジェクトを進める過程 / お仕事 etc.. 部活動の県⼤会をYoutubeLive

Slide 22

Slide 22 text

▷ ⾼校⽣にLINEAPIをアプローチする⼈を増やしたい ⾼校⽣にツールを展開するときに考えること（個⼈の感想） ・⼤⼈と学⽣との間にギャップがある ex ) ⾼校⽣は割とアプリケーションのインストール嫌がらない メインで使うSNSはInstagram 少し前に書いたnote ▷ ・⼝コミで⼀気に広がる ex ) インスタのストーリーの影響⼒とかめっちゃすごい ⾼校⽣の⼼を動かすのは結構難しい！ 学⽣の気持ちは学⽣にしかわからない！ のかもしれない..

Slide 23

Slide 23 text

まとめ!! 1⼈の普通科⾼校⽣がLINEAPIに出会っただけなのにこれだけいろいろなことができたのは 『⾃分にしかできないことにこだわってきた』から。 来年になっても、⼤学⽣になってもこのキーワードを⼤事にしていこうと思います。 LINEAPI神!!!

Slide 24

Slide 24 text

⾼校にもたらしたLINEAPIの可能性 普通科 ＠LINEDC忘年会2020 LT ようかん（@inoue2002）

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

⾼校の同級⽣250⼈に使われるLINEBot を開発/運営して⾒えてきたもの ようかん（@inoue2002） 普通科

Slide 28

Slide 28 text

⾃⼰紹介

Slide 29

Slide 29 text

ようかん（井上陽介） ⾃⼰紹介 • 滋賀の普通科⾼校3年⽣（現在進⾏形） • 陸上競技部キャプテン（過去形） • LDGKオンラインハッカソン LINE賞受賞 • レッドハッカソン2020 奨励賞受賞 • 「⾼校⽣主催のIT勉強会」を主催(#⾼校⽣ミーティング) • 今までに40くらいLINEBotをリリースしてる • LINEDCによくいる⾼校⽣エンジニア • ポートフォリオ( youkan.me ) • Twitter（＠inoue2002 ） → • LINE Green Badge貰った

Slide 30

Slide 30 text

＃LPF_REVUP_O

Slide 31

Slide 31 text

@inoue2002

Slide 32

Slide 32 text

今⽇の発表の要約とまとめ！ • ⾼校三年間開発/運営したサービスの総まとめ発表 • LINEAPIを使った⾼校⽣の事例紹介 • LINEAPIを使った開発の参考になる部分があると嬉しい！ • ⾼校⽣らしく⾃由に喋ります！ REVUP最後の登壇セッションとなります。 みなさんお疲れだと思いますのでぜひリラックスして聞いていただけると嬉しいです とか⾔いつつもコミュニティカンファレンス！いつもの感じでゆるーくやっていきます！ ←この30分僕が喋ること

Slide 33

Slide 33 text

本編スタート▶

Slide 34

Slide 34 text

普通科⾼校⽣の 情報共有にある壁

Slide 35

Slide 35 text

どこでも誰もがやってそうな会話①

Slide 36

Slide 36 text

どこでも誰もがやってそうな会話②

Slide 37

Slide 37 text

僕は思った。これが全校で展開されてるんじゃないか。って。 同じ情報が複数の場所で やりとりされるんじゃない？

Slide 38

Slide 38 text

それが頻繁に起こっている可能性 ⽉ ⽕ ⽔ ⽊ ⾦ ⼟ ⽇ 漢字テスト 英単語テスト 課題提出 英⽂法テスト 課題提出 週末課題 ⽉曜の漢字テストの範囲教えてー 次のコミ英の提出物なんだっけ ⾦曜⽇の課題の範囲くれー！

Slide 39

Slide 39 text

送る側 負のサイクルの始まり始まり 聞く側 送るのめんどくさい いつ⾃分が聞く側に なるかわからないか ら送るしかない k 毎回毎回申し訳ない 聞いてからの時差 お互いのモチベが下がっていく可能性もある

Slide 40

Slide 40 text

なんか⼀括で共有できた⽅がよくね？ ⼤勢の前で発⾔するのは抵抗が多い⼈も結構いる グループLINEでいいやん→ そこで.. 共有は⼀回だけでいい&みたい時に待ち時間無しで⾒れたらいい感じ✨

Slide 41

Slide 41 text

• ⾼校⽣みんなが導⼊しやすい • 広めやすい • 開発/運営しやすい • ⾼校⽣の普及率ほぼ100パーセントのLINE • QRコードやトークからアカウントをそのまま共有できる • LINEBotを使うことでみんなが慣れたチャットUIをベースに開発できる どこに作ろうか・・・

Slide 42

Slide 42 text

そうして出来上がった 新しい情報共有ツール「ようかんBot」

Slide 43

Slide 43 text

実際に⼆年半同級⽣は使ってくれたの？ ３１０ ２５１ 割と⼝コミが広がってみんな使ってくれるようになった

Slide 44

Slide 44 text

三⽇前に⼤型アップデートを迎えたばかり！ 実際にLIVEDEMOしていきましょう！↑

Slide 45

Slide 45 text

DEMO①クラス設定をする DEMO⾼校 ⼀年⼀組で登録する

Slide 46

Slide 46 text

DEMO②画像を共有する（教える側）

Slide 47

Slide 47 text

DEMO②画像を共有する（教える側） アップロードするLIFFが開く ↓ 画像の種類を選択する ↓ 画像を選択してアップロードする

Slide 48

Slide 48 text

DEMO②画像を共有する（教える側）（動画が⾒れなかった時⽤） LIFFが開く 画像の種類を選択 画像を選択する 画像の種類を選択

Slide 49

Slide 49 text

DEMO③画像を確認する（聞く側）

Slide 50

Slide 50 text

DEMO③画像を確認する（聞く側） 共有された画像を⾒るLIFFが開く ↓ 知りたい画像を選択 ↓ 保存ボタンを押してトークに保存

Slide 51

Slide 51 text

DEMO③画像を確認する（聞く側）（動画が⾒れなかった時⽤） LIFFが開く 画像を保存 トークに残る

Slide 52

Slide 52 text

DEMO④画像を確認する（聞く側）

Slide 53

Slide 53 text

DEMO④画像を確認する（聞く側） 「時間割を確認」を押す ↓ 秒で時間割を送ってくれる

Slide 54

Slide 54 text

DEMO④画像を確認する（聞く側）（動画が⾒れなかった時⽤） ボタンを押す 秒で返してくれる

Slide 55

Slide 55 text

DEMO⑤拡散

Slide 56

Slide 56 text

DEMO⑤拡散 ボタンを押す ↓ QRとかURLとか⾊々送ってくれる

Slide 57

Slide 57 text

DEMO⑤拡散 スクリーンショット LINEで送信 URLをコピペで共有

Slide 58

Slide 58 text

DEMO⑥お問い合わせ 特にお問い合わせアカウントなど を設けず、頭に#をつけるだけでお 問い合わせできる お問い合わせグループにNotifyでお問い合わせがくる

Slide 59

Slide 59 text

DEMO⑥お問い合わせ（まとめ）

Slide 60

Slide 60 text

この⼤型アップデートはほぼ完成形？ • この形になるまでに⼆年かかった • プログラミング未経験から運営を始めた • 最初は全て⼿動で更新していた • なかなか使ってもらえなかった • 運営コストやみんなに使ってもらうための課題が⼭盛り どんなふうに進化していったのか振り返っていきます

Slide 61

Slide 61 text

LINE BOOT AWARDS 2018 LINEBotの魅⼒に刺激を受け、なんにもできない状態でLINE＠を触ってみた

Slide 62

Slide 62 text

LINE＠のみで動く第⼀号 ⾃分で準備して、LINEオフィシャルアカウントマネージャーで更新

Slide 63

Slide 63 text

⼀年⽣の間に100⼈を超え、来年もやることにした ⾼校⽣への宣伝は 基本インスタ 友達からの⼝コミ 陸上部→各クラス→いろんなグループに⼝コミで広がる

Slide 64

Slide 64 text

時間を重ねるごとに登録者が増えるが、だんだん限界に近く • いろんな⼿を使って宣伝 • あだなが「ようかんBot」になったりする （ほぼ⼿動やし完全Botではなかった • なかなか200に到達しない →ユーザーの声を聞いて満⾜度や期待をあげたい

Slide 65

Slide 65 text

初めてユーザーの声に⽿を傾けてみた

Slide 66

Slide 66 text

⾊々課題がわかってきた

Slide 67

Slide 67 text

きっとこれなんだよなぁ（Webhookってなんやねん）

Slide 68

Slide 68 text

とりあえず教えてもらう • ネットで調べまくった • ハンズオンに参加した

Slide 69

Slide 69 text

基本知識がついた/LINEBotが作れるようになった

Slide 70

Slide 70 text

記事を⾒ながらコピペで実装（GAS）Google Apps Script • キーワード応答からリッチメニュー に • 画像のアップロードをGdriveに • キーワードの応答はスプレッドシート →以前より運営もしやすく →ユーザーも少しは使いやすく

Slide 71

Slide 71 text

ついに本物のBotなった！⾼2夏 • アイコンは同級⽣に書いてもらった • 登録者が結構増えた • G driveに権限を与えて運営を増やせる • 学校の先⽣から連絡を頼まれたり

Slide 72

Slide 72 text

また⾊々問題点が.. GASは応答が若⼲もっさり

Slide 73

Slide 73 text

AWSLambdaを⽤いたサーバレス構成を学習 ぶんせんせい本当にありがとう！！

Slide 74

Slide 74 text

さらにLINEAPIドキュメントが読めるようになった&技術⼒が上がった • Flexメッセージ • Quick Reply • nodeJS ⾊々思い通りにできるようになってきた できることが増えてUI・UXが爆上がり

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

Lambdaを使うようになってまた⾊々成果が 約⼀週間で900回応答とか

Slide 77

Slide 77 text

コロナ休校のせいで仕事を奪われた

Slide 78

Slide 78 text

泣きそう

Slide 79

Slide 79 text

休校明け、ユーザーは帰ってきたけど、僕が忙しくなり運営が疎かに

Slide 80

Slide 80 text

気がつけばそんな中登壇⼆週間前w このままじゃ登壇できない

Slide 81

Slide 81 text

ということで今週頭に開発、四⽇前リリース、週末登壇が実現しました

Slide 82

Slide 82 text

• みんながアップロードできるから運営コスト０ • LIFFを使い倒してDB５つ、エンドポイント７つ • 同級⽣だけでなく、他学年、他校までも使えるように • 今後使ってもらいつつ⾼校⽣の情報共有の壁壊したい • 三年間の知⾒や経験がとっても活かせたものができた 最終形態のまとめ

Slide 83

Slide 83 text

同時並⾏で⽣まれた副産物

Slide 84

Slide 84 text

同時並⾏で⽣まれた仕事 学校内で技術を認めてもらえて、本当にありがたい

Slide 85

Slide 85 text

同時並⾏で⽣まれた仕事

Slide 86

Slide 86 text

同時並⾏で⽣まれた経験

Slide 87

Slide 87 text

ご質問/感想などをお待ちしています！ slido ＃lpf_revup_o

Slide 88

Slide 88 text

⾼校の同級⽣250⼈に使われるLINEBot を開発/運営して⾒えてきたもの ようかん（@inoue2002） 普通科

Slide 89

Slide 89 text

時間があればスライド

Slide 90

Slide 90 text

LINEPAYガチャガチャを 作ってみた話 v2 ＠ LIFFアプリ LT祭り 2020/10/20 ようかん(＠inoue2002)

Slide 91

Slide 91 text

みなさん、ガチャガチャを⾃作したくなることありますよね！

Slide 92

Slide 92 text

- 先⽇段ボールでガチャガチャを作った

Slide 93

Slide 93 text

結構いいね付く 決済

Slide 94

Slide 94 text

加川さんの影響を受けました ちなみに・・・

Slide 95

Slide 95 text

No content

Slide 96

Slide 96 text

Botデザインしてみた⚒

Slide 97

Slide 97 text

試作品 最新版

Slide 98

Slide 98 text

%&.0

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

最新版 デザインはまだですw

Slide 101

Slide 101 text

最新版_裏側

Slide 102

Slide 102 text

LINEPAYAPIを初めて使った • ドキュメントはわかりやすいが、仕組みがむずかった • 近頃ソースコードと記事（qiitaかZenn）書くのでお楽しみに https://qiita.com/inoue2002 /items/49a2e36c6f3008737b ab

Slide 103

Slide 103 text

ΞʔΩςΫνϟ LINEBot/PayConfirm デバッグ

Slide 104

Slide 104 text

まとめ • 時間が空いたらデザインを含めて改造していきたい！ • LIFFをもっと凝っていきたい！ • LINEAPIをもっとマスターしたい！

Slide 105

Slide 105 text

LINEPAYガチャガチャを 作ってみた話 v2 ＠ LIFFアプリ LT祭り 2020/10/20 ようかん(＠inoue2002)