blogcitrus+というバンドをやってます。平日昼間はインターネットの会社@紀尾井町でエンジニアやってます。この広告は、90日以上更新していないブログに表示しています。作ってみたので、その流れを書こうと思います。こんな風にYouTubeで動画を表示させずに音だけを流せるようになります。Extensionはこちら。作業中にBGMを聴きたい時はYouTubeをよく利用する方は結構多いと思います。簡単に曲が探せますし、勝手に次の曲が流れてくれますし便利ですよね。BGMを探しにYouTubeを開いたつもりが、ちょっと気が緩んでプロモーションビデオやバラエティ番組の動画を開いてそのまま鑑賞してしまい、気がついたら◯時間経っていたという経験があるのは僕だけじゃないはずです。あと、これは気が散るとは別の話ですが、BGMを聴くつもりでも、動画が大きく表示されてしまうので、会社で開くのは若干憚られるという場合もあるかもしれません。動画を見られない(=音だけ聞こえる)YouTube、欲しいですよね。playerこんなサービスがあったので、しばらく使っていましたが、連続再生機能が微妙だったり、ちょいちょい挙動がおかしくなるので、自分で作る必要があると感じました。Extensionを作ることにしました。Extensionを作ったのは初めてですが、かなり簡単に作ることができました。今回の記事では細かくは説明しませんが、作り方とかは以下のページが參考になると思います。ウェブストアにアップロードすればもう公開が完了します。ウェブストアで公開せず自分だけが使う場合はにはデベロッパー登録する必要すらありません。Extensionを作っていきます。manifest.jsonファイルを用意します。Extensionです。]}設定・説明や読み込みファイルを記述するだけです。content_scriptsのmatchesを指定することで、youtube内でのみ動作するようになっています。ここからCSSとJavaScriptを書いていくわけですが、始めに作る上で最低限のものしか作らないというルールを決めました。意識したのは↓この辺です。意識したこと対象ページを絞るあくまでYouTubeをBGMプレイヤーとして使うというユースケースを想定しています。いう動線なので、通らないページ(チェンネルページとか)はそのままで問題ありません。埋込み機能にも対応しないことにしました。デザイン面は多少妥協する今回は元のYouTubeでマークアップされているid,classを利用して見た目をいじるので、挙動がYouTube側のマークアップに依存してしてしまいます。最初はミュージックプレイヤーっぽい見た目にしようかなとか思ってましたが、関係するclassが増えてしまうと保守性が著しく下がるので、あくまで気が散る要因を除外できれば良しとしました。いいつつも、まあレイアウトがガタガタになってはテンションが下がるので、そのへんはバランスを考えつつという感じで。作業の流れでは何が我々の集中力を削いでいるんでしょう。動画ページで動画を再生するという順序の場合が殆どなので、上から順を追って対処していきます。この時点で、デベロッパーモードでExtensionを読みこみ、以降ソースに変更がある度にリロードをして動作確認をしています。※CSSを幾つかに分けて書いていますが、ファイルとしては1つです。sfujimaki/ListenTubeトップページまず、トップページの「おすすめ」エリア。BGMを探すためにYouTubeを開いたのに、楽しげな動画を沢山出してきて、我々の集中力を削ごうとしてきます。ここで動画をポチったら最期。そのまま数時間を失ってしまいます。none;}これですっきりしました。気を散らさずに検索アクションに入ることができそうです。検索結果一覧ページ観たい動画を選ぶページですので、ここは消すわけにはいきません。画像を小さくしたりしたいところではありますが...拘るとキリがないので、このままでよしとします。動画ページ問題はこのページです。気が散る要素で満ち溢れています。関連動画まず、問題はこのサイドバーです。トップページと同じく、楽しげな関連動画を表示して、我々の回遊率を高めようとしてきます。無意識のうちに目に飛び込んでくるので、気を許すといつのまにか動画を楽しんでいる自分がいます。削除...しようかと思いましたが、一応次のBGM選ぶときにあったほうがいい気がしたので、あまり目につかないページの下に追いやります。10px;}このようにCSSを当ててあげて、1カラムレイアウトにします。気が散りづらくなった気がします。コメントコメントもBGMを聴く上では必要ありませんね。気が散るというほどのものでもないかもしれませんが、まあどちらかといえば気が散る要因になるので消しましょう。そのまま残しましょう。これでだいぶすっきりしました。最後に動画プレイヤー部分に手を加えます。最初にCSSを貼っちゃいます。none;}やってることはコメントに書いてある通りです。要するにプレイヤーの面積を小さくした上で、動画が表示されないようにしています。プレイヤーを小さくしただけだと、広告動画が出た時に広告スキップボタンが押せなくなってしまうので、広告表示エリアも高さを合わせます。(そういえば、広告ブロックするExtensionとかもあるらしいですよ。)これでほぼ出来上がりました。ウィンドウ幅を変えても崩れなさそうです。サムネイルの挿入ただ、このままではサムネイルが表示されません。今回は最低限の物だけを作るポリシーで進めてきましたが、真っ黒のプレイヤーではちょっと寂しいので、サムネイルを表示する処理を書きます。最初、「JSでog:imageを取得して表示すればいいかー」と思ってましたが、ここで罠が。ExtensionのJSを再読込してくれません。JSで普通にog:imageをサムネイル試してみたところ、別の動画に飛んでも最初に取得したサムネイルがそのまま残ってしまいました。ソース上のog:image自体も書き換わらない模樣。何かしらの方法でページが遷移したことを検知して、画像URLを取得する必要があります。今回はDOMの変更を検知できるMutationObserverを使って、head内の変化を検知し、変化があったら画像を取得&挿入することにしました。MutationObserverの説明はこちら。MDNタイトル等どこか一箇所の変更を検知するようにしたかったのですが、なんかうまくいかなかったので、ちょっと雑ですがhead全体をみてます。強引な気もしますが、プラグイン読み込んだりするのは面倒なので、あくまで素のJSぱぱっと書ける範囲に留めておきます。遷移の度に何回か検知してしまうので厳密には「遷移を検知」とは違いますが...いいやり方ご存知でしたら教えてください。画像はog:imageを取得しようと思ってましたが、どうやら変わらないようなので、開いている動画ページのURLから動画IDを抜き出して、画像URL(https://i.ytimg.com/vi/動画ID/hqdefault.jpg)を取得します。遷移の度に、ビデオプレイヤー内にサムネイルを挿入します。Pjaxではなく普通にページを開いた時も、DOM生成のタイミングのズレでうまくサムネイルが挿入されてくれなかったりするので、setIntervalを使って、サムネイルが取得できるまで取得をし続けるようにしました。コードとしてはこんな感じです。playerContainerElement.firstChild);}これでサムネイルが表示されます。バランス等ちょっと惜しい感が否めませんが、その辺を解消しようとしたらコードが膨らんできてしまったので、一旦これで完成とします。(一応)ミックスリストでも崩れません。ウェブストアに登録する際に必要なアイコンを用意します。YouTubeカラーの背景に、適当に見つけてきたフリー素材のヘッドフォン画像を組み合わせました。ウェブストアこちらから公開するだけです。公開の仕方は、この辺を參考にしてみてください。NOTES基本的に、作業フォルダをzipに固めてアップロードして、幾つか情報を入力するだけで公開できます。どれくらい情報を作り込むかにもよりますが、今回は最低限の項目だけ埋めたので、10分もかからず公開まで完了しました。Extensionはこちらで公開されてるので是非使ってみて下さい。ウェブストア※拡張機能管理ページに行かないとOn/Offできませんが、どうしても動画を観たい時はシークレットウィンドウで観るか別ブラウザで観るといいと思います。あと、自分でも登録してみましたが、特にデータ吸い上げたりしてなくてもこんな表示がでちゃうんですね...これは紛らわしい気が。データ吸い上げたりしてないので、安心してください。最後に実際に書いたコードは大した量じゃありませんが、一応GitHubにも置いておきました。sfujimaki/ListenTube以上、いかがでしたでしょうか。作ったばかりなので僕自身まだそんなに使っていませんが、今のところ結構便利な気がしているので、皆さん是非使ってみてください。使っていて、不具合とか、「こうしたらいいんじゃない?」というのがあったら@macky256宛に是非お知らせください!こういう、「実装は楽だけど結構便利」的なものはどんどんつくっていきたいですね。8日目の記事で...2016-05-29ユーザーテストの見学会に参加して知った、テストの一連の流れ・コツをまとめました先日、友人に誘われてこのイベントに行ってきました。Fujimakicitrus+というバンドをやってます。http://citrusplus.jp平日昼間はインターネットの会社@紀尾井町でエンジニアやってます。読者になるcitrus+citrus+というバンドをやっています。月別アーカイブ参加グループテクノロジープログラミングインターネットはてなブログをはじめよう!sfjmkさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。