【5ch_youtube_embed】ようつべ動画を埋め込み表示するスクリプト
この記事では、5ch掲示板にYouTubeのリンクが書き込まれている場合、その下に動画を埋め込んでくれるJavaScript「5ch_youtube_embed」について書きます。そのまま再生できます。
ウェブサイトに「JavaScript」を適用できるChrome拡張機能・Firefoxアドオン「Tampermonkey」を利用します。
通常、電子掲示板サイト「5ch」内に書き込まれたYouTubeのリンクは、リンクだけで埋め込み動画などは表示されません。実際にどんな動画か確認するにはリンクをクリックして開く必要があります。
本記事で紹介するスクリプトを導入することで、YouTubeのリンク（「youtube.com/watch?」や「https://youtu.be」）が書き込まれている場合、そのリンクの下に動画を埋め込んでくれます。
わざわざリンクをクリックしなくても、サムネイルやタイトルが分かるのでどんな動画か一目で確認できます。埋め込み動画なので、その場で再生できます。YouTubeページにアクセスして大画面で見ることも可能です。
本記事はスクリプト（JavaScript）を導入できるPCブラウザ向けです。スマホやタブレットではできません。拡張機能を適用できるAndroidブラウザアプリなどを活用すればできるかもしれません。
本記事ではスクリプトを適用するために「Tampermonkey」拡張機能を利用しますが、「JavaScript」を実行できる拡張機能であればどれでもOKです。使用している動画も撮影しました。
リリース元：greg10
記事執筆時のバージョン：0.4（2022年7月3日）
「Tampermonkey」のインストール方法
本題に入る前に、JavaScriptを適用できる拡張機能を導入します。今回紹介する方法は、拡張機能ではなくスクリプト（JavaScript）を使った方法なので、そのJavaScriptを実行できる拡張機能を入れる必要があります。
本記事では「Tampermonkey」拡張機能を利用します。Chromeウェブストアからインストールできます。
https://chromewebstore.google.com/detail/tampermonkey/dhdgff...
Firefoxをご利用の方は、以下からインストールできます。
https://addons.mozilla.org/ja/firefox/addon/tampermonkey/「拡張機能を追加」をクリックします。
拡張機能のツールバー内に追加されればOKです。
詳しい使い方については、以下の記事を参考にしてみてください。本記事は、既にインストールして、ある程度使い方を知っている前提です。
https://www.naporitansushi.com/tampermonkey/スクリプトのインストール方法
JavaScriptを適用できる拡張機能を導入できたら本題のスクリプトを導入します。以下のサイトからインストールできます。
https://greasyfork.org/ja/scripts/380701-5ch-youtube-embed「スクリプトをインストール」をクリックします。
「Tampermonkey」を導入している場合は、自動的に「Tampermonkey」画面が表示されます。「インストール」をクリックします。
使い方
「5ch」にアクセスします。スクリプトを導入する前に既に開いていた場合は一度リロードします。インストールした「Tampermonkey」アイコンをクリックして、「5ch_youtube_embed」が有効になっていることを確認します。オンになっていればOKです。
実際にYouTubeリンクが書き込まれているページを開きます。僕は普段5chを全く見ないので探すのに苦労しました。Googleで「“youtube.com/watch?" site:https://itest.5ch.net」と検索すると見つけられました。
スクリプト導入後はYouTubeのURL下部に、そのリンクの動画が埋め込まれます。タイトルやサムネイルを確認できます。
クリックすると再生できます。リンクをクリックする必要はありません。大画面で見たい場合はクリックすれば従来どおり新しいタブで開けます。動画プレーヤー内のYouTubeロゴをクリックしてもYouTube上で閲覧できます。
一時的に「JavaScript」を停止させたい場合は、「5ch」ページを開いた状態で「Tampermonkey」アイコン→「5ch_youtube_embed」を左クリックします。オンオフを切り替えられます。
【高度】埋め込み動画のサイズを変更する方法
デフォルトではスクリプト内のコードによって、横幅が320、高さが180サイズになるよう設定されていました。自分でコードを書き換える力がある場合、好きな動画サイズに変更できます。
Tampermonkey拡張機能アイコンをクリック→「5ch_youtube_embed」を右クリックします。左ではなく右クリックです。
スクリプトページが表示されます。コードがずらっと書かれていますが、その中にある「iframe.width = 320;」と「iframe.height = 180;」がサイズです。好きなサイズに書き換えます。
例えば、横幅を自動的にMAXにしたい場合、「"100%"」にします。パーセントを使う場合、前後に「"」記号を入れます。高さは適当に「650」とかにしてみました。
変更できたら、上部のファイル→「保存」をクリックします。ショートカットキーのCtrl+SでもOKです。
埋め込み動画のサイズが変わります。変更前に開いていた場合は一度ページをリロードする必要があります。
指定したサイズや動画の比率によってはサムネイルが見切れることがあります。いい具合に調整してみましょう。
弄りすぎておかしくなった場合や、やっぱりデフォルトに戻したい場合は、コード画面→上部の「ファイル」タブ→「変更内容を破棄」を押すとデフォルトにリセットしてくれます。
スクリプトの削除方法
「Tampermonkey」アイコンを左クリック→「ダッシュボード」をクリックします。
インストールしているスクリプトが一覧表示されるので、「5ch_youtube_embed」スクリプトを探して、右端にあるゴミ箱アイコンをクリックします。
【余談】関連スクリプトの紹介
アンテナサイトをスキップするスクリプトです。
5ch内の外部リンクをクリックした時、「別のサイトにジャンプしようとしています。宜しければ上記のリンクをクリックしてください」ページを経由せず、直接開いてくれるスクリプトです。
感想
以上、5ch掲示板のYouTubeのリンクを埋め込み動画にしてくれるJavaScript「5ch_youtube_embed」についてでした。
とりあえず入れておけば便利になる系ですね。こういう作業の手間に対して得られる恩恵が大きい系は好きです。導入手順が複雑で難しいのは、無事導入できた時とんでもなくうれしいですけどね。