ファイル リソースを読み込む方法 (HTML)
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
さまざまな場所からファイル リソースを読み込む方法について説明します。
アプリ パッケージの一部として提供するアプリ ファイルや、コンポーネントまたはフレームワーク パッケージの一部として含めるアプリ ファイルのファイル リソースにアクセスできます。また、アプリ データや Web 上のファイル リソースにアクセスすることもできます。これらのファイルを参照するには、マークアップ (HTML、通知 XML など) や、コード (Windows.Web.Http API や storage file API など) を使います。ここで取り上げた例は、特定のコンテキストのファイル リソースを示していますが、その他のさまざまなコンテキストでこれらのほとんどのリソースを使うことができます。
Web
Web からのファイルにアクセスするには、標準的な絶対 HTTP URI を使います。
<img src="https://www.contoso.com/images/logo.png" alt="Logo" />
アプリ パッケージ
アプリ パッケージのファイルにアクセスするには、直接ファイル パスと論理ファイル パスのいずれかを使って、リソースを参照します。このことは、ファイルが複数の言語、スケール、コントラストに対応している場合や、ファイル名に含まれる修飾子のような他のバリエーションをファイルが持っている場合でも同様です。概要については、「クイック スタート: ファイルまたは画像リソースの使用」をご覧ください。
たとえば、次のものを読み込みます。
Images/en-US/homeregion-USA/logo.scale-100_contrast-white.png
これを読み込むためには、次のものを参照します。
Images/logo.png
マークアップ内の現在のドキュメントを基準としたファイルにアクセスするには、相対 URI を使います。
<img src="images/logo.png" />
パッケージのルートを基準としたファイルにアクセスするには、絶対パス URI ("/" で始まるパス) を使います。
<img src="/images/logo.png" />
同じパッケージ内に格納された、クラス ライブラリからのファイルにアクセスするには、クラス ライブラリ名を使います。
<img src="/ClassLibraryName/images/logo.png" />
アプリ パッケージ内に格納されているが、基本ドキュメントから推論されるルートがないコードからのファイルにアクセスするには、ms-appx: スキームを使います。
var uri = new Windows.Foundation.Uri('ms-appx:///images/logo.png');
Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri).done(function (file) {
...
});
アプリと共にフレームワークやライブラリ パッケージに格納されたファイルにアクセスするには、絶対 URI (および **ms-appx:**スキーム) を使います。
<script src="ms-appx:///Bing.Maps.JavaScript//js/veapicore.js"></script>
Web コンパートメントに読み込まれるファイルにアクセスするには、ms-appx-web: スキームを使います。
<iframe src="ms-appx-web:///html/webcompartment.html"></iframe>
現在のドキュメントと同じ Web コンパートメントやローカル コンパートメントのファイルにアクセスする場合は、スキームを指定しないでください。
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
アプリ データ
アプリ データに格納されたファイルにアクセスするには、ms-appdata: スキームを使います。 アプリ データは、local フォルダー、roaming フォルダー、tempフォルダーに格納できます。
local フォルダーに格納されたファイルにアクセスするには、次のように指定します。
<img src="ms-appdata:///local/images/logo.png" />
roaming フォルダーに格納されたファイルにアクセスするには、次のように指定します。
<img src="ms-appdata:///roaming/images/logo.png" />
temp フォルダーに格納されたファイルにアクセスするには、次のように指定します。
<img src="ms-appdata:///temp/images/logo.png" />
storage file APIs は、これと同じ方法でアプリ パッケージにあるファイルにアクセスできます。
var uri = new Windows.Foundation.Uri('ms-appdata:///local/images/logo.png');
Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri).done(function (file) {
...
});
イベントとコンテキストの変更
アプリは、必要に応じて、リソースの表示を更新する役割を果たします。
Windows ストア アプリは、ユーザーがハイ コントラストを有効にしたときなど、システムの変更時に実行されている場合があります。この場合、アプリでは別の修飾子のセットを使うことになります。システムでさまざまな変更が行われると、ResourceContext オブジェクトでイベントが呼び出されます。
JavaScript でこれらのイベントをリッスンする最も簡単な方法は、次のように addEventListener メソッドを使う方法です。
WinJS.Resources.addEventListener('contextchanged', refresh, false);
コンテキストの変更時に画像要素は自動的に更新されず、画像の置き換えはアプリで行うことになります。CSS メディア クエリは、背景画像などの CSS プロパティを直ちに更新する場合の代替手段となります。