エラーログにbrowserconfig.xmlが見つからないというログがちょこちょこで出るようになってきたので、調べてみました。
■browserconfig.xmlとは？
Windows8で機能するIE11のライブタイルにて、ユーザーがサイトをピン留めするとIE11によって自動的に読み取られるファイル。
[参考]MSDN(Microsoft Developer Network)内の関連情報ページ
ライブ タイルの作成
IE11での Web サイト用カスタム タイルの作成
どうやら、ユーザがサイトをピン留めした時の表示内容や挙動を設定しておくファイルといった感じのものの様です。
■browserconfig.xmlを作成する
一番簡単なのは、以下のサイトを利用して作成する方法です。
BuildMyPinnedSite.com
[参考]
IE9の「ピン留め」対応方法紹介サイト、日本語を含む各国語版を公開(INTERNET Watch)
BuildMyPinnedSite.comは、マイクロソフトが提供しているbrowserconfig.xmlの作成が簡単に出来るサイト。
サイトで案内されている3つの手順を順に行っていくだけで、browserconfig.xmlを作成することができます。
(1)Webサイトのタイルを作成する
「タイトル(タイルに表示する文字列)」「(タイルの)背景色」「アップロード(タイルに表示する画像)」の3つを入力します。
・タイトル(タイルに表示する文字列)
サイト名で良いかと思います。
・(タイルの)背景色
ライブタイルの背景色を指定します。入力欄に直接カラーコードを入力しても良いですし、の右にあるスポイトマークをクリックして色を選択しても良いです。
・アップロード(タイルに表示する画像)
タイルに表示する画像をアップロードできます。アップロードできるのは、png、gif、jpgの3種類のファイルです。
画像をアップロードすると、画像の下に4つのサイズ「128×128」「270×270」「270×558」「558×558」が表示されます。それぞれをクリックし、上の画像部分をドラッグして画像の表示範囲を指定するとサイズの所にチェックマークがつくので、それを全サイズに対して行います。
実際にどんな感じに見えるのかは、ページ右側の「ライブプレビュー」部分に表示されるので、それを見ながら作業すると良いです。
ちなみに、270×558が横長画像となる為、アップロードする画像は余白が大きい画像か横長の画像が良いです。そうでないと、表示したい部分が入らない、上下が切れた画像しか作れませんので・・・。
(2)プッシュ通知を追加する
ライブタイルのプッシュ通知で届けたい情報を指定できます。
ここでは、RSSフィードのURLを入力することが可能です。
(3)コードを入手
(1)～(2)で指定した情報を反映させたコードが自動生成されます。
・表示されたMETAタグをHTMLに追加する方法
・「パッケージをダウンロード」からbrowserconfig.xmlと各種画像ファイルをダウンロードする方法
の2種類がありますが、HTMLを書き換えるのは面倒なので、パッケージをダウンロードするのが良いかと思います。
ダウンロードしたZIPファイルを解凍すると
・browserconfig.xml
・large.png
・square.png
・tiny.png
・wide.png
・README.txt
というファイルがあります。
browserconfig.xmlをルートディレクトリにアップロードし、同じディレクトリに4つの画像ファイルもアップロードします。
例)ウェブアラカルトの場合
http://alc.netgamebm.com/browserconfig.xml
にbrowserconfig.xmlをアップロードしました。
もし、4つの画像を別のディレクトリにアップロードしたいという場合は、browserconfig.xmlの中の各画像ファイルへのパスを書き換えればOKです。
以上で完了です。
試しにWindows8.1のスタート画面にウェブアラカルトをピン留めしてみてみると、以下の様になりました。
ブログの最新記事数件のタイトルが、ローテーションでくるくると表示されていました。
XPからOSを切り替える人も多いでしょうし、そんなに作るのに手間のかかる物ではないので、browserconfig.xmlを作っておいてもよいのではないでしょうか。
