16bit!

エンジニアじゃなくなっちゃった人が何かを書くブログ

【js】milkcocoaを使って「見てるYoutubeの動画が勝手に同期されるページ」を作ったよ

先日、milkcocoaがパワーアップしたと聞いたので、またちょっと遊んでみました。
ただし、パワーアップした部分の機能は全く使っていませんww

milkcocoaとは

https://mlkcca.com/

BaaS(Backend as a Service)に分類されるサービス。
Javascriptを1行書くだけで、データアクセス周りのバックエンドを肩代わりしてくれるというものです。
アクセスの方法もシンプルで分かりやすい(APIのドキュメントも結構充実してる)のと、
複数端末からの同時アクセスでもリアルタイムに同期されるのが素晴らしいです。
ほんとにビックリするくらい簡単なので、趣味プログラミングやプロトタイプ作成にはもってこいかと思います。

つくったもの

MilcoTube

milkcocoaとYoutubeのiframe埋め込みAPIを使って、
「誰かが見ている動画を変更したら同時にアクセスしている他の人が見ている動画まで変わってしまうページ」を作りました。(プロトタイプですが)

上記からアクセスできるので、せっかくなので動画を差し替えるなりチャット欄にコメント残すなりしていただけると幸いです。


なお、正直何の役に立つのか分かりませんが、思いつくものとしては以下のような使い方が出来るかなぁと。

何らかの作業用BGMが常に流れてるページ
動画はリピートされるようになっているので、作業用BGMとして何かの動画を流しておいて、誰かがBGMを差し替えたいなと思ったら他の人のも変わる、という使い方。
作業用BGMって、「正直何でも良い」って人も結構いると思うんですが、そういう人にとっては毎回探すのも面倒なので、誰かがセレクトした楽曲が常に流れているページ(しかも時々勝手に変わる)というのはちょっと便利かもなと。

職場とかで、「作業用BGMは欲しいけど、探すのはめんどくさい」という人が何人かいたら、これを使うといいかもしれません。
また、休憩時間を各自で勝手に決めて取っているような場合は、チャット欄でコミュニケーションが生まれるかもしれません。

同じ動画を見ながらチャットしてコミュニケーションを楽しむページ
面白いと思った動画などをコミットして、それを見ながらチャットするという使い方。
お気に入りのお笑い動画とかを見て欲しい時の、
「あれ面白いから!URL(または検索ワード)送るから見て!」→「見たよ!面白かった」
というやりとりが1ページで完結するから、ちょっと便利かも。
上記と違って、見ながらチャットもできるし。

ただ、動画IDが連携されるだけでシークバーとかは同期されないので、全く同時に見ながらリアルタイム実況みたいなことはやりづらい。
別々の場所にいる人が映画とかアニメ見ながらリアルタイムにチャットできたら結構いいかなと思うんですが、そういう使い方にはやや不便です。
huluとかを完全に同期して見れるととても良いと思うんですけどねー。

プロトタイプには実装しなかったけどあったらいいなと思うもの

プロトタイプには付けていませんが、チャンネル機能があるといいなと思います。
ユーザー管理を付けてユーザーごとにチャンネルを持てるようにするとか、
ジャンル毎にチャンネルを作っておいて、同じ作業用BGMでもジャンルや傾向で分けておくと、
「BGMなんでもいいけど、うるさいのは集中できないから嫌」みたいなのにも対応できるので。

あとはYoutubeの動画を検索できるようにもなっていると便利、というかそれが無いと実質Youtubeと2タブ開いてないと何も出来ないのですが、
動画検索の方のAPIは埋め込みのAPIよりもややこしそうだったので実装できていません。

感想

正直何の役にも立たないものを作ったなぁと思っているのですが、何の役にも立たないものを作るのって楽しいです。
もちろんプロのえんじにゃーとしては役に立つもの、価値があるもの、メリットがあるものを作るのが当然なのですが、
趣味プログラミングで何の役にも立たないものを作るのはそれはそれですげー楽しい。
誰か一緒に趣味プログラミングしてくれる人いないかなぁ。

Youtubeのiframeの埋め込みの部分とか細かいソースの話は時間があれば今度書きます。


終わり。