ChromeのアドレスバーからCan I useやWordPressを検索できるようにする方法

Can I use というのは最新のHTMLの要素やCSSのプロパティなどがどのブラウザで使用できるかを調べたい時に使うWebアプリです。

Can I useで特定の要素やプロパティについて検索するために有料の検索アプリをインストールしている方もいらっしゃいますが、私の場合Chromeのアドレスバーから検索できるようにしています。

この設定は、今のところWindows・Mac版のChromeではできますが、スマートフォン版のChromeではできませんのでご注意ください。

設定方法

Chromeのウインドウ右上の[…]が縦になったアイコンをクリックして[設定]をクリックします。
Mac版であれば、[command]キーを押しながら[,](カンマ)キーを押しても構いません。

ページを下にスクロールし、[検索エンジンの管理]をクリックします。

Chrome 検索エンジンの管理

[その他の検索エンジン]の右にある[追加]をクリックします。

Chrome 検索エンジンの追加

以下のように入力します。

検索エンジン

can I use

キーワード

cu

URL

http://caniuse.com/#search=%s

Chrome 検索エンジンの追加

検索方法

Chromeのアドレスバーにcuと入力しスペースキーまたは[tab]キーを押してから検索したいキーワードを入力します。

Chromeアドレスバーで検索

その後、[Enter]キーを押します。

するとCan I useの該当のページが表示されます。

Can I use検索結果

Webコーディングスクール 体験レッスン受付中

WordPress記事を検索する方法

WordPressの記事をChromeのアドレスバーから検索できるようにすることもできます。

WordPressの記事を検索したいときは、ブログのトップページのURLの後に、?s=検索したいキーワード のような文字列を追加して、以下のようなURLを発行すれば検索できます。

https://stocker.jp/diary/?s=検索したいキーワード

Chromeの設定画面で以下のように設定すると、アドレスバーで s と入力したあとにスペースキーまたは[tab]キーを押して検索したいキーワードを入力し、[Enter]キーを押すとこのブログの検索ができます。
ご自分のブログを検索したい場合は、URLの ?s= 以前の部分を書き換えてください。

検索エンジン

stocker.jp

キーワード

s

URL

http://stocker.jp/diary/?s=%s

ここまででお分かり頂けたかと思いますが、要するに検索キーワードの部分を %s に置き換えて、アドレスバーで「キーワード」として指定した文字列の後にスペースキーまたは[tab]キーを押して検索したいキーワードを入れてEnterキーを押せば良いということです。

クックパッドのレシピを人気順に表示する方法

Chromeのカスタム検索機能を使えば、クックパッドのレシピも検索できます。

たとえば普通にGoogle検索で[カレー レシピ]のように検索すると、クックパッドのカレーのレシピの一覧ページの新着順しか見れません。
人気順にするためにはプレミアムサービスに登録する必要があります。

このような場合クックパッドのサイト内検索機能を使って検索しようとしても(プレミアム会員でない場合は)うまくいきません。

Google検索で、たとえば[site:cookpad.com カレー]のように検索すればクックパッドのサイトのみに絞ることができますが、個別のレシピではなく一覧ページばかり出てきてしまいます。

そこで、一覧ページと個別のレシピページのURLに注目します。
一覧ページは、たとえば以下のように category という文字列が入っています。

https://cookpad.com/category/26

それに対して、個別のレシピページは以下のようにURLに recipe という文字列が入っています。

https://cookpad.com/recipe/507299

このような場合、一覧ページを除いて個別のレシピだけを検索に含めたい場合、[site:cookpad.com/recipe カレー]のようにGoogle検索します。

これをGoogleカスタム検索に設定する場合、以下のようにします。

検索エンジン

レシピ

キーワード

re

URL

https://www.google.co.jp/search?q=site:cookpad.com/recipe%20%s

これで、アドレスバーでreと入力したのちスペースキーまたは[tab]キーを押しキーワードを入力するとクックパッドの個別のレシピページが出てきます。
この検索結果は残念ながら「つくれぽ数順」などではありませんが、一般的に上位に出てくるページはつくれぽが多く、人気のあるレシピが出てくる場合が多いです。

最後に

スマートフォン時代のWebコーディングスクール」では、このようにcan I useを活用してHTML・CSSコーディングを効率よく進めています。

初回体験レッスンを開催中ですので、ご興味ある方は スマートフォン時代のWebコーディングスクール のページからどうぞ。

最近の記事

Web制作関連動画

メルマガ会員向けの「コーダーにも役立つ補完AI『Codeium』の使い方」の動画を期間限定で公開しています。
CodeiumはGitHub Copilotと似ていますが、CSSなども補完できて、今登録すれば無料で使えます。

メルマガでは、Web制作者のためのAI活用やWordPress関連の動画など、さまざまな特典があります。ご興味ある方は、ぜひメルマガにご登録ください。
Index