$30 off During Our Annual Pro Sale. View Details »

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

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

Tweet

More Decks by ようかん(YosukeInoue

Other Decks in Programming

Transcript

  1. @inoue2002

  2. None
  3. None
  4. / / 🎉 # 2

  5. About Me ( ) - B1 - 2020 - LINE

    API Expert JAWSDAYS2021 Civictech Challenge Cup U-22 2021 Code for japan SGG - - (1.5km 10km) LINEAPI @inoue2002
  6. Activities • • Web • LINE • / • /

    @inoue2002
  7. / / 🎉 # 2

  8. None
  9. None
  10. • • • • • •

  11. • • • • • • • etc..

  12. None
  13. None
  14. None
  15. None
  16. SGGとは • 73 • 2 • Slack 3.2 • •

    • Flutter • LINEAPI • • • • • • CTF • •
  17. None
  18. 生息地

  19. • ScrapBox • • • GitHub • • Twitter •

    • • Youtube • • • Discord • • Qiita org • 主な活動場所
  20. None
  21. None
  22. ※個人の感想 小学生 中学生 高校生 大学生 大人 イ ベ ン ト

    で 見 か け る 頻 度 中高生あんまりいないよね問題 IoT/VR/RPA/LINE 各種界隈.. 小学生プログ ラミング教室
  23. ※個人の感想 中高生の参加率をあげたい!! 小学生 中学生 高校生 大学生 大人 なんとかして中高生を盛り上げたい イ ベ

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

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

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

  27. None
  28. 反響

  29. SNS @sggorg

  30. None
  31. None
  32. チームとしての活動

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

  34. https://sugokunatitai.dev

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

  36. @sggorg

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

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

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

  41. None
  42. https://shiga-lg.jp/showcase/result @inoue2002

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

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

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

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

  48. @inoue2002 上映会

  49. @inoue2002 上映会

  50. @inoue2002 上映会

  51. @inoue2002 上映会

  52. @inoue2002 上映会

  53. @inoue2002 上映会

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

  55. @inoue2002

  56. @inoue2002

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

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

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

  60. • • • • 話 • •

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

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

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

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

  65. それが頻繁に起こっている可能性 ⽉ ⽕ ⽔ ⽊ ⾦ ⼟ ⽇ 漢字テスト 英単語テスト

    課題提出 英⽂法テスト 課題提出 週末課題 ⽉曜の漢字テストの範囲教えてー 次のコミ英の提出物なんだっけ ⾦曜⽇の課題の範囲くれー!
  66. 送る側 負のサイクルの始まり始まり 聞く側 送るのめんどくさい いつ⾃分が聞く側に なるかわからないか ら送るしかない k 毎回毎回申し訳ない 聞いてからの時差

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

  68. • ⾼校⽣みんなが導⼊しやすい • 広めやすい • 開発/運営しやすい • ⾼校⽣の普及率ほぼ100パーセントのLINE • QRコードやトークからアカウントをそのまま共有できる

    • LINEBotを使うことでみんなが慣れたチャットUIをベースに開発できる どこに作ろうか・・・
  69. そうして出来上がった 新しい情報共有ツール「ようかんBot」

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

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

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

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

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

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

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

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

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

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

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

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

  82. DEMO⑤拡散

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

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

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

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

  87. この⼤型アップデートはほぼ完成形? • この形になるまでに⼆年かかった • プログラミング未経験から運営を始めた • 最初は全て⼿動で更新していた • なかなか使ってもらえなかった •

    運営コストやみんなに使ってもらうための課題が⼭盛り どんなふうに進化していったのか振り返っていきます
  88. LINE BOOT AWARDS 2018 LINEBotの魅⼒に刺激を受け、なんにもできない状態でLINE@を触ってみた

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

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

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

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

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

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

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

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

  97. 記事を⾒ながらコピペで実装(GAS)Google Apps Script • キーワード応答からリッチメニュー に • 画像のアップロードをGdriveに • キーワードの応答はスプレッドシート

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

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

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

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

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

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

  105. 泣きそう

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

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

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

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

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

    最終形態のまとめ
  111. アーキテクチャ

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

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

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

  115. 未踏ジュニア • CPUを自作してコンピュータが 魔法でないことを証明したい! • 全く新しいエアガンを開発したい! • 勉強のモチベーションを維持する タスク管理アプリを作りたい! •

    VRで体を鍛えるゲームを作りたい! • Webアクセシビリティの問題を 指摘する仕組みを作りたい! ほかにも色々!! https://jr.mitou.org/ © 未踏社団 未踏ジュニア実行委員会
  116. 未踏ジュニア 「未踏エコシステム」 「未踏」 未踏IT人材発掘育成 「未踏Advanced」 未踏的IT企業家・事業家育成 「未踏Target」 次世代先端IT技術者育成 「未踏ジュニア」 U17未踏IT人材育成

  117. • • • • • etc

  118. • • • • • •

  119. @inoue2002