Windowsスタート画面のウェブショートカットをライブタイル対応する

2015年11月25日

Windows8からあたらしく追加されたけれど、わりと不評な「スタート画面」ですが、私は好きです。

もちろん(?)、最初にノートパソコンで「スタート画面」をみたときには拒否反応がありました。

しかしながら、Windowsをタブレットとして使い、「スタート画面」に時計、スケジュール、写真、ニュースのタイル(メニュー)を追加すると一気に好きになりました。
スタート画面を開くと、時計と直近のスケジュールがタイルに表示され、お気に入りの写真や最近のニュースも紙芝居のように表示されるようになったからです。ほかにも、FacebookやRSSの新しい更新情報も表示されます。

スタート画面が(なんのアプリも開くことなく)情報センターのようになるわけです。

このように動くタイル(メニュー)を「ライブタイル」と呼ぶようです。
最近では、「ライブタイル」に対応していないアプリには、物足りなさすら感じるようになりました。

 

ところで、「ライブタイル」は、Windowsストアからダウンロードするアプリだけの専売特許というわけではありません。
インターネットサイトのショートカットを「スタート画面」に追加することで、これも「ライブタイル」にすることができるのです。

今回は、ウェブサイトをライブタイル対応するやり方をご紹介したいと思います。

 

1.browserconfig.xml


該当サイトのルートディレクトリに browserconfig.xml というファイルを置きます。
(サブディレクトリに置いてもうまく動きませんでした)

そのファイルを以下のようにします。

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile> ※1
      <square70x70logo src="img/smalltile.png"/>
      <square150x150logo src="img/mediumtile.png"/>
      <wide310x150logo src="img/widetile.png"/>
      <square310x310logo src="img/largetile.png"/>
      <TileColor>#009900</TileColor>
    </tile>
    <notification> ※2
      <polling-uri  src="notifications/tile1.xml"/>
      <polling-uri2 src="notifications/tile2.xml"/>
      <polling-uri3 src="notifications/tile3.xml"/>
      <polling-uri4 src="notifications/tile4.xml"/>
      <polling-uri5 src="notifications/tile5.xml"/>
      <frequency>30</frequency>
      <cycle>1</cycle>
    </notification>
  </msapplication>
</browserconfig>

※1:
スタート画面におくタイルの大きさは、最大4種類(小、中、ワイド、大)から選ぶことができます。
ここには、それらの大きさのときに表示される、デフォルトのタイル画像を指定します。

※2:
タイルをライブタイル対応するための指定(スキーマ)です。
スキーマは、最大5つまで指定することができますので、ここでは5つ指定しています。

参考)
IE11 での Web サイト用カスタム タイルの作成
https://msdn.microsoft.com/ja-jp/library/dn455106%28v=vs.85%29.aspx

 

2.スキーマを作成する


1.の※2に指定したスキーマファイルを作成します。
ここでは tile1.xml の例だけですが、5つのスキーマを指定する場合は、5ファイル作成する必要があります。

notifications/tile1.xml

<tile>
  <visual lang='en-US' version='2'>
    <binding template='TileWide310x150ImageCollection' branding='none'> ※3
      <image id='1' src='http://somedomain.com/thumbnail/P1010167.JPG'/> ※4
      <image id='2' src='http://somedomain.com/thumbnail/P1020033.JPG'/>
      <image id='3' src='http://somedomain.com/thumbnail/P1010711.JPG'/>
      <image id='4' src='http://somedomain.com/thumbnail/P0000017.JPG'/>
      <image id='5' src='http://somedomain.com/thumbnail/P1000073.JPG'/>
    </binding>

    <binding template="TileSquare310x310ImageCollection" branding="none"> ※3
      <image id='1' src='http://somedomain.com/thumbnail/P1010167.JPG'/>
      <image id='2' src='http://somedomain.com/thumbnail/P1020033.JPG'/>
      <image id='3' src='http://somedomain.com/thumbnail/P1010711.JPG'/>
      <image id='4' src='http://somedomain.com/thumbnail/P0000017.JPG'/>
      <image id='5' src='http://somedomain.com/thumbnail/P1000073.JPG'/>
    </binding>
  </visual>
</tile>

※3:
スキーマファイルには、最大3つのテンプレートを定義できます。
この例では、タイルサイズ=ワイド用の TileWide310x150ImageCollection と 大用の TileSquare310x310ImageCollection を指定しています。
指定できる画像の数、テキストの数は、テンプレートによって異なります。

TileWide310x150ImageCollection の表示例

TileSquare310x310ImageCollection の表示例

指定できるテンプレートは、以下に記載してありますので、この中から選んでください。

タイル テンプレート カタログ (Windows ランタイム アプリ)
https://msdn.microsoft.com/ja-jp/library/windows/apps/xaml/hh761491.aspx

※4:
画像ファイルは、相対パスの指定でもよいようなのですが、うまく動作確認できなかったのでフルバスで指定する形でのサンプルとしています。
また、画像サイズが大きすぎると(たとえば最近のデジカメでとったままの画像だと)うまく読み込めないようなので、少し小さめ(たぶん200kbyte以下)のサムネイル画像にしたほうがよいようです。私は、プログラムで400×400の正方形画像にしたものを使っています。

 

これらのスキーマファイルを一定時間ごとに自動的に書き換えることで、ライブタイルに反映されます。
ニュースサイトなどであれば、ピックアップ記事をスキーマファイルに書き換えていくことで、ニュースサイトのライブタイルが最新の情報を少しずつ更新しながら表示しているようにみえます。

 

3.スタート画面にウェブショートカットを追加する


上記のようにして準備したウェブサイトを、スタート画面に追加する手順はここにまとめられています。

Web サイトをピン留めする方法
https://msdn.microsoft.com/ja-jp/library/gg618532%28v=vs.85%29.aspx

うまく設定できていないと、タイルの大きさを「小」「中」にしか変更できません。
うまく設定できているとサイズを「ワイド」「大」に変更することができて、しばらくするとスキーマに指定したとおりのテンプレートで写真や文字が表示されるようになります。

うまくいかなかった場合は、browserconfig.xml やスキーマを修正してから、タイルを右クリックして「ライブタイルをオフにする」をクリックします。そしてすぐに「ライブタイルをオンにする」を選ぶと、最新の設定情報を読み直してくれます(そんな気がします)。

* * *

あたかもPUSH通知しているかのような機能ですが、実際にはリアルタイムでのスキーマ更新はできません(スタート画面にいつ反映するかは、クライアントとなるWindows OS 次第)。
PUSH通知したい場合は、これとは別に、サーバー側で専用のプログラムを作成する必要があるようです。

 

この記事の著者

イルカシステム(株) イルカシステム株式会社

イルカシステム(株)は、以下のような業務用ウェブシステムのご提案、受託開発、運用を行っております。

1.中小企業さま向けの社内向け業務ウェブシステム(営業支援、顧客管理、受注管理、請求入金管理、在庫管理、経営数値管理など)

2.医療業界向けの業務改善システム

※業務ウェブシステムの開発を効率化するための自社サービス「イルカベーカリー」をご提供しております。
※医療業界向けに、臨床研究の無作為割付自動化のための自社サービス「ムジンワリ」をご提供しております。

お問合せはお気軽に、こちらからどうぞ! → イルカシステム株式会社へ問合せ

著者:イルカシステム株式会社

お問い合わせ




会社概要

<p>イルカシステム(株)</p>
<img src="http://www.iruka-system.co.jp/wp-content/uploads/2017/01/WS000000.png" alt="会社概要 住所" width="243" height="84" class="alignnone size-full wp-image-49" />
<div class="alert alert-warning">
2017/1/1より、住所変更いたしました。
</div>
<p><span class="label label-success">TEL</span> 03-5843-9168</p>

  • 中小企業 41個の記事

    中小企業様にご提案・開発してきた実績をもとに、システム構築について記載した様々な記事一覧です。

  • 社内システム 39個の記事

    様々な社内システムをご提案・開発してきた実績をもとに、システム構築について記載した様々な記事一覧です。

  • わかりやすさ 30個の記事

    情報システムをわかりやすく使いやすいものにするためのノウハウ、気をつけていることの記事一覧です。

  • UI設計 27個の記事

    UI(ユーザーインターフェース)は、システムの使い勝手を左右します。どんな点に気をつけているか、どんな考えでシステム開発しているかの記事一覧です。

  • 顧客管理 26個の記事

    これまで構築した様々なシステムのうち、顧客管理機能をどのような観点でご提案、開発しているかをまとめた記事一覧です。

  • 受注管理 18個の記事

    これまで構築した様々なシステムのうち、受注情報を管理する機能をどのような観点でご提案、開発しているかをまとめた記事一覧です。

  • ビジネス 18個の記事

  • 業務 16個の記事

  • 要件定義 14個の記事

    要件定義とはどのようなシステムを構築するのかを決める作業です。要件定義において注意し、考えていることをまとめた記事一覧です。

  • クラウド 13個の記事

  • 登録画面 13個の記事

  • 編集画面 12個の記事

  • システム会社 12個の記事

  • 情報共有 11個の記事

  • みえる化 11個の記事

    手作業をシステム化して効率化するだけでなく、それらの情報を集約して簡単に見えるようにし、社員が自律的に動ける組織を作ることが「みえる化」です。

  • 一覧画面 11個の記事

  • 業務用ウェブシステム 10個の記事

  • エクセル 9個の記事

  • コミュニケーション 9個の記事

  • セキュリティ 8個の記事