アドレスバーの色がいきなり変わってびっくり！？ Android版Chromeブラウザのちょっとした機能に注目【吉川英一の「スマホのちょっと深いとこ」】
| たまにアドレスバーの色が変わるのは故障ではありません |
AndroidのChromeブラウザーでWebサイトを見ていると、いきなりアドレスバーやステータスバーの色が変わってしまったという経験はないでしょうか？ たまに見かけるとびっくりしてしまいますが、これは別に故障や気まぐれではなく、そのようにWebサイトが設定されているのです。
今回の連載「スマホのちょっと深いとこ」では、このようなAndroid版Chromeブラウザーのちょっと気の利いた機能を紹介していきます。
【「テーマカラー」をWebサイトで設定できる】
Android版Chromeブラウザーでは、Webサイトのアドレス入力欄があるアドレスバーの色はグレー、その上のステータスバーは黒ですが、表示するWebサイトによってはアドレスバーやステータスバーの色が変わって表示されます（*1）。有名どころではFacebookのWebページを表示すると、Facebookのテーマカラーである濃い青色になります。
*1） ステータスバーの色が変わるのはAndroid 5.0以降です。アドレスバーの色はそれ以前のバージョンでも変わります。
Android版Chromeブラウザーの通常表示（写真＝左）、FacebookのWebサイト表示時はアドレスバーやステータスバーの色が変わる（写真＝右）
実はAndroid版Chromeブラウザーでは、Webページのファイル（HTMLファイル）にWebページの「テーマカラー」を設定できるようになっています（*2）。Webページにテーマカラーが設定されていると、それをアドレスバーやステータスバーに表示します。
開発者向けコメント：
*2）「<meta name=”theme-color” content=”[色]”<」というmetaタグで設定されます。
FacebookのWebページに設定されたテーマカラー（赤枠部）
テーマカラーはページに固定で設定できるほか、表示後に変更することもできます（*3）。サンプルWebページにAndroid版Chromeブラウザーでアクセスして、カラーピッカーで色を変更すると、変更した色がアドレスバーやステータスバーに反映されます（*4）。
サンプルページ（写真＝左）、カラーピッカーでテーマカラーを変更できる（写真＝右）
【他ブラウザーの対応やWebサイトへの普及はこれから】
このテーマカラー機能は、速度測定サイトのFast.comや、管理画面でテーマカラーを変更できるはてなブログなど、設定しているWebサイトが徐々に増えてきています。
Fast.comではテーマカラーに白を設定（写真＝左）、はてなブログはテーマカラーを変更可能（写真＝右）
テーマカラー機能を活用すると、アドレスバーやステータスバー、Webサイトを含めて画面全体の色調を調整できるため、他のブラウザーの対応が進んでいけばより広く使われるようになるかもしれません。
記事執筆：えど（吉川英一）
■関連リンク
・エスマックス（S-MAX）
・エスマックス（S-MAX） smaxjp on Twitter
・S-MAX - Facebookページ
・サンプルWebページ
・サンプルWebページのソースコード（GitHub）
・連載『吉川英一の「スマホのちょっと深いとこ」』記事一覧 - S-MAX
・今日の気分はバリいくつ？