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

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

関連記事

Web

閲覧しているウェブページで利用されている HTTP のバージョンを確認する方法

ウェブブラウザで ウェブサイトを閲覧している際、HTTP のどのバージョンが使われているのか確かめる方法を紹介します。 目次Chrome の場合FirefoxEdge Chrome の場合 (1) ウ …

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

Amazon ページ右端のカート内商品リストを非表示にする方法について説明します。

Web

HTTP クッキーをより安全にする SameSite 属性について (Same-site Cookies)

HTTP クッキー(Cookie) をより安全に使用することができる SameSite 属性 について説明します。 目次1. HTTP クッキーの基本動作2. クッキーの SameSite 属性につい …

Web

TypeSquare の導入手順

Webフォントサービスである TypeSquare の導入手順について説明しています。

Firefox

Firefox の 強化型トラッキング防止機能

目次1. Firefox の強化型トラッキング防止機能2. 用語トラッカー (Trackers)ソーシャルメディアトラッカートラッキングコンテンツサードパーティのクッキー クロスサイトのトラッキングク …