IE11で404エラーを起こす「browserconfig.xml」とWebサイト用カスタムタイル
Internet Explorer 11による404
Windows8.1のInternet Explorer 11（以下IE11）がリリースされてから、「browserconfig.xml」というファイルがないためのHTTPステータスの404を目にするようになりました。これは、IE11を使っている閲覧者が、webサイトをスタート画面にピン留めしようとしたとき、IE11はピン留めに必要な情報を取得するため、その情報源のひとつ「browserconfig.xml」を参照しますが、このファイルが設置されていないため、404（Not Found）ということになります。
「browserconfig.xml」とは
閲覧者が、webサイトをスタート画面にピン留めする際、webサイト側が、小、普通（中）、ワイド、大の4つのタイル画像やライブタイルの通知のための情報をhtmlのヘッダー部分にmetaデータとして書いておくことでwebサイト側が意図したデザインや通知のための情報を閲覧者に提供できます。しかし、このmetaデータはW3C策定のhtmlに準拠していないので、外部ファイルに同じ内容を書き出した「browserconfig.xml」も利用できるようにしたようです。なお「browserconfig.xml」の設置は、ドキュメントルートが基本になります（metaタグ記述で変更も可能です）。
最小限の「browserconfig.xml」ファイル
最小限の静的な「browserconfig.xml」の内容は、前出の4つのタイル画像パスとタイルの基本の色情報（サンプルではコニファのコーポレートカラーの#008837）の設定になります。
サンプル（実際に使用しているもの）
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="images/smalltile.png"/>
<square150x150logo src="images/mediumtile.png"/>
<wide310x150logo src="images/widetile.png"/>
<square310x310logo src="images/largetile.png"/>
<TileColor>#008837</TileColor>
</tile>
</msapplication>
</browserconfig>
ユーザー側でピン留めのタイルのサイズを変えたとき、webサイト側が用意したこの4種類のサイズの画像がそれに対応します。ただ、この画像がなくてもピン留め自体は可能です。その場合、タイルはIE11のロゴマークになります。タイルの色は、faviconの色を元にするようです。
実際に4種類のサイズの画像を作成し、「browserconfig.xml」を設置してみました
タイル画像を作成
上のXMLの内容を元に、画像は標準のタイルのサイズ（下側の表を参照）で次の4種類を作成しました。
実際の作業では、すべてのタイル画像をIllustratorの１枚のアートワーク上で作成、これを透明の背景にして、psdに書き出し、Photoshopで一つずつ切り取りpngとして保存しました。このときIllustrator側でそれぞれのタイル画像を左右天地1pxずつ大きめに作って書き出し、Photoshopで決まったサイズにカットするときれいに仕上がります。
| タイルのサイズ | 標準のタイルのサイズ | 最小画像サイズ | 推奨される画像のサイズ |
|---|---|---|---|
| 小サイズ | 70 x 70 | 56 x 56 | 128 x 128 |
| 普通サイズ | 150 x 150 | 120 x 120 | 270 x 270 |
| ワイド サイズ | 310 x 150 | 248 x 120 | 558 x 270 |
| 大サイズ | 310 x 310 | 248 x 248 | 558 x 558 |
閲覧者側がこの「browserconfig.xml」を元にピン留めしたサンプル
ピン留めのしかた
- スタート画面から、Windowsストアアプリ版のIE11を起動し、webサイトを表示します。
- 下側のお気に入りアイコン（星形）をタップまたはクリックして、お気に入りバーを表示させます。
- サイトをピン留めアイコン（ピン形）をタップまたはクリックして、ピン留め設定の画面をポップアップさせます。
- タイル画像の候補（左右ボタンから）や名称などを決め、「スタート画面にピン留めする」をタップまたはクリックして終了です。
- スタート画面に、タイルが追加されます。
閲覧者側が、今回の画像をスタート画面にピン留めしたサンプル
- 小サイズのタイル
- 普通（中）サイズのタイル
- ワイドサイズのタイル
- 大サイズのタイル
閲覧者側で、タイル画像のサイズを変更をする方法
- スタート画面にピン留めしたタイル画像を右クリックし、表示されるウィンドウの「サイズを変更する」にポインターを置いて、表示されるサブウィンドウの「小」、「中」、「ワイド」、「大」からサイズを選び、クリックします。ちなみに、タイル画像や「browserconfig.xml」が用意されていない場合、変更できるサイズは「中」までとなります。
スタート画面にピン留めすると、「アプリビュー」にもアイコンが追加されます
- 「アプリビュー」とは、スタート画面の下側の下向き矢印をクリックまたはタップしたときに表示されるアプリなどの一覧です。スタート画面にピン留めすると、自動的にここにもアイコンが追加されます。次の画像は、「アプリビュー」の画面ですが、コニファのアイコンが2つあります。上側が自動追加されたもので、下側はデスクトップ版のIE11から、ツールボタンの「サイトをアプリビューに追加」（下で説明しています）により追加したものです。
上側アイコンをクリックまたはタップすると、Windowsストアアプリ版のIE11が、また下側アイコンをクリックまたはタップすると、デスクトップ版IE11がそれぞれ立ち上がって、サイトを表示します。
デスクトップ版IE11から、サイトを「アプリビュー」に追加
- デスクトップ版IE11の画面右上のツールボタン（ギヤーマーク）をプルダウンし、「サイトをアプリビューに追加」を選びます。
