Can I use というのは最新のHTMLの要素やCSSのプロパティなどがどのブラウザで使用できるかを調べたい時に使うWebアプリです。
Can I useで特定の要素やプロパティについて検索するために有料の検索アプリをインストールしている方もいらっしゃいますが、私の場合Chromeのアドレスバーから検索できるようにしています。
この設定は、今のところWindows・Mac版のChromeではできますが、スマートフォン版のChromeではできませんのでご注意ください。
設定方法
Chromeのウインドウ右上の[…]が縦になったアイコンをクリックして[設定]をクリックします。
Mac版であれば、[command]キーを押しながら[,](カンマ)キーを押しても構いません。
ページを下にスクロールし、[検索エンジンの管理]をクリックします。
[その他の検索エンジン]の右にある[追加]をクリックします。
以下のように入力します。
検索エンジン
can I use
キーワード
cu
URL
http://caniuse.com/#search=%s
検索方法
Chromeのアドレスバーにcuと入力しスペースキーまたは[tab]キーを押してから検索したいキーワードを入力します。
その後、[Enter]キーを押します。
するとCan I useの該当のページが表示されます。
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コーディングスクール のページからどうぞ。