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

身近なものから作り手に回る楽しさ

 身近なものから作り手に回る楽しさ

Tweet

More Decks by ようかん(YosukeInoue

Other Decks in Programming

Transcript

  1. About Me
    ( )
    - B1
    - 2020
    - LINE API Expert
    JAWSDAYS2021
    Civictech Challenge Cup U-22 2021 Code for japan
    SGG
    -
    -
    (1.5km 10km)
    LINEAPI
    @inoue2002

    View full-size slide

  2. Activities

    • Web
    • LINE
    • /
    • /
    @inoue2002

    View full-size slide







  3. View full-size slide







  4. • etc..

    View full-size slide

  5. SGGとは
    • 73
    • 2
    • Slack 3.2


    • Flutter
    • LINEAPI





    • CTF


    View full-size slide

  6. • ScrapBox


    • GitHub

    • Twitter


    • Youtube


    • Discord

    • Qiita org

    主な活動場所

    View full-size slide

  7. ※個人の感想
    小学生 中学生 高校生 大学生 大人











    中高生あんまりいないよね問題
    IoT/VR/RPA/LINE 各種界隈..
    小学生プログ
    ラミング教室

    View full-size slide

  8. ※個人の感想
    中高生の参加率をあげたい!!
    小学生 中学生 高校生 大学生 大人
    なんとかして中高生を盛り上げたい











    View full-size slide

  9. 「小学生向け」のプログラミング教室
    「エンジニア向け」の勉強会…
    「高校生向け」の??
    中高生が集まるイベントがないからじゃね?
    なぜ中高生の参加が少ないの?

    View full-size slide

  10. じゃあ作ればいいやん!!

    View full-size slide

  11. 数少ない
    中高生が集まって情報共有することで
    知識が増える・開発の相談可・モチベーション向上
    + ⼤⼈も巻き込んでいろいろ刺激をもらえたい!!
    + ⼤⼈の⽅にも楽しんでもらいたい!!

    View full-size slide

  12. SNS
    @sggorg

    View full-size slide

  13. チームとしての活動

    View full-size slide

  14. SGGでさまざまな知見をお互い得ることができる
    • /



    • w



    View full-size slide

  15. https://sugokunatitai.dev

    View full-size slide

  16. #すごくなりたいがくせいぐるーぷ

    View full-size slide

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

    View full-size slide

  18. @inoue2002
    https://www.civichat.jp/

    View full-size slide

  19. https://the-scratch.jp/
    @inoue2002

    View full-size slide

  20. https://shiga-lg.jp/showcase/result
    @inoue2002

    View full-size slide

  21. @inoue2002
    生徒会の子にも協力してもらい
    モザイクアートに挑戦する

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. @inoue2002
    学校の公式文章配布とともに募集開始
    4日で目標の倍の数集まった

    View full-size slide

  25. @inoue2002
    上映会

    View full-size slide

  26. @inoue2002
    上映会

    View full-size slide

  27. @inoue2002
    上映会

    View full-size slide

  28. @inoue2002
    上映会

    View full-size slide

  29. @inoue2002
    上映会

    View full-size slide

  30. @inoue2002
    上映会

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide




  35. • 話


    View full-size slide

  36. 普通科高校生の
    情報共有にある壁

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  48. DEMO②画像を共有する(教える側)

    View full-size slide

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

    画像の種類を選択する

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

    View full-size slide

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

    View full-size slide

  51. DEMO③画像を確認する(聞く側)

    View full-size slide

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

    知りたい画像を選択

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

    View full-size slide

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

    View full-size slide

  54. DEMO④画像を確認する(聞く側)

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

  57. DEMO⑤拡散

    View full-size slide

  58. DEMO⑤拡散
    ボタンを押す

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  61. DEMO⑥お問い合わせ(まとめ)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  68. ⾊々課題がわかってきた

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  79. 泣きそう

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  85. アーキテクチャ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  88. 未踏ジュニア
    https://jr.mitou.org/ © 未踏社団 未踏ジュニア実行委員会

    View full-size slide

  89. 未踏ジュニア
    • CPUを自作してコンピュータが
    魔法でないことを証明したい!
    • 全く新しいエアガンを開発したい!
    • 勉強のモチベーションを維持する
    タスク管理アプリを作りたい!
    • VRで体を鍛えるゲームを作りたい!
    • Webアクセシビリティの問題を
    指摘する仕組みを作りたい!
    ほかにも色々!!
    https://jr.mitou.org/ © 未踏社団 未踏ジュニア実行委員会

    View full-size slide

  90. 未踏ジュニア
    「未踏エコシステム」
    「未踏」
    未踏IT人材発掘育成
    「未踏Advanced」
    未踏的IT企業家・事業家育成
    「未踏Target」
    次世代先端IT技術者育成
    「未踏ジュニア」
    U17未踏IT人材育成

    View full-size slide





  91. • etc

    View full-size slide







  92. View full-size slide