Web

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

投稿日:

1. はじめに

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

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

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

2. ページを開いたら検索フィールドにカーソルをセットさせる方法

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

(1) Tampermonkey 拡張機能を導入します

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

Tampermonkey を導入する

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

Tampermonkey のアイコンを見やすい位置に移動します

(2) ejje.weblio.jp ページの検索フィールドについて調べます

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

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

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

検索フィールドを表すHTML要素を調べます

(3) Tamplermonkey のスクリプトを作成します

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

新規スクリプトを追加します

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

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

document.querySelector('#searchWord').focus();
新規スクリプトを編集します

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

スクリプトを保存して閉じます

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

Tampermonkey の [インストール済み UserScript] 画面

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

3. 作成したスクリプトを編集したり削除したり

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

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

現在有効なスクリプトを編集したり削除したりできます

4. おわりに

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

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

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

2021.08.04

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

Google App Engine

GAE (PHP 7) で Cloud Firestore を使う手順

Google App Engine で Firestore を使う手順について説明します。

Web Vitals

Google Fonts がフォントファイルを読み込む様子を観察する

Google Fonts がフォントファイルを読み込む様子を観察します。

DokuWiki

DokuWiki が最新版なのに upgrade now! が表示される場合の対処法

目次1. DokuWiki が最新版なのに upgrade now! が表示される2. 対処方法その13. 対処方法その24. おわりに参考 1. DokuWiki が最新版なのに upgrade n …

プライバシー

ウェブブラウザの DNT (Do Not Track) を有効にする方法

目次1. Do Not Track とは?2. トラッキングを拒否する意思を送信する手順Chrome の場合Firefox の場合Microsoft Edge の場合Internet Explorer …

Chrome

Chrome のアドレスバーから任意のサイトの検索機能を使用する方法

目次1. Chrome の検索エンジン管理機能2. 任意サイトの検索機能を Chrome に追加して使用する1. アルクのサイトで検索したときの URL を調査する2. 検索エンジンとして追加する3. …