フロントエンドLT大会2020-12-02.pptx__1_.pdf

Transcript

1. 遠距離の彼女と同じ部屋でyoutube 見てるかのようなアプリ作った話❤
 フロントエンドLT会 vol.2 - 2020冬まつり
 2020.12.02
 らいう（石橋　龍）
 1
 @Mr_1484
2. 自己紹介
 （らいう）石橋　龍
 - ID
 - Github：Raiu1210 
 - Twitter：@Mr_1484 
 - Work at
 - 株式会社 Fusic （フュージック） 
 先進技術部門部所属 
 - 機械学習チーム　エンジニア 
 - Skill
 - Python／Vue／React／Node／PHP／etc 
 
 
 2

3. 宣伝
 彼女募集中
 
 3

4. Pointが複数ある場合
 作ったアプリの概要
 Point 2
 作るに至った経緯
 Point 3
 ちょっとtechな話
 4
 Point 1

5. 01 作ったアプリの概要

6. 作ったアプリの概要

7. 遠距離の彼女と同じ部屋で youtube見てるかのようなア プリ話❤ 

8. DEMO
9. 02 作るに至った経緯

10. 作るに至った経緯
 • 友人に彼女ができる
 ◦ 大学卒業後は彼女とは遠距離になることに
 ◦ 遠距離でも一緒に遊べるような物が欲しい
 ◦ youtubeを部屋で一緒に観てたようなUXをwebで実現できないか
 ◦ 2人で共同開発する
 
 10
 ワイ 幣友人カップル
11. 03 ちょっとtechな話

12. 全体構成
 • hosting
 • realtimeDB
 ◦ 動画ID
 ◦ ステータス
 ◦ 再生時間
 ◦ 移動状況
 12
 Host Audience Audience
13. いいところ
 • 動画系のサービスだけど、サーバ側？はあまり回線を圧迫しない
 ◦ 動画はクライアントとyoutubeが通信をして受け取る
 ◦ 動画の再生位置や状況をrealtimeDBで同期しフロントでAPI経由で操作
 • LINE電話でも似たような機能があるけど、リンクだけで共有できるMOONの方が便利な気がする
 ◦ 例えばビジネスユースだとしたら、わざわざLINEで友達になるのもねぇ...
 • 使ってて楽しい、いろいろユースケースがありそう
 ◦ 有名人が観てる動画をリアルタイムで一緒にみる
 ◦ bgm選ぶのだるいから誰かのを一緒に聞く
 13

14. future work
 • サイト内での動画検索機能
 ◦ いちいちyoutubeのURLコピーしないと行けないからだるい
 • 通話機能
 ◦ webRTCとかで通話機能も内包されてたらいいよね～
 • デザイン改修
 ◦ 機能ばっかいじってついつい後回しにしがち...
 14

15. 以上！ 夜寝る前に彼女と
 これ使えたらなぁ...

16. まとめ
 ・Vue+firebaseは便利だね～
 ・無料プランでもいろいろ作れる（100人以上の同時接続を捌くにはblaze plan） 
 
 彼女欲しい...
 16

17. ご清聴いただきありがとうございました
 Thank You We are Hiring !
 https://recruit.fusic.co.jp/