UX-TV 4月27日放送分レビュー

水曜日 , 9, 5月 2012 Leave a comment

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

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

 

jQueryMobile Metro対応

 

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

 

 Webもメトロで作成!!

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

 

 デモはこちら

 

 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)

 

 


Please give us your valuable comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です