youtubeを観ながら快適に寝落ちできるchrome extensionを作った
これ作ってみたよ、って話です
まだ審査中っぽいです。4日の0時までに公開できたらここに貼る。
公開されました(2017/12/02 20:50追記)
みなさんこんにちは
ブログ力爆age Advent Calendar 2017の4日目の記事です。
ブログを書くのはなんと半年振りらしいです。
近況報告的なものはfacebookで行っていますし、仕事辞めてないですし、改まってエントリーに書くことないんですよね。
社会人になったら出来るだけリアルタイムのSNSから身を遠ざけて、こういったブログでそれっぽいことを発信していきたいのでブログ力爆揚げしていきたいと思います。
YouTube観てますか？
最近はずっとYouTubeを観ています。暇さえあれば。
おすすめのYoutuberは「きまぐれクック」のかねこさんです。
寝転がりながらYouTubeが観たい
YouTubeはリラックスしながら観たい、何か作業しながら観たい。
でも動画が終わるたびに次の動画を開いたり、わざわざプレイリスト作って登録して、観終わったら削除して・・・。
みたいな作業したくない！もっと直感的に楽々YouTubeを楽しみたい！
そんな思いで、Google Chromeの拡張機能を作ってみました。
まったくの初心者でしたが単純でした
ブラウザの拡張って難しいんだろうなあ、って思っていましたが全くそんなことなかったです。
基本的には、HTMLとCSS、JavaScriptしか使えません。Chromeであればなんでも動くように作らないとならないからね。
そして必須なのはmanifest.jsonというマニフェストファイルのみ。これが存在するディレクトリをChromeに読み込ませると、すぐに拡張機能だと認識してくれます。
詳しくはここら辺を見てください。ちょっと動くくらいのものは5分で作れました。
What are extensions? - Google Chrome
実際どんなもの作ったの
僕のYouTubeライフに必要な機能を作ったため、完全に僕得です。
僕「なんか作業するのにサブモニタで動画流しておきたいな。」
「YouTubeの急上昇ランキングを適当に観ていくか～。」
「こんなときは拡張機能の、"autoPlaylistForYoutube"だね。」
僕「まずは適当に見たい動画を新しいタブで開いていって～(ホイールクリック)」
僕「右上に追加した"autoPlaylistForYoutube"のボタンをクリックして、再生リストを作るボタンをクリック。」
僕「新しいタブが開いて、最初に開いた動画の再生が始まったぞ！」
僕「あ、最初の動画が終わった。」
「いつもならこのたびにタブ切り替えるんだけど・・・？」
僕「自動的に次の動画が始まった！やったぜ！」
「これで作業が捗る！(minecraft)」
以上です
これが僕のYouTubeライフに必要だったんです。
画像ではタブを開きっぱなしにしていますが、もちろん拡張機能で新しく開いたタブ以外をすべて閉じても動作しますし、簡単な作業用BGMを作るのにも使えます。
フルスクリーンで再生しても次の動画に自動的に遷移するので、パソコンから離れても連続再生されます。
寝落ちに使えます。
YouTubeの再生リスト機能と違う点は、
・ホイールクリックとはいえ、ワンクリックで動画を決定できる
・揮発性メモリを使っているので再生リストを作ったり、消したりの作業がない
です。
機能は本当にこれだけです。
「あ、便利だな」って思ってくれるのは多分ものすごく少数だと思うのですが、そういう方々の痒いところに手が届けばいいな、と思っています。
ソースコード的な
まずはマニフェスト
特に解説することもないんですが、
「新しくタブを開く機能」「開いてるYouTubeの動画のIDを記憶する機能」を実装するために、permissionsのところで"tabs"と"storage"を指定した。
結構クロスドメイン制約が厳しくて、外部のスクリプトを利用するにはすべて記述しなくてはならなくてYouTubeのAPI関係を明記してます。
ボタン押したら開く小窓？のHTML。
ボタンと、何も見つからなかったときにテキストを表示するためのエリアを用意してる。
これがメインのjsになります。
自分で見直したときのためにコメント書きまくりなので見りゃ分かるわ、って感じなんですが。
16行目のchrome.tabs.queryと65行目のchrome.storage.local.set、66行目のchrome.tabs.createがchromeAPIのメソッド。
これらは全部非同期で実行されちゃうのでコールバック関数の中にすべての処理を書く必要があります。
もっといい方法あった気がするけど・・・。
それぞれの関数を見ていくと
Action()
なんかボタン押したときにいろいろするやつ
配列の初期化して、chrome.tabs.queryで返ってきたタブの情報をさまざまな関数に投げながらこねくり回して行きます。
isYoutube(element, index, array)
開いてるタブのURLをすべて格納してる配列をYouTubeのものの要素だけにするフィルタ
去年、プロジェクト実習PでJavaScript書いてるときから「なんかあったら使ってみたい！」って関数だったので効果的に利用する機会があって嬉しかった。
toYoutubeId(youtubeUrlList)
開いてるYouTubeのURLを格納している配列
から
開いてるYouTubeの動画IDを格納している配列
にして返します。
YouTubeのAPIは動画IDだけを投げる必要があったので実装した。
めっちゃ簡単な正規表現で拾ったのでバグありそう。まあバグったリクエスト送ってもYouTubeAPIはエラー時の動作も作れるから平気平気。
YouTubeのURLのパターンとして
https://www.youtube.com/watch?v=VuYhbolXGnI&t=50s
みたいに?v=の直後に動画ID
そして末尾に&t=のようにオプションがついていくので
【?(任意の1文字以上)=】と【&(任意の1文字以上)=】をアスタリスクに置換してから、splitメソッドで分割した。
で、2つ目の要素が動画IDだ！みたいな実装なのでたぶん絶対バグるパターン残してる。
正規表現と戦うの嫌だから簡単なのでいいんだよ！簡単なので！
openPlayer(youtubeIdList)
タブを開く。
chrome.storage.local.setはオブジェクトしか引数に出来ないので、配列をオブジェクトの中に入れてみた。
もっとスマートな方法ありそう。
拡張機能であたらしく開くタブ。
YouTubeのプレイヤーを設置するエリアと、再生する動画のURLを貼るエリアを用意しただけ。
これYouTubeのAPIリファレンスほぼそのまんまなので説明することないです。
chrome.storage.local.getで、popup.jsで保存した動画のIDが入ったオブジェクトを受け取る。
コールバック関数の中で、プレイヤー作ったり、その中身をplaylistに入れていく。
という感じです。
ソースコード貼る意味あった？
ソースコード貼って、それっぽいこと書く記事が１番ブログ力あるっぽいじゃん？
明日(5日目)は、ファンに惜しまれながらも今期で引退を表明している、マグロ錬金術師のu_yuzuponさんです。
終わりです。
この間、眼鏡を新調しに行ったのですがちょっと派手目なギラついた眼鏡買おうとしたら、お姉さんに年齢を訊かれて
「来年就職ですよね？こっちの方がいいですよ」
みたいな感じで遠回しに似合ってないと言われて、勧められたやつ買いました。
どうもインキャぬまたです。
