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
@inoue2002 #linedc
Slide 3
Slide 3 text
@inoue2002 LINE Developers Community(LINEDC)とは ・LINE Platformを使うエンジニア・クリエータによる有志のコミュニティ ・Connpass登録メンバー3000⼈超え ・さくっとLINEで何か試したい⼈からガチガチにシステムを作る⼈まで幅広い! ・毎週のようにイベントをやっている。ハンズオンやLTが多い ・#linedc で検索するといろいろ出てくる
Slide 4
Slide 4 text
@inoue2002 LINE Developers Community(LINEDC)とは
Slide 5
Slide 5 text
@inoue2002 LINE Developers Community(LINEDC)とは
Slide 6
Slide 6 text
@inoue2002 LINE API Use Case
Slide 7
Slide 7 text
@inoue2002
Slide 8
Slide 8 text
@inoue2002 ようかん ⾼校⽣とLINEAPI
Slide 9
Slide 9 text
@inoue2002 ⾃⼰紹介 ようかん(井上陽介) - ⾼校⽣エンジニア - 未踏ジュニア2020スーパークリエータ - LINE API Expert ⾼校⽣とLINEAPIを組み合わせる - 最近の活動 - 得意なこと ⻑距離を⾛ること(1.5km ‒ 10km) LINEAPIをいじること イベントを主催したり登壇したりすること 学校の同級⽣や後輩を巻き込んでいろいろやること @inoue2002
Slide 10
Slide 10 text
@inoue2002 [LINEAPI]どれぐらい開発しているかというと サービス/ツールetc.. 50+
Slide 11
Slide 11 text
@inoue2002 [LINEAPI]どれぐらい開発しているかというと サービス/ツールetc.. 50+
Slide 12
Slide 12 text
@inoue2002 ようかんはLINEDCで何をしている⼈なの? ① イベント参加/登壇/主催 ② LINE APIを使ったアウトプット ③ 最年少LAEとして、僕ならではのLINEAPI事例発掘&共有
Slide 13
Slide 13 text
@inoue2002 アイスブレイク ⾼校⽣名乗るのも後数⽇か。。。 今⽇は⾼校⽣最後の登壇だ! まとめ発表しようか。。。
Slide 14
Slide 14 text
@inoue2002 このセッションでは何が聞けるの? ①LINEコミュニティに出会った⾼校⽣の2年間がわかる ②中⾼⽣向けに開発したLINEAPIプロダクトが知れる ③ LINEAPI開発の知⾒が知れる(LINE Notify)
Slide 15
Slide 15 text
@inoue2002
Slide 16
Slide 16 text
@inoue2002 ⾼校の同級⽣250⼈に使われるLINEBot を開発/運営して⾒えてきたもの ようかん(@inoue2002) 普通科
Slide 17
Slide 17 text
@inoue2002 普通科⾼校⽣の 情報共有にある壁
Slide 18
Slide 18 text
@inoue2002 どこでも誰もがやってそうな会話①
Slide 19
Slide 19 text
@inoue2002 どこでも誰もがやってそうな会話②
Slide 20
Slide 20 text
@inoue2002 僕は思った。これが全校で展開されてるんじゃないか。って。 同じ情報が複数の場所で やりとりされるんじゃない?
Slide 21
Slide 21 text
@inoue2002 それが頻繁に起こっている可能性 ⽉ ⽕ ⽔ ⽊ ⾦ ⼟ ⽇ 漢字テスト 英単語テスト 課題提出 英⽂法テスト 課題提出 週末課題 ⽉曜の漢字テストの範囲教えてー 次のコミ英の提出物なんだっけ ⾦曜⽇の課題の範囲くれー!
Slide 22
Slide 22 text
@inoue2002 送る側 負のサイクルの始まり始まり 聞く側 送るのめんどくさい いつ⾃分が聞く側に なるかわからないか ら送るしかない k 毎回毎回申し訳ない 聞いてからの時差 お互いのモチベが下がっていく可能性もある
Slide 23
Slide 23 text
@inoue2002 なんか⼀括で共有できた⽅がよくね? ⼤勢の前で発⾔するのは抵抗が多い⼈も結構いる グループLINEでいいやん→ そこで.. 共有は⼀回だけでいい&みたい時に待ち時間無しで⾒れたらいい感じ✨
Slide 24
Slide 24 text
@inoue2002 • ⾼校⽣みんなが導⼊しやすい • 広めやすい • 開発/運営しやすい • ⾼校⽣の普及率ほぼ100パーセントのLINE • QRコードやトークからアカウントをそのまま共有できる • LINEBotを使うことでみんなが慣れたチャットUIをベースに開発できる どこに作ろうか・・・
Slide 25
Slide 25 text
@inoue2002 そうして出来上がった 新しい情報共有ツール「ようかんBot」
Slide 26
Slide 26 text
@inoue2002 実際に⼆年半同級⽣は使ってくれたの? 310 251 割と⼝コミが広がってみんな使ってくれるようになった
Slide 27
Slide 27 text
@inoue2002 三⽇前に⼤型アップデートを迎えたばかり! 実際にLIVEDEMOしていきましょう!↑
Slide 28
Slide 28 text
@inoue2002 DEMO①クラス設定をする DEMO⾼校 ⼀年⼀組で登録する
Slide 29
Slide 29 text
@inoue2002 DEMO②画像を共有する(教える側)
Slide 30
Slide 30 text
@inoue2002 DEMO②画像を共有する(教える側) アップロードするLIFFが開く ↓ 画像の種類を選択する ↓ 画像を選択してアップロードする
Slide 31
Slide 31 text
@inoue2002 DEMO②画像を共有する(教える側)(動画が⾒れなかった時⽤) LIFFが開く 画像の種類を選択 画像を選択する 画像の種類を選択
Slide 32
Slide 32 text
@inoue2002 DEMO③画像を確認する(聞く側)
Slide 33
Slide 33 text
@inoue2002 DEMO③画像を確認する(聞く側) 共有された画像を⾒るLIFFが開く ↓ 知りたい画像を選択 ↓ 保存ボタンを押してトークに保存
Slide 34
Slide 34 text
@inoue2002 DEMO③画像を確認する(聞く側)(動画が⾒れなかった時⽤) LIFFが開く 画像を保存 トークに残る
Slide 35
Slide 35 text
@inoue2002 DEMO④画像を確認する(聞く側)
Slide 36
Slide 36 text
@inoue2002 DEMO④画像を確認する(聞く側) 「時間割を確認」を押す ↓ 秒で時間割を送ってくれる
Slide 37
Slide 37 text
@inoue2002 DEMO④画像を確認する(聞く側)(動画が⾒れなかった時⽤) ボタンを押す 秒で返してくれる
Slide 38
Slide 38 text
@inoue2002 DEMO⑤拡散
Slide 39
Slide 39 text
@inoue2002 DEMO⑤拡散 ボタンを押す ↓ QRとかURLとか⾊々送ってくれる
Slide 40
Slide 40 text
@inoue2002 DEMO⑤拡散 スクリーンショット LINEで送信 URLをコピペで共有
Slide 41
Slide 41 text
@inoue2002 DEMO⑥お問い合わせ 特にお問い合わせアカウントなど を設けず、頭に#をつけるだけでお 問い合わせできる お問い合わせグループにNotifyでお問い合わせがくる
Slide 42
Slide 42 text
@inoue2002 DEMO⑥お問い合わせ(まとめ)
Slide 43
Slide 43 text
@inoue2002 この⼤型アップデートはほぼ完成形? • この形になるまでに⼆年かかった • プログラミング未経験から運営を始めた • 最初は全て⼿動で更新していた • なかなか使ってもらえなかった • 運営コストやみんなに使ってもらうための課題が⼭盛り どんなふうに進化していったのか振り返っていきます
Slide 44
Slide 44 text
@inoue2002 LINE BOOT AWARDS 2018 LINEBotの魅⼒に刺激を受け、なんにもできない状態でLINE@を触ってみた
Slide 45
Slide 45 text
@inoue2002 LINE@のみで動く第⼀号 ⾃分で準備して、LINEオフィシャルアカウントマネージャーで更新
Slide 46
Slide 46 text
@inoue2002 ⼀年⽣の間に100⼈を超え、来年もやることにした ⾼校⽣への宣伝は 基本インスタ 友達からの⼝コミ 陸上部→各クラス→いろんなグループに⼝コミで広がる
Slide 47
Slide 47 text
@inoue2002 時間を重ねるごとに登録者が増えるが、だんだん限界に近く • いろんな⼿を使って宣伝 • あだなが「ようかんBot」になったりする (ほぼ⼿動やし完全Botではなかった • なかなか200に到達しない →ユーザーの声を聞いて満⾜度や期待をあげたい
Slide 48
Slide 48 text
@inoue2002 初めてユーザーの声に⽿を傾けてみた
Slide 49
Slide 49 text
@inoue2002 ⾊々課題がわかってきた
Slide 50
Slide 50 text
@inoue2002 きっとこれなんだよなぁ(Webhookってなんやねん)
Slide 51
Slide 51 text
@inoue2002 とりあえず教えてもらう • ネットで調べまくった • ハンズオンに参加した
Slide 52
Slide 52 text
@inoue2002 基本知識がついた/LINEBotが作れるようになった🎉
Slide 53
Slide 53 text
@inoue2002 記事を⾒ながらコピペで実装(GAS)Google Apps Script • キーワード応答からリッチメニュー に • 画像のアップロードをGdriveに • キーワードの応答はスプレッドシート →以前より運営もしやすく →ユーザーも少しは使いやすく
Slide 54
Slide 54 text
@inoue2002 ついに本物のBotなった!⾼2夏 • アイコンは同級⽣に書いてもらった • 登録者が結構増えた • G driveに権限を与えて運営を増やせる • 学校の先⽣から連絡を頼まれたり
Slide 55
Slide 55 text
@inoue2002 また⾊々問題点が.. GASは応答が若⼲もっさり
Slide 56
Slide 56 text
@inoue2002 AWSLambdaを⽤いたサーバレス構成を学習 ぶんせんせい本当にありがとう!!
Slide 57
Slide 57 text
@inoue2002 さらにLINEAPIドキュメントが読めるようになった&技術⼒が上がった • Flexメッセージ • Quick Reply • nodeJS ⾊々思い通りにできるようになってきた できることが増えてUI・UXが爆上がり
Slide 58
Slide 58 text
@inoue2002
Slide 59
Slide 59 text
@inoue2002 Lambdaを使うようになってまた⾊々成果が 約⼀週間で900回応答とか
Slide 60
Slide 60 text
@inoue2002 コロナ休校のせいで仕事を奪われた
Slide 61
Slide 61 text
@inoue2002 泣きそう
Slide 62
Slide 62 text
@inoue2002 休校明け、ユーザーは帰ってきたけど、僕が忙しくなり運営が疎かに
Slide 63
Slide 63 text
@inoue2002 気がつけばそんな中登壇⼆週間前w このままじゃ登壇できない
Slide 64
Slide 64 text
@inoue2002 アップデート内容を考える lineBotは設計図を作 ると開発しやすい🔥
Slide 65
Slide 65 text
@inoue2002 ということで完成!⼤学版も作ってくかー
Slide 66
Slide 66 text
@inoue2002 • みんながアップロードできるから運営コスト0 • LIFFを使い倒してDB5つ、エンドポイント7つ • 同級⽣だけでなく、他学年、他校までも使えるように • 今後使ってもらいつつ⾼校⽣の情報共有の壁壊したい • 三年間の知⾒や経験がとっても活かせたものができた 最終形態のまとめ
Slide 67
Slide 67 text
@inoue2002 アーキテクチャ
Slide 68
Slide 68 text
@inoue2002 他にもいろいろ
Slide 69
Slide 69 text
@inoue2002 ⾼校の卒業記念に8,700枚の写真でモザイクアートに挑戦した話
Slide 70
Slide 70 text
@inoue2002 きっかけは懇親会(11/14) ようかんくん、⼀緒になんかやりません? わーい!ぜひぜひ! FBグループ作りますね!
Slide 71
Slide 71 text
@inoue2002 LINEDC ✖VoiceAppLab ✖ ようかん企画誕⽣🎂 ⾳声ユーザーインタフェース(VUI)の可能性を研究するクリエイター集 団。たくさんのスキルやアプリを開発されています。また、最近ではLINE 上で動くゲームを開発されています。
Slide 72
Slide 72 text
@inoue2002 ⽣徒会の⼦にも協⼒してもらい モザイクアートに挑戦する
Slide 73
Slide 73 text
@inoue2002 学校にも協⼒してもらい 校⻑先⽣の許可をもらいにいく 情報科の先⽣を仲間にする 学年団の先⽣と職員会議 学校の公式企画として開始
Slide 74
Slide 74 text
@inoue2002 投票は「Bot追加して画像をとにかく投げるだけ」
Slide 75
Slide 75 text
@inoue2002 学校の公式⽂章配布とともに募集開始 4⽇で⽬標の倍の数集まった
Slide 76
Slide 76 text
@inoue2002 上映会
Slide 77
Slide 77 text
@inoue2002 上映会
Slide 78
Slide 78 text
@inoue2002 上映会
Slide 79
Slide 79 text
@inoue2002 上映会
Slide 80
Slide 80 text
@inoue2002 上映会
Slide 81
Slide 81 text
@inoue2002 上映会
Slide 82
Slide 82 text
@inoue2002 ポストカードも作ってみた
Slide 83
Slide 83 text
@inoue2002
Slide 84
Slide 84 text
@inoue2002 技術構成 学校管理のサーバー 実はコード⾃体は2⾏
Slide 85
Slide 85 text
@inoue2002 みんなからものすごく褒めてもらえた🎉
Slide 86
Slide 86 text
@inoue2002 学校のHPで紹介された🙌(してもらった?)
Slide 87
Slide 87 text
@inoue2002 LINEBot開発したことないけどしてみたい⽅!
Slide 88
Slide 88 text
@inoue2002 LINENotify
Slide 89
Slide 89 text
@inoue2002 LINENotify ‒よく使われているケース- アクセストークンをコンソールで取得して、そこにPOST投げるだけ。 LINEBotと違って完全無料 開発者が設定をしないと⾶ばすことはできない
Slide 90
Slide 90 text
@inoue2002 LINENotify ‒あんまりみないケース- アクセストークンをコンソールで取得して、そこにPOST投げるだけ。 LINEBotと違って完全無料 開発者じゃなくても連携できるAPIが実はある 明⽇ぐらいにDEMOをリリースします!!
Slide 91
Slide 91 text
@inoue2002 LINE API Expertになるためにはどうするの? 記事 登壇 発信! ハッカソンとかも…?
Slide 92
Slide 92 text
@inoue2002 何が⾔いたかったかというと🎉 今後ともLAEとして活動していきますので、何卒よろしくお願いします! プログラミングの勉強になる LINEAPIに出会って⼈⽣変えられる
Slide 93
Slide 93 text
@inoue2002
Slide 94
Slide 94 text
@inoue2002 質問とか拾っていくこーなー
Slide 95
Slide 95 text
@inoue2002 アンケート回答お願いします!
Slide 96
Slide 96 text
@inoue2002