ライブタイルに対応したWebサイトのピン留め

Webサイトのピン留め

世の中、あまりに保守的なユーザーが多く、Windows 8.1 に「Update」が適用され、少しずつ「スタート画面」が後景へと追いやられる予感の募る今日この頃ですが、それでも8.1のタイル表示が、私は好きです。

スタート画面にタイルとしてアプリケーションやWebサイトのリンクを表示させることを、「ピン留め」と呼びます。ピン留めされたタイルのうち、従来のデスクトップアプリケーションは、ただの大きなショートカットアイコンにしかすぎません。しかし、Windowsストア アプリの場合は、受信データ等をサムネールで表示する「ライブ タイル」に対応しているものも多く、スタート画面を賑わせてくれるほか、それなりに有益な情報を気軽に受け取ることができます。

ライブタイル
スタート画面のライブタイル

そして、Webサイトのリンクも、そのサイトがRSS形式の要約情報を提供できるなら、ライブタイルにするこができます。当サイトは、WordPressによる、いわゆるブログサイトなので、特に設定をすることもなくhttps://www.krzm.jp/feed/アドレスで、RSSが配信されています。

ライブタイルの作成

タイル作成サイト

そこで、krzm.jpのライブタイルを作ってみました。そもそもの始まりは、Microsoftのmodern.IEサイトで当サイトをスキャンしたところ、「Windows 8の新機能を利用した構築を検討する」という項目で、「IE11 タイルと通知」という提案が表示されたことです。

modern.IEサイトでのスキャン結果
modern.IEサイトでの「IE11 タイルと通知」の提案

ものは試しということで、この提案を受諾し、「Web サイトの Windows 8.1 タイルを作成する。」へ進みます。もちろん、modern.IEでスキャンを行わなくても、以下のアドレスで、Microsoftのタイル作成サイトを表示できます。

http://www.buildmypinnedsite.com/ja

タイル作成サイト
タイル作成サイトのトップ画面

ステップ1

初めの「Web サイトのタイルを作成する」では、「タイトル」にサイト名のkrzm.jp、タイルの背景色として#990000を指定しました。そして、背景を切り抜きにした透過PNG画像をアップロードしています。

ステップ1の画面
ステップ1でタイトル、背景色を指定し、画像をアップロードした状態。右側はタイルの表示を確認できる「ライブ プレビュー」

ここで表示されるとおり、タイルのサイズは以下の4つがあります。

  • tiny: 128×128 px
  • square: 270×270 px
  • wide: 558×270 px
  • large: 558×558 px

そして、この画面上で、各サイズでのトリミングを行うことができます。トリミングの状態は、「ライブ プレビュー」に即座に反映されるので、修正が容易です。この編集段階で、画像が劣化することもありません。

トリミング画面
ページ上でタイルに合わせた画像のトリミングができる

これらの項目が決定したら、「次のステップへ」をクリックします。

ステップ2

といっても、すぐ下の「プッシュ通知を追加する」に表示が切り替わるだけですが、ここではサイトのRSSアドレスを入力し、「フィードを取得」をクリックするだけです。RSSフィードが正しく取得できれば、自動的に次のステップへ進みます。

ステップ2の画面
ステップ2では、RSSフィードのアドレスを入力。RSSの要約配信がライブタイルに反映される

なお、RSSフィードを入力しなければ、画像だけが表示されるタイル(ライブタイル非対応)になります。

ステップ3

「コードを入手!」では、ライブタイルとしてのピン留めに必要な、HTMLコードが出力されます。また、画像やRSSフィードを入力した場合は、「パッケージをダウンロード」ボタンも表示されます。

ステップ3の画面
ステップ3ではHTMLソースコードが出力される。また、タイル画像やXMLファイルはパッケージのダウンロードで取得する

さて、このHTMLコードから分かるとおり、ライブタイルのピン留めは、7つのmeta要素を当該Webページのhead要素内に記述することで、実現されます。


<meta name="application-name" content="krzm.jp"/>
<meta name="msapplication-TileColor" content="#990000"/>
<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=https://www.krzm.jp/feed/&id=1;
	polling-uri2=http://notifications.buildmypinnedsite.com/?feed=https://www.krzm.jp/feed/&id=2;
	polling-uri3=http://notifications.buildmypinnedsite.com/?feed=https://www.krzm.jp/feed/&id=3;
	polling-uri4=http://notifications.buildmypinnedsite.com/?feed=https://www.krzm.jp/feed/&id=4;
	polling-uri5=http://notifications.buildmypinnedsite.com/?feed=https://www.krzm.jp/feed/&id=5;
	cycle=1"
/>

これらのうち、一つ目のname属性値application-nameは、HTML5の仕様(勧告候補)で定義されているものです。続く6つのmeta要素では、そのcontent属性値から分かるとおり、タイルの背景色、タイルの4つの画像、そしてRSSフィードの内容を定義しています。

RSSフィードの部分には、polling-uriとして5つのRSSアドレスが記述されているように、ライブタイルには5つの最新記事が要約表示されることになります。自身のサイトアドレスの前には、http://notifications.buildmypinnedsite.com/が記述された形式になっているので、要約記事の配信処理は、このサイトの機能を介して行われているようです。

ただし、たとえばmsapplication-TileColormsapplication-notificationといったname属性値は、HTML5では定義されていないので、これらを書き込むと仕様に準拠できなくなってしまいます。そこで、このHTMLコードをコピーしてWebページに記入するのではなく、「パッケージをダウンロード」をクリックします。するとZIP形式のファイルがダウンロードされ、その中にはタイルの画像ファイルとともに、browserconfig.xmlというXMLファイルが収録されています。

パッケージの内容
ダウンロードしたZIPファイルには、XMLファイルと4つのタイル画像が収められている

このXMLファイルには、meta要素の2~7個目に相当する部分が、XML形式で記述されています。つまり、それらの代わりになるわけです。Webページには、標準準拠の1つ目のmeta要素を記述するだけで、ライブタイル化を実現できます。


<?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>#990000</TileColor>
		</tile>
		<notification>
			<polling-uri src="http://notifications.buildmypinnedsite.com/?feed=https://www.krzm.jp/feed/&amp;id=1"/>
			<polling-uri2 src="http://notifications.buildmypinnedsite.com/?feed=https://www.krzm.jp/feed/&amp;id=2"/>
			<polling-uri3 src="http://notifications.buildmypinnedsite.com/?feed=https://www.krzm.jp/feed/&amp;id=3"/>
			<polling-uri4 src="http://notifications.buildmypinnedsite.com/?feed=https://www.krzm.jp/feed/&amp;id=4"/>
			<polling-uri5 src="http://notifications.buildmypinnedsite.com/?feed=https://www.krzm.jp/feed/&amp;id=5"/>
			<frequency>30</frequency>
			<cycle>1</cycle>
		</notification>
	</msapplication>
</browserconfig>

ですので、ライブタイル化を行うには、あとは以下の作業を行います。

  • 当該Webページのhead要素内に<meta name="application-name" content="krzm.jp"/>を記述
  • 当該Webページと同じフォルダーにbrowserconfig.xmlをアップロード
  • 当該Webページと同じフォルダーに4つの画像ファイルをアップロード

faviconの用意

これでライブタイル自体の準備はOKなのですが、Webサイトにいわゆるfaviconを用意しておいたほうが、ライブタイルにとっても好都合です。

faviconの作成は、このタイル作成サイトからは「Windows 7での実装」ボタンをクリックし、IE9時代に用意された、タスクバーへのピン留めを作成するサイトを利用します。

http://www.buildmypinnedsite.com/windows7/ja

IE9用のピン留めサイト
IE9用のピン留めサイト。タスバーへのピン留め機能を作成するものだが、IE11でも利用できる。今回は、faviconの作成機能だけを利用

ここで「高解像度ファビコンの作成」をクリックし、さらに「コードを取得」をクリックすると、アイコンのエディターが表示されます。やはり元になる画像をアップロード(Import)し、トリミングするなどして4種類のサイズのイメージを作成します。それをダウンロード(Export)すると、favicon.icoという単一のファイルになって、ダウンロードされます。

faviconのエディター画面
faviconのエディター画面。画像をアップロード(インポート)し、4つのサイズを作成したうえでダウンロード(エクスポート)する

このfavicon.icoファイルを当該Webページと同じフォルダーにアップロードするとともに、やはり当該Webページのhead要素内に、以下のlink要素を記述します。


<link rel="shortcut icon" href="favicon.ico"/>

スタート画面へのピン留め

以上の準備が終わったら、Windows 8.1のスタート画面で、(厳密には違うそうですが)ストアアプリ版のIE11を起動し、当該Webページを表示します。

そして、アプリメニューの「お気に入り」から「サイトをピン留め」をクリックすると、タイルのプレビュー画面が表示されます。デフォルトではワイドが表示されるようですが、ここでサイズ変更も可能です。あとは、「スタート画面にピン留めする」をクリックし、スタート画面に戻ると、タイルが表示されています。

ストアアプリ版IE11のピン留め画面
ストアアプリ版IE11のメニューで、「お気に入り」をクリックすると「サイトをピン留め」が表示される

ライブタイルがオンの場合、せっかく作った画像は一瞬だけ現れ、あとはRSSフィード(プッシュ通知)が表示されるようになります。投稿記事に画像が含まれる場合は、自動的にトリミングされた画像がメインで表示され、その下に記事のタイトルが入ります。テキストのみの記事では、タイトルと記事の一部が表示されます。そして5つの記事が、順次表示されていきます。

ライブタイルの表示
ライブタイル(ワイド)の表示。RSSの配信内容に基づき、5つのパターンが順次表示されていく

タイルのサイズが大、ワイド、中の場合にRSSによるライブタイルが有効になり、小では画像のみが表示されます。また、ライブタイルをオフにすると、各サイズの画像だけが表示されます。タイルの見栄えからは、ワイドがもっともライブタイルに向いているといえそうです。なお、faviconがあったほうが好都合というのは、タイル左下にそれが表示されるようになっているからです。

ライブタイルの表示とサイズ
ライブタイルは大、ワイド、中のサイズで有効になり、記事や画像が表示される。左下にはfaviconも表示される

このように、RSSフィードで更新内容を配信できるWebサイトであれば、スタート画面へのピン留めは、なかなか便利なものです。もちろん、そのサイトを閲覧者がピン留めしてくれなければ、どうにもならないんですけどね。

krzm.jp:not(so-called mobile friendly)