連載

2011年7月27日

Windows Phoneの色使いとTileをアプリに生かせ！：Silverlightベースで作るWP7アプリ開発入門（2）（3/3 ページ）

[泉本優輝，WP Arch] PC用表示関連情報

LINE

Hatena

前のページへ | 　　　　　　

ホーム画面にアプリのTileを追加するには

　プロジェクトをビルドして実行してください。実行後ホーム画面に戻って、右のアプリケーションリストからアプリケーションを選んで、タップ＆ホールド（長押し）します。

　すると、コンテクストメニューが表示されます。コンテクストメニューの中にある「pin to start」をタップしてみましょう。ホーム画面に選んだアプリのTileが追加されます。

図4　Internet ExplorerのTile（左）と作成したサンプルアプリのTile（右）

　しかし、SettingsやInternet ExplorerなどといったPhoneAccentColorで塗りつぶされたTileとは違って、ベタ塗りのアイコンです。これは、デフォルトのアイコンが以下のような画像になっているためです。

ホーム画面のTileの色を変えるには

　PhoneAccentColorによってTileの色を変えたい場合は、アイコンの画像に使用している「ApplicationIcon.png」を編集します。

　例えば、Photoshopなどで以下のように、ApplicationIcon.pngの一部を透明にして再ビルドして実行してみましょう。

　すると、透明にした部分がPhoneAccentColorで塗りつぶされていて、図4から変わっていることが分かると思います。

図5　Internet ExplorerのTile（左）と色が変わったサンプルアプリのTile（右）

　では、以下のような一部が半透明なアイコンだとどうなるか試してみましょう。

　テーマカラーの青に赤が重なって紫色になります。

　試しに今度は、テーマカラーを「lime」に変えてみました。緑に赤が重なって茶色になりました。

　これにより、Tileが以下のような構造でできていることが考えられます。

図6　テーマカラー（下）とタイルの画像（上）が重なっている

　Windows Phone OS 7.0（NoDo）ではホーム画面にのみPhoneAccentColorが適用されていましたが、Windows Phone OS 7.5（Mango）では同じ方法でアプリケーションリストでもPhoneAccentColorが適用されます。

Tileがひっくり返る「Shell Tile」にするには

　最後に、Live Tileの実装方法を紹介します。Mangoでは、Live Tileの実装方法として「Shell Tile」があります。Shell TileとはTileを表と裏で別の画像を用意し、一定時間経つとTileがひっくり返るLive Tileです。

　早速、試してみましょう。まずは、Tileの表と裏の画像を用意します。用意した画像はプロジェクトに追加して、ビルドアクションをコンテンツに設定します。

　ボタンを設置します。

　設置したボタンのClickイベントを以下のように記述します。

        private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            StandardTileData d = new StandardTileData();
            // 表側のプロパティ
            d.Title = "おもて";
            d.Count = 10;
            d.BackgroundImage = new Uri("/Forword.png", UriKind.Relative);
            // 裏側のプロパティ
            d.BackTitle = "うら";
            d.BackContent = "てきすと";
            d.BackBackgroundImage = new Uri("/Back.png", UriKind.Relative);
            // タイルを作成
            ShellTile.Create(new Uri("/MainPage.xaml", UriKind.Relative), d);
        }

　実行して、ボタンをタップしましょう。ホーム画面にTileが生成され、しばらくすると、ひっくり返ります。

図7　ひっくりかえる前のTile（左）と、ひっくりかえった後のTile（右）

Windows Phone 7の世界に溶け込んだアプリを

　Tile UIをデザインするのは簡単そうに見えますが、ポイントを抑えなければ単なる手抜きに見えてしまいます。逆に、ごちゃごちゃとしたTileを作ってしまうと、本来のMetroデザインを損なってしまい、ちょっと浮いたTileになってしまいます。

　「Color resources」や「System Resource」はMetroデザインのポイントになるものです。うまく使ってWindows Phone 7の世界にうまく溶け込んだアプリを開発するよう心掛けましょう。

著者紹介

Windows Phone Arch代表

泉本優輝

UIデザインからプログラミング、表現までやりたい、自称クリエイティブデザイナ

“さわってみたい”を創ることが目標。フィジカルコンピューティングなどの試作を行う傍ら、コミュニティ活動ではExpression Blendを中心としたセッションを行っている

「次回」へ

「Silverlightベースで作るWP7アプリ開発入門」バックナンバー