[拡張機能] Shortkeysならブックマークレットをショートカット起動できるよ!

こんにちは! ヨス（プロフィールはこちら）です。

今回はGoogle Chromeの拡張機能であるShortkeys（ショートキーズ）を紹介します。

わたしはブックマークレットをショートカットで起動させるためだけに使っています!

Shortkeysでできること

では、「Shortkeys」はどんなことに使えるのでしょうか?

ショートカットを設定できる

拡張機能のKeyconfig（← 現在は使えない）のように、Google Chrome上で設定したキーを押すことでいろんなショートカットができるようになります。

たとえばJキーを押したら、画面の一番下にスクロールする……ような設定ができます。

Ctrl＋Jのようなショートカットではなく、Jだけ……のような設定ができるのが特徴です。

ブックマークレットをショートカットで起動できる

Shortkeysのもっとも素晴らしい機能はブックマークレットをショートカットで起動できることです。

ブックマークレットはこういうものがありますよー。

「Shortkeys」の設定の仕方

ということで、Shortkeysでの設定の仕方を紹介していきます。

「Shortkeys」をインストール

なにはともあれ、「Shortkeys」をインストールしましょう。

こちらのページからインストール

「Shortkeys」を起動させる

では、Shortkeysを起動させましょう。

アイコンをクリック

Shortkeysをインストールすると、Google Chromeの上の方の「拡張機能メニュー」に表示されます。

← こんなアイコンが。

このアイコンをクリックしてください。

「オプション」をクリック

それをクリックすると、メニューが出てきますので「オプション」をクリックしましょう。

ウィンドウが表示される

すると、こんな感じのウィンドウが表示されます。

ショートカットを登録する

では、いよいよ、ショートカットを登録しましょう。

「Add（追加）」をクリック

登録するためには「Add（追加）」をクリックしましょう。

「Keyboard Shortcut」を入力

登録したい「Keyboard Shortcut（キーボードショートカット）」の欄を入力します。

たとえば先ほどの例のJを押したら画面の一番下にワープさせる設定なら、この欄に「 J 」と入力します。

大文字の「 J 」でも小文字の「 j 」でもオッケーです。ただし半角で。

Ctrlキー、CommandキーやAltキーなどを組み合わせたショートカットを作りたい場合は、こちらのように入力します。

入力する文字
`Control`キー	「Ctrl」もしくは、「Control」
`Command`キー	Command
`Alt`キー	Alt
`Option`キー	Option
`Shift`キー	Shift
`Tab`キー	Tab

これらとアルファベットキーを組み合わせ、たとえばCtrl＋Shift＋Lなら、「Ctrl+Shift+L」のように入力します。

「＋（プラス）」も半角で、スペースなどは入力しません。

「Behavior」を選択

そして「Behavior（挙動）」の列にあるプルダウンからショートカットに割り当てたい役割を選択しましょう。

「Behaver」の列でプルダウンから選択 — 「Behavior」の列でプルダウンから選択

先ほどの例のJキーを押すことで、一番下にスクロールさせたいときは、「Scroll to bottom（画面の一番下にスクロール）」を選択しましょう。

ちなみに、こちらがオススメの「Behavior」です。

オススメの「Behavior」
Copy URL	現在見ているタブのURLを取得（クリップボードにコピーされる）
Search Google for selected text	現在ドラッグしている文字をGoogleで検索（新しいタブで開く）
Open bookmark/bookmarklet in new tab	新規タブでブックマーク（もしくはブックマークレット）を開く
Run JavaScript	JavaScriptを起動させる

わたしはブックマークレットのコードを「Run JavaScript」に入力して使っています。

設定したものが起動しないこともあります。なぜ?

「Label」を入力

「Label」を入力しましょう。

「Label」というのはこのショートカット設定の名前ですね。

英語でも日本語でも何でも良いので、自分が管理するときにわかりやすい名前にしましょう。たとえば「Jで画面の一番下へ」みたいな。

最後に「Save」を忘れないように!

ここまでで設定できたのですが、このあと最後にSaveをクリックするのを忘れがちです。

右下にあるので絶対にクリックするのを忘れないように。

「Shortkeys」でヨスが登録している例

最後におまけとしてわたしがShortkeysで登録している例を紹介します。

下/上に1ページ分スクロール

Google Chromeを閲覧するときに、下/上に1ページ分スクロールするショートカットは登録しておきましょう。

右手はマウスの上に置いたままショートカットができるように、左手のホームポジションで操作できると便利ですよ。

DやFなどのキーですね！

下/上に1ページ分スクロールする
	下へスクロール	上へスクロール
Keyboard shortcut	D	E
Behavior	Page down	Page up
Label	下に1ページ分スクロール	上に1ページ分スクロール

選択したテキストをGoogle検索する

Google Chromeでネットを見ていて、選択したテキストをすぐにGoogle検索するショートカットを登録しています。

選択したテキストをGoogle検索する
Keyboard shortcut	Ctrl+Shift+G
Behavior	Search Google for selected text
Label	選択したテキストを検索

「サイト内検索」のブックマークレット

どこでもサイト内検索ができるようになるブックマークレットも登録しています。

わたしの場合はこのように登録しています。

「サイト内検索」の登録
Keyboard shortcut	Command+Ctrl+Shift+S
Behavior	Run JavaScript
Label	サイト内検索のブックマークレット
Javascript code	javascript:(function (){var frm = document.createElement("form");frm.style.position="absolute";frm.style.top="10px";frm.style.left="10px";frm.style.zIndex=999999;frm.style.width = "300px";frm.action = "http://www.google.co.jp/search";var q = document.createElement("input");q.type = "text";q.name = "q";q.style.width = "200px";q.ondblclick = function(){frm.parentNode.removeChild(frm);};frm.appendChild(q);var hid = document.createElement("input");hid.type = "hidden";hid.name = "as_sitesearch";hid.value = window.location.hostname;frm.appendChild(hid);var sub = document.createElement("input");sub.type = "submit";sub.value = "検索";frm.appendChild(sub);document.body.appendChild(frm);q.focus();})();

「引用」のブックマークレット（WordPressのブロックエディタ用）

ほかのサイトの文章を引用するときのHTMLコードを取得するブックマークレットもShortkeysに登録しています。

「サイト内検索」の登録
Keyboard shortcut	Command+Ctrl+Shift+Q
Behavior	Run JavaScript
Label	引用のブックマークレット
Javascript code	javascript:(function(){var ele=document.createElement('textarea');ele.style.width='100%';ele.value='<!-- wp:quote -->\n<blockquote class="wp-block-quote"><p>'+window.getSelection()+'</p><cite><a href="'+location.href+'" target="_blank" rel="noopener">'+document.title+'</a></cite></blockquote>\n<!-- /wp:quote -->';document.body.insertBefore(ele,document.body.firstChild);ele.focus();ele.select();ele.ondblclick=function(){ele.parentNode.removeChild(ele);};ele.oncopy=function(){setTimeout(function(){ele.parentNode.removeChild(ele);},1);return true;}})()

テキスト用のリンクを取得するブックマークレット

メールやLINEなどに張り付ける、こちらのような「記事タイトル＋URL」を取得するブックマークレットを登録しています。

例

[拡張機能] Shortkeysならブックマークレットをショートカット起動できる | ヨッセンス
- - - - - - - - - - - - -
https://yossense.com/shortkeys/

テキスト用のリンクを取得するブックマークレット
Keyboard shortcut	Command+Ctrl+Shift+M
Behavior	Run JavaScript
Label	テキストリンク取得
Javascript code	`javascript:(function(){var ele=document.createElement('textarea');ele.style.width='100%';ele.value=document.title+'\n- - - - - - - - - - - - -\n'+location.href+'';document.body.insertBefore(ele,document.body.firstChild);ele.focus();ele.select();ele.ondblclick=function(){ele.parentNode.removeChild(ele);};ele.oncopy=function(){setTimeout(function(){ele.parentNode.removeChild(ele);},1);return true;}})()`