セットアップ - Chrome

はじめに

セットアップ シリーズ、Chrome 編。

主に以下について。

• ショートカット
• 拡張機能
• デベロッパーツール

Windows ユーザーは Edge に乗り換える？

Windows 10 バージョン 20H2 (Windows 10 October 2020 Update) から「Chromium ベース Edge」が Windows のデフォルト ブラウザーとなった。
とはいえ、今更 Google アカウントから離れるのは面倒なので、やはり Chrome を使うことに。

Chrome 拡張機能でカバーしないこと

OS やブラウザの標準機能でカバーできる用途では、Chrome 拡張機能をインストールしない。

• カラーピッカー:
  • Windows なら「Microsoft PowerToys」の Windows + Shift + C キー
  • macOS 標準: Control + スペース キー ➡ d と入力して「DigitalColor Meter」を検索 ➡ Shift + ⌘ + C キー
• スクリーンショット:
  • Windows 10 標準: Windows + Shift + s キー（「切り取り & スケッチ」アプリが起動する）
  • macOS 標準: Shift + ⌘ + 4
  • 撮影するページサイズを調整したい場合は、Chrome の「デベロッパー ツール」（後述）が便利。
• 絵文字を探す:
  • Windows 10 標準: Windows + . キー
  • macOS 標準: Control + ⌘ + スペース キー
• 検索クエリを使う:
  • Simple = Select + Search などの拡張機能を使わずとも、Chrome の「検索エンジン」の設定（後述）で事足りる。
• QR コードを生成する:
  • Chrome の標準機能に搭載された。
• タブをグループ化する:
  • Chrome の標準機能に搭載された。

🔧 ショートカット

Chrome 公式のショートカット一覧 は、少々分かり辛いので整理してみる。

注意:

• Windows の Ctrl キーと macOS の command（⌘）キーは、基本的にどちらも Ctrl キーと表記する。
• Windows の Alt キーと macOS の option（⌥）キーは、基本的にどちらも Alt キーと表記する。
• MacBook の Delete キーは Backspace キーと表記し、fn + Delete キーは Delete キーと表記する。

参考:

• Chrome のキーボード ショートカット - パソコン - Google Chrome ヘルプ
• Chrome DevTools - Chrome Developers
• Windows のキーボード ショートカット
• Mac のキーボードショートカット - Apple サポート

🔖 Chrome の主なショートカット

• 凡例
  • 🔥 ... Windows / macOS 間で、同じショートカットが使えない。

区分	機能	ショートカット
ウィンドウ	新しいウィンドウを開く	Ctrl + N
ウィンドウ	新しいウィンドウをシークレットモードで開く	Ctrl + Shift + N
タブ	新しいタブを開く	Ctrl + T
タブ	タブを閉じる	Ctrl + W
タブ	閉じるたタブを開く	Ctrl + Shift + T
タブ	次のタブへ（🔥）	Ctrl + PgDn（Windows） ⌘ + ⌥ + →（macOS）
タブ	前のタブへ（🔥）	Ctrl + PgUp（Windows） ⌘ + ⌥ + ←（macOS）
タブ	全画面モードの切り替え（🔥）	F11（Windows） ⌘ + Shift + F（macOS）
ズーム	ページを拡大	Ctrl + + ※ Windows のみ Ctrl + ; も利用可
ズーム	ページを縮小	Ctrl + -
ズーム	ページの拡大/縮小をリセット	Ctrl + 0
ページ内移動	ページの先頭へ	Home
ページ内移動	ページの末尾へ	End
ページ内移動	1 画面ずつ下にスクロール	PgDn or Space
ページ内移動	1 画面ずつ上にスクロール	PgUp or Shift + Space
ページ内移動	水平スクロール	Shift + マウスホイール
テキスト移動	次の単語へ（🔥）	Ctrl + →（Windows） ⌥ + →（macOS）
テキスト移動	前の単語へ（🔥）	Ctrl + ←（Windows） ⌥ + ←（macOS）
テキスト移動	前の単語を削除（🔥）	Ctrl + Backspace（Windows） ⌥ + Backspace（macOS）
アドレスバー	アドレスバーに移動する	Ctrl + L
アドレスバー	自動補完の候補を削除する	下矢印キーで選択して Shift + Delete ※アドレスバーと Web ページ内のフォームの両方で使える
リロード	ページを再読み込みする	Ctrl + R ※ Windows のみ F5 キーも利用可
リロード	キャッシュを無視してページを再読み込み	Ctrl + Shift + R ※ Windows のみ Shift + F5 キーも利用可
リロード	ページの再読み込みを中止する	Esc
ページ内検索	検索バーを開く	Ctrl + F
ページ内検索	次の検索結果へ	Ctrl + G
ページ内検索	前の検索結果へ	Ctrl + Shift + G
機能	履歴ページを開く（🔥）	Ctrl + H（Windows） ⌘ + Y（macOS）
機能	ブックマーク バー表示を切り替え	Ctrl + Shift + B
機能	ブックマーク マネージャーを開く（🔥）	Ctrl + Shift + O（Windows） ⌘ + ⌥ + B（macOS）
デベロッパー	デベロッパー ツール表示を切り替え（🔥） （最後に閉じたパネルを開き直す）	Ctrl + Shift + I or F12（Windows） ⌘ + ⌥ + I（macOS）
デベロッパー	Element パネルを開く （HTML と CSS のためのパネル）	Ctrl + Shift + C
デベロッパー	Console パネルを開く（🔥） （JavaScript のためのパネル）	Ctrl + Shift + J（Windows） ⌘ + ⌥ + J（macOS）

🔖 Chrome の未使用のショートカットキー

拡張機能に新しいショートカットを割り当てたい時のために。

設定方法:

アドレスバーに chrome://extensions/shortcuts と入力すると、拡張機能のショートカット設定画面が開く。

注意:

• Windows と macOS 共通で利用できるキーのみを記載する。
• 拡張機能のショートカットに割り当てできないキーは記載しない。
• インストール済みのソフトウェアや OS の設定によっては、以下のショートカットも使えない可能性がある。

C- 系

Ctrl + 何か の組み合わせで、利用できるのは 1 種類のみ。

• Ctrl + .

A- 系

Alt + 何か の組み合わせは、ほとんど利用できる。

数字と英字キーなら、D、E、F 以外は利用可。

C-S- 系

Ctrl + Shift の組み合わせで、利用できるのは以下のとおり。

• 1
• 2
• 7
• 8
• 9
• 0
• W
• E
• Y
• U
• P
• A
• S
• K
• L
• Z
• X
• V
• ,
• .
• Home
• End
• PgUp
• PgDn

C-S-A- 系

Ctrl + Shift + Alt + 何か の組み合わせは、何でも利用可。

S-A- 系

Shift + Alt + 何か の組み合わせは、何でも利用可。

C-A- 系

Ctrl + Alt + 何か の組み合わせは、利用できない。

🔧 インストール

https://www.google.com/intl/ja_jp/chrome/ からインストーラーを入手してインストール。
つまずく点はない。

🔧 初期設定

🔖 本体設定

Chrome の設定を開くには、Windows なら「Alt + f キー ➡ s キー」、macOS なら「⌘ + , キー」。

• 既定のブラウザに設定。
• Google アカウントと同期。
• 固定幅フォント のデフォルトが「MS ゴシック」なので、「Source Han Code JP」などに変更。
• 起動時: 前回開いていたページを開く
• ダウンロード先をデスクトップに。
  • デスクトップにすると、不要なファイルを削除漏れを解消できて好み。デスクトップには、Windows + D キーなどで、アクセスしやすいのも良い。
  • （Windows のみ）タスクバーを右クリック > ツールバー > デスクトップ を有効化するのと併用することで、デスクトップから Chrome へののドラッグ & ドロップが楽に。

🔖 新しいタブの設定

• 新しいタブを開いた画面の中央付近にある + ボタンからショートカット登録しておくと便利。
  • 特にブックマークバーに置くほどでもなく、アドレスバーの補完から検索し辛いページ（ドメイン名が覚えにくいページなど）を登録するのがオススメ。
• 新しいタブ > 画面右下の ✎（鉛筆ボタン） > 背景 > 風景 > 毎日更新する

🔖 Google 検索のテクニック

Google 検索のテクニックを紹介する。

• 開いている Web サイト内で検索する:
  • アドレスバー（Windows + L キー）で、先頭に site: と入力して、末尾にスペースを開けて「検索したいキーワード」を入力して Enter キー。
  • e.g. site: https://www.postgresql.jp/document/10/html/ db_dump ... PostgreSQL 10 のリファレンスで db_dump について調べる。
• 検索キーワードを工夫する:
  • AND 検索:
    • キーワードをスペースで区切る。
    • e.g. A B
  • OR 検索:
    • キーワードを OR で区切る。
    • e.g. A OR B
  • NOT 検索:
    • キーワードの先頭に - を付ける。
    • e.g. A -B
  • 完全一致検索:
    • キーワードを " で囲む。ワイルドカードを使うには * を使う。
    • e.g. A "B * D"
  • その他:
    • cf. ウェブ検索の精度を高める - Google 検索 ヘルプ
• タブを「固定」or「グループ化」する:
  • タブを右クリックして 固定 or タブを新しいグループに追加 に選択。

🔖 検索エンジンの便利な使い方

Chrome の設定 > 検索エンジンの管理 で、任意の文字列を含む URL へアクセスできる。

たとえば、以下のように検索エンジンを追加した場合、

• 検索エンジン: Wikipedia
• キーワード: wiki
• URL: http://ja.wikipedia.org/wiki/Special:Search?search=%s

以下の手順で、素早く Wikipedia を検索できる。

1. Windows + L キーなどで、アドレバスバーにフォーカス
2. キーワードの wiki と入力
3. Tab キーを入力
   アドレバスバーに Wikipedia を検索 と表示される
4. 検索キーワードを入力して Enter キー

Redmine や Backlog など、普段使う Web サービスの検索 URL などを登録しておくと便利。

個人 PC だと、Amazon の価格推移が見れる Keepa を登録しておくのが便利。
https://keepa.com/#!search/5-%s で登録して、Amazon の商品ページ上の「登録情報」に記載された「ASIN」（Amazon Standard Identification Number: 商品のバーコードのようなもの）で検索すると、価格推移を確認できる。

🔖 拡張機能を無効化する

• 拡張機能はアドレスバーに chrome://extensions/ と入力した画面で、有効/無効を操作できる。
  • この画面で拡張機能ごとの 詳細 ボタン > サイトへのアクセス を クリックされた場合のみ にすることで、一時的に無効化した状態にできる。
  • この状態の拡張機能を一時的に有効化するには chrome://extensions/shortcuts で、拡張機能の有効化ショートカットを使うのが便利。常用するには邪魔な拡張機能でも、必要な時にだけ起動させることができる。
  • 割り当てるキーは「Alt キー + D、E、F 以外の英数字キー」が、他のキーバインドと競合しにくいのでオススメ。

👑 拡張機能: Google 翻訳

英語が読めないので。

👑 拡張機能: Language Learning with Youtube BETA

YouTube の英語字幕を機械翻訳してくれる。
「英語字幕」と「日本語字幕」を同時表示したり、動画の「全字幕」を表示したりと非常に便利。

なお、単語をクリックすると「発音」と「意味」を確認できる。

YouTube 用は BETA 版だが、同じ開発者による Netflix 版は正式版らしく、こちらの有償版ではさらに字幕翻訳の追加オプションや、単語やフレーズの保存機能（字幕に現れるとハイライトされる）が使えるようだ。

設定:

• 拡張機能を管理 > 以下のサイトで自動的にアクセスを許可する を無効化。
  • 普段は邪魔になるのでオフに。反映させるには、ページの更新が必要になるかも。

使い方:

• 公式リファレンス参照

👑 拡張機能: Mouse Dictionary

cf. Chrome 拡張の高速な英語辞書ツールをつくりました(Mouse Dictionary) - Qiita

マウスオーバーした英字テキストの「英和辞典」を表示する。

Booth で販売されている「英辞郎」を設定することで、辞書を拡張できる。

👑 拡張機能: Create Link

「Web ページのタイトル」or「選択中のテキスト」と「URL」をコピーする。
記事を書く時に便利。

設定:

• markdown のフォーマットを [%text_md%](%url%) > [%title%](%url%) に変更する。
  • 「ページタイトル」の代わりに「うっかり選択しているテキスト」がコピーされてしまうことを防ぐ。
• ショートカットを有効化するため、Default is currently を markdown にして、Configure shortcut > Current tab in default format で Ctrl + ピリオド に。

使い方:

• Chrome の画面右上から、本拡張機能のアイコンをクリック。
• Ctrl + ピリオド でコピー。（上記設定をしている場合）

👑 拡張機能: Video Speed Controller

HTML5 オーディオ/ビデオの再生速度の変更機能を呼び出す。
倍速再生は重宝する。

設定:

• 拡張機能を管理 > サイトへのアクセス: クリックされた場合のみ に設定。
  • 普段は邪魔になるのでオフに。

👑 拡張機能: Picture-in-Picture Extension (by Google)

Edge ではデフォルトで搭載されている「動画のピクチャ・イン・ピクチャ機能」を Chrome でも使えるように。

使い方:

• Chrome の画面右上から、本拡張機能のアイコンをクリック。
• Windows だと Alt + P、macOS では ⌥ + Pでトグルする。

👑 拡張機能: Session Buddy

Edge の「コレクション機能」を見て、Chrome 用のそれっぽい機能を探して見つけた。

ウィンドウ毎に「タブの状態」に名前をつけてローカル上に記録できる。（外部サービスの登録不要なのは良い）
記録した内容同士をマージしたり、重複を除外したり、記録した内容を後から編集したりもできる。

多少慣れがいる UI だが、必要十分な機能を持つ。

👑 拡張機能: はてなブックマーク

Google の検索結果で、そのページの価値が高く評価されているかの指標のひとつになって便利。

👑 拡張機能: uBlock Origin

広告ブロッカー。

設定:

• 拡張機能を管理 > サイトへのアクセス: クリックされた場合のみ に設定。
  • Web ページの収益の広告の占める割合は大きいわけだし、基本的に広告ブロックはオフで良い派。 とはいえ、無料版 WinSCP のダウロードページでダウンロードボタンを探す時とか面倒な時はあるので、必要に応じて使う。

補足:

• 「Adblock Plus の Chrome ウェブストア上の偽物問題」や「控えめな広告の問題」など、ややこしい広告ブロッカー界隈。
• 元祖の Adblock はもうないし、Adblock Plus は控えめな広告さえ許容できれば？、AdBlock は買収問題 があったり、uBlock は uBlock Origin に分裂したり AdBlock に買収されたり、結局、純粋な広告ブロッカーを求めれば uBlock Origin かなあ、といったところ。

cf. PC ブラウザ向け広告ブロッカーの歴史がややこしい - toyfish.blog

👑 その他: Web フロントエンド開発向け Chrome 拡張機能

• 👑 Wappalyzer
  • Web ページの技術スタックを確認
• 👑 WhatFont
  • Web ページ上で適用されているフォントを確認
• 👑 Google Analytics オプトアウト アドオン (by Google)
  • Google アナリティクスで、自分のサイトに自分をユーザーとしてカウントさせないように
• 👑 JSON Formatter
  • JSON フォーマッター。類似の拡張機能と比べてシンプル

🔧 デベロッパーツール

cf. Chrome DevTools - Chrome Developers

デベロッパーツール（DevTools）は、Web 開発ではかかせない。
非常に高機能なので、ここでは一部の機能だけ紹介する。

残念ながら Chrome の公式リファレンスに日本語がないので、何も把握できていない状態だと少々ハードルが高い。
（近い内に日本語化される予定はあるらしい。）

邪道ながら、Edge（Chromium 版）なら開発者ツール（DevTools）の日本語リファレンス（機械翻訳を含む）があるので、入門の役に立つはずだ。

また、ほとんど機能の変わらない Firefox の開発ツール（Developer Tools）にも日本語リファレンスがある。
Chrome とは少しだけクセが異なるが、一長一短なので、一度覗いてみるのも面白い。

🔖 スクリーンショットを撮影する

cf. Simulate mobile devices with Device Mode - Chrome Developers
cf. Microsoft Edge DevTools でモバイル デバイスをエミュレートする - Microsoft Edge Development | Microsoft Docs
cf. レスポンシブデザインモード - 開発ツール | MDN

特定の画面サイズに変更する手順は以下のとおり。

• 「デベロッパー ツール」(Ctrl + Shift + C キー) -> device toolbar を開く (Ctrl + Shift + m キー) -> ページ左上のプルダウンメニュー（Device リスト）で、撮影したい画面サイズを指定する。
• device toolbar を切り替えるには、左上の「スマホのアイコン」をクリックすることもで可能。
• Device リストに、XGA (1024x768px) を追加しておくと、マニュアル作成などのスクリーンショットに便利。

スクリーンショットの撮影方法は 3 種類ある。

• ➊「デベロッパー ツール」(Ctrl + Shift + C キー) -> device toolbar を開く (Ctrl + Shift + m キー) -> More options（device toolbar 右端のボタン） -> Capture screenshot or Capture full size screenshot
• ➋「デベロッパー ツール」(Ctrl + Shift + C キー) -> device toolbar を開く (Ctrl + Shift + m キー) -> コマンドパレット (Ctrl + Shift + p キー) で capture と入力 -> 以下を選択
  • Capture area screenshot: ページの指定範囲を撮影
  • Capture full size screenshot: ページ全体を撮影
  • Capture node screenshot: 選択した node（HTML タグ）を撮影、例えばボタンのみなど
  • Capture screenshot: ブラウザで表示している範囲を撮影
• ➌ Web ページ上の撮影したい要素を右クリック > 検証 -> device toolbar を開く (Ctrl + Shift + m キー) -> 画面上部のタブで をクリック -> Element パネルで、撮影したい node（HTML のタグ）を探して右クリック > Capture node screenshot

🔖 DOM（HTML）を変更する

cf. Get Started With Viewing And Changing The DOM - Chrome Developers
cf. 初級者向け DevTools: HTML と DOM の使用を開始する - Microsoft Edge Development | Microsoft Docs
cf. HTML の調査と編集 - 開発ツール | MDN

node（HTML のタグ）を変更したりする方法は、上記のリファレンス参照。

🔖 CSS を変更する

cf. View and change CSS - Chrome Developers
cf. 初級者向け DevTools: CSS の使用を開始する - Microsoft Edge Development | Microsoft Docs
cf. CCS リファレンス - Microsoft Edge Development | Microsoft Docs
cf. CSS の調査と編集 - 開発ツール | MDN

CSS の調整をする方法は、上記リファレンス参照。

🔖 コンソールを使う

cf. Console overview - Chrome Developers
cf. コンソールの使用 - Microsoft Edge Development | Microsoft Docs
cf. Web コンソール - 開発ツール | MDN

各種警告やエラーの確認や、JavaScript を試す方法は、上記リファレンス参照。

🔖 JavaScript デバッガーを使う

cf. Debug JavaScript - Chrome Developers
cf. Microsoft Edge DevTools での JavaScript のデバッグの開始 - Microsoft Edge Development | Microsoft Docs
cf. デバッガー機能の使用 - Microsoft Edge Development | Microsoft Docs
cf. デバッガー - 開発ツール | MDN

JavaScript のデバッグ方法は、上記リファレンス参照。

🔖 通信を分析する

cf. Inspect network activity - Chrome Developers
cf. Microsoft Edge DevTools でネットワーク アクティビティを検査する - Microsoft Edge Development | Microsoft Docs
cf. ネットワーク分析リファレンス - Microsoft Edge Development | Microsoft Docs
cf. ネットワークモニター - 開発ツール | MDN

通信内容の分析方法は、上記リファレンス参照。