IE11 での Web サイト用カスタム タイルの作成

新しい Windows UI の Internet Explorer でサイト用のカスタム タイルを作り、通知を使うことで、ユーザーの関心を引き、ユーザーによるクリック スルーを増やすことができます。 Internet Explorer 11 のカスタマイズした静的なタイルとライブ タイルを作成できます。作成プロセスは Windows ストア アプリのものと同様です。

静的なタイル

ユーザーがサイトを初めてピン留めすると、そのサイトはスタート画面に静的なタイルとして表示されます。既定では、タイルの画像が Web サイトのお気に入りアイコンや既定の IE11 ロゴになります。画像をカスタマイズするには、Web ページのマークアップにメタデータ タグを追加するか、ブラウザー構成ファイルを追加します。

小サイズと中サイズのタイルはスタート画面で既定で使用できます。自分で画像を指定しない場合、これらのサイズのタイルには IE11 の一般的な画像が使われます。ワイド タイルと大サイズのタイルには、自分で画像を指定する必要があります。

静的なタイルは通知がないときに表示され、ユーザーに示す 4 つのサイズのタイルそれぞれに画像が使われます。標準のサイズと各サイズに対して推奨される画像のサイズを次に示します。

タイルのサイズ標準のタイルのサイズ最小画像サイズ推奨される画像のサイズ
小サイズ70 x 7056 x 56128 x 128
普通サイズ150 x 150120 x 120270 x 270
ワイド サイズ310 x 150248 x 120558 x 270
大サイズ310 x 310248 x 248558 x 558

 

  どのタイルも、最大サイズは 1024 x 1024 です。

どのように表示されるかを次に示します。

小さいタイル 70 x 70

静的なタイル用の小さいサイズのタイル (70 x 70) の画像

普通サイズのタイル 150 x 150

静的なタイル用の普通サイズのタイル (150 x 150) の画像

ワイド タイル 310 x 150

静的なタイル用のワイド サイズのタイル (310 x 150) の画像

大きいタイル 310 x 310

静的なタイル用の大きいサイズのタイル (310 x 310) の画像

 

  さまざまなデバイスに対応するには、画像のサイズを標準のタイルのサイズの 1.8 倍にすることで、必要に応じて画像を拡大/縮小できるようにしてください。

ライブ タイルとして使う場合は、中サイズ、ワイド サイズ、大サイズの画像を定義します。次の表に、さまざまなサイズの使用に関するガイドラインをいくつか示します。

サイズ説明
小サイズ小サイズのタイルは通知をサポートしていないため、静的なタイルとしてのみ表示されます。
普通サイズ既定でサポートされています。静的なタイルまたはライブ タイルとして表示されます。 テキストと画像を表示できます。
ワイド サイズ省略可能です。静的なタイルまたはライブ タイルとして表示されます。ワイド タイルを追加するには、中サイズのタイルも定義する必要があります。
大サイズ省略可能です。静的なタイルまたはライブ タイルとして表示されます。中サイズのタイルとワイド タイルも定義する必要があります。

 

大サイズのタイルなどで中間のサイズを定義しないと、そのサイズのタイルはサイズ変更や通知に対応しなくなります。タイルをピン留めすると、定義したサイズ間でタイルのサイズを変更できます。ただし、サイズの選択肢リストに対してサイズの追加や削除を行うには、メタデータを変更し、タイルのピン留めを外してもう一度ピン留めする必要があります。

既定のタイルをセットアップするには、XML ファイルを使うか、HTML の <head> 要素にメタデータを定義するか、JavaScript API 呼び出しを使います。XML ファイルが最も柔軟な方法です。同じタイルを使うページが複数ある場合、1 つのファイルを作って管理し、Web サイト上の任意のページでそのファイルを指定します。

次の例に示すブラウザー構成の XML ファイルでは、利用可能な 4 サイズすべてについて既定のロゴ タイルを設定し、背景色も設定しています。この例は簡単なテスト用に作ったものです。前に示したフード トラックの画像を右クリックしてコピーして、この例で使っているファイル名でローカルに保存してください。



<?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>#009900</TileColor>
    </tile>
  </msapplication>
</browserconfig>



この例の XML ファイルを browserconfig.xml という名前で、サーバーのルートに保存できます。ユーザーがサイトをピン留めすると、このファイルは IE11 によって自動的に読み取られます。カスタム構成ファイルを指定する場合は、ページの <head> 部分で meta 要素を使います。次の例は、構成ファイルを宣言している meta 要素を示しています。この meta 要素がページにない場合、ユーザーがサイトをピン留めしようとすると、IE11 は個々の通知ファイル (タイル スキーマ ファイル) の URL が格納された browserconfig.xml という名前のファイルを検索します。その後、指定された間隔でそのファイルをフェッチするように Windows に指示します。



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


HTML や JavaScript を使った既定のタイルの定義については、IE11 開発者向けガイドの「ピン留めされたサイトの機能強化」をご覧ください。

ライブ タイル

IE11 のライブ タイルは Windows 8.1 で機能し、Web サイト上の XML ファイルから通知データをプルします。Web サイトをピン留めすると、次の処理が実行されます。

  • IE11 が browserconfig.xml ファイルを取得します。
  • IE11 は、browserconfig ファイルで指定されたポーリング URI アドレスから指定された間隔で通知を取得するように、Windows 8.1 の通知プラット フォームに指示します。
  • 通知プラットフォームはタイル スキーマ ファイルを取得し、指定されたテンプレートを使ってタイル上にテキストや画像を表示します。 この処理は、「ライブ タイルの作成」で説明しているように、browserconfig.xml ファイルで設定された間隔で繰り返されます。
IE が browserconfig ファイルを取得し、タイルを作成し、Windows が通知ファイルを取得し、ライブ タイルを更新する流れを示した図

クライアントは更新のために Web サイトをポーリングします。サイトをポーリングするかどうか、どのくらいの頻度でポーリングするかはクライアント側で制御します。Web サイトからクライアントにコンテンツはプッシュされません。

Web サイトは、ライブ タイルの画像とテキストが指定されたタイル スキーマ ファイルを更新します。 最大 5 つのタイル スキーマ ファイルを常時スクロールするライブ タイル用に定義できます。Web サイトは新しい通知が使用可能になるとタイル スキーマ ファイルを更新し、Windows 通知プラットフォームはそのファイルをプルして、コンテンツをライブ タイルとして表示します。

タイル スキーマ ファイルは、browserconfig.xml ファイルの <head> 要素の meta タグか、Web サイトの JavaScript で指定します。

ポーリング URI を指定するには、browserconfig ファイル (あるいは HTML または JavaScript のメタ コード) でスキーマ ファイルのアドレスを指定します。次の例は、前の例のブラウザー構成ファイルを更新したバージョンです。この例には、<notification> セクションが含まれています。


<?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>#009900</TileColor>
    </tile>
    <notification>
      <polling-uri  src="notifications/contoso1.xml"/>
      <polling-uri2 src="notifications/contoso2.xml"/>
      <polling-uri3 src="notifications/contoso3.xml"/>
      <frequency>30</frequency>
      <cycle>1</cycle>
    </notification>
  </msapplication>
</browserconfig>


ブラウザー構成ファイルに含まれる要素を次に示します。

要素説明
browserconfigルート要素です。必須です。
msapplicationファイルの適用先となるアプリケーションの種類 (ピン留めされたサイト) を定義するベンダー固有の要素です。この要素は必須であり、browserconfig 要素の子要素として宣言する必要があります。
tile既定のタイル ロゴの画像を定義します。 次の属性を使って、最大 4 つの画像を指定できます。

  • square70x70logo
  • square150x150logo
  • wide310x150logo
  • square310x310logo
画像の src 属性は、上の各属性に対応した画像を示しています。画像は .JPG、.GIF、.PNG 形式のファイルであり、容量を 200 KB 未満、サイズを 1024 x 1024 ピクセル未満にする必要があります。

TileColor 属性には、RGB 形式の色を使います (#ff80aa など)。

notificationタイル スキーマ ファイルの URI を定義します。内容は次のとおりです。

  • polling-uri
  • polling-uri2
  • polling-uri3
  • polling-uri4
  • polling-uri5

5 つの URI が表示可能で、ランダムに表示されます。これらは、ユーザーのスタート画面に表示される最新のニュースや情報で更新されるファイルです。

frequencyポーリング要求の間隔 (分単位) を定義します。30、60、360、720、1440 のいずれかにする必要があります。
cycleメッセージの循環方法を制御します。

  • 0: (通知が 1 つだけの場合の既定値) 循環しません。
  • 1: (通知が複数ある場合の既定値) すべてのタイルのサイズで通知を循環します。
  • 2: 普通サイズのタイルに対する通知のみを循環します。
  • 3: ワイド タイルに対する通知のみを循環します。
  • 4: 大きいタイルに対する通知のみを循環します。
  • 5: 普通サイズのタイルやワイド タイルに対する通知のみを循環します。
  • 6: 普通サイズのタイルや大きいタイルに対する通知のみを循環します。
  • 7: ワイド タイルや大きいタイルに対する通知のみを循環します。

 

  ポーリング URI は、各サイズ (中、ワイド、大) のタイル用の Windows テンプレートを定義する XML 形式のタイル スキーマ ファイルを参照します。テンプレートによって、ライブ タイルに表示される通知の書式が指定されます。

タイル スキーマ ファイルの作成

タイル スキーマ ファイルには、1 つの通知の画像およびテキストとそれらの表示方法を指定したテンプレートが格納されます。このスキーマ ファイルは、変更された通知をユーザーに表示するために定期的に更新されます。最大で 3 つの異なるサイズを定義できます (1 つのサイズに対して 1 つのテンプレート)。テンプレートのサイズは、Windows 8.1 で現在表示されるタイルのサイズに対応しています。たとえば、現在のタイルのサイズが 310 x 150 に設定されている場合、TileWide310x150ImageAndText01 などの名前を持つ 310 x 150 のサイズのテンプレートを使うことができます。

XML 形式のスキーマ ファイルの例を次に示します。


<tile>
  <visual lang="en-US" version="2">  
    <binding template="TileSquare150x150PeekImageAndText04" branding="name">
      <image id="1" src="images/2.jpg"/>
      <text id="1">Serving Today: Samosas</text> 
    </binding>

    <binding template="TileWide310x150ImageAndText01" branding="name">
      <image id="1" src="images/2.jpg"/> 
      <text id="1">Serving Today: Samosas</text>
    </binding>
 
    <binding template="TileSquare310x310ImageAndText01" branding="name">
      <image id="1" src="images/2jpg"/>
      <text id="1">Serving Today: Samosas</text>
    </binding>
  </visual>
</tile>

一般的なタイル スキーマは次の要素で構成されています。

要素説明
tile必須のルート要素です。
visualバージョン 2 テンプレートを使うように Windows 8.1 に指示します。Windows 8 の Windows ストア アプリでは、バージョン 1 テンプレートがサポートされています。Windows 8.1 で、テンプレートは名前が変更され、バージョン 2 になりました。IE11 のライブ タイルを使うには、バージョン 2 を指定する必要があります。
binding1 つのサイズのタイル用にテンプレート、画像、テキストを定義します。次の属性があります。
  • template - Windows 8.1 プリセット テンプレートのいずれか 1 つ。テンプレートは、普通サイズのタイル、ワイド タイル、大きいタイルでのみ利用できます。
  • branding - アプリのブランドを表示するためにタイルで使うフォームを設定します (none、logo、name)。
image次の属性を指定します。

  • src - 使う画像の URL。
  • id - 画像を区別するための一意の ID (オプション)。
画像は、サイズが 200 KB 未満であり、.JPG、.GIF、.PNG 形式のファイルにする必要があります。
text1 行のテキストと ID 属性を指定します。binding に複数行のテキストがある場合、一意の ID を指定して複数の text 要素を使います。

 

テンプレートが対応しているのはライブ タイルをサポートする 3 つのタイルのサイズのみですが、テンプレートのオプションは多数あります。たとえば、310 x 310 ピクセルの正方形タイルには、プレーンテキストを指定できます。その際、大きなタイトル、小さな画像と多くのテキスト、大きな画像とテキスト、その他のさまざまな形式を必要に応じて使うことができます。テンプレートは Windows 8.1 によって定義されており、変更できません。テンプレートについて詳しくは、「テンプレートの選択」をご覧ください。完全な一覧については、「タイル テンプレート カタログ」をご覧ください。

組み立てる

ファイルの形式の説明は以上です。「ライブ タイルの作成」と同様の手順でカスタム タイルを作ってみましょう。

関連トピック

ライブ タイルの作成
テンプレートの選択
ピン留めされたサイトの機能強化
タイル テンプレート カタログ
通知キューの使用

 

 

表示:
© 2014 Microsoft