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

クロームの拡張機能「Shortkeys」

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

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

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

Shortkeysでできること

Shortkeysは、Google Chrome拡張機能です。

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

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


Shortkeysなら、自分で設定したキーを押すことで、ショートカットができるようになります(Chrome上だけで動く)。

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

一瞬で画面下にスクロール
一瞬で画面下にスクロール

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

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

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

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

「Shortkeys」の設定の仕方

ではShortkeysでの設定の仕方を紹介していきます。

「Shortkeys」をインストール

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

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

「Shortkeys」を起動させる

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

アイコンをクリック

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

← こんなアイコンが。

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

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

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

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

ウィンドウが表示される

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

ウィンドウが表示される
ウィンドウが表示される

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

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

「Add(追加)」をクリック

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

「Add(追加)」をクリック
「Add Shortcut(ショートカットを追加)」をクリック

「Keyboard Shortcut」を入力

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

「Keyboard Shortcut」を入力
「Keyboard Shortcut」を入力

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

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

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

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

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

「+(プラス)」も半角で、スペースなどは入力しません。

「Behavior」を選択

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

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

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

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

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

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

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

【参考】「Run JavaScript」を選んだ場合

前項で「Run JavaScript」を選んだ場合は「JavaScript」を入れる必要があります。

以下のようにやってください。

まず、「Shortcut」の欄の左にある下向きの矢印をクリックすると、「JavaScript」を入力する欄が現れます。

そこにコードをコピペしましょう。

「Label」を入力

「Label(ショートカット設定の名前)」を入力しましょう。

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

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

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

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

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

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

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

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

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

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

DFなどのキーですね!

 下へスクロール上へスクロール
Keyboard shortcutDE
BehaviorPage downPage up
Label下に1ページ分スクロール上に1ページ分スクロール
下/上に1ページ分スクロールする

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

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

Keyboard shortcutCtrl+Shift+G
BehaviorSearch Google for selected text
Label選択したテキストを検索
選択したテキストをGoogle検索する

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

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

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

Keyboard shortcutCtrl+Shift+S
BehaviorRun JavaScript
Labelサイト内検索のブックマークレット
Javascript codejavascript:(function() { var searchDiv = document.createElement('div'); searchDiv.style.cssText = 'position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(255, 255, 255, 0.9); padding: 45px!important; text-align: center!important; box-shadow: 0px 3px 20px rgba(100, 100, 100, 0.9)!important; z-index: 1!important;'; var searchBox = document.createElement('input'); searchBox.type = 'text'; searchBox.style.cssText = 'width: 500px!important; height: 60px!important; font-size: 20px!important; margin-bottom: 10px;'; var searchButton = document.createElement('button'); searchButton.innerHTML = '検索'; searchButton.style.cssText = 'width: 150px!important; height: 60px!important; font-size: 20px!important; background-color: #2879ff!important; border: 1px solid #2879ff!important; border-radius: 4px!important; color: #fff!important; letter-spacing: 1em!important; text-indent: 1em!important; padding: 0.5em!important; margin-top: 20px!important;'; var closeButton = document.createElement('button'); closeButton.innerHTML = '×'; closeButton.style.cssText = 'position: absolute; top: 10px!important; right: 10px!important; width: 30px!important; height: 30px!important; line-height: 1!important; font-size: 30px!important; background-color: rgb(204, 204, 204)!important; border: none!important; border-radius: 50%!important; color: rgb(255, 255, 255)!important; cursor: pointer!important; padding: 0!important;'; searchDiv.appendChild(searchBox); searchDiv.appendChild(document.createElement('br')); searchDiv.appendChild(searchButton); searchDiv.appendChild(closeButton); document.body.appendChild(searchDiv); searchBox.focus(); searchBox.addEventListener('keydown', function(event) { if (event.keyCode === 13) { event.preventDefault(); searchButton.click(); } }); searchButton.addEventListener('click', function() { var keyword = encodeURIComponent(searchBox.value); var domain = window.location.hostname; var searchUrl = 'https://www.google.com/search?q=' + keyword + '+site%3A' + domain; window.location.href = searchUrl; }); closeButton.addEventListener('click', function() { document.body.removeChild(searchDiv); });})();
「サイト内検索」の登録

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

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

Keyboard shortcutCtrl+Shift+Q
BehaviorRun JavaScript
Label引用のブックマークレット
Javascript codejavascript:(function(){var code = '<!-- wp:quote -->\n<blockquote class="wp-block-quote">\n<p>' + window.getSelection() + '</p>\n<cite><a href="' + location.href + '" target="_blank" rel="noopener">' + document.title + '</a></cite></blockquote>\n<!-- /wp:quote -->';var ele = document.createElement('textarea');ele.value = code;document.body.appendChild(ele);ele.select();document.execCommand('copy');document.body.removeChild(ele);})();
「サイト内検索」の登録

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

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

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

Keyboard shortcutCtrl+Shift+M
BehaviorRun JavaScript
Labelテキストリンク取得
Javascript codejavascript:(function(){var url = window.location.href;var title = document.title;var text = '■ ' + title + '\n- - - - - - - - - - - - -\n' + url;var dummy = document.createElement('textarea');document.body.appendChild(dummy);dummy.value = text;dummy.select();document.execCommand('copy');document.body.removeChild(dummy);})();
テキスト用のリンクを取得するブックマークレット

【おまけ】わたしがShortkeysに登録しているデータ

最後におまけとして、わたしがShortkeysに登録しているデータをエクスポートした「テキストデータ」を置いておきます。

これをダウンロードして、書かれているテキストをShortkeysの画面でインポートのところに貼り付けてくださいね。

ダウンロード(txtデータ)

さて今回は、拡張機能Shortkeysを紹介しました。

この拡張機能のおかげで、ブックマークレットをショートカット起動させることができるようになりました。

ほんとうにすばらしいのですが、たまに起動しなくなることがあるのがアレですけど……。

「ブックマークレット」についてピンとこない方はこちらの記事をぜひどうぞ。

こちらはわたしが厳選したオススメのクローム拡張機能です。