眠るシーラカンスと水底のプログラマー

　今回はライブタイル特集。

　ライブタイルを使ったアプリってあんまり作ったことなかったので勉強になりました。

 

jQueryMobile Metro対応

 

　本題に入る前の告知コーナーで知らされた情報。

 

　Webもメトロで作成！！

　ということでｊQueryMobileのメトロ対応版の紹介。

 

　デモはこちら

 

　iPhoneとかAndroidでもメトロなサイトを表示してやる！！

 

ライブタイル基本

 

　ライブタイルは2面利用できる。

　[面1]

　Count（数字が表示できるバッジ）

　BackgroundImage（背景）

　Title（全角8文字ぐらいの文字列）

 

　［面2］

　BackBackgroundImage（背景）

　BackContent（テキスト）

　BackTitle（全角8文字ぐいらの文字列）

 

　実機をお持ちの方なら二つの面をくるくると表示切替するタイルを見たことがあると思います。

　これがライブタイルの動きです。

　面の切り替えタイミングはOS依存。

 

利用できる画像

 

　jpgまたはpngファイル。

　173×173（異なるサイズの場合はこのサイズに拡大縮小します、縦横比は無視）

　リモートから画像を取得する場合は80kb以下。

 

タイルの更新

 

　ShellTileクラスないし、ShellTileScheduleクラスを用いる。

　バックグラウンドエージェント内でタイルを更新することも可能。

 

　ShellTileでの更新はクリックなどのユーザー操作時でないとだめだと勘違いしていましたが、そうではありませんでした。

　タイルの2面目に画像を指定するサンプルコードは以下、StandardTitleDataクラスのコンストラクタで上記　Count、　BackTitleなどのプロパティも指定可能です。

 

            ShellTile TileToFind = ShellTile.ActiveTiles.First();

            StandardTileData NewTileData = new StandardTileData
            {
                BackBackgroundImage = new Uri("Assets/tile2.png", UriKind.Relative),
            };
            TileToFind.Update(NewTileData);

 

セカンダリタイル

 

　2つめ以降のタイルが作成できる。

　作成できるタイルの数は制限無しのようです。

 

本日でいったん終了

 

　UX-TVは今回で一旦終了です。

　どこかのタイミングでまとめて観ようと思っていた方はこの機会にどうぞ。

 

　ほかのプラットフォームでは無い取組だったのでまた再開してほしいですね。

　MSのエヴァの皆様、お疲れ様でしたー。

 

関連：MetroStyleApp入門 vol15:タイルを利用する（その1）