プログラミング言語や環境設定を中心としたパソコン関連の技術メモです。
主にシステム開発中に調べたことをメモしています。TIPS的な位置付けで、気が向いたときにちまちま更新していきます。
「browserconfig.xml」とは何ぞや?
結論から書くと、

Windows8.1(とIE11)でサイトをピン留めすると勝手に読みこまれるファイル

らしいです。

それでは詳細を書いていきます。

サーバのエラーログに、最近ちょいちょい

[Fri Aug 22 11:49:19 2014] [error] [client 198.51.100.22] File does not exist: /hogehoge/browserconfig.xml

のような内容が出力されていましてね。

「こりゃ、何じゃ(--?」と疑問に思ったのが調べたきっかけです。

WordPressの「wp-login.php」を探しているのと似たような感じだと思ったのですよ。
どっかのCMSか何か付属のファイルで、アタックの前段階として存在チェックをかけてるのかな~と。

そしたら、全然違いました(^^ゞ

Windows8.1(+IE11)環境で、サイトをスタート画面にピン留めすると
読み込み対象となるファイルらしいです。

役割的には、Faviconやapple-touch-iconに近いイメージですね。

ということは作っておいておいた方が良さ気かなぁ(--ゞ

早速作ってみることにしました。
ここから先は「browserconfig.xml」の作り方についてずらずらっと書いているので、
興味が無い人は一番下まで読み飛ばしてください。
一番下まで読み飛ばす、つまり、ここから先は読んでも意味無いよ、ってことです。

それでは「browserconfig.xml」の作り方ですが、
まずはマイクロソフトさんの純正サイト

http://www.buildmypinnedsite.com

に移動します。

2014年8月24日現在の見た目はこんな感じでしたφ(--)

20140824-01.png


ここで「1 Build your own site tile」をクリックすると入力画面が開きますφ(--)

20140824-02.png


入力項目は「Title」「Background color」「Upload」の3つです。
「Title」はタイルに表示するタイトル、「Background color」はタイルの色、
「Upload」でアップロードする画像はタイルに表示されるアイコンです。

私は以下のように設定しました。

項目
TitleわわわIT用語辞典
Background color#f5f5ed
Uploadぴよぴよ画像アップロード


入力を終えると「Next Step」ボタンが出てくるので、ポチっと押しますφ(--)

20140824-03.png


そうすると「1 Build your own site tile」の入力エリアが閉じて
「2 Add Notifications」の入力エリアが開きますφ(--)

20140824-04.png


入力項目は「Put the URL to your RSS feed here」です。
サイトでRSSファイルを公開していて、ライブタイルに表示したければ、そのURLを入力します。

私は以下のように設定しました。

項目
Put the URL to your RSS feed herehttp://wa3.i-3-i.info/index20.rdf


入力を終えたら「Get Feed」ボタンを押しますφ(--)

20140824-05.png


RSSを設定しない場合は「Next Step」ボタンを押します(--)

20140824-06.png


RSSの設定有無に依らず、ボタンを押すと「3 Get the Code!」が開きますφ(--)

20140824-07.png


「3 Get the Code!」内の「Download Package」を押すと、
作成された「browserconfig.xml」と画像ファイルをダウンロードできますφ(--)

20140824-08.png

20140824-09b.png

20140824-10.png


さて、ここからのやり方は2つあります。

1つ目は画像ファイルをアップロードして、メタタグを記述する方法です。
まずダウンロードしたファイル群のうち、画像ファイル

tiny.png
square.png
wide.png
large.png

をWebサーバのドキュメントルート直下に配置します。

その後、

Add these meta tags to the of your HTML page and upload the PNG tile backgrounds to your server.

と書かれている部分の下に書いてあるmetaタグをコピーします。

20140824-11.png


ちなみに私の入力内容では、以下のようなmetaタグが生成されていました。

<meta name="application-name" content="わわわIT用語辞典"/>
<meta name="msapplication-TileColor" content="#f5f5ed"/>
<meta name="msapplication-square70x70logo" content="tiny.png"/>
<meta name="msapplication-square150x150logo" content="square.png"/>
<meta name="msapplication-wide310x150logo" content="wide.png"/>
<meta name="msapplication-square310x310logo" content="large.png"/>
<meta name="msapplication-notification" content="frequency=30;polling-uri=http://notifications.buildmypinnedsite.com/?feed=http://wa3.i-3-i.info/index20.rdf&id=1;polling-uri2=http://notifications.buildmypinnedsite.com/?feed=http://wa3.i-3-i.info/index20.rdf&id=2;polling-uri3=http://notifications.buildmypinnedsite.com/?feed=http://wa3.i-3-i.info/index20.rdf&id=3;polling-uri4=http://notifications.buildmypinnedsite.com/?feed=http://wa3.i-3-i.info/index20.rdf&id=4;polling-uri5=http://notifications.buildmypinnedsite.com/?feed=http://wa3.i-3-i.info/index20.rdf&id=5; cycle=1"/>

このメタタグをWebサイトの<head>~</head>内に記載すれば完了です。

これが1つ目のやり方です。
「browserconfig.xml」は使いません。

2つ目のやり方は「browserconfig.xml」を使います。

ダウンロードしたファイル群のうち、README.txt以外のファイル

browserconfig.xml
tiny.png
square.png
wide.png
large.png

をWebサーバのドキュメントルート直下に配置します。

その後、

Add these meta tags to the of your HTML page and upload the PNG tile backgrounds to your server.

と書かれている部分の下に書いてあるmetaタグのうち「application-name」をコピーします。
私の環境では、以下の部分です。

<meta name="application-name" content="わわわIT用語辞典"/>

あとは、コピーしたmetaタグを自分のWebサイトの<head>~</head>内に記載すれば完了です。

お疲れ様でした!

でも、何でやり方が2つもあるのでしょうね?

種明かしをしてしまうと、生成されたmetaタグ

<meta name="application-name" content="わわわIT用語辞典"/>
<meta name="msapplication-TileColor" content="#f5f5ed"/>
<meta name="msapplication-square70x70logo" content="tiny.png"/>
<meta name="msapplication-square150x150logo" content="square.png"/>
<meta name="msapplication-wide310x150logo" content="wide.png"/>
<meta name="msapplication-square310x310logo" content="large.png"/>
<meta name="msapplication-notification" content="frequency=30;polling-uri=http://notifications.buildmypinnedsite.com/?feed=http://wa3.i-3-i.info/index20.rdf&id=1;polling-uri2=http://notifications.buildmypinnedsite.com/?feed=http://wa3.i-3-i.info/index20.rdf&id=2;polling-uri3=http://notifications.buildmypinnedsite.com/?feed=http://wa3.i-3-i.info/index20.rdf&id=3;polling-uri4=http://notifications.buildmypinnedsite.com/?feed=http://wa3.i-3-i.info/index20.rdf&id=4;polling-uri5=http://notifications.buildmypinnedsite.com/?feed=http://wa3.i-3-i.info/index20.rdf&id=5; cycle=1"/>

のうち2~6行目

<meta name="msapplication-TileColor" content="#f5f5ed"/>
<meta name="msapplication-square70x70logo" content="tiny.png"/>
<meta name="msapplication-square150x150logo" content="square.png"/>
<meta name="msapplication-wide310x150logo" content="wide.png"/>
<meta name="msapplication-square310x310logo" content="large.png"/>
<meta name="msapplication-notification" content="frequency=30;polling-uri=http://notifications.buildmypinnedsite.com/?feed=http://wa3.i-3-i.info/index20.rdf&id=1;polling-uri2=http://notifications.buildmypinnedsite.com/?feed=http://wa3.i-3-i.info/index20.rdf&id=2;polling-uri3=http://notifications.buildmypinnedsite.com/?feed=http://wa3.i-3-i.info/index20.rdf&id=3;polling-uri4=http://notifications.buildmypinnedsite.com/?feed=http://wa3.i-3-i.info/index20.rdf&id=4;polling-uri5=http://notifications.buildmypinnedsite.com/?feed=http://wa3.i-3-i.info/index20.rdf&id=5; cycle=1"/>

の部分をXML形式で書いたのが「browserconfig.xml」なのです。
2行目以降のmetaタグはHTMLの仕様に準拠したmetaタグではないので、
文法チェックとかすると「それ、ダメだよ」と怒られてしまうのですね。
それが嫌な人向けの配慮でしょう。

実際の「browserconfig.xml」の中身は、例えば以下のようになっています。

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="tiny.png"/>
<square150x150logo src="square.png"/>
<wide310x150logo src="wide.png"/>
<square310x310logo src="large.png"/>

<TileColor>#f5f5ed</TileColor>
</tile>
<notification>
<polling-uri src="http://notifications.buildmypinnedsite.com/?feed=http://wa3.i-3-i.info/index20.rdf&amp;id=1"/>
<polling-uri2 src="http://notifications.buildmypinnedsite.com/?feed=http://wa3.i-3-i.info/index20.rdf&amp;id=2"/>
<polling-uri3 src="http://notifications.buildmypinnedsite.com/?feed=http://wa3.i-3-i.info/index20.rdf&amp;id=3"/>
<polling-uri4 src="http://notifications.buildmypinnedsite.com/?feed=http://wa3.i-3-i.info/index20.rdf&amp;id=4"/>
<polling-uri5 src="http://notifications.buildmypinnedsite.com/?feed=http://wa3.i-3-i.info/index20.rdf&amp;id=5"/>
<frequency>30</frequency>
<cycle>1</cycle>
</notification>

</msapplication>
</browserconfig>

「square70x70logo」
「square150x150logo」
「square310x150logo」
「square310x310logo」

の部分が、タイルに表示する画像です。
「TileColor」の部分がタイルの色です。
「<notification>~</notification>」内はライブタイルに関する設定です。
使用するRSSフィードと更新間隔などを設定します。
ライブタイルにしないのであれば必要ありません。
細かい仕様については、マイクロソフトさんのサイト

http://msdn.microsoft.com/ja-jp/library/ie/dn439794(v=vs.85).aspx

あたりをご覧ください。

ちなみに「browserconfig.xml」という名前も固定ではありません。
「browserconfig.xml」という名前にしておくと、
特に指定しなくても読み込んでくれるというだけです。
metaタグに

<meta name="msapplication-config" content="hoge.xml" />

のように記載することで、任意の名前のXMLを使用することも可能です。

ふぃ~、長くなりました。
設定方法はそんな感じです。

あとは、動作確認です。
スタート画面のタイルからIE11を起動して、サイトを訪れて、
お気に入りのピンマークを押すと設定したのが表示されるのでφ(--)

20140824-12.png


「スタート画面にピン留めする」を押すとφ(--)

20140824-13.png


お気に入りに追加されますφ(--)

20140824-14.png


スタート画面に戻るとバッチリ追加されていますφ(--)

20140824-15.png


画像が表示されているのは、私がライブタイルの設定を切っているからです。
ライブタイルがオンだと、ずらずらとRSSフィードの内容が表示されます。

なんか話が長くなっちゃいましたね。
「browserconfig.xml」はWindows8.1+IE11でサイトをピン留めすると勝手に読みこまれるファイルです。
作成するのが面倒でエラーログが鬱陶しければ、空のファイルを置いておいても構いません。

そんな感じ\(--)/
スポンサーリンク
 
このエントリーをはてなブックマークに追加 

category:● HTML・CSS  thema:パソコンな日々 - genre:コンピュータ  Posted by ササキマコト 

  関連記事