拡張機能とは、既存のプログラムに新しい機能を追加するプログラムファイルです。
インストールされた拡張機能はブラウザ上で動作し、生産性の向上、効率化、ブラウザを快適に使用したりなど、様々な便利機能を追加することができます。
また、種類も豊富で自分に合ったカスタマイズができる点も評価ポイントです。
今回は仕事をするうえで非常に便利な拡張機能や、YouTube視聴時に役立つ拡張機能を紹介いたします。
今回ご紹介する拡張機能はPC版のChromeブラウザでの解説になります。
スマホではご利用できないのでご注意ください。
また、今回紹介する拡張機能はMicrosoft Edgeでも追加することは可能ですが、Chromeブラウザでの利用を前提に作られた機能ばかりなのでEdgeでの動作は保証しません。
ColorZilla
WebデザインやWebコーディングで配色に困ったことはありませんか？
他のWebサイトの配色を参考しているときに、気になった配色のカラーコードを取得したいと思ったことがあると思います。
今回はこちらの「ColorZilla」を使えば簡単にWebサイト上のカラーコードを取得できる拡張機能を紹介します。
「ColorZilla」の主な機能は以下の通りです。
- ワンクリックでカラーコード取得
- 取得したカラーコードの履歴を保存
- 表示されているページの配色パターンの確認
- グラデーションCSSの作成
「ColorZilla」のダウンロードは以下のボタンから可能です。
カラーコードの取得
「ColorZilla」で1番利用する機能はおそらくこの機能です。
「ColorZilla」をインストール後、メニューを開くと「Page Color Picker Active」をクリックします。
「Page Color Picker Active」をクリックすると、画面上部に下の画像のようなバーが表示されます。
この時にマウスカーソルを動かし、取得したい配色をクリックすると、クリックした色のカラーコードをクリップポートのコピーされるので、そのままカラーコードを貼り付け（ペースト）するだけです。
カラーコードの履歴を保存・呼び出し
取得したカラーコードは自動的に履歴に保存され、いつでも同じカラーコードを呼び出すことができます。
履歴を確認するには「ColorZilla」メニューの「Picked Color History」を選択します。
下記のようなウィンドウが表示されるので、今まで取得したカラーをもう１度使用したい場合には非常に便利です。
ただし、右下の赤い×を選ぶと今までの履歴が失われてしまうので注意してください。
ページの配色パターンの確認
１か所ではなく、サイト全体のカラー情報を取得したい場合は「Webpage Color Analyzer」を使用しましょう。
「Webpage Color Analyzer」をクリックすると、下記画像のようなウィンドウが表示されるので、取得したい配色をクリックするとクリップポートや「Picked Color History」にカラーコードが保存されます。
ちなみに取得できるカラーはページ内要素にある色だけなので、画像などのカラーは取得できません。
画像内のカラーを取得したい場合は最初に解説した「Page Color Picker Active」を利用してください。
グラデーションCSSの作成
こちらの機能はサイトから色を取得するものとは別物ですが、グラデーションカラーを作成するには便利な機能です。
「ColorZilla」のメニューから「CSS Gradient Generator」をクリックします。
以下のようなウィンドウが表示されます。
左上の「Presets」から使用したいカラーをクリックし、その下のつまみで配色のバランスを整えます。
グラデーションの配色が決まったら右側の「CSS」をコピーして、各々CSSデータに書き込んでください。
各ブラウザに対応できるようにCSSが調整されているのも便利ですね。
AwesomeScreenshot(素晴らしいスクリーンショットとスクリーンレコーダー)
こちらの拡張機能は画面上を録画してくれたり、Webページ全体をスクリーンショットを撮ってくれる拡張機能です。
この拡張機能でよく使う機能が「フルページ」の画面キャプチャーです。
ショートカットキーで使う普通のスクショとの違いは、通常のスクショは画面内に収まっている範囲内のみの撮影ですが、こちらの拡張機能はWebページ全体をスクショしてくれます。
例えば、Googleの検索結果を「AwesomeScreenshot」の「フルページ」で撮影すると、下記のように縦長いページを画像1つにまとめてくれます。
Webサイトを丸々画像がしたい時に便利ですね。
使い方は非常に簡単で、拡張機能インストール後、右上の拡張機能一覧から「AwesomeScreenshot」をクリックし、「キャプチャ」タブを選択後「フルページ」をクリックするとWebページ全体をスクショしてくれます。（サイトによってはスクショできないページもあります）
Dark Reader
Dark Readerはあらゆるサイトをダークテーマに変更してくれます。
ダークテーマを適応させると自動的に背景色を黒、文字色を白に変更し、目の負担を軽減してくれます。
ただし、サイトによっては配色がおかしくなるので、その場合は「Alt+Shift+D」同時押しでダークモードをOFFにできます。
また、設定画面で特定のサイトのみダークテーマを適応外にすることも可能です。
DeepL翻訳（ベータ版）
DeepL翻訳とはGoogle翻訳以上に自然な言葉で翻訳してくれる高性能の翻訳拡張機能になります。
使い方は簡単で、ブラウザ上で翻訳したいテキストを選択すると「選択したテキストを翻訳」というアイコンが出るので、そのアイコンをクリックすると日本語に翻訳されたウィンドウが表示されます。
翻訳結果はGoogle翻訳以上に自然な言葉なので、これでどんな英語サイトも怖いものなしです。
Auto Quality for YouTube
YouTubeで動画を再生すると勝手に画質が落ちて、毎回歯車のアイコンをクリックして画質を上げる面倒だなと思ったことはありませんか？
今回ご紹介する「Auto Quality for YouTube」はそんなわずらわしい操作を解消してくれる便利な拡張機能になります。
「Auto Quality for YouTube」インストール後、メニューから「オプション」をクリックします。
別タブで「Auto Quality for YouTube」のオプション画面が表示されます。
そこに「Default Quality」の項目から、任意の画質を選びましょう。選択後は左下の「Save」ボタンをクリックすれば設定完了です。
設定後、YouTubeで動画を再生すると自動的に設定した画質からスタートします。
ただし、YouTubeの歯車メニューから手動で画質を変更することができなくなります。
仮に手動で画質を変更してもすぐに「Auto Quality for YouTube」で設定した画質に戻ってしまう点には注意してください。
Never Ending Netflix
Netflixを契約している方は、OPやEDを毎回手動で飛ばすのが面倒だと思ったことはありませんか？
また、ずっと視聴していたら画面に「まだ見ていますか？」という確認画面が出てきて動画が止まってわずらわしい思いをしたことがあるかと思います。
今回ご紹介する「Never Ending Netflix」は「まだ見ていますか？」の確認画面を削除してくれたり、OPとEDを自動的にスキップしてくれます。
拡張機能をインストール後、右上に表示されるアイコンをクリックすると以下のようなウィンドウが表示されます。
ほとんどの項目が日本語に訳されていますし、設定もチェックをつけるだけで非常に簡単です。
設定が完了したあとは通常通りNetflixをご視聴いただくと、OPやEDを飛ばして続けて動画を視聴できるようになります。
Video Speed Controller
YouTubeには元々再生速度を最大で2倍速にしたり、逆に0.25倍と遅くする機能があります。
しかし、倍速機能を使ってもそれでも遅いと感じたことはあると思います。
私も最近はゆっくり解説チャンネルを視聴しているのですが、もう少し早くしたいなと思ったことがあります。
今回紹介する「Video Speed Controller」は動画速度を最大で16倍にしてくれる拡張機能になります。
上記のボタンから「Video Speed Controller」インストール後、ブラウザ右上の拡張機能から「Video Speed Controller」をクリックし、「Settings」をクリックします。
設定画面を開くと下記のようなタブが開きます。
ショートカットキーを設定したら準備完了です。上記画面は私が設定しているショートカットです。
Gキーで動画を瞬時に倍速にし、必要に応じてAキーやDキーで速度を調節しています。
等倍速に戻したい場合はRキーを1回押すだけで速度をリセットできます。
その他の設定は必要に応じてチェックを入れましょう。
また、この「Video Speed Controller」はYouTubeのだけでなくニコニコ動画やNetflixといった他の動画サイトでも適応できます。
h264ify
YouTubeを再生すると、少し重いと感じたことはありませんか？
これはYouTubeが動画を再生する時にハードウェアアクセラレーションに対応していない「VP8」や「VP9」のコーデックで再生しているためです。
このコーデックだとGPUではなくCPUで処理して動画を再生します。
最近のCPUは性能が高いので特に気にすることはありませんが、少し前の世代のCPUを使用している方は動画を重く感じたり、途中で止まったりしてしまいます。
そんな時は「h264ify」の拡張機能をインストールしてみましょう。
こちらの拡張機能は、動画再生時のコーデックをハードウェアアクセラレーションに対応している「H.264」で再生してくれる機能になります。
「H.264」だとCPUだけでなく、GPUの力も使って動画が再生できるのでスムーズに動画を観ることができるようになります。
使い方は「h264ify」をインストール後、拡張機能のメニューから「Enable h264ify」にチェックを入れるだけです。
設定後、YouTubeは再生してみましょう。
動画再生中に動画内を右クリックし「詳細統計情報」をクリックします。
すると画面左上に下記のような表示が出ます。
この表示の「Codecs」の表記が「avc1」「mp4a」になっているのを確認してください。
もし表記が「vp09」の場合は1度更新ボタンを押してください。
なお、設定前は下記のような表記になっています。
その他にも、フルHD再生時のフレームレートを30に制限してくれる「Block 60fps video」があります。
上記のような設定でも動画が重い場合は試してみてください。
Flow Chat for YouTube Live
普段から動画や生放送LIVEを観る時はニコニコ動画を使用していた方は、YouTubeの生放送だとコメントが流れないし少し物足りないと感じたことはありませんか？
ご紹介する「Flow Chat for YouTube Live」はYouTubeの生放送で入力したコメントを画面上に流してくれるプラグインになります。
なお、この拡張機能はchromeウェブストアでは配布されていません。
導入するには「GitHub」から直接ダウンロードし「パッケージ化されていない拡張機能を読み込む」必要があります。
まずは下記リンクからGitHubサイトにジャンプします。
移動後、右サイドにある「Release」をクリックします。
すると画面内に「archive.zip」があるのでそのデータをダウンロードし、解凍します。
解凍したら「app」フォルダーが出現します。
続けてChromeを起動し、「設定」から「拡張機能」のページを開きましょう。
chrome://extensions/ ←こちらをクリックしても「拡張機能」のページを開くことができます。
拡張機能ページに移動後、左上の「パッケージ化されていない機能を読み込む」をクリックします。
フォルダ選択画面が表示されるので、先ほど解凍した「app」フォルダを選択し「フォルダーの選択」をクリックします。
これで「Flow Chat for YouTube Live」のインストールは完了です。
インストール後、LIVE放送や過去の生放送を視聴すると、画面上にコメントが流れるようになります。
Enhancer for YouTube
こちらはYouTubeに多機能を追加する大型拡張機能です。
あまりにも多機能なので、中には今まで紹介した機能と被るものがあるかもしれませんが、ひとつずつ紹介していきます。
テーマ変更
YouTubeの配色を変更することができます。
公式のダークテーマか、「Enhancer for YouTube」が用意した別バージョンのテーマ、自分でテーマ色をカスタマイズできます。
動画コントロール
動画下にコントロールボタンが表示されます。
各機能を左上から順に説明すると
- 動画のループ
- 動画の一時停止
- ポップアッププレイヤーで順序を反転させて再生
- 音量をブーストON/OFF
- チャンネルをホワイトリストに追加
- 広告削除
- 注釈の表示/非表示
- シネマモードのON/OFF
- 動画プレイヤーの拡大/縮小
- ポップアッププレイヤーで再生
- 再生速度を下げる
- ボタン上でホイールを動かすと動画速度変更
- 再生速度を上げる
- フィルタの有効/無効
- 動画を左右反転
- 動画を上下反転
- 動画をスクショ
- YouTubeのショートカットリストを表示
- カスタムスクリプトを実行
- 設定ページを開く
とかなり多彩です。
広告削除
名前の通り、動画広告が流れないようになります。
YouTubeは皆様が視聴している広告費で運営しています。
もし広告を削除したい場合はこちらの機能は使わず、YouTube Premiumに登録するようお願いします。
画質設定
先に紹介した「Auto Quality for YouTube」と被りますが、こちらの拡張機能にも画質を自動で変更してくれる機能があります。
既に「Auto Quality for YouTube」を導入している場合はOFFにしても問題ありません。
再生速度
こちらも「Video Speed Controller」で紹介した機能と被りますが、こっちの場合はマウスホイールで速度を変更するので少しだけ操作が違います。
また、こちらの拡張機能の速度設定はYouTubeのみなので、別サイトの動画サイトの速度は変更できません。
別サイトの再生速度も変更したい場合は、こちらの機能は使わず「Video Speed Controller」をインストールすることをオススメします。
音量設定
こちらはデフォルトの音量レベルやマウスホイールで音量を微調整したい時の設定です。
「ボリュームブーストレベル」ですが、これは「動画コントロール」で説明した「音量をブースト」をONにすると、音量の限界を超えて大きくすることができます。
たまに音量が極端に小さい動画があるので、この機能はありがたいですね。
ただし、あまりブーストレベルが高いと音割れが発生してしまうのでレベルは2～3くらいで設定しておきましょう。
自動再生
名前の通り、動画を開いたら自動で動画を再生するかどうかの設定です。
こちらは各自好きなように設定しておきましょう。
ビデオコーデックとフォーマット
こちらの機能も先に紹介した「h264ify」と同じです。
もしこの機能を使う場合は、機能の干渉を防ぐため「h264ify」を削除したほうがいいかもしれません。
ミニプレイヤー
動画を再生中、コメントを読もうと画面を下にスクロールすると、今までは動画を観ることはできませんでしたが、こちらの機能をONにすると画面スクロール時、自動的に設定した位置にミニプレイヤーが表示されるようになります。
これで動画を楽しみながらコメントを読むことができるので、ONするのをオススメします。
「Enhancer for YouTube」の大まかな機能は以上になります。
いろいろとカスタマイズできるので、ぜひいろいろと試してみてください。