Bing Maps Trip Optimizer のサンプルでの JavaScript の使用
Bing マップ トリップ オプティマイザーの HTML および JavaScript の部分は、ユーザー インターフェイスを定義します。 UI は、ユーザーから場所を収集し、Bing マップ AJAX コントロールのすべての場所で近道を表示します。 このドキュメントでは、アプリケーションの JavaScript の部分がどのように整理されているか、およびローカル コンテキストと Web コンテキストがどのように互いに通信するかを示します。 また、移行に関する主な注意点についても説明します。
JavaScript の部分は、UI を定義するために標準 CSS、HTML、および JavaScript を使用します。 このドキュメントでは、これらの要素を詳しく説明していません。 ただし、JavaScript の Web アプリと JavaScript Windows ストア アプリの違いを作り出す要素について説明しています。
注意
このドキュメントに対応するサンプル コードは、「Bing Maps trip optimizer sample (Bing マップ トリップ オプティマイザー サンプル)」にあります。
この記事の内容
ローカル コンテキストと Web コンテキスト
ローカル コンテキルトからの Web コンテキストの参照
コンテキスト間の通信
ActiveX からの移行
次の手順
ローカル コンテキストと Web コンテキスト
JavaScript を使用した Windows ストア アプリには、少なくとも 1 つの HTML ページが含まれています。 そのページと、アプリ自体に含められるその他のページは、一般的にアプリのローカル コンテキストで実行されます。 iframe を使用してリポート ページに移動する場合、そのページは Web コンテキストで実行され、システムへのアクセスが制限されます。 ローカル コンテキストと Web コンテキストのさまざまな制限事項と使用できる機能の詳細については、「Features and restrictions by context」を参照してください。
Bing マップ トリップ オプティマイザーは、UI を HTML、CSS、および JavaScript ファイルの 2 つのペアに区切ります。 Windows ランタイムを参照するコードと Web を参照するコードを分離することによって、アプリの管理が容易になります。 default.html、default.css、default.js の各ファイルは Windows ランタイム (これにはカスタム C++ Windows ランタイム コンポーネントが含まれます) を参照しますが、Web にはアクセスしません。default.html、default.css、および default.js はアプリのメイン ページを表します。 web.html、web.css、web.js の各ファイルは Web にアクセスしますが、Windows ランタイムにはアクセスしません。 web.html の内容はローカル コンテキストのインライン フレームです。
次の図は、ローカル コンテキストと Web コンテキストの関係を示しています。 これらのコンテキストがどのようにやり取りするかは、このドキュメントで後述します。
.png "ローカルおよび Web コンテキスト")
.gif "セキュリティに関するメモ") セキュリティに関するメモ |
|---|
異なるモジュールで Web コードを維持することは、アプリケーションのセキュリティの向上にも役立ちます。可能な場合は、バッファー オーバーランなど、セキュリティ上の脆弱性の可能性を最小化できるように、Web コンテキストからローカル コンテキストで受け取るデータを検証します。 |
[このページのトップへ]
ローカル コンテキルトから Web コンテキストを参照する
ローカル コンテキストの (default.html) の body のタグは、Web コンテキスト (web.html) を保持するインライン フレーム (iframe) のタグを定義します。
<iframe id="mapFrame" src="ms-appx-web:///html/web.html" style="position: absolute; left: 0px; width: 100%; top: 0px; height: 100%; overflow: hidden"></iframe>
JavaScript Windows ストア アプリケーションでコード ファイルを参照する場合、次の構文を使用することが重要です。
src="ms-appx-web://<package-name>/<file-name>"
ターゲット ファイルが呼び出しファイルと同一のパッケージの場合 <package-name> の部分を省略できます。 アプリケーション マニフェストにパッケージ名があります。 Visual Studio で package.appxmanifest ファイルを開き、[パッケージ化] タブをクリックします。 JavaScript で記述された Windows ストア アプリに追加された新しいナビゲーション機能の詳細については、「Quickstart: Using single-page navigation」を参照してください。
[このページのトップへ]
コンテキスト間の通信
ローカル コンテキストと Web コンテキストでは、通信でクロス ドキュメントのメッセージングを使用します。 コンテキストが通信する前に、メッセージングのイベントに対して登録する必要があります。 default.html と web.html の両方が body タグの onload プロパティに onLoad 関数を指定します。 onLoad の両方の関数は、型 message のイベントをリッスンするように addEventListener のメソッドを呼び出し、それらのメッセージを receiveMessage にルーティングします。 次の例は、ローカル コンテキストの onLoad 関数を示します。
function onLoad() {
"use strict";
window.addEventListener("message", receiveMessage, false);
}
重要
Bing マップ トリップ オプティマイザーは 1 つのコンテキストが直接別のコンテキストの DOM にアクセスできないため、クロス ドキュメントのメッセージングを使用します。
コンテキストがメッセージングのイベント用に登録された後、postMessage メソッドを使用して通信できます。 このメソッドは、メッセージ イベント ハンドラー、receiveMessage 関数、または他のコンテキストにルーティングされるクロス ドキュメントのメッセージを送信します。 クロス ドキュメントのメッセージはテキスト ベースであるため、アプリケーションと Web コンテキストは JSON テキストにメッセージをシリアル化するために JSON.stringify 関数を使用します。 コンテキストがメッセージを受け取ると、JSON テキストからフィールドを逆シリアル化するために JSON.parse 関数を呼び出します。
コンテキストがどのようにやり取りするかを示すために、カスタム C++ Windows ランタイム コンポーネントを初期化するために Web コンテキストがローカル コンテキストとどのようにやり取りするかをみてみましょう。(Web コンテキストは Windows ランタイム コンポーネントと直接やり取りすることはできません)。 Web コンテキストで定義されている onLoad 関数の web.js は、初期化中に呼び出されます。
web.js
// Called when the page loads.
function onLoad() {
"use strict";
// Hook to main frame for incoming messages.
window.addEventListener("message", receiveMessage, false);
// Disable input.
disableElement(inputArea, true);
// Load the C++ component.
optimizerLoad();
// Load a default map.
Microsoft.Maps.loadModule('Microsoft.Maps.Overlays.Style', {
callback: function () {
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {
mapTypeId: "r",
center: new Microsoft.Maps.Location(45.5, -80.5),
zoom: 4,
enableClickableLogo: false,
enableSearchLogo: false,
customizeOverlays: true,
showBreadcrumb: true
});
}
});
// Reset waypoints.
resetWaypoints();
}
onLoad 関数は optimizerLoad 関数を呼び出します。 optimizerLoad 関数は、C++ Windows ランタイム コンポーネントを初期化するためにローカル コンテキストと通信します。
web.js
function optimizerLoad() {
"use strict";
var message = { "invoke": "load" };
window.parent.postMessage(JSON.stringify(message), "*");
}
Windows ランタイム コンポーネントが作成される前に両方のコンテキストが読み込まれるよう、ローカル コンテキストから直接読み込む代わりに、Web コンテキストから Windows ランタイム コンポーネントの読み込みを開始します。
ローカル コンテキストの receiveMessage 関数は、メッセージを解析し、適切なメッセージ ハンドラーに呼び出しをルーティングします。 この場合は、非シリアル化された JavaScript オブジェクトの invoke フィールドは、「ロード」となります。したがって、ローカル コンテキストは optimizerLoad 関数を呼び出します。
default.js
function receiveMessage(message) {
"use strict";
// Verify event origin.
if (message.origin !== "ms-appx-web://microsoft.sdksamples.tripoptimizer.js") {
return;
}
var data = JSON.parse(message.data);
if (data.invoke === "load") {
optimizerLoad();
} else if (data.invoke === "optimizeTrip") {
optimizerOptimizeTrip(
data.locations,
data.travelMode,
data.optimize,
data.bingMapsKey,
data.alpha,
data.beta,
data.rho,
data.iterations,
data.parallel);
} else if (data.invoke === "cancel") {
optimizerCancel();
} else if (data.invoke === "alert") {
// Show message dialog.
new Windows.UI.Popups.MessageDialog(data.message).showAsync().then();
}
}
ローカル コンテキストの optimizerLoad 関数の詳細については、「Bing Maps Trip Optimizer のサンプルでの JavaScript と C++ 間の相互運用」を参照してください。
[このページのトップへ]
ActiveX からの移行
Bing マップ トリップ オプティマイザーの ActiveX バージョンから Windows ストア アプリへの移行に関する詳細については、「Bing Maps Trip Optimizer のサンプルでの既存のコードの移行」を参照してください。
[このページのトップへ]
次の手順
Bing マップ トリップ オプティマイザーが C++ を使用して、コンピューター集計操作を実行し、全体的なパフォーマンスを向上させる方法については、「Bing Maps Trip Optimizer のサンプルでの C++ の使用」を参照してください。
[このページのトップへ]