クイック スタート: ファイルまたは画像リソースの使用 (HTML)
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
画像や他のファイル リソースをアプリに追加し、それらのファイルをアプリ内から参照することができます。ファイル リソースの名前付けやフォルダー内でのファイル リソースの配置に関する次の指示に従うことで、ハイ コントラスト設定や画面固有のスケーリングに基づいた画像の選択のサポートを Windows ランタイムに組み込むことができます。
手順
さまざまなデ画面構成 (DPI) やコントラスト設定に合わせて調整された画像や他のファイル アセットを作ります。
Windows が目的に合ったリソース読み込むときにアプリが適切に表示されるように、画像を複数の推奨サイズで作ります。「ピクセル密度に合わせたスケーリングのガイドライン」をご覧ください。
各画像の複数のコピーを作ります。
- 標準 96 dpi デバイスで使われるオリジナル サイズ。このファイルに、name**.scale-100.ext という名前を付けます (この手順および後続のすべての手順では、name は選んだリソース名のプレースホルダーを表し、ext はファイルの種類に固有の拡張子を表します)。.scale-100** はリソース名のセグメントであり、Windows ランタイムのスケーリングの動作を調整します。この部分の名前に対しては、ここで説明されている規則に従ってください。
- オリジナル サイズの 140% のコピー。たとえば、100 x 100 ピクセルの画像には 140 x 140 ピクセルのイメージ バージョンも必要です。このファイルに、name**.scale-140.**ext という名前を付けます。
- オリジナル サイズの 180% のコピー。たとえば、100 x 100 ピクセルの画像には 180 x 180 ピクセルのイメージ バージョンも必要です。このファイルに、name**.scale-180.**ext という名前を付けます。
- オリジナル サイズの 240% のコピー (Windows Phone アプリの場合)。たとえば、100 x 100 ピクセルの画像には 240 x 240 ピクセルのイメージ バージョンも必要です。このファイルに、name**.scale-240.**ext という名前を付けます。
- オリジナル サイズの黒い背景と白い前景のハイ コントラスト画像。このファイルに、name**scale-100_contrast-black.**ext という名前を付けます。
- オリジナル サイズの白い背景と黒い前景のハイ コントラスト画像。 このファイルに、name**scale-100_contrast-white.**ext という名前を付けます。
注 アプリのロゴの画像でも、アプリのマニフェスト ファイルで指定されているリソースを使います。アプリ ロゴに対して特定の画像を使っている場合は、その画像について、オリジナル サイズの 80% のコピーを作る必要があります。たとえば、100 x 100 ピクセルのロゴの画像には 80 x 80 ピクセルのイメージ バージョンも必要です。このファイルに、name**.scale-80.**ext という名前を付けます。詳しくは、「アプリ画像の選択」と「タイルとトーストのビジュアル資産」をご覧ください。
すべての画像は、アプリの構造の同じフォルダー内に配置します。次に例を示します。
- images/logo.scale-100.png
- images/logo.scale-140.png
- images/logo.scale-180.png
- images/logo.scale-240.png
- images/logo.scale-80.png
- images/logo.scale-100_contrast-black.png
- images/logo.scale-100_contrast-white.png
HTML で、修飾子を除いて画像を参照します。
マークアップからこのファイル リソースを参照するときは、name.ext の形式を使います (スケールやコントラストを指定するセグメントを意図的に省略します。このセグメントは、適切なリソースを取得するときに、Windows ランタイム によって内部的に追加されます)。次に例を示します。
<img src="images/logo.png" />コードで、修飾子を除いて画像を参照します。
コードからこのファイル リソースを参照するときは、name.ext の形式を使います (スケールやコントラストを指定するセグメントを意図的に省略します。このセグメントは、適切なリソースを取得するときに、Windows ランタイム によって内部的に追加されます)。上記のマークアップの手順との相違点は、マークアップ ファイルのコンテキストであるため、マークアップではスキームとルートを推測できるという点です。ただし、コードではこれを推測できません。URI (Uniform Resource Identifier) のスキーム部分やルート部分がコードで必要となるのは、新しい Uri を構築する場合であるためです。次に例を示します。
var uri = new Windows.Foundation.Uri('ms-appx:///images/logo.png'); var file = Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri);ロゴ ファイルの場合は、マニフェストで修飾子を除いて画像を参照します。
Microsoft Visual Studio で Package.appxmanifest ファイルを開きます。[ビジュアル資産] タブを開きます。
リソース ファイルを参照するようにマニフェスト参照を編集します。これは、既定ではテキスト編集フィールドとして表示され、ここにリソース ファイル名を指定するときは、修飾子セグメントを省略します。たとえば、[150x150 の正方形のロゴ] のフィールドでは、値は次のようになります。
images\logo.png
ファイル リソースとグローバリゼーション
このトピックの手順では、スケーリングとコントラストのサポートを有効にするリソース修飾子について重点的に説明します。この手順では、ファイル名に含まれる修飾子に適用される規則を使います。ただし、一部の画像や他のファイルは、スケーリングとコントラストのサポート以外の理由でローカライズが必要になることがあります (特に、テキストや文化的に重要な内容を含んでいる場合)。ファイルは、言語とは別にユーザーの位置によっても異なることがあります。たとえば、ユーザーの位置によって地図にはさまざまな境界がありますが、ラベルはユーザーの言語に従う必要があります。このような対応が必要になる理由について詳しくは、「グローバリゼーションとローカライズのガイドライン」をご覧ください。
言語や場所ごとに異なるリソースが必要になる場合、Windows ランタイムでは、実行時に言語や場所を判別し、それぞれに応じた適切なリソースを読み込むための規則もサポートします。この規則では、ファイル名ではなくフォルダー名を使います。このため、ここで説明したファイル名の規則とフォルダーの規則を組み合わせて、スケール/コントラスト、およびローカライズに関するサポートを提供するリソースを定義することができます。また、RTL 固有のリソース、およびファイルの関連付けのためにシステムで表示される画像などの特殊な状況で使われる targetsize の規則もサポートされています。リソースを修飾する場合のフォルダー名の規則、および修飾の規則について詳しくは、「修飾子を使ってリソースに名前を付ける方法」をご覧ください。