Chromeをキーボード操作して時短しよう！

本記事は [eeic （東京大学工学部電気電子・電子情報工学科） Advent Calendar 2022](https://qiita.com/advent-calendar/2022/eeic "eeic （東京大学工学部電気電子・電子情報工学科） Advent Calendar 2022") の12日目の記事です。

# はじめに
パソコンでGmailやGoogle Driveを開くとき、Google アプリの一覧からアイコンを選んだり、ブックマークからアクセスしたりするのが一般的だと思うのですが、いちいちマウスで細かくカーソルを合わせるのって面倒じゃないですか？面倒ですよね。
少し手元が狂ってしまうだけで別のページが開いてしまって、うわあああ、違う、それじゃない！！ってなることもあるかと思います。

ということで、今回はキーボード操作でChromeを便利に使おうという話です。

:::note warn
著者はWindowsユーザーなので、以後紹介するショートカットはWindowsが基準になっています。
:::

# アドレスバーに移動 「Ctrl + L」
キーボード操作は、まずアドレスバーにカーソルを合わせることから始まります。毎回マウスでアドレスバーをクリックしていた方へ、朗報です。ちゃんとキーボード ショートカットが存在します。

アドレスバーに移動するショートカットは「`Ctrl` + `L`」です。

:::note info
以後、本記事では`Control`キーを`Ctrl`と表記します。また、Macユーザーの方は適宜`Ctrl`を`Cmd (⌘)`(`Command`) に読み替えてください。
:::

これを利用すると、現在見ているサイトのURLのコピーは「`Ctrl`(長押し) + (`L` → `C`)」でできます。便利ですね。

# Chrome サイト内検索
Chrome サイト内検索を利用し、アドレスバーに予め設定しておいたショートカットを打ち込むと、特定のサイトにアクセスできるようにします。
Chrome サイト内検索について詳細を知りたい方は以下の公式のヘルプも見てみてください。

https://support.google.com/chrome/answer/95426?hl=ja

## 設定方法
まず、Chromeの 設定→検索エンジン→検索エンジンとサイト内検索を管理する のページに移動します。もしくはアドレスバーに `chrome://settings/searchEngines` と入力します。

次に、サイト内検索を追加します。
![サイト内検索を追加.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3031951/9b678810-20b7-96e7-ea51-dac9e6135bad.png)

例としてGmailを追加します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3031951/5c13a4a7-4465-a738-ce29-3f074e987c10.png" width=80%>
検索エンジンは適当な分かりやすい名前でOK。ショートカットは自分がアドレスバーで入力するときに使いたいものを設定し、URLは開きたいサイトを設定します。
設定を保存すると、アドレスバーで「m/」と入力するだけでGmailを開けるようになります:tada:

ちなみに、ショートカットの末尾を「/」にしているのは、普通の検索で予測変換を使うとき、ショートカットを入力しづらいようにするためです。普段よく入力する単語をショートカットに設定してしまうと、その単語で検索をかけたいときに煩わしいので、ショートカットは少し捻って考えるのがおすすめです。

学校の学務サイトなど、頻繁にアクセスするものを登録しておくと便利です。私は以下のような感じに設定しています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3031951/2e679d88-ac47-9bae-c982-1fda9ac1e0b8.png" width=80%>

## サイト内検索の利用
特定のサイトを開くだけでなく、特定のサイトでの検索もできます。
というより、おそらく本来想定されている使い方はこちらでしょう。
例えば、[MDN](https://developer.mozilla.org/ja/)での検索を以下のように設定します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3031951/9092c1b5-9985-3437-fd82-e840e1fe0b31.png" width=80%>
URLは検索したい語句を%sに置き換えて設定します。
「mdn/」と入力し、`Tab`を押すとMDN内で検索できるようになり、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3031951/888ee11b-6264-8d90-3593-d103c5aa5be3.png)

そのまま検索したい語句を入力して`Enter`を押すと
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3031951/fc7a32de-51f3-f271-744f-0e2e45f7bc0c.png)

MDNでの検索結果が出てきます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3031951/98971f2b-b404-6d1b-6c0b-fdc361fedf96.png" width=80%>

頻繁に検索に利用するサイトがあれば登録しておくと時短になります。
翻訳サイト、Qiita、Amazonとか良さそうですね。

# 「.new」ショートカット
Google ドキュメントを新規作成したい場合、まずGoogle Driveを開き、新規作成ボタンからGoogle ドキュメントをクリックするのが一般的だと思いますが、結構面倒ですよね。
そこで新規作成のショートカットを利用して時短しましょう。
アドレスバーで「docs.new」と入力するだけでGoogle ドキュメントの新規作成画面を開けます:tada:
以下に対応しているサービスの例を挙げます。

| URL        | サービス名             | 機能                       | 
| ---------- | ---------------------- | -------------------------- | 
| docs.new   | Google ドキュメント     | ドキュメントの新規作成     | 
| sheets.new | Google スプレッドシート | スプレッドシートの新規作成 | 
| slides.new | Google スライド         | スライドの新規作成         | 
| cal.new    | Google カレンダー       | 予定の新規作成             | 
| keep.new   | Google Keep            | メモの新規作成             | 
| github.new | GitHub                 | リポジトリの新規作成       | 


Google のサービスに限らず、大量のサービスが .newドメインに対応しています。
以下の公式サイトから、自分の利用しているサービスが対応しているかを確認してみてはいかがでしょうか。

https://whats.new/shortcuts/

# Google Driveのショートカット
Google Drive内のショートカットはエクスプローラーと感覚が違うと思ったので調べてみました。

| ショートカット | 機能                       | 
| -------------- | -------------------------- | 
| `N`              | 名前の変更                 | 
| `Shift` + `F`      | フォルダの新規作成         | 
| `Shift` + `T`      | ドキュメントの新規作成     | 
| `Shift` + `S`      | スプレッドシートの新規作成 | 
| `Shift` + `P`      | スライドの新規作成         | 

ちなみに、エクスプローラーで名前の変更を行うショートカットは`F2`です。
他のショートカットが知りたい方は、以下のGoogle ドライブヘルプページから探してみてください。

https://support.google.com/drive/answer/2563044

# ブラウザの操作
有名なブラウザの操作のショートカットキーを紹介します。
マウス操作はカーソルの位置がシビアなのでキーボードで操作できると楽です。

| ショートカット      | 機能                               | 補足                          | 
| ------------------ | ---------------------------------- | ----------------------------- | 
| `Ctrl` + `Tab`         | 右のタブに移動                     | `Ctrl` + `0` ~ `9` も参考になるかも | 
| `Ctrl` + `Shift` + `Tab` | 左のタブに移動                     |                               | 
| `Ctrl` + `T`           | 新しいタブを開く                   |                               | 
| `Ctrl` + `N`           | 新しいウィンドウを開く             |                               | 
| `Ctrl` + `Shift` + `N`   | 新しいシークレットウィンドウを開く |                               | 
| `Ctrl` + `W`           | タブを削除                         | 色々なソフトで使えます      | 
| `Ctrl` + `Shift` + `T`   | 削除したタブを開く             |                               | 
| `Ctrl` + `F`           | ページ内検索                       | 色々なエディタで使えます    | 
| `Ctrl` + `Shift` + `B`   | ブックマークバーの表示 / 非表示    | 画面共有の時に便利            | 
| `Alt` + `←`           | 前のページに戻る（ブラウザバック） |                               | 
| `Alt` + `→`           | 次のページに進む                   |                               | 
| `F5`                 | ページの再読み込み（リロード）     | `Ctrl` + `R` も可                 | 
| `Shift` + `F5` | キャッシュを削除して再読み込み<br>（スーパーリロード） | `Ctrl` + `F5` 等も可
| `F6`                 | アドレスバーに移動                 | `Ctrl` + `L` 、`Alt` + `D` 等も可     | 
| `F11`                | 全画面表示                         |                               | 
| `F12`                | デベロッパーツールの起動           | `Ctrl` + `Shift` + `I` 等も可       | 

:::note warn
上記はWindowsでGoogle Chromeを使用する場合です。他のOSやブラウザでは異なる場合があります。
例えば、Macでのデベロッパーツール起動のショートカットキーは「`Cmd(⌘)` + `Option` + `I`」です。
:::

他にもたくさんのショートカットキーが存在します。気になる方は以下のGoogle Chrome ヘルプページ等で調べてみてください。

https://support.google.com/chrome/answer/157179


# 番外編 ～マウスホイールの便利機能～
ここまで散々キーボード操作を推していてあれなのですが、最後にマウス使用時に便利な小技を紹介します。
以後マウスホイールとは、マウスの左クリックする部分と右クリックする部分の間に存在する、くるくる回せる部分のことを指します。

## タブの消去
タブの消去は、タブのどこかをマウスホイールでクリックするとできます。
もちろんタブのタイトルの右の方にある小さな「×」を左クリックしても良いのですが、特に開いているタブが多いと「×」を正確に狙うのは難しい（そもそも×が表示されないときもある）ので、ホイールクリックの方がおすすめです。これは最近知ったのですがめっちゃ感動しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3031951/f273b5f5-f3bd-937d-e2c9-86516e196ff3.png)

## リンクを新しいタブで開く
検索結果画面に出てきた候補のサイトたちを見るとき、検索結果画面を残しておいたまま、別のタブでサイトを開きたかったり、引用されているリンク先を新しいタブで開いたりしたい場合があると思います。
これもリンクをマウスホイールでクリックすると、リンク先を新しいタブで開くことができます。
リンクを右クリックして、新しいタブで開く をクリックするよりも手間が減って便利です。

## 画面のスクロール
マウスホイールをクリックしてからマウスを動かすと、その方向に画面をスクロールすることができます。マウスホイールをくるくるするよりも速くスクロールしたい場合に便利です。マウスの設定等によってはできないかもしれません。

# おわりに

自分の備忘録も兼ねて、ブラウザを使う時の時短できる便利機能を紹介してみました。
知らなかった機能があればぜひ使ってみてください。

冒頭にも書きましたが、本記事は

https://qiita.com/advent-calendar/2022/eeic

の12日目の記事です。翌日の記事は@applebanana_10さんの「カラオケで高得点を取るために」です。