Amazon, Alc, Weblio などを開いたら検索フィールドがフォーカスされるようにする

1. はじめに

検索フィールドが設置されているウェブページ（amazon.co.jp、eow.alc.co.jp、ejje.weblio.jp など）を開いた際、その検索フィールドにカーソルが自動的にセットされずにいらいらしたことはないでしょうか？

dictionary.com なんかだと、自動的にカーソルが検索フィールドにセットされるので、すぐに単語を検索することができて便利です。

本記事では、Tampermonkey というブラウザ拡張機能を使って、自動的にカーソルを検索フィールドにセットさせる方法を紹介します。

Chrome ブラウザを使い、ejje.weblio.jp ページに対して設定を行う手順を説明します。

Chrome ブラウザで Tampermonkey – Chrome ウェブストアにアクセスして、Tampermonkey を導入します。

導入すると、ツールバー上の Tampermonkey のアイコンは隠れているので、以下の操作で外に出します。

JavaScript コードで検索フィールドを取得するために、検索フィールドがHTMLでどう表現されているか調べます。

そのためには、まず検索フィールドを右クリックして [検証] を選択し、デベロッパーツールを開きます。

デベロッパーツールでは、検証フィールドを表すHTML要素がフォーカスされた状態になるので、id 属性を調べます。今回の場合、検索フィールドは input 要素で表現されており、id 属性には “searchWord” という値が指定されていることが分かりました。

ツールバー上の Tampermonkey アイコンをクリックし、[新規スクリプトを追加…] を押します。

@name の右側に、このスクリプトの名前をセットします。今回は、「Auto-focus on the search field (Weblio)」としました。

また、実行する処理は「// Your code here...」の下に記述します。今回の場合は、id属性値が “searchWord” であるHTML要素を取得して、その要素にフォーカスする JavaScript コードを記述します。具体的には以下のコードになります。

document.querySelector('#searchWord').focus();

記述できたら [ファイル] メニューから [保存] を行い、[閉じる] を選択します。

[インストール済み UserScript] の画面が表示されると思いますが、このまま Chrome のタブと閉じて構いません。

ここまでの操作により、今後 ejje.weblio.jp ページを開くと自動的に検索フィールドにカーソルが移動します。

ejje.weblio.jp ページを開いた状態で、ツールバー上の Tampermonkey アイコンをクリックすると、現在有効になっているスクリプト名が表示されます。その右の記号部分をクリックすると、[編集] や [削除] が簡単に実行できます。

別のページを開いているときでも、[ダッシュボード] をクリックすると、 Tampermonkey の [インストール済み UserScript] 画面が開き、各種操作を行うことができます。

今回の目的以外でも、ウェブページ上で何かしらの JavaScript コードを実行させたい場合は、Tampermonkey が便利です。ウェブページ上で使いにくい部分があり、JavaScript コードによって対応できる場合は、Tampermonkey を使いましょう。

同じ要領で、特定のウェブページ上で特定のCSSを適用したい場合は、Stylus という拡張機能で実現可能です。以下の記事で触れていますので、よろしければ御覧ください。

Amazon ページ右端のカート内商品リストを非表示にする方法