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

イベント情報→https://www.youtube.com/watch?v=TZF8fD3meTI

Transcript

1. @inoue2002
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
10. • • • • • •
11. • • • • • • • etc..
16. SGGとは • 73 • 2 • Slack 3.2 • • • Flutter • LINEAPI • • • • • • CTF • •
18. 生息地
19. • ScrapBox • • • GitHub • • Twitter • • • Youtube • • • Discord • • Qiita org • 主な活動場所
22. ※個人の感想 小学生 中学生 高校生 大学生 大人 イ ベ ン ト で 見 か け る 頻 度 中高生あんまりいないよね問題 IoT/VR/RPA/LINE 各種界隈.. 小学生プログ ラミング教室
23. ※個人の感想 中高生の参加率をあげたい!! 小学生 中学生 高校生 大学生 大人 なんとかして中高生を盛り上げたい イ ベ ン ト で 見 か け る 頻 度
24. 「小学生向け」のプログラミング教室 「エンジニア向け」の勉強会… 「高校生向け」の？？ 中高生が集まるイベントがないからじゃね？ なぜ中高生の参加が少ないの？
25. じゃあ作ればいいやん!!
26. 数少ない 中高生が集まって情報共有することで 知識が増える・開発の相談可・モチベーション向上 ＋ ⼤⼈も巻き込んでいろいろ刺激をもらえたい!! ＋ ⼤⼈の⽅にも楽しんでもらいたい!!
28. 反響
29. SNS ＠sggorg
32. チームとしての活動
33. SGGでさまざまな知見をお互い得ることができる • / • • • • w • • •
34. https://sugokunatitai.dev
35. ＃すごくなりたいがくせいぐるーぷ
36. @sggorg
38. @inoue2002 [LINEAPI]どれぐらい開発しているかというと サービス/ツールetc.. 50+
39. @inoue2002 https://www.civichat.jp/
40. https://the-scratch.jp/ @inoue2002
42. https://shiga-lg.jp/showcase/result @inoue2002
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. 実際に⼆年半同級⽣は使ってくれたの？ ３１０ ２５１ 割と⼝コミが広がってみんな使ってくれるようになった
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が爆上がり
103. Lambdaを使うようになってまた⾊々成果が 約⼀週間で900回応答とか
104. コロナ休校のせいで仕事を奪われた
105. 泣きそう
106. 休校明け、ユーザーは帰ってきたけど、僕が忙しくなり運営が疎かに
107. 気がつけばそんな中登壇⼆週間前w このままじゃ登壇できない
108. アップデート内容を考える lineBotは設計図を作 ると開発しやすい🔥
109. ということで今週頭に開発、四⽇前リリース、週末登壇が実現しました🎉
110. • みんながアップロードできるから運営コスト０ • LIFFを使い倒してDB５つ、エンドポイント７つ • 同級⽣だけでなく、他学年、他校までも使えるように • 今後使ってもらいつつ⾼校⽣の情報共有の壁壊したい • 三年間の知⾒や経験がとっても活かせたものができた 最終形態のまとめ
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