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

Intersection Observer API を使った画像の遅延読み込み

目次1. 画像の遅延読み込み(遅延ローディング)2. Intersection Observer API3. Intersection Observer API を使って画像を遅延読み込みする例1. …

Web

ツールを公開するWebサイトを作っています

いろいろなツール(Webページ上で提供できるツールに限ります)を公開するサイトを作っています。 Tools on Web https://tools.laboradian.com/ 載せているツールは …

Chrome

ブックマークレットで画面上の色を取得する(Eye Dropper APIを利用)

画面上の色を取得するブックマークレットを紹介します。

Web

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

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

Web

Flexbox を使ってページ全体を中央寄せにする

目次1. はじめに2. やり方3. デモページ4. おわりに参考 1. はじめに CSS(スタイルシート) の Flexbox を使って ウェブページ全体を中央寄せにする例を紹介します。 2. やり方 …