とりあえずこんな感じです
test pic.twitter.com/bSUltsrwTF
— seiya (@sk1121) 2017年12月5日
夜会社でモクモクしてる際に、みんなイヤホンをしてますが、
その時に同じ曲聴きながら仕事できたら素敵やんということで、遊び感覚で作ってみました。
(そしたら、思いの外デザイナーの方も巻き込みマジに作り込んでしまったのはここだけの話)
できること
- フリーテキストでのYoutube検索
- キュー機能
- 動画再生
- コメント機能
主な利用技術
基本的にやってること
Firebase Realtime Database
以下の値を管理し、各クライアントからその情報を参照しています。
- 再生されているyoutubeの動画ID
- 再生しているか一時停止しているか
- 選択されている動画リスト
- コメント
Firebase Realtime Databaeに関して、以前ざっくりまとめたので、
こちらを参照してください。
Youtube API
以下のAPIを取得しています。
React
各APIの操作と、ビューの描画はReactで行っています。
しれっとサービス上でルームとかも作れたりするので、ちゃっかりReact Routerも使ってます。
まとめ
FirebaseとYoutube APIを組み合わせるだけで、思いの外面白いアプリができました。
しかも、工数全然かからず機能の実装ができました。
というか、google様さま過ぎるw(8割firebaseのおかげと言っても過言ではない)
せっかくならビューはangularにすれば良かったw
Youtubeの規約の問題で再生できない動画があったり、
バグがあったり、パフォーマンスが著しく下がる時がたまにありますが、
興味あるからいましたら是非、ぽちぽちしてみてくださいw
(気が向いたら改修しますw)
ちなみに...
Atraeでは、モノづくりに熱中できる仲間を全力で探しております！
最近、会社の技術ポートフォリオも多様化してきており、
サービスのフェーズや性質、時代にあった技術を自分発信で導入してくださる方大歓迎です!w