世界で最も使われてるブラウザにまでなったGoogle Chrome。素のまま使ってる人も多いですが、拡張機能を追加する事で大幅に機能を強化出来ます。利便性が向上するタイプの拡張機能や新しい機能を追加する拡張機能、Chrome上で動作するアプリのような拡張機能など様々なものがリリースされています。

その中で仕事で使っていて特に便利だなぁと思ったいくつかの拡張機能をここで紹介してみたいと思います。拡張機能はChromeウェブストアで入手することが出来ます。

拡張機能について

追加方法

追加方法はとても簡単。Chromeウェブストアにて目的の拡張機能をみつけたら以下の作業をするだけ。

  1. 目的の拡張機能のページにまずは入る。Office Onlineで試しに入ってみます。
  2. 右上の「Chromeに追加」ボタンを押す
  3. 追加するかどうか?確認メッセージが出るので、「拡張機能を追加」ボタンを押す
  4. 右上の「︙」の隣にアイコンが登場したら完了です。
  5. アイコン表示がなくても困らない場合には、そのアイコン上で右クリックして「Chromeメニューで非表示」をクリック。

拡張機能によっては、ここから更に個別にセットアップの画面があったりします。Office Onlineの場合、Microsoftアカウントへのログイン作業があります。

図:追加はとっても簡単です

停止・削除方法

削除方法はいくつかのパターンであります。最も簡単な方法は、右上に出てるアイコンを右クリックして「Chromeから削除」にて簡単に拡張機能を削除可能です。ですが、非表示だったりした場合、また一時的に停止したい場合は拡張機能のページを表示して作業を行います。

  1. chrome://extensionsを開くか?右上の「︙」クリックし、「その他のツール」⇒「拡張機能」をクリックする
  2. 様々なインストール済み拡張機能が一覧で出てきます。
  3. それぞれの左下にある「削除」をクリックすれば、削除が可能です。
  4. 右下にあるスイッチをオフにすれば、一時停止状態にする事が可能です。自分でONにするまで、そのままの状態になります。

図:様々な拡張機能一覧が出てきます。

導入デメリット

とても便利な拡張機能ですが、あまりたくさん導入するとそれだけメモリやCPUを消費する事になります。今時のマシンならばこれらのリソースは割りと余り倒してると思うので気にならないかもしれませんが、モバイル特化のノートPCなどでは重さが気になることもあります。導入する場合には、自分のワークスタイルに応じて、取捨選択をする必要があります。

また、Androidアプリ同様、中には怪しい拡張機能もあるので、注意が必要です。最近もAdBlockに見せかけた情報を抜き取るコード入りの拡張機能が見つかりました。メジャーな拡張機能に見せかけてるので、よく調べてから入れましょう。

どの拡張機能がどれだけメモリ等を消費してるかどうか?を確認するためには、Chromeタスクマネージャを起動してみるとわかります。起動方法は以下の通りです。

  1. Chromeの右上にある「︙」をクリック
  2. 「その他のツール」の中にある「タスクマネージャ」をクリック

図:どの拡張機能が消費量が多いのか?

オススメ拡張機能

Line

以前から、Chromeアプリとして提供されてましたが、廃止になりChromeの拡張機能版としてリリースされました。PCからLineに接続してテキストメッセージ等を送れる拡張機能です。スマフォとの連携が必要になりますので、ちょっとセットアップがややこしいです。

事前準備として

  1. LINEのアカウント設定でメールアドレスの登録をしておく。もしくはQRコード読み取れるようにしておく。
  2. ログイン許可にチェックを入れておく

図:スマフォ側の設定画面

Chrome側からは右上のアイコンをクリックするとログイン画面になるので

  1. 登録メールアドレスでログインもしくは、スマフォ側でQRコードを読み取る
  2. 本人確認用の6桁の数値をスマフォ側Lineに要求が来るので、PCの画面に表示されてる数値を入力する
  3. これで連携完了。

図:本人確認用コード入力画面

すると、単一ウィンドウのLINEの画面がPC側に表示され、PC側からLINEメッセージを送る事ができるようになります。特にファイル類やコピペを送る時はやはりスマフォよりもPCのほうが便利。また、Chrome版LINEはEnterキーを押すと送信されてしまうので、これを「改行」にしておくと、便利です。方法は

  1. 右上のLINEのロゴをクリック⇒「設定」を開く
  2. 「トーク」を開く」
  3. MacならばCommand+Enterで送信を選ぶ。PCならばAlt + Enterで送信を選んでおく
  4. これでEnterキーのみだと改行になります。ショートカットキーを使わないと送信されないので安心ですね。

図:Chrome版Lineの設定画面。

図:Chrome側のLINEの画面

Pushbullet

最近よく使うようになった拡張機能で、スマートフォンとPCとの間で色々やり取りをPush通知で行う為の拡張機能です。スマートフォン側にはアプリを入れておき、PCのChrome側にこの拡張機能を入れておく。同じGoogleアカウントでサインインを双方しておくと、例えばPCからスマフォへ、スマフォからPCへ双方向通信でテキストやファイル、また電話の着信通知・メール着信通知などを送る事が可能になります。

とくにPCで見ていたウェブサイトのURLをいちいちメールで送るのは面倒ですがこれならば、ちゃちゃっと送れる。また、PCに夢中になってたら電話の着信があって見逃したなんてことも防げたりします。面白いのは、PCからスマフォを介してSMSを送れたりもします。結構便利。

スマフォ側では電話や連絡先などのアクセス権限を求めて来るので随時許可をしなければ通信ができませんので注意が必要です。Chromeからは右上のアイコンをクリックもしくはウェブサイトから作業可能ですよ。スマフォから画像をアプリで開き、共有にてPushbulletを選べばPC側Chromeに新しいタブで画像が送り込まれます。

図:サクっとURLをスマフォ側に送れるよ

Adblock Plus

様々なウェブサイトに貼り付けられてる広告の数々を非表示にしてくれる拡張機能です。似たようなものにuBlock Originというものもあります。少しだけ、ウェブブラウジングが軽量化し、またサイトも見やすくなります。但し、最近ではAdblockをブロックする仕組みも出てきているので、必ずしも非表示に出来るわけではありません。

また、大人の事情で非表示されないものもあります。また、小さなサイトでは広告収入でウェブサイトを維持しているので、あまり多用するのも好ましくはないので、その時にはそのサイトだけ非表示機能をオフにすることも可能です。

図:このサイトで有効をクリックすると無効になる

Video Blocker

最近のYoutubeは、正直ノイズというか見たいと思わないようなチャンネルで溢れていたりします。それらは自分が探そうと思う時には邪魔な存在です。そこでこれらの動画をチャンネルまるごと未来永劫表示しないようにブロックしてくれる拡張機能です。少々使い方に癖があって最初戸惑う事があります。

インストールしたら、Youtubeで見たくないチャンネルがあったら

  1. 動画の上で右クリック
  2. 「Block Videos from this Channel」をクリック。これでチャンネルの動画全てが表示されなくなります。
  3. 誤って非表示にした場合には、右上のアイコンを右クリックして「オプション」を開く
  4. 自分が非表示にしたチャンネルが出るので、Deleteをクリックすればまた表示されるようになります。

図:オカシナYoutuberもこれで一網打尽

Personal Block List

Google検索結果に於いても、正直検索結果に表示してほしくないサイトというものは少なからずあります。それらは中身のないサイトであったり、広告収入が目的のダミーサイトであったり、様々な理由があると思います。そういったサイトを未来永劫検索結果から、ドメインまるごと消してくれるのがこの拡張機能。

Googleが作ってリリースしてるもので、消去も簡単です。但し、4月6日現在、Chromeの最新版に間に合っていないのか不具合が出ており、「〜をブロックする」表示が検索結果に出てこないので、以下の方法でブロックリストに追加します。

  1. まずは一回見たくないサイトに入る
  2. 右上のPersonal Block Listのアイコンをクリックする
  3. 「ブロックする」をクリックする。次回以降ドメイン単位で検索結果から消去されます。
  4. 「ブロックを解除する」をクリックすれば、再度表示されるようになります。

図:非表示すると検索結果がよりスマートになります

The Great Suspender

この拡張機能はちょっと特殊な拡張機能で、いつも仕事で複数のタブを開きまくってる人にとって有用な拡張機能です。クロームはタブ1つ1つで結構なメモリを常に消費しています。これが複数まとまると相当な量のPCのリソースを使うことになります。そこでこの拡張機能の出番です。非アクティブになってる使っていないタブを一時的にサスペンドして、メモリ消費を低減してくれます。

標準では1時間使っていないと自動サスペンドされます。また、設定(Automatically unsuspend tab when it is viewed)でタブをアクティブにするだけで自動的にサスペンド解除もしてくれるのでスムーズに使うことが可能です。

図:低スペックモバイルPCでは必須かも

Save to Pocket

個人的オススメなのがこの拡張機能。Evernoteなどでウェブのスクラップを取ってる人はいるかと思いますが、Pocketというサービスに対してクリッピングしてくれます。あとでスマフォのPocketというアプリで様々なネタを掘り出す時には非常に重宝します。インストールすると、右上にアイコンが出てきます。事前にGoogle+か?アカウント作成してログインしておく必要があります。

クリップしたいページで右クリックするか?右上のアイコンをクリックすればクリップされます。その時に、タグを同時に付けることも可能です。ブログネタ、仕事ネタ、趣味のネタ色々なページをとっておくと後で良い事があります。

※まれに一部スクラップ出来ないページもあったりします。

図:Pocketになんでもスクラップ

View Image

この拡張機能は非常に単純で、先日消滅したGoogleの画像検索に於ける「画像を表示」を復活させる為だけの拡張機能です。画像を表示されなくなった事で非常に不便になっていましたが、コレをいれる事で復活します。

表示されなくなった理由が画像直リンクされるとウェブサイト見られなくなり困るであったり、また著作権等を理由に訴えられたからということですが、.htaccessでリダイレクトすれば良いのでないかなと・・・

図:View Imageをクリックすると画像の直リンクになります。

Autopagerize

昔あったAuto Patchworkという拡張機能が使えなくなってしまったので、代わりに入れている拡張機能で、Googleの検索結果等(一部ブログなども対応)に於いて、2ページ目以降は一番したまでスクロールすると、自動的に次のページが下につなげて出てくれる非常に便利な拡張機能です。

但し副作用もあって、この機能のせいで一部ブログなどではコメント欄など一番下の要素が削られてなくなったりもするので、基本、Googleのサイトでだけ使うようにしたほうが良いです。右上のアイコン⇒オプションから除外パターンを入れる事でそのサイトでは動作しないようにする事が可能です。

図:page2が続けて表示されるようになった

Avast Online Security

ウイルスチェッカーで有名なAvastが無償でリリースしてる拡張機能。Googleの検索結果などに於いて、そのサイトが危険なサイトかどうかを教えてくれるとても良い拡張機能です。開く前に知る事が出来るので、有益です。Google自体も安全ではないサイトの場合、危険なサイトは検索結果に合わせて表示されますが、これと合わせて、Avastの結果を用いれば、オカシナサイトへ遭遇する確率を減らせます。

また、自分が見ていてオカシナサイトだと思ったら投票も可能です。悪質なサイトなどは避けましょう。ちなみに、最近のGoogleはhttps化されていないサイトは安全ではないサイトとして表示するようになったみたいで、個人でもSSL化が必須になってきています。

Googleもそういったサイトは容赦なく排除するので、最近は検索結果で危ないサイトに遭遇する事は減りましたが、それでもまだあるので要注意です。また、警告があっても誤検出という可能性もあります(本物の場合、ウェブサイトがマルウェアに感染してたり、過去に怪しい活動が確認されたサイトという事もあります)

似たようなものに、Microsoftが出してるWindows Defendfer Browser Protectionがあります。

図:緑のチェックが出たら一応安全と言える

図:Avastに警告されたページ。赤いマークがついてる

図:更に侵入すると出るように促される

ブックマークサイドバー

知らぬ間にもりもり溜まっていくChromeのブックマーク。一番上に1行鎮座しているわけですが、この拡張機能を入れるとブックマークをサイドバー化出来ます。また、普段は隠れてくれてるので、必要な時にマウスカーソルを近づけるだけで表示してくれます。画面の小さなウルトラモバイルPCなどでは有用ですね。

カスタマイズ項目も豊富です。もちろんブックマークを掴んで移動も、URLを掴んで登録も可能です。

図:サイドバーだと色々と楽です

Session Buddy

あらかじめ登録しておいたウェブサイトを開いてるタブの状態を復元できるスグレモノです。これがあればChromeがクラッシュしても復元できますし、よく使うサイトをまとめて毎回一発で全部開けます。一旦よく使うウェブサイトを開いて

  • 右上のSave Sessionsをクリックすることで保存出来ます。
  • 直前のタブの状態は右下のSession Buddyをクリックすると履歴が保存されていて復元出来ます。設定から自動で保存するセッションの数は10くらいにしておきましょう。

図:自動でセッション保存がありがたい

New Tab Redirect

ホームボタンや起動時に表示されるページなどはChromeで標準でどのページを開くかを設定する事が出来ます。しかし、新しいタブについては、タブを開くと空っぽのページが出てくるだけ。この時非常によく使うページを表示したい時に使うのがこの拡張機能。といっても自分の場合、Googleの検索ページを表示するようにしていたりします。

インストールしたら右上のアイコンから右クリックして、オプションに入って設定をします。以降はアイコン表示は不要です。

図:Redirect URLにURL入れてSaveするだけ

Fireshot

かつてはよく使われた「ウェブサイト」を画像やPDFとして保存する拡張機能です。全体や一部、表示してる場所、選択箇所を画像やPDFで取って置ける便利な拡張機能です。縦長で情報が多いサイトでは重宝します。

使い方は保存したいサイトで、右上のアイコンをクリック⇒キャプチャを選ぶだけ。

図:キャプチャして取っておける

Go to Tab

仕事でChromeを使っていると、知らない間にタブをたくさん開いていて、どれが何のページだったのかだんだんわからなくなります。文字が見切れますし、タブを固定化してたらなおさらです。こんな人にオススメなのが、この拡張機能で、現在開いてるタブを縦表示のリストで表示してくれる拡張機能です。

リストをクリックすれば、そのタブがアクティブになります。

図:どのタブがどれなのか?すぐわかります

Screencastify

この拡張機能はChromeに新しい機能をもたらすもので、Chrome内の動作をスクリーンキャプチャーし、Google Driveにwebm形式で保存までやってくれる優れものです。例えばHangoutの会議の様子を録画しておき、後で文字起こしをしたり、参加できなかった人の為に取っておいたり、また、別途ローカルアプリ無しで録画が出来る上に、特定のタブの音声だけを録音対象に出来るので、結構使いやすいです。

但しスクロールバーも録画されるので取り除きたい場合にはMinimal Scrollbarといった拡張機能も合わせて利用すると良いでしょう。

使う最初だけセットアップが必要で、Googleアカウントで連携ログインが必要です。

  1. 右上のアイコンをクリックし、Sign in With Googleでまずはログイン。
  2. カメラとマイクにアクセス権限を与える
  3. 職業を問われるが、otherでOK
  4. セットアップが終わったらそのタブは一旦閉じる
  5. 録画したいタブにて右上のアイコンをクリックし、今回はTABをクリック、AudioもTABを選び、「Record  Tab」をクリック
  6. 右下にレコーディングツールが出てきます。カウントダウンが始まって自動録画開始
  7. 再度右上のアイコンをクリックして録画停止をすると、エンコードが始まって、Google Driveに保存されます。
  8. 保存場所はGoogle Driveのマイドライブ直下の「Screencastify」というフォルダ内にサイト名で保存されています。
  9. 無償版の場合、右上にPowerd By Screencastifyのロゴが表示されます。

図:意外と使い所があります。

User-Agent Switcher

一般の人はあまり使う機会のない拡張機能ですが、ウェブサイト制作やウェブアプリを作ってる人にとってはわりと使う機会のある拡張機能です。ブラウザのUser-Agentを偽装して、ChromeなのにSafariでアクセスしているかのように思わせるためのもので、ブラウザ毎に微妙に差があるので、分けて作ってる時に挙動を調べる為に使います。

また、一部サイトではアクセスするブラウザによって得られる情報が違ったりするので、偽装してアクセスし入手したりするのに使ったりもします(例えばWindows10のISOイメージ入手とMedia Creation Toolの入手サイトなど)。使い方は右上のアイコンでそれぞれのブラウザに変更するだけ。元に戻す時はChromeを選べばOKです。

もちろん、User-Agentだけの偽装が通用しないサイトもあったりします。

図:簡単に複数のブラウザに偽装できます。

Web開発者向けおまけ

Google Apps Scriptだけでなく、HTML5などのウェブアプリケーション開発者向けの拡張機能をいくつか紹介してみたいと思います。普通の人は使わないモノですが、こういった拡張機能もあるのがChromeが支持されている所以ですね。

テキストエンコーディング

今ではだいぶ少なくなりましたが、UTF-8などでウェブサイトが作られるようになった時代、きちんとウェブサイト側で文字コードの指定などがされていなかったりするサイトでは、ブラウザ側の自動判定が効かずに、文字化けすることが結構ありました。そういったサイトで、文字コードの変換を手動で行う為の拡張機能です。サイトで右クリック⇒テキストエンコーディングにて、Shift-JISやEUCといったコードに変換してくれます。

図:こんな感じで文字化けするサイトに出くわします

Katalon Recoder

この拡張機能は、Seleniumと呼ばれる「ウェブ操作の自動化」を行う為のツールを利用した、ウェブアプリケーションの動作テストの自動化を行う為の、いわばChrome自体のマクロ機能を追加するものです。よって、RPA的な使い方も可能になっています。Selenium IDEの強化版といった所です。

自分の操作を記録し、再現する事が可能です。高価でそのPCでしか利用できないRPA使うよりは、Chromeが入ってるどんなPCでも動作する無償のこういった自動化ツール使ったほうが、コスパよく運用出来ると思います。別途特集ページを組んでみたいネタの一つですね。

図:RecordおしてStop押すだけの簡単な使い方も可能

Google Apps Script Github アシスタント

Google Apps Scriptの開発者向けのGithubへのコードプッシュとコードプルの管理を行うための非常に素晴らしい拡張機能です。これまでのGoogle Apps Scriptはスクリプトエディタ内での閉じた環境で管理をしなければなりませんでした。其のため、バージョン履歴の管理であったり、よく使うコードの保管(コードスニペットって言います)などをするには、メモ帳使ったりと面倒でした。

Github Enterpriseにも対応しているので、これがあれば、Githubを使ってコードの管理を行えるようになります。開発者さんのページはこちらです。大変素晴らしいツールありがとう。

図:新しいリポジトリ作って送り込む様子

VisBug

F12キーを押せば、Chromeの場合、開発者向けのデベロッパーツールが表示され、様々なデバッグ作業が出来るようになっています。しかし、簡単に見ている状態のまま、リアルタイムにブラウザ上で要素を調べたりする事ができるようになるツールがこれ。要素名やその要素をいじるためのバーが左側に出てきます。

ウェブアプリケーションの場合どうしても、DOM操作やプログラムから動的に要素ねじ込んだりする事がままあり、思ってたような表示にならない時、デベロッパーツールよりもこちらのほうが便利だったりします。

図:マウス操作で今見てる要素の状態を見ることが可能

Wayback Machine

Internet Archiveと言えば、大昔の過去のウェブページを何枚も取っておいて、無くなってからも見ることができるアーカイブサイトとして有名ですね。とても良いサイトだったのに無くなって見られずといった時に頼れるのが、Internet Archive。この閲覧を簡単にしてくれる公式拡張機能がこれ。

特に昔のツールのコードなんかを調べたい時にはもう、そういうサイトが潰れて消えてたりすると、Google上ではどうにもならないので、役に立ちます。昔自分がやっていたサイト見てみたら結構スナップショットが残っていて、参考にしてたりします。

図:過去ネタ掘り出すのにも重宝しています

Clear Cache

ウェブアプリケーション開発していて頻繁に遭遇するのが、コードを書き換えたのにまったく反映しておらず、ソース見てみると古いまま。キャッシュから読み込まれてしまっていて、再度リロードさせて・・・なんて鬱陶しいことがよくあります。これをボタンクリックのみでキャッシュをクリアしてくれる便利ツール。

自動的にクリアする機能もついています。ただし、キャッシュというのは本来ウェブサイトの高速表示に使っているテクニックなので、キャッシュを削れば当然、副作用として表示は遅くなるので、開発者以外の方が導入するとデメリットが強いです。

Wappalyzer

素敵なサイトを見つけた時、其のサイトがどんな言語で、どんなライブラリを使っているのかを、デベロッパーツールを使って調べたりする事があります。ソースコードを読んで解析をするのですが、この拡張機能はボタン一発でどんなものを利用しているのか表示してくれるスグレモノです。

図:自分が作るときの参考資料になります。

共有してみる: