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

Slide 1

Slide 1 text

Align から始まる萩原爽太・⼤垣連 Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align

Slide 2

Slide 2 text

• N⾼2年/16歳 • Androidエンジニア(Kotlin) • インターン@Cookpad(1y) • Flutterもやる • サービス開発に興味がある。 • 変わった仕組みや機能を思いつきがち • モバイルアプリ, デザイン(ロゴなど)担当 Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align 萩原爽太 Twitter: @___soprog

Slide 3

Slide 3 text

• N⾼2年/16歳 • バックエンドエンジニア(Go) • Reactも書く • インターン@3-shake(1y) • CLIツールの作成や⾃作⾔語の拡張が趣味 • サーバーサイド実装, 総務系のタスク担当 Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align ⼤垣連 Twitter: @re_yuzuy GitHub: @yuzuy

Slide 4

Slide 4 text

Align( ) というプロジェクト Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align

Slide 5

Slide 5 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align Alignてなに？どこが新しいの？

Slide 6

Slide 6 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align 「エモい」を⼿軽に体験 Alignとはコンセプトは暇になったタイミングに、ふと⼼が揺れ動く体験を味わえたらいいな

Slide 7

Slide 7 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align Alignとは具体的に仕組みを⼀⾔で表すとバッテリー残量が近い⼈とマッチングするランダムマッチングチャットアプリ

Slide 8

Slide 8 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align Alignとは具体的に仕組みを⼀⾔で表すと⼀⾔では表せないサービスでしたバッテリー残量が近い⼈とマッチングするランダムマッチングチャットアプリ

Slide 9

Slide 9 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align デモ動画

Slide 10

Slide 10 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align Alignとは前提: スマホにはバッテリー残量という要素がある 53 58

Slide 11

Slide 11 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align Alignとはバッテリー残量が近いというきっかけで相⼿とマッチングする 53 58 ͍ۙ

Slide 12

Slide 12 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align Alignとは 53 58 ͍ۙ 53 58 ձ࿩ 出会った相⼿と会話をする

Slide 13

Slide 13 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align Alignとは 53 58 ͍ۙ 53 58 ձ࿩ バッテリー残量は常に変化しえる

Slide 14

Slide 14 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align Alignとは 53 58 ͍ۙ 53 59 ձ࿩ バッテリー残量は常に変化しえる

Slide 15

Slide 15 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align Alignとは 53 58 ͍ۙ 53 60 バッテリー残量が離れてしまうと

Slide 16

Slide 16 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align Alignとは 53 虚無会話は勝⼿に切断され、相⼿との関係を絶たれる

Slide 17

Slide 17 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align バッテリー残量が近い・離れたの定義 Alignとは

Slide 18

Slide 18 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align バッテリー帯の説明バッテリー残量バッテリーの範囲[x%-y%] この帯の中でマッチング、帯から外れると会話終了 10% 20% 30% 40% 続く 1%-9%は実装上の理由で、100%は永遠にチャットができてしまうので使えない 10%-19%のバッテリー帯 (10%のバッテリー帯) 20%-29%のバッテリー帯 (20%のバッテリー帯) 30%-39%のバッテリー帯 (30%のバッテリー帯)

Slide 19

Slide 19 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align この仕組みがどのようにコンセプトに向けて作⽤するの？

Slide 20

Slide 20 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align 僕らが⾔うエモい(⼼が揺れ動く瞬間)は何がエモい要素なの？出会いと

Slide 21

Slide 21 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align 僕らが⾔うエモい(⼼が揺れ動く瞬間)は何がエモい要素なの？別れ

Slide 22

Slide 22 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align 関わりのある⼈の顔を思い浮かべてください何がエモい要素なの？

Slide 23

Slide 23 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align あなたはその思い浮かべた⼈と、今この瞬間から会えない・喋れないそんな世界線をリアルに想像してみてください何がエモい要素なの？

Slide 24

Slide 24 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align 何がエモい要素なの？

Slide 25

Slide 25 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align 何がエモい要素なの？

Slide 26

Slide 26 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align どんな気持ちになりましたか？何がエモい要素なの？

Slide 27

Slide 27 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align あっ！ってなったり名残惜しいようななんとも⾔えない気持ちになった⽅それが私達の話しているエモさです何がエモい要素なの？

Slide 28

Slide 28 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align Alignはいきなり出会っていきなりさようならな仕組みを持っている何がエモい要素なの？

Slide 29

Slide 29 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align それをアプリで簡単にスキマの時間に楽しめる何がエモい要素なの？

Slide 30

Slide 30 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align 運命を左右するのがバッテリー残量なのもキモ

Slide 31

Slide 31 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align バッテリー残量を⽤いるのはなぜ？バッテリー残量 is (若⼲)⾃分でコントロールができる 53

Slide 32

Slide 32 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align バッテリー残量を⽤いるのはなぜ？続けようと思えば半永久的に続けられる！充電器を使ったり、画⾯光量をmaxにしてみたり。。。調節 53

Slide 33

Slide 33 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align バッテリー残量を⽤いるのはなぜ？試⾏錯誤して話を続ければ、よりさようならしたときの名残惜しさは強くなりそう 53

Slide 34

Slide 34 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align これがAlignの仕組みと、エモさの引き出し⽅です

Slide 35

Slide 35 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align ユーザーテストのようす

Slide 36

Slide 36 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align ユーザーテストのようす 10/27 21:00~22:00に決⾏ - 平⽇の暇な時間をアンケートし決めた時間 15⼈のテスター - 萩原、⼤垣の知り合いに協⼒してもらいました出会った⼈とどのような会話をするのか突然会話が切れたらどのような感想を持つのかの検証が⽬的 - 事後にアンケートを取りました。

Slide 37

Slide 37 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align ユーザーテストのようすユーザーテストの結果円滑にテストプレイを進められた - インストールまでのオペや⼤きなバグもなく終了⾃分たちでも課題を発⾒ - 後述有益なフィードバックも得られた- 後述

Slide 38

Slide 38 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align ユーザーテストのようす結果 - ⾃分たちの所感友⼈同⼠でマッチングするのも楽しいという発⾒ - 当初、友⼈同⼠はマッチングしないように設定をしていたがオペミスで友⼈同⼠がマッチング。それはそれで盛り上がることがわかったバッテリー帯の定義に修正が必要そうなことがわかった - 10%ごとのバッテリー帯を⽤意していたが、バッテリーは減らず会話が⻑く続きすぎることがわかった会話の種はやっぱり探すの難しそう - わかってはいたが、何を話していいのかわからない場合もそれなりに存在した友⼈や友⼈の友⼈など、ある程度の情報を持っている場合は話がかなり盛り上がることもわかったので、うまく相⼿の情報を扱えるような仕組みがひつようなことがわかった

Slide 39

Slide 39 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align バッテリー帯の説明バッテリー残量バッテリーの範囲[x%-y%] この帯の中でマッチング、帯から外れると会話終了 10% 20% 30% 40% 続く 0%-0%は実装上の理由で、100%は永遠にチャットができてしまうので使えない 10%-19%のバッテリー帯 (10%のバッテリー帯) 20%-29%のバッテリー帯 (20%のバッテリー帯) 30%-39%のバッテリー帯 (30%のバッテリー帯) ここが広すぎて会話が⻑すぎる

Slide 40

Slide 40 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align ユーザーテストのようす結果 - ⾃分たちの所感友⼈同⼠でマッチングするのも楽しいという発⾒ - 当初、友⼈同⼠はマッチングしないように設定をしていたがオペミスで友⼈同⼠がマッチング。それはそれで盛り上がることがわかったバッテリー帯(独⾃概念)の定義に修正が必要そうなことがわかった - 10%ごとのバッテリー帯を⽤意していたが、バッテリーは減らず会話が⻑く続きすぎることがわかった会話の種はやっぱり探すの難しそう - わかってはいたが、何を話していいのかわからない場合もそれなりに存在した友⼈や友⼈の友⼈など、ある程度の情報を持っている場合は話がかなり盛り上がることもわかったので、うまく相⼿の情報を扱えるような仕組みが必要なことがわかった

Slide 41

Slide 41 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align ユーザーテストのようす結果 - テスターからのフィードバック UIがポップでよかった！僕らが仮説として定義したエモさを体感できたみたい！ - あっ！ってなったらしい知り合い3⾚の他⼈1くらいの割合が意外と楽しかった思ったより楽しんでくれたみたいでモチベバク上がりした

Slide 42

Slide 42 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align ユーザーテストのようす結果 - 出てきた課題&仮説チャットながく続きすぎる問題 - 当初、僕らの予定では15分くらいつづける想定。実際には25会話中で10会話は10分~20分続いていた。そのうち、⾃⼰切断が4つ。⻑すぎるとだれてしまうフィードバックもあった。15分、意外と⻑いぞ..? 特定コミュニティの中でも盛り上がる仮説 - 当初は、全く知らない⼈と出会い会話することを想定。知り合い、あるいは顔は知っているくらいの間柄でチャットするのも⾯⽩いというフィードバックがあった。共通の話題があると話しやすいみたい。

Slide 43

Slide 43 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align ユーザーテスト2回⽬のようす

Slide 44

Slide 44 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align ユーザーテスト２回⽬のようす前回のユーザーテストでわかったことを改善し実験するために急遽決⾏

Slide 45

Slide 45 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align ユーザーテスト２回⽬のようす前回のテストからの修正点バッテリー帯を狭くした。前半5%/後半2% - 会話が⻑く続き過ぎた事例があったので、修正してみたコミュニティを1つに絞った(N⾼) - 知り合いとやっても楽しいというフィードバックがあったので、顔⾒知りの可能性が⾼まるようにした

Slide 46

Slide 46 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align ユーザーテスト２回⽬のようす結果出会い, 別れの流れは引き続き⾼評価、エモさを感じてくれた話題枯渇があったみたい - 同じコミュニティ内でも話題が枯渇するというフィードバックがあった Alignが話題をいかに提供できるかの仕組みづくりの必要性を強く感じたバッテリー帯: 5% → まだ⻑いかもしれない？ 2% → 挨拶で終わる - こんな感じの感想だった。↓がチャットの継続時間。バランス調整が難しい… 5%で10分以上つづいた部屋が4/8つ, 3分続かなかった部屋が3/8つ 2%で10分以上つづいた部屋が0/6つ, 3分続かなかった部屋が3/6つ

Slide 47

Slide 47 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align ユーザーテスト２回⽬のようす有益なフィードバックを得れたテストして改善サイクルを回していきます

Slide 48

Slide 48 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align 実装、どんな感じ？

Slide 49

Slide 49 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align 実装、どんな感じ？(フロントエンド編) Flutter - クロスプラットフォームフレームワーク Provider, StateNotifier packageを⽤いたMVVMアーキテクチャ FirebaseAppDistribution/DeployGateで配信 GitHubActions, Fastlaneで配信⾃動化

Slide 50

Slide 50 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align 実装、どんな感じ？(バックエンド編) Go⾔語 + gin(REST), fiber(WebSocket) まあまあきれいなCleanArchitecture GCP - AppEngine Standard/Flexible, Redis(Memorystore), MySQL(CloudSQL) 認証はFirebaseAuth/エラー監視はSentry

Slide 51

Slide 51 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align 開発など、どんな具合で進めていたの？

Slide 52

Slide 52 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align マイルストーンのふりかえり未踏jr開始時に建てていたマイルストーンユーザーテストチャット・マッチングのみの最低限 ݄ 中⾼⽣が集まるイベントにて宣伝⼈をガッとあつめテストをする ݄ 新機能らをリリースアクティブユーザー 1000⼈めざす ݄ 正式リリース UIなどをきれいにしたりなんなりする ݄

Slide 53

Slide 53 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align マイルストーンのふりかえり実際やってみて実装 ݄ null 実装 ݄ null 実装最後の最後必死のユーザーテスト ݄ 実装アプリを触ってもらってバグらせる会 ݄ null

Slide 54

Slide 54 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align マイルストーンのふりかえり⽬標のスケジュールには及ばなかったがテストプレイを実施して有益なフィードバックを得て改善まで出来た

Slide 55

Slide 55 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align 遅れた理由のふりかえりと、学び

Slide 56

Slide 56 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align 遅れた要因とそこからの学び要因最優先の⽬的を⾒失って頻繁に脇道にそれるスケジュール感をミスったおかげでモチベーションを殺した

Slide 57

Slide 57 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align 遅れた要因とそこからの学び最優先の⽬的を⾒失って頻繁に脇道にそれる今回、最も優先すべきだったのはバッテリー残量による新たな出会いと唐突な別れがエモい感情を引き起こすという仮説の検証だった新しい機能のアイディアが思いついたときには、しっかり話し合わずに (本当に必要かを吟味せずに)実装を開始してしまった → APIはあるけどアプリでは何も使われていないものが多数ある

Slide 58

Slide 58 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align 遅れた要因とそこからの学び最優先の⽬的を⾒失って頻繁に脇道にそれる最優先の⽬的を⾔語化、共有する ↑に必要な最低限の機能を⾒極める新しい機能を思いついても絶対に必要でなければストックしておく

Slide 59

Slide 59 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align 遅れた要因とそこからの学び理想をそのままスケジュールに落とし込んでしまった(3ヶ⽉遅れくらい) ⼤雑把なタスクの切りわけ。期限の設定・共有が雑or無スケジュール感をミスったおかげでモチベーションを殺した

Slide 60

Slide 60 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align 遅れた要因とそこからの学び細かくタスクを切り分け、期限を具体的に設定、共有するスケジュール感をミスったおかげでモチベーションを殺した

Slide 61

Slide 61 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align テストを踏まえた今後のAlignにおける課題・展望

Slide 62

Slide 62 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align 今後の課題・展望テストを経て⼤きめの課題がいくつか⾒つかったので改善したいバッテリー帯をどうするのか → ⾊々なバッテリー帯でテストを繰り返す可変にして課⾦も紐付けられるような仕組みも思いついたのでそれも合わせて検討していく会話の話題 → ユーザーのプロフィールの充実などの機能を検討している細かな修正もたくさんして試したいアプリのルール、複雑問題 → チュートリアル導⼊したい。が、アプリの⼿軽感を妨げるので、いい形を考えてテストしたい

Slide 63

Slide 63 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align

Slide 64

Slide 64 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align まとめ未踏jr期間内で成し遂げたことアプリコア機能の開発、全部出来た！ →ユーザー管理・バッテリーを⽤いたマッチング,チャットの実装が完了した。かなり完成度の⾼いものが出来たと⾃負しているので拡張し続けていきたい！ユーザーテストを⾏い有益なフィードバックを得ることができた！ →Alignの謳うエモさの実証に向けた第⼀歩！ユーザーテストを2回できたことで、テストのやり⽅にも知⾒が溜まったりしたので今後に活かしていく！フィードバックをもとに改善して再度ユーザーテストするサイクルを回せた！ →フィードバッグをもとに新たな仮説を⽤意し、再度検証するサイクルを回せたのでこの先も⽌めないで改善していく！

Slide 65

Slide 65 text

• 周りの半端ない⼈たちの活動を⾒てかなり刺激を得た。個性があってかつクオリティが⾼い… • PM関さんの軌道修正⼒にかなり助けられた半年だった。MTG後に⼤垣くんと毎回感動していた • 開発資⾦はかなりありがたい。サーバーをぶん回せるのは本当に助かる • 他PJのコードレビューとかも少しさせてもらったりできて、とても楽しかった Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align 萩原爽太未踏jrの感想まとめ

Slide 66

Slide 66 text

• 関さん(PM)の指摘がキレキレでとても助かった・参考になった(サービスの開発⼿法等) • CPU作れたり、ブラウザOS作れたり、リコーダー作れたり、⾃分ができないことができる⼩中⾼⽣がたくさんいて、⾃分もそういうスキルを磨いていきたいと思った Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align 未踏jrの感想まとめ⼤垣連

Slide 67

Slide 67 text

Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align (おまけ)おととい法⼈登記完了ここから、Alignを広げていきます応援・お⼿伝いお願いします！ (ツイッターをフォローすると情報が⼿に⼊るので是⾮!)

Slide 68

Slide 68 text

Align から始まる萩原爽太・⼤垣連 Twitterをフォローすると最新情報が⼿に⼊ります @align_one Align