知っておくとためになるChromeの便利な使い方

# はじめに
* こんにちは、takadowaです。
* みなさんはウェブブラウザに何を使っていますか？ 私は長年、Google Chromeを使っています。
* 今回は、私がChromeを普段から使う中で、「知っておくと捗るなー」と思ったちょっとしたtipsを共有したいと思います。

# 実行環境
本説明では、以下の実行環境で実行した結果を掲載します。
環境の違いなどにより、記載どおりに動かない恐れもありますが、その点はご容赦ください。

* macOS 10.14.6
* Google Chrome 84.0.4147.135

# 知っておくとためになるChromeの便利な使い方3選

## タブグルーピング機能

「ブラウザでいろいろ作業をしている間に、開いているタブの数がとんでもないことになっていた！」
そんな経験ありませんか？私はしょっちゅうあります。
タブが増えすぎると、どのタブが何のために開いていたものなのかわからなくなります。
そんなときに便利なのがこちらの**「タブグルーピング機能」**です。

![タブグルーピング_Before_After](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692385/50841602-dfdd-ec17-2e15-426fe826e557.png)

Chrome80で初めて公開され、Chrome83から誰でも利用できるようになりました。
これを使うと、タブをグループ化することができるようになります。
使い方は簡単で、**グループ化したいタブを選択して右クリックし、「タブを新しいグループに追加」をクリック**するだけです。

![タブグルーピング_手順](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692385/a5bdd3fb-f8be-8397-35c9-fdef39c7699e.png)

グループにタブを追加したり、削除したりしたいときもそのタブをドラッグ&ドロップするだけでできます。
また、タブグループには、色や名前を付けることもできます。

![タブグルーピング_補足](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692385/54300185-76e4-61b1-aa72-0055aff536d5.png)

タブを開きすぎないことが一番ですが、それでも開きすぎる方は、こちらのタブグルーピング機能を利用して、少しでも快適なウェブブラウジングを過ごしてみてはいかがでしょうか？

## 検索ショートカット

仕事や調べごとをしていると、いろんなウェブサイトで検索したくなることはよくあります。
例えば、「Googleで検索したい」「Stackoverflowで検索したい」「Amazonで検索したい」などです。
そんなときに便利なのが**「検索ショートカット機能」**です。

後述する方法でショートカットキーを予め登録しておくと、**URL欄に「ショートカットキー + スペース + 検索クエリ」を入力するだけで、そのウェブサイトで検索することができるようになります**。

例えば、
* 「g + スペース + 検索クエリ」 => Googleで検索
* 「s + スペース + 検索クエリ」 => Stackoverflowで検索
* 「a + スペース + 検索クエリ」 => Amazonで検索
ということが可能になります。

![chrome_search_shortcut.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692385/b858d5f6-2536-ae8a-1f83-a5f328f6bffa.gif)

検索ショートカットキーを登録するには、「設定」=>「検索エンジンの管理」をクリックします。

![検索ショートカットキー_手順1](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692385/6ca9160e-2aeb-607c-99ef-4ff502922d32.png)

「追加」をクリックし、追加したい検索ショートカットキーを登録します。
例えば、「s + スペース + 検索クエリ」と入力すれば「Stackoverflowで検索」できるようにするには、以下のように登録します。

* 検索エンジン: 「`Stackoverflow`」
    - 自分が区別できれば好きな名前を入力してOK
* キーワード: 「`s`」
    - ここに入力した値が検索ショートカットキーとなります。
* URL: 「`https://stackoverflow.com/search?q=%s`」
    - 検索時の検索クエリが入る部分を「%s」に置き換えたURLを入力します。
    - 以下に例を記します
        - Googleの場合: 「`https://www.google.com/search?q=%s`」
        - ヤフーの場合: 「`https://search.yahoo.co.jp/search?p=%s`」
        - Qiitaの場合: 「`https://qiita.com/search?q=%s`」
        - Amazonの場合: 「`https://www.amazon.co.jp/s?k=%s`」

![検索ショートカットキー_手順2](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692385/43759cd4-170c-23e2-a138-9038284a5139.png)

ちなみに、一度利用したことがウェブサイトの場合、Chromeが自動で「その他の検索エンジン」欄に登録しておいてくれることがあります。
それを利用する場合は、「︙」ボタンをクリックし、「編集」することで、その設定を使い回すことが可能です。

![検索ショートカットキー_手順3](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692385/2d689997-6ffe-27fa-6140-c733dc076cd3.png)

## パーセントに変換せずにURLをコピー

日本語が含まれているようなURLをコピーすると、以下のようにパーセントに変換された状態でコピーされてしまいます。

* 例えば、`https://ja.wikipedia.org/wiki/メインページ` をコピーすると、`https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8` となってしまう

コンピューターにとってはパーセントの方が扱いやすいのでこうなってしまうのだと思うのですが、人間にとっては読みにくいので日本語のままURLをコピーしてほしいと思うことがよくあります。

そんなときは、**`https://...`の最初の1文字を除いた状態、すなわち`ttps://...`の部分だけをコピペすると、日本語の部分が日本語のままコピペすることができるようになります**。

![URL_copy](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692385/1b26fe43-4e10-da62-429e-38559d6a9f14.png)

コピペ後に先頭に`h`を追加してあげる必要はありますが、この方法がおそらくいまのところ一番簡単にできるのではないかと思いますので、参考にしてみてください。

# まとめ
知っておくとためになるChromeの便利な使い方を3つお伝えしました。

* タブグルーピング機能
    - グループ化したいタブを選択して右クリックし、「タブを新しいグループに追加」をクリックすれば、タブをグループ化することができます
* 検索ショートカットキー
    - 「設定」=>「検索エンジンの管理」で予めショートカットキーを登録しておけば、URL欄に「ショートカットキー + スペース + 検索クエリ」を入力するだけで、そのウェブサイトで検索することができるようになります
* パーセントに変換せずにURLをコピー
    - URLをコピーするときに最初の1文字を除いた「ttps://...」の部分だけをコピペすれば、URLの日本語部分がパーセントに変換されることなくコピーできます

# 参考サイト
* Google Chrome
    - https://www.google.com/chrome/
* Chrome83 release notes
    - https://support.google.com/chrome/a/answer/7679408#83
* Copying a UTF-8 URL from browser's address bar, gives only the ugly encoded one -- Stackoverflow
    - https://stackoverflow.com/questions/18176661/copying-a-utf-8-url-from-browsers-address-bar-gives-only-the-ugly-encoded-one