Windowsストア アプリ 縦書きビューワー Vol.3 ～タイルの作成～
マイクロソフトの田中達彦です。
本連載では、過去の名作や自分の著書などをWindowsストア アプリ化するための縦書きビューワーについて説明します。
[タイルなどの画像データ]
Windowsストア アプリでは、スタート画面やWindowsストアに表示させるための画像ファイルを用意する必要があります。
画像は、以下のサイズのものを用意します。
黄色くマーカーしている画像は必ず用意しないといけない画像データです。
ロゴ (正方形のタイル)
120x120、150x150、210x210、270x270
ワイド ロゴ (ワイドタイル)
248x120、310x150、434x210、558x270
小さいロゴ (スタート画面で全アプリを表示させたときなどに使用)
24x24、30x30、42x42、54x54
16x16、32x32、48x48、256x256
ストア ロゴ
50x50、70x70、90x90
バッジ ロゴ
24x24、34x34、43x43
スプラッシュ スクリーン
620x300、868x420、1116x540
[画像データの作り方]
これらの画像データを作るときのお勧めの方法は、PowerPointとWin8IconMakerを組み合わせることです。
まずはPowerPointで元となるデータを作ります。
このとき、縦横比が15:31のデータと1:1のデータを作っておくと便利です。
1:1のデータは、タイル用とそれ以外(小さいロゴとストア ロゴ)用の2種類を用意しておくと、見やすいロゴになります。
以下は「芋粥」の15:31、タイル用の1:1、それ以外の1:1の画像データです。
PowerPointのファイルを添付したので、そのファイルをご参照ください。
画像データの背景と文字の部分を合わせて選択し、右クリックして[図として保存]を選択すると、用意した画像データをファイルに保存することができます。
画像ファイルの作成方法は、下記のブログ記事をご参照ください。
https://blogs.msdn.com/b/ttanaka/archive/2013/03/06/windows-tips-006.aspx
元の画像ファイルを作ったら、Win8IconMakerを使用して、各サイズの画像ファイルを一気に作ってしまいます。
Win8IconMakerは、もともとWindows Phone用に故川西裕幸エバが作成したものを、高橋忍エバがWindows 8用に作り直したものです。
下記の高橋エバのブログからダウンロードできます。
https://blogs.msdn.com/b/shintak/archive/2013/03/30/10406326.aspx
1:1で用意した画像ファイルを読み込ませ、右中央に表示されている正方形の部分をクリックすると、画像全体を対象にした各種の大きさの画像ファイルを作成できます。
画像データの任意の範囲を選択することもできます。
15:31の画像も同様に読み込ませ、各種の大きさの画像ファイルを作成します。
元の画像データを15:31で作っておき、画像全体を読み込ませるようにしておけば、スタート画面にタイルが並んだときにも文字の位置がずれることなく、以下のようにきれいに表示できます。
源氏物語のタイトルってかっこいい!!
[連載記事一覧]
第1回 : アプリのテンプレート
https://blogs.msdn.com/b/ttanaka/archive/2013/04/11/windows-vol-1.aspx
アプリのテンプレートを提供するとともに、使用するときの注意事項、使用方法を説明しています。
第2回 : 青空文庫のアプリ化
https://blogs.msdn.com/b/ttanaka/archive/2013/04/12/windows-vol-2.aspx
文字下げ、文字上げなどの特殊処理を行う方法を説明しています。
第3回 : タイルの作成
https://blogs.msdn.com/b/ttanaka/archive/2013/04/12/windows-vol-3.aspx
アプリを公開する際に必ず用意しないといけないタイルの作成方法を説明します。
第4回 : プログラムの説明
https://blogs.msdn.com/b/ttanaka/archive/2013/04/15/windows-vol-4.aspx
どのような方法で縦書きを実現させているのかを説明します。
第5回 : 特殊処理の追加
https://blogs.msdn.com/b/ttanaka/archive/2013/04/17/windows-vol-5.aspx
独自に特殊処理を追加する方法を説明します。
マイクロソフト
田中達彦