未踏ジュニア2020「Align」最終発表資料

未踏ジュニア2020 - バッテリー残量が運命を左右する、エモくて新しいチャットアプリ「Align」の最終発表資料です

Transcript

1. Align から始まる 萩原爽太・⼤垣連 Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align
2. • N⾼2年/16歳 • Androidエンジニア(Kotlin) • インターン@Cookpad(1y) • Flutterもやる • サービス開発に興味がある。 • 変わった仕組みや機能を思いつきがち • モバイルアプリ, デザイン(ロゴなど)担当 Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 萩原爽太 Twitter: @___soprog
3. • N⾼2年/16歳 • バックエンドエンジニア(Go) • Reactも書く • インターン@3-shake(1y) • CLIツールの作成や⾃作⾔語の拡張が趣味 • サーバーサイド実装, 総務系のタスク担当 Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align ⼤垣連 Twitter: @re_yuzuy GitHub: @yuzuy
4. Align( ) というプロジェクト Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align
5. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align Alignてなに？ どこが新しいの？
6. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 「エモい」を⼿軽に体験 Alignとは コンセプトは 暇になったタイミングに、ふと⼼が揺れ動く体験を味わえたらいいな
7. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align Alignとは 具体的に仕組みを⼀⾔で表すと バッテリー残量が近い⼈とマッチングする ランダムマッチングチャットアプリ
8. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align Alignとは 具体的に仕組みを⼀⾔で表すと ⼀⾔では表せないサービスでした バッテリー残量が近い⼈とマッチングする ランダムマッチングチャットアプリ
9. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align デモ動画
10. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align Alignとは 前提: スマホにはバッテリー残量という要素がある 53 58
11. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align Alignとは バッテリー残量が近いというきっかけで相⼿とマッチングする 53 58 ͍ۙ
12. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align Alignとは 53 58 ͍ۙ 53 58 ձ࿩ 出会った相⼿と会話をする
13. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align Alignとは 53 58 ͍ۙ 53 58 ձ࿩ バッテリー残量は常に変化しえる
14. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align Alignとは 53 58 ͍ۙ 53 59 ձ࿩ バッテリー残量は常に変化しえる
15. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align Alignとは 53 58 ͍ۙ 53 60 バッテリー残量が離れてしまうと
16. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align Alignとは 53 虚無 会話は勝⼿に切断され、相⼿との関係を絶たれる
17. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align バッテリー残量が近い・離れたの定義 Alignとは
18. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align バッテリー帯の説明 バッテリー 残量 バッテリーの範囲[x%-y%] この帯の中でマッチング、帯から外れると会話終了 10% 20% 30% 40% 続く 1%-9%は実装上の理由で、100%は永遠にチャットができてしまうので使えない 10%-19%の バッテリー帯 (10%のバッテリー帯) 20%-29%の バッテリー帯 (20%のバッテリー帯) 30%-39%の バッテリー帯 (30%のバッテリー帯)
19. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align この仕組みがどのように コンセプトに向けて作⽤するの？
20. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 僕らが⾔うエモい(⼼が揺れ動く瞬間)は 何がエモい要素なの？ 出会いと
21. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 僕らが⾔うエモい(⼼が揺れ動く瞬間)は 何がエモい要素なの？ 別れ
22. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 関わりのある⼈の顔を思い浮かべてください 何がエモい要素なの？
23. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align あなたはその思い浮かべた⼈と、 今この瞬間から会えない・喋れない そんな世界線をリアルに想像してみてください 何がエモい要素なの？
24. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 何がエモい要素なの？
25. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 何がエモい要素なの？
26. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align どんな気持ちになりましたか？ 何がエモい要素なの？
27. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align あっ！ってなったり 名残惜しいようななんとも⾔えない気持ちになった⽅ それが私達の話しているエモさです 何がエモい要素なの？
28. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align Alignは いきなり出会って いきなりさようなら な仕組みを持っている 何がエモい要素なの？
29. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align それをアプリで簡単にスキマの時間に楽しめる 何がエモい要素なの？
30. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 運命を左右するのがバッテリー残量なのもキモ
31. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align バッテリー残量を⽤いるのはなぜ？ バッテリー残量 is (若⼲)⾃分でコントロールができる 53
32. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align バッテリー残量を⽤いるのはなぜ？ 続けようと思えば半永久的に続けられる！ 充電器を使ったり、画⾯光量をmaxにしてみたり。。。調節 53
33. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align バッテリー残量を⽤いるのはなぜ？ 試⾏錯誤して話を続ければ、よりさようならしたときの名残惜しさは強くなりそう 53
34. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align これがAlignの仕組みと、エモさの引き出し⽅です
35. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align ユーザーテストのようす
36. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align ユーザーテストのようす 10/27 21:00~22:00に決⾏ - 平⽇の暇な時間をアンケートし決めた時間 15⼈のテスター - 萩原、⼤垣の知り合いに協⼒してもらいました 出会った⼈とどのような会話をするのか 突然会話が切れたらどのような感想を持つのかの 検証が⽬的 - 事後にアンケートを取りました。
37. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align ユーザーテストのようす ユーザーテストの結果 円滑にテストプレイを進められた - インストールまでのオペや⼤きなバグもなく終了 ⾃分たちでも課題を発⾒ - 後述 有益なフィードバックも得られた- 後述
38. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align ユーザーテストのようす 結果 - ⾃分たちの所感 友⼈同⼠でマッチングするのも楽しいという発⾒ - 当初、友⼈同⼠はマッチングしないように設定をしていたがオペミスで 友⼈同⼠がマッチング。それはそれで盛り上がることがわかった バッテリー帯の定義に修正が必要そうなことがわかった - 10%ごとのバッテリー帯を⽤意していたが、 バッテリーは減らず会話が⻑く続きすぎることがわかった 会話の種はやっぱり探すの難しそう - わかってはいたが、何を話していいのかわからない場合もそれなりに存在した 友⼈や友⼈の友⼈など、ある程度の情報を持っている場合は話がかなり盛り上がることも わかったので、うまく相⼿の情報を扱えるような仕組みがひつようなことがわかった
39. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align バッテリー帯の説明 バッテリー 残量 バッテリーの範囲[x%-y%] この帯の中でマッチング、帯から外れると会話終了 10% 20% 30% 40% 続く 0%-0%は実装上の理由で、100%は永遠にチャットができてしまうので使えない 10%-19%の バッテリー帯 (10%のバッテリー帯) 20%-29%の バッテリー帯 (20%のバッテリー帯) 30%-39%の バッテリー帯 (30%のバッテリー帯) ここが広すぎて 会話が⻑すぎる
40. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align ユーザーテストのようす 結果 - ⾃分たちの所感 友⼈同⼠でマッチングするのも楽しいという発⾒ - 当初、友⼈同⼠はマッチングしないように設定をしていたがオペミスで 友⼈同⼠がマッチング。それはそれで盛り上がることがわかった バッテリー帯(独⾃概念)の定義に修正が必要そうなことがわかった - 10%ごとのバッテリー帯を⽤意していたが、 バッテリーは減らず会話が⻑く続きすぎることがわかった 会話の種はやっぱり探すの難しそう - わかってはいたが、何を話していいのかわからない場合もそれなりに存在した 友⼈や友⼈の友⼈など、ある程度の情報を持っている場合は話がかなり盛り上がることも わかったので、うまく相⼿の情報を扱えるような仕組みが必要なことがわかった
41. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align ユーザーテストのようす 結果 - テスターからのフィードバック UIがポップでよかった！ 僕らが仮説として定義したエモさを体感できたみたい！ - あっ！ってなったらしい 知り合い3⾚の他⼈1くらいの割合が意外と楽しかった 思ったより楽しんでくれたみたいでモチベバク上がりした
42. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align ユーザーテストのようす 結果 - 出てきた課題&仮説 チャットながく続きすぎる問題 - 当初、僕らの予定では15分くらいつづける想定。 実際には25会話中で10会話は10分~20分続いていた。そのうち、⾃⼰切断が4つ。 ⻑すぎるとだれてしまうフィードバックもあった。15分、意外と⻑いぞ..? 特定コミュニティの中でも盛り上がる仮説 - 当初は、全く知らない⼈と出会い会話することを想定。 知り合い、あるいは顔は知っているくらいの間柄でチャットするのも⾯⽩いと いうフィードバックがあった。共通の話題があると話しやすいみたい。
43. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align ユーザーテスト2回⽬のようす
44. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align ユーザーテスト２回⽬のようす 前回のユーザーテストでわかったことを 改善し実験するために急遽決⾏
45. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align ユーザーテスト２回⽬のようす 前回のテストからの修正点 バッテリー帯を狭くした。前半5%/後半2% - 会話が⻑く続き過ぎた事例があったので、修正してみた コミュニティを1つに絞った(N⾼) - 知り合いとやっても楽しいというフィードバックがあったので、 顔⾒知りの可能性が⾼まるようにした
46. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align ユーザーテスト２回⽬のようす 結果 出会い, 別れの流れは引き続き⾼評価、エモさを感じてくれた 話題枯渇があったみたい - 同じコミュニティ内でも話題が枯渇するというフィードバックがあった Alignが話題をいかに提供できるかの仕組みづくりの必要性を強く感じた バッテリー帯: 5% → まだ⻑いかもしれない？ 2% → 挨拶で終わる - こんな感じの感想だった。↓がチャットの継続時間。バランス調整が難しい… 5%で10分以上つづいた部屋が4/8つ, 3分続かなかった部屋が3/8つ 2%で10分以上つづいた部屋が0/6つ, 3分続かなかった部屋が3/6つ
47. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align ユーザーテスト２回⽬のようす 有益なフィードバックを得れた テストして改善サイクルを回していきます
48. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 実装、どんな感じ？
49. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 実装、どんな感じ？(フロントエンド編) Flutter - クロスプラットフォームフレームワーク Provider, StateNotifier packageを⽤いたMVVMアーキテクチャ FirebaseAppDistribution/DeployGateで配信 GitHubActions, Fastlaneで配信⾃動化
50. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 実装、どんな感じ？(バックエンド編) Go⾔語 + gin(REST), fiber(WebSocket) まあまあきれいなCleanArchitecture GCP - AppEngine Standard/Flexible, Redis(Memorystore), MySQL(CloudSQL) 認証はFirebaseAuth/エラー監視はSentry
51. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 開発など、どんな具合で 進めていたの？
52. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align マイルストーンのふりかえり 未踏jr開始時に建てていたマイルストーン ユーザーテスト チャット・マッチング のみの最低限 ݄ 中⾼⽣が集まる イベントにて宣伝 ⼈をガッとあつめ テストをする ݄ 新機能らをリリース アクティブユーザー 1000⼈めざす ݄ 正式リリース UIなどをきれいにした りなんなりする ݄
53. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align マイルストーンのふりかえり 実際やってみて 実装 ݄ null 実装 ݄ null 実装 最後の最後必死の ユーザーテスト ݄ 実装 アプリを触ってもらって バグらせる会 ݄ null
54. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align マイルストーンのふりかえり ⽬標のスケジュールには及ばなかったが テストプレイを実施して 有益なフィードバックを得て改善まで出来た
55. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 遅れた理由のふりかえりと、学び
56. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 遅れた要因とそこからの学び 要因 最優先の⽬的を⾒失って頻繁に脇道にそれる スケジュール感をミスったおかげでモチベーションを殺した
57. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 遅れた要因とそこからの学び 最優先の⽬的を⾒失って頻繁に脇道にそれる 今回、最も優先すべきだったのはバッテリー残量による新たな出会いと 唐突な別れがエモい感情を引き起こすという仮説の検証だった 新しい機能のアイディアが思いついたときには、しっかり話し合わずに (本当に必要かを吟味せずに)実装を開始してしまった → APIはあるけどアプリでは何も使われていないものが多数ある
58. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 遅れた要因とそこからの学び 最優先の⽬的を⾒失って頻繁に脇道にそれる 最優先の⽬的を⾔語化、共有する ↑に必要な最低限の機能を⾒極める 新しい機能を思いついても絶対に必要でなければストックしておく
59. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 遅れた要因とそこからの学び 理想をそのままスケジュールに落とし込んでしまった(3ヶ⽉遅れくらい) ⼤雑把なタスクの切りわけ。期限の設定・共有が雑or無 スケジュール感をミスったおかげでモチベーションを殺した
60. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 遅れた要因とそこからの学び 細かくタスクを切り分け、期限を具体的に設定、共有する スケジュール感をミスったおかげでモチベーションを殺した
61. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align テストを踏まえた 今後のAlignにおける課題・展望
62. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 今後の課題・展望 テストを経て⼤きめの課題がいくつか⾒つかったので改善したい バッテリー帯をどうするのか → ⾊々なバッテリー帯でテストを繰り返す   可変にして課⾦も紐付けられるような仕組みも思いついたのでそれも合わせて検討していく 会話の話題 → ユーザーのプロフィールの充実などの機能を検討している 細かな修正もたくさんして試したい アプリのルール、複雑問題 → チュートリアル導⼊したい。が、アプリの⼿軽感を妨げるので、いい形を考えてテストしたい
63. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align
64. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align まとめ 未踏jr期間内で成し遂げたこと アプリコア機能の開発、全部出来た！ →ユーザー管理・バッテリーを⽤いたマッチング,チャットの実装が完了した。  かなり完成度の⾼いものが出来たと⾃負しているので拡張し続けていきたい！ ユーザーテストを⾏い有益なフィードバックを得ることができた！ →Alignの謳うエモさの実証に向けた第⼀歩！ユーザーテストを2回できたことで、  テストのやり⽅にも知⾒が溜まったりしたので今後に活かしていく！ フィードバックをもとに改善して再度ユーザーテストするサイクルを回せた！ →フィードバッグをもとに新たな仮説を⽤意し、 再度検証するサイクルを回せたのでこの先も⽌めないで改善していく！
65. • 周りの半端ない⼈たちの活動を⾒てかなり刺激を 得た。個性があってかつクオリティが⾼い… • PM関さんの軌道修正⼒にかなり助けられた半年 だった。MTG後に⼤垣くんと毎回感動していた • 開発資⾦はかなりありがたい。サーバーをぶん回 せるのは本当に助かる • 他PJのコードレビューとかも少しさせてもらった りできて、とても楽しかった Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 萩原爽太 未踏jrの感想 まとめ
66. • 関さん(PM)の指摘がキレキレでとても助かった・ 参考になった(サービスの開発⼿法等) • CPU作れたり、ブラウザOS作れたり、リコーダー 作れたり、⾃分ができないことができる⼩中⾼⽣ がたくさんいて、⾃分もそういうスキルを磨いて いきたいと思った Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align 未踏jrの感想 まとめ ⼤垣連
67. Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align (おまけ)おととい法⼈登記完了 ここから、Alignを広げていきます 応援・お⼿伝いお願いします！ (ツイッターをフォローすると情報が⼿に⼊るので是⾮!)
68. Align から始まる 萩原爽太・⼤垣連 Twitterをフォローすると 最新情報が⼿に⼊ります @align_one Align