WinJS.xhr を使ったマッシュアップの作成方法 (HTML)

[アーティクル]
12/22/2015

[ この記事は、Windows ランタイムアプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

マッシュアップは、2 つ以上のソースに存在するデータを使って新しいものを作成する Web アプリケーションです。この例では、XMLHttpRequest (XHR) を使ってリモート RSS (Really Simple Syndication) フィードの取得と表示を行う方法を示します。

理解しておく必要があること

テクノロジ

WinJS.xhr

必要条件

JavaScript 用 Windows ライブラリのテンプレートを使った基本的なアプリの作成経験が必要です。初めてのアプリを作る方法について詳しくは、「JavaScript を使った初めての Windows ランタイムアプリの作成」をご覧ください。

このトピックのこのコードは、WinJS を使っています。WinJS をプロジェクトに含める方法については、「クイックスタート: JavaScript 用 Windows ライブラリのコントロールとスタイルの追加」をご覧ください。

手順

ステップ 1: Web にアクセスするようにアプリをセットアップする

ネットワークへのアクセスなど、特定の機能を明示的にアプリに追加する必要があります。機能について詳しくは、「アプリ機能の宣言」と「ネットワーク分離機能を構成する方法」をご覧ください。

Visual Studio で空白の JavaScript アプリを作成します。
package.appxmanifest ファイルを開き、[機能] タブに移動します。
Windows バージョンのサンプルでは、[インターネット (クライアント)] 機能は既に選択されています (選択されていない場合はここで選択してください)。アプリがクライアントとしてホームネットワークまたは社内ネットワーク上の Web サービスに接続するには、[プライベートネットワーク (クライアントとサーバー)] 機能も必要です。

Windows Phone バージョンのサンプルの場合は、[インターネット (クライアントとサーバー)] 機能を選びます。

注 Windows Phone では、アプリに対してすべてのネットワークアクセスを有効にするネットワーク機能は [インターネット (クライアントとサーバー)] だけです。

ステップ 2: RSS フィードを取得する

WinJS.xhr 関数は、指定された URL から XHR を使ってデータを取得します。WinJS.xhr は非同期であり、要求されたデータに Promise を返します。 RSS フィードを取得するには、この Promise に条件を満たすハンドラーを指定します。(エラーハンドラーと進捗ハンドラーを指定することもできます。)

WinJS.xhr 関数は、パッケージ内のどのページ (ローカルコンテキスト内のどのページ) からでも呼び出すことができます。

注注: XHR 要求のターゲット URL がアプリの ApplicationContentUriRules (アプリのパッケージマニフェストに一覧されている) によって制限されることはありません。

この例では、WinJS.xhr を使って rss.msnbc.msn.com RSS フィードにアクセスします。次の 2 つのコールバック関数が Promise に渡されます。

xhrParseXml: 条件を満たすハンドラー。この関数は、XHR 要求が成功した場合に呼び出されます。
xhrError: エラーハンドラー。この関数は、XHR 要求が失敗した場合に呼び出されます。

WinJS.xhr({ url: "http://rss.msnbc.msn.com/id/3032127/device/rss/rss.xml" }).then(
    xhrParseXml, xhrError
    );

次のステップでは、xhrParseXml メソッドと xhrError メソッドを定義します。

ステップ 3: 結果を解析する

WinJS.xhr 要求が正常に完了する場合、先の例のコードは xhrParseXml を呼び出します。xhrParseXml 関数は RSS 項目を反復処理し、各項目のリンクを生成します。この関数は、メインページにある div、つまり xhrOutput にリンクを表示します。

function xhrParseXml(result) {

    var outputArea = document.getElementById("xhrOutput");
    var xml = result.responseXML;


    if (xml) {
        var items = xml.querySelectorAll("rss > channel > item");
        if (items) {
            var length = Math.min(10, items.length);
            for (var i = 0; i < length; i++) {
                var link = document.createElement("a");
                var newLine = document.createElement("br")
                link.setAttribute("href", items[i].querySelector("link").textContent);
                link.innerText = (i + 1) + ") " + items[i].querySelector("title").textContent;
                outputArea.appendChild(link);
                outputArea.appendChild(newLine);
            }
        } else {
            outputArea.innerHTML = "There are no items available at this time";
        }
    } else {
        outputArea.innerHTML = 
            "Unable to retrieve data at this time. Status code: " + statusCode;
    }
}

次の例は、出力領域の HTML 宣言を示しています。

<div id="xhrOutput">
</div>

ステップ 4: エラーを処理する

リモートデータにアクセスできないという状況はいつでも発生する可能性があるため、XHR 要求の処理エラーに対応する方法を提供する必要があります。この例では、単純なエラーハンドラーを定義しています。

詳しくは、「ネットワークアプリでの例外の処理」をご覧ください。

function xhrError(result) {

    var statusCode = result.status; 
    var outputArea = document.getElementById("xhrOutput");
    outputArea.innerHTML = 
        "Unable to retrieve data at this time. Status code: " + statusCode;
}

完全な例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Mashup</title>

    <!-- WinJS references - Windows -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- WinJS references - Phone -->
    <link href="/css/ui-themed.css" rel="stylesheet" />
    <script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
    <script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>

    <!-- Mashup references -->
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/default.js"></script>
</head>
<body>

    <div id="xhrOutput">
    </div>
</body>
</html>

// default.js
(function () {
    "use strict";

    var app = WinJS.Application;

    // This function responds to all application activations.
    app.onactivated = function (eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            // Initialize your application here.
            WinJS.UI.processAll();
            loadRemoteXhr();
        }
    };

    function loadRemoteXhr() {

        document.getElementById("xhrOutput").innerHTML = "";
        WinJS.xhr({ url: "http://rss.msnbc.msn.com/id/3032127/device/rss/rss.xml" }).then(
            xhrParseXml, xhrError
            );

    }

    function xhrParseXml(result) {

        var outputArea = document.getElementById("xhrOutput");
        var xml = result.responseXML;

        if (xml) {
            var items = xml.querySelectorAll("rss > channel > item");
            if (items) {
                var length = Math.min(10, items.length);
                for (var i = 0; i < length; i++) {
                    var link = document.createElement("a");
                    var newLine = document.createElement("br")
                    link.setAttribute("href", items[i].querySelector("link").textContent);
                    link.innerText = (i + 1) + ") " + items[i].querySelector("title").textContent;
                    outputArea.appendChild(link);
                    outputArea.appendChild(newLine);
                }
            } else {
                outputArea.innerHTML = "There are no items available at this time";
            }
        } else {
            outputArea.innerHTML = 
                "Unable to retrieve data at this time. Status code: " + statusCode;
        }
    }

    function xhrError(result) {

        var statusCode = result.status;
        var outputArea = document.getElementById("xhrOutput");
        outputArea.innerHTML = "Unable to retrieve data at this time. Status code: " + statusCode;
    }


    app.start();
})();

より多くの機能を含んだサンプルをダウンロードできます。Web サービスからのコンテンツやコントロールを統合するサンプルをご覧ください。