雑食エンジニアの気まぐれレシピ

日ごろ身に着けた技術や見知った知識などの備忘録的なまとめ．主にRaspberry Piやマイコンを使った電子工作について綴っていく予定．機械学習についても書けるといいな．

【2窓用】複数のYouTube生放送(アーカイブ)の再生位置を揃えるツールを作ってみた

Webサービス React 2窓

世間の色々もあって今年のGWはすごく時間を持て余しそうだったので，
「素人が1週間でWebサービスつくってみた」
的なチャレンジをやってみました．唐突に．

アイデア出し含めての1週間チャレンジなので，ハッカソンみたいなものですね．
最終的にこんなサイトができました．
(※随時Update予定なので，本エントリと噛み合わない部分があるかもです．)
NiMado
NiMado(https://nimado.now.sh/)

作ったものについて

はじめに完成物について紹介しておきます． これは複数のYouTube動画に対して，それぞれの再生時間が揃う位置のURLを返してくれるツールとなります．

何に使うの？

私自身が最近VTuberの生配信(YouTubeLive)を見ることが多いのですが，リアルタイムで追えずにアーカイブで追うことが良くあります．
ただ，コラボなどで複数視点の動画が上がっていた場合に

  • 複数の視点を2窓して楽しみたい

とか

  • この瞬間の別の人の視点はどうなってたんだろう

とか思うことが多々ありました．そんな時にシークバーをうまく使って再生位置を揃える作業が必要になるのですが，本ツールはそういった煩わしさを解消してくれるものになります．

なお先人の偉業としては，
https://chrome.google.com/webstore/detail/youtubeliveclock/chpodcedholiggcllnmmjlnghllddgmj?hl=ja
様の生配信時の実時間を表示してくれるChrome拡張などがあります．
非常に良いものなのですが，私がFireFox派なのと，タイミングを揃える機能はなさそうなので今回のツールを作るに至りました．

また本格的にに複窓を嗜まれたい場合は，
https://piporoid.net/NMado/usage.html
様のN窓という神ツールもあります．

技術的な話

フロントエンドはReact.jsで，バックエンド(ルーティングとか)はNext.jsで作りました．
(まだ用語に自信がないので，間違っていたらすみません．)
デプロイ先のプラットフォームはZeit nowです．
YouTube動画の投稿時間などの情報は，YouTube Data API v3のVideosカテゴリのAPIを使ってます．
https://developers.google.com/youtube/v3/docs/videos?hl=ja

動作フローはこんな感じ．

f:id:shikky_lab:20200515053504p:plain
動作フロー
YouTube Data APIのためにAccessKeyが必要なので，ユーザが入力したデータを一旦サーバで仲介しています．その後の再生位置を揃えるための計算はブラウザ内で完結できるので，⑤にて処理したのち，結果を埋め込んだURLをユーザに提示しています．

ちなみに，動画の投稿日時は"snippet.publishedAt"パラメータで取得できますが，これは投稿時間であって，生放送の開始時間ではありません．
これが一週間チャレンジの終盤で発覚して詰みかけたのですが，下記方法で開始時間を取得することができました(公式リファレンスには見つからないですが)．
YouTube Data API v3でライブ配信の状態を取得する - WEBサイト開発日記
めちゃくちゃ助かりました．感謝．

作ったもの紹介はこんなところでしょうか．UIや機能，バグ修正など不足しているところはまだまだありますが，ひとまず一週間の成果ということで．
今後少しずつUpdateしていきます．少なくとも3つ以上の動画に対応させるところまではやりたいですね．

一週間チャレンジについて

さて，ここからは一週間チャレンジの内訳について書きたいと思います．

当方のスキル・経験について

"素人が一週間で"以下略チャレンジですが，素人の基準は人によって異なりそうなので，私の経験やスキルについてサクッと書いておきます．

  • プログラミング全般について
    • 趣味プログラミングは10年程度．主な言語はC/C++/Python．
    • 業務でのプログラミング経験は3年程度．使用言語はJava．
  • Web関連の知識・経験について
    • WebページがHTML/CSS/JavaScriptで構成されていることは知っている，程度
      • バニラなHTML/CSSはほんの少しだけ書いたことがある(数時間)
    • フレームワーク全般に関する知識は皆無

こんな感じで「プログラミング経験はそこそこあるが，Web関係には一切携わっていない」って感じの素人です．

一週間チャレンジの工数内訳

かけた時間の内訳はこんな感じでした．

  • 日数 ： 8日
    • 途中，ぽんぽこ24 vol4を丸一日追ってたので，実質7日ということで
  • かけた時間：45h
    • アイデア出し：5h
    • 環境構築：8h
      • zeit nowにたどり着く前にGCPでサーバ立てたりしたので，若干膨らんでたり．
    • Reactなど調査&お勉強 ： 6h
    • 実装：26h
      • 実際は実装中にお勉強することが多かったので，分け方は微妙かも．

一日ごとの作業内容や進捗は毎日つぶやいてたので，下記ツイートツリーで辿れます．

おわりに

今までハッカソンのようなものには興味はもちつつも，実際にやったことはありませんでした．
今回のチャレンジはまさにひとりハッカソンと呼べるもので，アイデア出しからプラットフォームの選定，お勉強，実装，公開までを凝縮したとても有意義なチャレンジでした．
めちゃくちゃ楽しかったので，今後もこういったチャレンジを定期的にやっていきたいですね．
それでは．