Upgrade to Pro — share decks privately, control downloads, hide ads and more …

高校生_︎LINE.pdf

 高校生_︎LINE.pdf

Tweet

More Decks by ようかん(YosukeInoue

Other Decks in Programming

Transcript

  1. @inoue2002

    View Slide

  2. @inoue2002
    #linedc

    View Slide

  3. @inoue2002
    LINE Developers Community(LINEDC)とは
    ・LINE Platformを使うエンジニア・クリエータによる有志のコミュニティ
    ・Connpass登録メンバー3000⼈超え
    ・さくっとLINEで何か試したい⼈からガチガチにシステムを作る⼈まで幅広い!
    ・毎週のようにイベントをやっている。ハンズオンやLTが多い
    ・#linedc で検索するといろいろ出てくる

    View Slide

  4. @inoue2002
    LINE Developers Community(LINEDC)とは

    View Slide

  5. @inoue2002
    LINE Developers Community(LINEDC)とは

    View Slide

  6. @inoue2002
    LINE API Use Case

    View Slide

  7. @inoue2002

    View Slide

  8. @inoue2002
    ようかん
    ⾼校⽣とLINEAPI

    View Slide

  9. @inoue2002
    ⾃⼰紹介
    ようかん(井上陽介)
    - ⾼校⽣エンジニア
    - 未踏ジュニア2020スーパークリエータ
    - LINE API Expert
    ⾼校⽣とLINEAPIを組み合わせる
    - 最近の活動
    - 得意なこと
    ⻑距離を⾛ること(1.5km ‒ 10km)
    LINEAPIをいじること
    イベントを主催したり登壇したりすること
    学校の同級⽣や後輩を巻き込んでいろいろやること
    @inoue2002

    View Slide

  10. @inoue2002
    [LINEAPI]どれぐらい開発しているかというと
    サービス/ツールetc.. 50+

    View Slide

  11. @inoue2002
    [LINEAPI]どれぐらい開発しているかというと
    サービス/ツールetc.. 50+

    View Slide

  12. @inoue2002
    ようかんはLINEDCで何をしている⼈なの?
    ① イベント参加/登壇/主催
    ② LINE APIを使ったアウトプット
    ③ 最年少LAEとして、僕ならではのLINEAPI事例発掘&共有

    View Slide

  13. @inoue2002
    アイスブレイク
    ⾼校⽣名乗るのも後数⽇か。。。
    今⽇は⾼校⽣最後の登壇だ!
    まとめ発表しようか。。。

    View Slide

  14. @inoue2002
    このセッションでは何が聞けるの?
    ①LINEコミュニティに出会った⾼校⽣の2年間がわかる
    ②中⾼⽣向けに開発したLINEAPIプロダクトが知れる
    ③ LINEAPI開発の知⾒が知れる(LINE Notify)

    View Slide

  15. @inoue2002

    View Slide

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

    View Slide

  17. @inoue2002
    普通科⾼校⽣の
    情報共有にある壁

    View Slide

  18. @inoue2002
    どこでも誰もがやってそうな会話①

    View Slide

  19. @inoue2002
    どこでも誰もがやってそうな会話②

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  26. @inoue2002
    実際に⼆年半同級⽣は使ってくれたの?
    310
    251
    割と⼝コミが広がってみんな使ってくれるようになった

    View Slide

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

    View Slide

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

    View Slide

  29. @inoue2002
    DEMO②画像を共有する(教える側)

    View Slide

  30. @inoue2002
    DEMO②画像を共有する(教える側)
    アップロードするLIFFが開く

    画像の種類を選択する

    画像を選択してアップロードする

    View Slide

  31. @inoue2002
    DEMO②画像を共有する(教える側)(動画が⾒れなかった時⽤)
    LIFFが開く 画像の種類を選択 画像を選択する 画像の種類を選択

    View Slide

  32. @inoue2002
    DEMO③画像を確認する(聞く側)

    View Slide

  33. @inoue2002
    DEMO③画像を確認する(聞く側)
    共有された画像を⾒るLIFFが開く

    知りたい画像を選択

    保存ボタンを押してトークに保存

    View Slide

  34. @inoue2002
    DEMO③画像を確認する(聞く側)(動画が⾒れなかった時⽤)
    LIFFが開く 画像を保存 トークに残る

    View Slide

  35. @inoue2002
    DEMO④画像を確認する(聞く側)

    View Slide

  36. @inoue2002
    DEMO④画像を確認する(聞く側)
    「時間割を確認」を押す

    秒で時間割を送ってくれる

    View Slide

  37. @inoue2002
    DEMO④画像を確認する(聞く側)(動画が⾒れなかった時⽤)
    ボタンを押す 秒で返してくれる

    View Slide

  38. @inoue2002
    DEMO⑤拡散

    View Slide

  39. @inoue2002
    DEMO⑤拡散
    ボタンを押す

    QRとかURLとか⾊々送ってくれる

    View Slide

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

    View Slide

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

    View Slide

  42. @inoue2002
    DEMO⑥お問い合わせ(まとめ)

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  48. @inoue2002
    初めてユーザーの声に⽿を傾けてみた

    View Slide

  49. @inoue2002
    ⾊々課題がわかってきた

    View Slide

  50. @inoue2002
    きっとこれなんだよなぁ(Webhookってなんやねん)

    View Slide

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

    View Slide

  52. @inoue2002
    基本知識がついた/LINEBotが作れるようになった🎉

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  58. @inoue2002

    View Slide

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

    View Slide

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

    View Slide

  61. @inoue2002
    泣きそう

    View Slide

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

    View Slide

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

    View Slide

  64. @inoue2002
    アップデート内容を考える
    lineBotは設計図を作
    ると開発しやすい🔥

    View Slide

  65. @inoue2002
    ということで完成!⼤学版も作ってくかー

    View Slide

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

    View Slide

  67. @inoue2002
    アーキテクチャ

    View Slide

  68. @inoue2002
    他にもいろいろ

    View Slide

  69. @inoue2002
    ⾼校の卒業記念に8,700枚の写真でモザイクアートに挑戦した話

    View Slide

  70. @inoue2002
    きっかけは懇親会(11/14)
    ようかんくん、⼀緒になんかやりません?
    わーい!ぜひぜひ!
    FBグループ作りますね!

    View Slide

  71. @inoue2002
    LINEDC ✖VoiceAppLab ✖ ようかん企画誕⽣🎂
    ⾳声ユーザーインタフェース(VUI)の可能性を研究するクリエイター集
    団。たくさんのスキルやアプリを開発されています。また、最近ではLINE
    上で動くゲームを開発されています。

    View Slide

  72. @inoue2002
    ⽣徒会の⼦にも協⼒してもらい
    モザイクアートに挑戦する

    View Slide

  73. @inoue2002
    学校にも協⼒してもらい
    校⻑先⽣の許可をもらいにいく
    情報科の先⽣を仲間にする
    学年団の先⽣と職員会議
    学校の公式企画として開始

    View Slide

  74. @inoue2002
    投票は「Bot追加して画像をとにかく投げるだけ」

    View Slide

  75. @inoue2002
    学校の公式⽂章配布とともに募集開始
    4⽇で⽬標の倍の数集まった

    View Slide

  76. @inoue2002
    上映会

    View Slide

  77. @inoue2002
    上映会

    View Slide

  78. @inoue2002
    上映会

    View Slide

  79. @inoue2002
    上映会

    View Slide

  80. @inoue2002
    上映会

    View Slide

  81. @inoue2002
    上映会

    View Slide

  82. @inoue2002
    ポストカードも作ってみた

    View Slide

  83. @inoue2002

    View Slide

  84. @inoue2002
    技術構成
    学校管理のサーバー
    実はコード⾃体は2⾏

    View Slide

  85. @inoue2002
    みんなからものすごく褒めてもらえた🎉

    View Slide

  86. @inoue2002
    学校のHPで紹介された🙌(してもらった?)

    View Slide

  87. @inoue2002
    LINEBot開発したことないけどしてみたい⽅!

    View Slide

  88. @inoue2002
    LINENotify

    View Slide

  89. @inoue2002
    LINENotify ‒よく使われているケース-
    アクセストークンをコンソールで取得して、そこにPOST投げるだけ。
    LINEBotと違って完全無料
    開発者が設定をしないと⾶ばすことはできない

    View Slide

  90. @inoue2002
    LINENotify ‒あんまりみないケース-
    アクセストークンをコンソールで取得して、そこにPOST投げるだけ。
    LINEBotと違って完全無料
    開発者じゃなくても連携できるAPIが実はある
    明⽇ぐらいにDEMOをリリースします!!

    View Slide

  91. @inoue2002
    LINE API Expertになるためにはどうするの?
    記事
    登壇
    発信!
    ハッカソンとかも…?

    View Slide

  92. @inoue2002
    何が⾔いたかったかというと🎉
    今後ともLAEとして活動していきますので、何卒よろしくお願いします!
    プログラミングの勉強になる
    LINEAPIに出会って⼈⽣変えられる

    View Slide

  93. @inoue2002

    View Slide

  94. @inoue2002
    質問とか拾っていくこーなー

    View Slide

  95. @inoue2002
    アンケート回答お願いします!

    View Slide

  96. @inoue2002

    View Slide