8.1ストア・アプリでは「ピン留め」するタイルの初期サイズや図柄の選択肢をエンド・ユーザーに提示できる。その開発方法を解説する。Insider.NET連載目次Windowsストア・アプリでセカンダリ・タイルをスタート画面に「ピン留め」するにはエンド・ユーザーの許可が必要だ。8.1アプリ)では、それが可能になった。本稿では、セカンダリ・タイルを作成する際に、代替ロゴをエンド・ユーザーに提示する方法を解説する。8.1版)」からダウンロードできる。2013)が必要である。Windows(日本語版)を使用してプログラミングしている。8.1]」の記事をご参照いただきたい。Windows(日本語版の製品版)*2でも動作を確認している。8.1Preview版の使用期限は来月(2014年1月)の半ばまでとなっている。Windows」から無償で入手できる。8では、セカンダリ・タイルの作成許可をエンド・ユーザーに求めるフライアウトは次の画像のようなものだった。8)この画像は以前の記事に掲載したものだ。アプリからはワイド・タイル(310×150ピクセル)と中タイル(150×150ピクセル)の2種類のタイルをセットしているのに、エンド・ユーザーは初期サイズを選べず、スタート画面にはワイド・タイルがピン留めされた。中タイルを望むエンド・ユーザーは、スタート画面でタイルのサイズをあらためて変更する必要があった。8では、アプリ側で2種類(ワイド・サイズと中サイズ)のタイルをセットした場合、作成されるセカンダリ・タイルは必ずワイド・サイズになってしまう。エンド・ユーザーが中サイズを望む場合は、後からスタート画面でリサイズする必要があった。8.1ではこれが改良されており、セカンダリ・タイルの作成許可をエンド・ユーザーに求めるフライアウトで初期サイズを選択できるようになっている。8.1で実行すると、表示されるフライアウトは次の画像のようになる。8.1で実行した場合、エンド・ユーザーはこのように3種類の初期サイズ(順に小(70×70ピクセル)/中/ワイド・タイル)から選択できる。このアプリでは小タイルをセットしていないのだが、中タイルの画像が自動的に縮小されて使われている。8.1では、セカンダリ・タイルの初期サイズをエンド・ユーザーが選択できるようになっている。アプリでは何も対応する必要はない。スタート画面にピン留めした後で、エンド・ユーザーがタイルのサイズを変更できるのは同じだ。8.1のセカンダリ・タイルは、初期サイズだけでなく複数のタイルの図柄をエンド・ユーザーに提示して選択してもらうことも可能だ。セカンダリ・タイルの図柄は既定のものに加えて追加の図柄(=代替ロゴ)が最大3種類(合わせて4種類)まで。初期サイズは4種類(小/中/ワイド/大(310×310ピクセル))なので、最大で16通りの選択肢が提示できることになる。以下、それを実装してみよう。画像を用意するまずはタイルに使う画像を用意してもらいたい。プライマリ・タイルの分も含めて5種類×4サイズで20通りの画像があるとよいのだが、それは大変だ。透過画像として作り、セカンダリ・タイルに設定するときに背景色を変えるようにすれば、1種類×4サイズだけでも構わない。筆者は次の画像のように、大サイズのみ5種類(ほかのサイズは1種類だけ)用意した。今回用意したタイル画像(エクスプローラで表示)大タイルは、プライマリ・タイル用(上段右端の透過画像)とセカンダリ・タイル用(下段の4種類)の、合わせて5種類を用意した。小/中/ワイドは1種類ずつだが、透過画像にして背景色を別途指定できるようにした。タイルに使用する画像ファイルのサイズは200KBytesまでに制限されているので注意してほしい。下段のタイルの背景には、MSDNの「Windowsアプリ・アート・ギャラリー」で提供されている写真を使わせてもらった。画像ファイルの拡張子は、この画像にあるように「.scale-100.png」や「.scale-100.jpg」などとしてほしい。2013では、画像ファイルのこの表記法が必須となっている。2013でプロジェクトを作成し、マニフェスト・ファイルでプライマリ・タイルに画像を設定してほしい(次の画像)。筆者は、上の画像にある4つの透過画像を使って、背景色を青色(#00a2e8)に設定した。プライマリ・タイルに複数サイズのタイルを設定していなくても、セカンダリ・タイルには複数のサイズが使用できる。Preview版)ここでファイル名を入れる場合は、ファイル名中の「.scale-100」は入力しない。セカンダリ・タイルを1種類だけ提示するには?SecondaryTileクラス(Windows.UI.StartScreen名前空間)のオブジェクトを作り、ユーザーにピン留めの許可を求めるリクエストを発行すればよい(次のコード)。8.1で新しくなっている。以前の記事に掲載したコードと比較してほしい。【必須】タイルを識別するID。【必須】タイルを識別するID。Functionセカンダリ・タイルを作成するメソッド(上:C#、下:VB)以前の記事に掲載したコードを改修した。SecondaryTileオブジェクトのいくつかのプロパティは、使用しなくなった(使用すると警告が出る)。代わりに、VisualElementsプロパティが新設され、最初のセカンダリ・タイルの設定はそこで行うようになった。8と同様に1種類だけ(ただし初期サイズは4通り)のセカンダリ・タイルがエンド・ユーザーに提示される。2種類目以降のセカンダリ・タイルを提示するには?SecondaryTileオブジェクトのVisualElementsRequestedイベント・ハンドラの中で追加のタイル(=代替ロゴ)を設定すればよい(最大3種類まで)。VisualElementsRequestedイベントはセカンダリ・タイルの作成を確認するフライアウトを表示するメソッド(上で呼び出しているRequestCreateForSelectionAsyncメソッドやRequestCreateAsyncメソッド)が呼び出されると発生する。そのためには、まず先ほどのコードに、イベント・ハンドラを結び付けるコードを追加する(次のコード)。Functionセカンダリ・タイルを作成するメソッドの中でVisualElementsRequestedイベント・ハンドラを追加する(上:C#、下:VB)先ほどのメソッドに、太字の部分を追加する。次に、VisualElementsRequestedイベント・ハンドラを作成し、そこで次のコードのようにして代替ロゴ(=2種類目以降のタイル)を設定する。Sub代替ロゴを設定するメソッド(上:C#、下:VB)それぞれで設定すべき内容は、前掲した1つ目のコードのVisualElementsプロパティへの設定と同じなので、迷うことはないだろう。ここでは、それぞれで背景色と大タイルの画像を変えている。画面に適当にボタンを配置し、そのTappedイベントで前述のCreateSecondaryTileAsyncメソッドを呼び出す(次のコード)。Functionセカンダリ・タイルを作成するメソッドを呼び出すコード(上:C#、下:VB)画面に「PinButton」という名前のAppBarButtonコントロールを配置し、そのTappedイベントにこのPinButton_Tappedメソッドを割り当てた。2つ目のメソッド(=GetElementRectメソッド)は、タップされたボタンの場所を算出するためのもの。これで実行してボタンをタップしてみると、次の画像のようなフライアウトが現れる。提示されたタイルの左右をタップすることで選択肢を切り替える。全部で16通りあるが、ここでは4つだけ紹介する。表示されたフライアウト作成するセカンダリ・タイルの選択肢の例。提示されたタイルの左右をタップして選択肢を切り替える。次の画像は、16通りのセカンダリ・タイルを全て作成したスタート画面だ。エンド・ユーザーはスタート画面でセカンダリ・タイルのサイズを変えられるが、ほかの代替ロゴに切り替えることはできない。16通りのセカンダリ・タイルを全て作成したスタート画面プライマリ・タイル(青色のワイド・タイル)とセカンダリ・タイル(4色×4サイズ=16通り)が並んでいる。自アプリで作成したセカンダリ・タイルがスタート画面にまだ存在していることを確認するには、SecondaryTileクラスのExistsメソッドを使う。自アプリで作成したセカンダリ・タイルを列挙するために、SecondaryTileクラスにFindAllAsyncメソッドなどいくつかのメソッドが用意されている。8のときと同じである。以前の記事を参照してほしい。セカンダリ・タイルから起動された場合、AppクラスのOnLaunchedメソッドに渡されるLaunchActivatedEventArgs型の引数「args」のプロパティにセカンダリ・タイルの情報が入っていることは以前の記事で述べた。付け加えておくと、すでにアプリが実行中であってもセカンダリ・タイルがタップされるとOnLaunchedメソッドが実行されるので、実行中に別の画面へ遷移さられる。8.1では、セカンダリ・タイルをスタート画面にピン留めするときに、エンド・ユーザーがタイルの初期サイズを選択できるようになっている。アプリから代替ロゴを設定すると、エンド・ユーザーはタイルの図柄も選択できる(最大4種類)。8.1で新しくなっている。8のときのコードのままでもビルドは可能だが、新しい記述方法は代替ロゴを設定する場合と同じなので、新しい書き方にした方がよいだろう。8.1で新しくなったタイルの機能については、次のドキュメントも参照してほしい。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。