Web フィードにアクセスする方法 (HTML)

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

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

このトピックでは、Windows ランタイムアプリで Windows.Web.Syndication 名前空間のクラスを使って、Web フィードを取得および表示する方法について説明します。

必要条件

次の例は、JavaScript で記述されており、Syndication のサンプルに基づいています。 JavaScript を使った Windows ランタイムアプリの作成についての一般的なヘルプは、「JavaScript を使った初めての Windows ランタイムアプリの作成」をご覧ください。このトピックでは、JavaScript の promise を使って非同期操作も実行します。このプログラミングパターンについて詳しくは、promise を使った JavaScript での非同期プログラミングに関するページをご覧ください。

Windows ランタイムアプリをネットワークに対応させるには、プロジェクトの Package.appxmanifest ファイルで必要なネットワーク機能を設定する必要があります。アプリがクライアントとしてインターネット上のリモートサービスに接続する必要がある場合は、インターネット (クライアント) 機能が必要です。アプリがクライアントとしてホームネットワークまたは社内ネットワーク上のリモートサービスに接続する必要がある場合は、ホーム/社内ネットワーク機能が必要です。詳しくは、「ネットワーク機能を設定する方法」をご覧ください。

手順

Web フィードからの概要コンテンツの取得

ここでは、フィードを取得し、そこに含まれている個々の項目を表示するコードを見ていきます。要求を構成して送信する前に、操作で使う変数を定義し、SyndicationClient のインスタンスを初期化します。このクラスには、フィードを取得して表示する際に必要なメソッドとプロパティが定義されています。

Uri コンストラクターは、渡された uriString が有効な URI ではない場合、例外をスローします。そのため、try/catch ブロックを使用して uriString を検証します。

var currentFeed = null;
var currentItemIndex = 0;
        
var client = new Windows.Web.Syndication.SyndicationClient();

// The URI is validated by catching exceptions thrown by the Uri constructor.
var uri = null;
try {
    uri = new Windows.Foundation.Uri(uriString);
} catch (error) {
    WinJS.log && WinJS.log("Error: Invalid URI");
    return;
}

次に、必要なサーバーの資格情報 (serverCredential プロパティ)、プロキシの資格情報 (proxyCredential プロパティ)、HTTP ヘッダー (setRequestHeader メソッド) を設定して要求を構成します。基本的な要求パラメーターを構成したうえで、アプリによって指定されたフィード URI 文字列を使って有効な Uri オブジェクトが作成されます。次に、Uri オブジェクトを retrieveFeedAsync 関数に渡してフィードを要求します。

目的のフィードコンテンツが返されたことを前提に、各フィード項目を反復処理し、displayCurrentItem (この後で定義) を呼び出して、項目とそのコンテンツをリストとして UI に表示します。

非同期ネットワークメソッドの多くは、呼び出す場合、例外を処理するようにコードを記述する必要があります。エラーについてよく理解し、適切な判断ができるように、例外ハンドラーは例外の原因についての詳しい情報を取得できます。詳しくは、「ネットワークアプリで例外を処理する方法」をご覧ください。

retrieveFeedAsync メソッドは、ネットワークサーバーとの TCP 接続が確立できなかった場合や、Uri オブジェクトが有効な AtomPub や RSS フィードを指していない場合、例外をスローします。サンプルコードでは、onError 関数を使って、エラーが発生した場合に例外をキャッチし、例外に関する詳細な情報を出力します。

function onError(err) {
    WinJS.log && WinJS.log(err, "sample", "error");

    // Match error number with a ErrorStatus value.
    // Use Windows.Web.WebErrorStatus.getStatus() to retrieve HTTP error status codes.
    var errorStatus = Windows.Web.Syndication.SyndicationError.getStatus(err.number);
    if (errorStatus === Windows.Web.Syndication.SyndicationErrorStatus.invalidXml) {
        displayLog("An invalid XML exception was thrown. Please make sure to use a URI that points to a RSS or Atom feed.");
    }
}

// Retrieve and display feed at given feed address.
function retreiveFeed(uri) {

    // Although most HTTP servers do not require User-Agent header, 
    // others will reject the request or return a different response if this header is missing.
    // Use the setRequestHeader() method to add custom headers.
    client.setRequestHeader("User-Agent", "Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0)");

    client.retrieveFeedAsync(uri).done(function (feed) {
        currentFeed = feed;

        WinJS.log && WinJS.log("Feed download complete.", "sample", "status");

        var title = "(no title)";
        if (currentFeed.title) {
            title = currentFeed.title.text;
        }
        document.getElementById("CurrentFeedTitle").innerText = title;

        currentItemIndex = 0;
        if (currentFeed.items.size > 0) {
            displayCurrentItem();
        }

        // List the items.
        displayLog("Items: " + currentFeed.items.size);
     }, onError);
}

前の手順のコード例では、retrieveFeedAsync によって、要求対象のフィードコンテンツを取得し、フィード項目を反復処理しました。その各項目は SyndicationItem オブジェクトで表され、フィード配信標準 (RSS または Atom) でサポートされているすべての項目のプロパティとコンテンツはこのオブジェクトに格納されています。次の例では、個々の項目を処理し、その内容を対応する UI 要素に表示する displayCurrentItem 関数を詳しく見ていきます。

function displayCurrentItem() {
    var item = currentFeed.items[currentItemIndex];

    // Display item number.
    document.getElementById("Index").innerText = (currentItemIndex + 1) + " of " + currentFeed.items.size;

    // Display title.
    var title = "(no title)";
    if (item.title) {
        title = item.title.text;
    }
    document.getElementById("ItemTitle").innerText = title;

    // Display the main link.
    var link = "";
    if (item.links.size > 0) {
        link = item.links[0].uri.absoluteUri;
    }

    var link = document.getElementById("Link");
    link.innerText = link;
    link.href = link;

    // Display the body as HTML.
    var content = "(no content)";
    if (item.content) {
        content = item.content.text;
    }
    else if (item.summary) {
        content = item.summary.text;
    }
    document.getElementById("WebView").innerHTML = window.toStaticHTML(content);

先ほども少し触れましたが、SyndicationItem オブジェクトによって表されるコンテンツの種類は、フィードの発行に使われている規格 (RSS または Atom) によって異なります。たとえば、contributors のリストは、Atom フィードでは利用できますが、RSS フィードでは利用できません。ただし、どちらの規格でもサポートされていないフィード項目内の拡張要素 (Dublin Core の extension 要素など) は、次のコード例のように、SyndicationItem.elementExtensions プロパティを使ってアクセスし、表示することができます。


    // displayCurrentItem function continued
    var bindableNodes = [];
    for (var i = 0; i < item.elementExtensions.size; i++) {
        var bindableNode = {
            nodeName: item.elementExtensions[i].nodeName,
             nodeNamespace: item.elementExtensions[i].nodeNamespace,
             nodeValue: item.elementExtensions[i].nodeValue,
        };
        bindableNodes.push(bindableNode);
    }

    var dataList = new WinJS.Binding.List(bindableNodes);
    var listView = document.getElementById("extensionsListView").winControl;
    WinJS.UI.setOptions(listView, {
        itemDataSource: dataList.dataSource

    });
}

要約と次のステップ

このトピックでは、指定された URI に関連付けられているフィードを取得して、項目ごとにフィードの内容を表示しました。

Web フィード内のエントリの追加、編集、削除など、より高度な機能について詳しくは、「Web フィードエントリを管理する方法」をご覧ください。

次の方法で共有

Web フィードにアクセスする方法 (HTML)

必要条件

手順

Web フィードからの概要コンテンツの取得

要約と次のステップ

関連トピック

その他のリソース