<p>ShortcutKey2URLというChrome/Firefox用の拡張機能がとても便利でずっと愛用しているので、記事として紹介したいと思います。</p>
<ul>
<li><a href="https://chrome.google.com/webstore/detail/shortcutkey2url-for-chrom/hfohmffbfcobmhfgpkbcjjaijmfplcdg" target="_blank" rel="nofollow noopener noreferrer">ShortcutKey2URL for Chrome - Chrome ウェブストア</a></li>
<li><a href="https://addons.mozilla.org/ja/firefox/addon/shortcutkey2url/" target="_blank" rel="nofollow noopener noreferrer">ShortcutKey2URL (WebExtensions) – 🦊 Firefox (ja) 向け拡張機能を入手</a></li>
</ul>
<h2 id="shortcutkey2url%E3%81%A8%E3%81%AF">
<a class="header-anchor-link" href="#shortcutkey2url%E3%81%A8%E3%81%AF" aria-hidden="true"></a> ShortcutKey2URLとは</h2>
<p>ショートカットキーを使用してURLを開いたり、移動したり、JavaScriptを実行できる拡張機能です。</p>
<p>スタートアップキーであらかじめ設定しておいた動作の一覧を表示し、次のキーでその動作を実行します。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/gpcojp2lwguvykf20vng9f821yii" alt="start.gif" loading="lazy" class="md-img"></p>
<p>動作として設定できるものには、下記のようなものがあります。</p>
<ul>
<li>URLへの移動。既に開いているURLの場合は、そのタブへ移動し、開かれていない場合には、新しいタブとして開く。</li>
<li>新規タブとしてURLを開く。</li>
<li>現在のタブにURLを開く。</li>
<li>現在のタブで指定したJavaScriptを実行する。</li>
<li>新規タブとしてURLを開いて、その後に指定したJavaScriptを実行する。</li>
<li>シークレットウインドウに指定のURLを開く。</li>
<li>シークレットウインドウに現在のタブと同じURLを開く。</li>
</ul>
<h2 id="%E4%BE%BF%E5%88%A9%E3%81%AA%E3%81%A8%E3%81%93%E3%82%8D">
<a class="header-anchor-link" href="#%E4%BE%BF%E5%88%A9%E3%81%AA%E3%81%A8%E3%81%93%E3%82%8D" aria-hidden="true"></a> 便利なところ</h2>
<h3 id="%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88%E3%82%AD%E3%83%BC%E3%81%8C1%E6%96%87%E5%AD%97%E3%81%AB%E9%99%90%E5%AE%9A%E3%81%95%E3%82%8C%E3%81%AA%E3%81%84">
<a class="header-anchor-link" href="#%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88%E3%82%AD%E3%83%BC%E3%81%8C1%E6%96%87%E5%AD%97%E3%81%AB%E9%99%90%E5%AE%9A%E3%81%95%E3%82%8C%E3%81%AA%E3%81%84" aria-hidden="true"></a> ショートカットキーが1文字に限定されない</h3>
<p>ショートカットとして登録したいものが増えてくると、キーが被ってしまってどうしよう、、といったことが出てくると思います。<br>
ShortcutKey2URLだと、ショートカットキーは1文字だけでなく複数文字も指定できるので、ショートカットが増えてきても問題ありません。</p>
<p>例えばGoogleは複数のサービスを提供していますが、これらを1文字目は<code>G</code>、2文字目は各サービスの先頭文字といったような設定ができます。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/1zyn914nea6knvbz4mgd2r7s92xq" alt="google.png" loading="lazy" class="md-img"></p>
<p>キーとして連続して入力された文字から、ショートカット対象が1つに絞り込まれた時点でその動作を実行するような仕組みになっています。</p>
<h3 id="%E6%97%A2%E3%81%AB%E9%96%8B%E3%81%84%E3%81%A6%E3%81%84%E3%82%8B%E3%82%BF%E3%83%96%E3%81%AB%E9%A3%9B%E3%81%B9%E3%82%8B">
<a class="header-anchor-link" href="#%E6%97%A2%E3%81%AB%E9%96%8B%E3%81%84%E3%81%A6%E3%81%84%E3%82%8B%E3%82%BF%E3%83%96%E3%81%AB%E9%A3%9B%E3%81%B9%E3%82%8B" aria-hidden="true"></a> 既に開いているタブに飛べる</h3>
<p>ショートカットキーの動作として<code>Jump to url</code>というのがあり、これを指定すると</p>
<ul>
<li>既にそのURLが開かれている場合には、そのタブに移動
<ul>
<li>URLは前方一致で比較</li>
</ul>
</li>
<li>開かれていない場合には、新規タブとして開く</li>
</ul>
<p>といった動作になります。</p>
<p>頻繁に開くサイト(Twitterとか)は、<code>Jump to url</code>で指定しておくと、毎回新たにタブを開くことなく、既に開いているタブに移動できてとても便利です。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/tctzqbuzlztgsbeqkibeahfsua9z" alt="twitter.png" loading="lazy" class="md-img"></p>
<h3 id="%E3%83%96%E3%83%83%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%AF%E3%83%AC%E3%83%83%E3%83%88%E3%82%92%E7%99%BB%E9%8C%B2%E3%81%A7%E3%81%8D%E3%82%8B">
<a class="header-anchor-link" href="#%E3%83%96%E3%83%83%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%AF%E3%83%AC%E3%83%83%E3%83%88%E3%82%92%E7%99%BB%E9%8C%B2%E3%81%A7%E3%81%8D%E3%82%8B" aria-hidden="true"></a> ブックマークレットを登録できる</h3>
<p>URLだけでなく、ブックマークレットを登録することもできます。<br>
ブックマークレットは <code>Execute script</code> として指定します。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/l0x2yb7xrov6czbjnyr1rc7x7b9e" alt="bookmarklet.png" loading="lazy" class="md-img"></p>
<p><code>javascript:</code>はあっても無くても大丈夫です。<br>
(ブックマークレットは通常URL欄にjavascriptスキームとして入力する形で記載されているので、それをそのままコピーして入力しても大丈夫なようになっています)</p>
<h3 id="url%E3%82%92%E9%96%8B%E3%81%84%E3%81%9F%E5%BE%8C%E3%81%ABjavascript%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%A7%E3%81%8D%E3%82%8B">
<a class="header-anchor-link" href="#url%E3%82%92%E9%96%8B%E3%81%84%E3%81%9F%E5%BE%8C%E3%81%ABjavascript%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%A7%E3%81%8D%E3%82%8B" aria-hidden="true"></a> URLを開いた後にJavaScriptを実行できる</h3>
<p>URLを開いた直後に、JavaScriptを実行するようにも設定できます。<br>
<code>Script (optional)</code>に実行したいJavaScriptを入力しておくと、そのURLを開いた/移動した時にJavaScriptが実行されます。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/t7m0lj74isbr3dizy2g05819826w" alt="script.png" loading="lazy" class="md-img"></p>
<p>たとえばとあるサイトを開いた直後に、、</p>
<ul>
<li>初期フォーカスの位置を変えたい</li>
<li>初期値として入力フォームに値を入れたい</li>
</ul>
<p>といったようなことが、これによって実現できます。</p>
<h2 id="%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95">
<a class="header-anchor-link" href="#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95" aria-hidden="true"></a> 使用方法</h2>
<h3 id="%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">
<a class="header-anchor-link" href="#%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> インストール</h3>
<p>下記からインストールします。</p>
<ul>
<li>Chrome: <a href="https://chrome.google.com/webstore/detail/shortcutkey2url-for-chrom/hfohmffbfcobmhfgpkbcjjaijmfplcdg" target="_blank" rel="nofollow noopener noreferrer">ShortcutKey2URL for Chrome - Chrome ウェブストア</a>
</li>
<li>Firefox: <a href="https://addons.mozilla.org/ja/firefox/addon/shortcutkey2url/" target="_blank" rel="nofollow noopener noreferrer">ShortcutKey2URL (WebExtensions) – 🦊 Firefox (ja) 向け拡張機能を入手</a>
</li>
</ul>
<h2 id="%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%E3%82%A2%E3%83%83%E3%83%97%E3%82%AD%E3%83%BC%E3%81%AE%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%E3%82%A2%E3%83%83%E3%83%97%E3%82%AD%E3%83%BC%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> スタートアップキーの設定</h2>
<p>スタートアップキーは、デフォルトの状態ではCtrl+.(ピリオド)です。(Macでは、Command+,(カンマ))<br>
メニュー &gt; その他ツール &gt; 拡張機能 の キーボード ショートカット にて変更できます。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/m3btiwwqvmjdnt484ob0iozsfrwb" alt="change_startupkey.png" loading="lazy" class="md-img"></p>
<h2 id="%E6%93%8D%E4%BD%9C%E6%96%B9%E6%B3%95">
<a class="header-anchor-link" href="#%E6%93%8D%E4%BD%9C%E6%96%B9%E6%B3%95" aria-hidden="true"></a> 操作方法</h2>
<p>スタートアップキーを押下すると、ポップアップにてショートカットの一覧が表示されます。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/urny2xsev08stwumdfa2nxurlc15" alt="popup.png" loading="lazy" class="md-img"></p>
<p>一覧にあるキーを入力すると、対応するショートカットが実行されます。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/69755a3vru8r7mkyphe7ibviy0h8" alt="run.gif" loading="lazy" class="md-img"></p>
<h2 id="%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88%E3%81%AE%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> ショートカットの設定</h2>
<p>オプション画面でショートカットキーを設定します。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/7f1tzor6maufinbnn5295bfoi96i" alt="option.png" loading="lazy" class="md-img"></p>
<p>オプション画面には、ポップアップ画面の<code>Options</code>リンクや</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/bbheixhhzq9w9sikc7m9vp2n04cd" alt="goto_option1.png" loading="lazy" class="md-img"></p>
<p>拡張機能メニューの「オプション」から移動できます。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/jl5lnuzj3jqd2xxf2zyjqxe2g57o" alt="goto_option2.png" loading="lazy" class="md-img"></p>
<h3 id="settings">
<a class="header-anchor-link" href="#settings" aria-hidden="true"></a> Settings</h3>
<p><code>Column count</code> は、ポップアップで表示するショートカットの列数を指定します。<br>
左が<code>2</code>を指定した場合、右が<code>3</code>を指定した場合です。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/acxxp4s2w5urtx6bwhgs81fmj1e1" alt="column2.png" loading="lazy" class="md-img"> <img src="https://storage.googleapis.com/zenn-user-upload/q9v9967jyl9k4i2hb5bdaukdvrud" alt="column3.png" loading="lazy" class="md-img"></p>
<p><code>Option</code>の<code>Interactive filter of shortcut keys on the popup</code>をチェックすると、ポップアップで表示するショートカットをインタラクティブに絞り込むことができます。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/ffk6y5148l9ymragfyp5ofa7sj1o" alt="interactive.gif" loading="lazy" class="md-img"></p>
<h3 id="shortcut-keys">
<a class="header-anchor-link" href="#shortcut-keys" aria-hidden="true"></a> Shortcut Keys</h3>
<p><code>Add current page</code>をクリックすると、現在のページをショートカットキーとして簡単に設定できます。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/78hxi9ntivdyafjjfp17p48ulmiy" alt="add_current_page.png" loading="lazy" class="md-img"></p>
<p>コンテキストメニューからも追加可能です。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/082vduenso8fzjlox2a1c68jseoq" alt="context_menu.png" loading="lazy" class="md-img"></p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/wdzx72x204rcon4seluben4pyemu" alt="add_current_page_setting.png" loading="lazy" class="md-img"></p>
<p><code>Key</code>にはショートカットキーとして割り当てるキーを設定します。複数文字とすることも可能です。<br>
スタートアップキーを押下後、ここで設定したキーを押下することによって、ショートカットが実行されます。</p>
<p><code>Hide in shortcut key list displayed in popup</code>にチェックを付けると、ポップアップで表示されるショートカットの一覧にて非表示とすることができます。<br>
非表示となるだけで、ショートカットキーとしては有効です。</p>
<p><code>Action</code>でショートカットキーとしての動作を指定します。<br>
指定できるものは、下記の通りです。</p>
<ul>
<li>
<code>Jump to url</code> URLへの移動。既に開いているURLの場合は、そのタブへ移動し、開かれていない場合には、新しいタブとして開く。
<ul>
<li>既に開いているURLのチェックは、前方一致で行われる。</li>
</ul>
</li>
<li>
<code>Open url in new tab</code> 新規タブとしてURLを開く。</li>
<li>
<code>Open url in current tab</code> 現在のタブにURLを開く。</li>
<li>
<code>Execute script</code> 現在のタブで指定したJavaScriptを実行する。</li>
<li>
<code>Open url in incognito window</code> シークレットウインドウでURLを開く。</li>
<li>
<code>Open current tab in incognito window</code> シークレットウインドウで現在のタブを開く。</li>
</ul>
<p><code>Script (optional)</code>を指定することによって、URLを開いた後に任意のJavaScriptを実行することができます。</p>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p>Firefox版の場合、プライベートウインドウを開くアクションを有効にするには、拡張機能の詳細から、「プライベートウィンドウでの実行」を「許可する」に設定してください。</p>
</div></aside>
<h3 id="import-%2F-export">
<a class="header-anchor-link" href="#import-%2F-export" aria-hidden="true"></a> Import / Export</h3>
<p>ショートカットキーの一覧は、エクスポート / インポートが可能です。<br>
これによりバックアップを取ったり、移行を行うことができます。(FirefoxとChrome間での移行など)</p>
<h2 id="%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> おわりに</h2>
<p>GitHubのREADMEで記載していることと被るところもありますが、今後もこちらでTips的なことがあれば追記していこうと考えています。</p>
<p>もし、不具合や機能要望などあれば、GitHubにて頂けると助かります。</p>
<ul>
<li><a href="https://github.com/onozaty/chrome-shortcutkey2url" target="_blank" rel="nofollow noopener noreferrer">onozaty/chrome-shortcutkey2url: ShortcutKey2URL for Chrome</a></li>
<li><a href="https://github.com/onozaty/firefox-shortcutkey2url" target="_blank" rel="nofollow noopener noreferrer">onozaty/firefox-shortcutkey2url: ShortcutKey2URL - Firefox Extension</a></li>
</ul>


ShortcutKey2URLを使ってブラウザ操作を快適に(Chrome/Firefox拡張機能)

ショートカットキーが1文字に限定されない

ブックマークレットを登録できる

URLを開いた後にJavaScriptを実行できる

Discussion