Win8(JS Metro)の『分割･･･』テンプレートを使って RSS を収集するサンプル

NAVER と Yahoo! の 天気を取り出してリストページを作成しています。変更したのは data.js で、もともとあった固定のデータは削除して、その枠組みをそのまま利用しています

(function () {
    "use strict";

    function getItemReference(item) {
        return [item.group.key, item.title];
    }

    function resolveGroupReference(key) {
        for (var i = 0; i < groupedItems.groups.length; i++) {
            if (groupedItems.groups.getAt(i).key === key) {
                return groupedItems.groups.getAt(i);
            }
        }
    }

    function resolveItemReference(reference) {
        for (var i = 0; i < groupedItems.length; i++) {
            var item = groupedItems.getAt(i);
            if (item.group.key === reference[0] && item.title === reference[1]) {
                return item;
            }
        }
    }

    function getItemsFromGroup(group) {
        return list.createFiltered(function (item) { return item.group.key === group.key; });
    }

    var backImage1 = "https://lh4.googleusercontent.com/-hHZ3UeOrQGQ/T_J4kLkBN2I/AAAAAAAAHB0/D-MsMRu7j0g/s205/_naver.png";
    var backImage2 = "https://lh5.googleusercontent.com/-F7zC9HwtSTw/T_J4kIny9XI/AAAAAAAAHBw/AesYu2jQHbI/s224/_yahoo.png";

    var sampleGroups = null;
    var sampleItems = null;

    var list = new WinJS.Binding.List();
    var groupedItems = list.createGrouped(
        function groupKeySelector(item) { return item.group.key; },
        function groupDataSelector(item) { return item.group; }
    );

    var serverUrl = "http://matome.naver.jp/feed/hot";
    var xhr = new WinJS.xhr({
        type: "GET",
        url: serverUrl
    }).then(function (req) {

        Debug.writeln(req.responseXML);
        var root = req.responseXML;
        var items = root.getElementsByTagName("item");
        var thumbnail_img = null;

        for( var i = 0; i < items.length; i++ ) {

            var item = {};
            item.group = {};
            item.group.key = "naver"
            item.group.title = "NAVER"
            item.group.subtitle = "Windows8 ひな形拡張";
            item.group.backgroundImage = backImage1;
            item.group.description = "グループの説明";

            item.title = items[i].getElementsByTagName("title")[0].firstChild.nodeValue;
            item.subtitle = "作者 : " + items[i].getElementsByTagName("dc:creator")[0].firstChild.nodeValue;
            item.description = "";

            try {
                item.content = items[i].getElementsByTagName("description")[0].firstChild.nodeValue;
            }
            catch (e) {
                item.content = "";
            }

            thumbnail_img = items[i].getElementsByTagName("media:thumbnail")[0].getAttribute("url");
            item.backgroundImage = thumbnail_img;

            list.push(item);
           
        }


    }, function (req) {
        Debug.writeln("正しく取得できませんでした");
    });


    var serverUrl = "http://rss.weather.yahoo.co.jp/rss/days/6200.xml";
    var xhr = new WinJS.xhr({
        type: "GET",
        url: serverUrl
    }).then(function (req) {

        Debug.writeln(req.responseXML);
        var root = req.responseXML;
        var items = root.getElementsByTagName("item");
        var thumbnail_img = null;

        for (var i = 0; i < items.length; i++) {

            var item = {};
            item.group = {};
            item.group.key = "yahoo"
            item.group.title = "Yahoo! 天気"
            item.group.subtitle = "Windows8 ひな形拡張";
            item.group.backgroundImage = backImage2;
            item.group.description = "グループの説明";

            item.title = items[i].getElementsByTagName("title")[0].firstChild.nodeValue;
            item.subtitle = "";
            item.description = "";

            try {
                item.content = items[i].getElementsByTagName("description")[0].firstChild.nodeValue;
            }
            catch (e) {
                item.content = "";
            }

            thumbnail_img = "https://lh3.googleusercontent.com/-byjvNpDs538/TwbSVn_202I/AAAAAAAAE2g/gbeMVoj4SPU/s200/b17nauke014.jpg";
            item.backgroundImage = thumbnail_img;

            list.push(item);

        }


    }, function (req) {
        Debug.writeln("正しく取得できませんでした");
    });


    WinJS.Namespace.define("Data", {
        items: groupedItems,
        groups: groupedItems.groups,
        getItemsFromGroup: getItemsFromGroup,
        getItemReference: getItemReference,
        resolveGroupReference: resolveGroupReference,
        resolveItemReference: resolveItemReference
    });
})();

※ item.group.key が同一のデータが一つのグループとしてまとめられます

Windows8 Metro(JS/C#)

Win8(JS Metro)の『分割･･･』テンプレートにアプリバーを追加して、新しいページを定義する

Win8(JS Metro)の『分割･･･』テンプレートから追加のページを定義する方法

『分割アプリケーション』/ Win8(Metro)テンプレートのテンプレートたる意味

Windows8(JavaScript Metro Style) 関連リンク

Windows8 で SkyDrive にアップロードするサンプル

Windows8 Metro(JS) で LiveSDK を使って signin してテキスト表示するだけのサンプルコードの実行

Windows8 Metro(JS) でのカメラの利用は簡単ですが、まだ製品版では無いせいか他の処理と同時に動かすと、問題もあるようです

Windows8 Metro(JS) で Three.js の 3D モデル表示(Canvas)を行う

Windows8 Metro(JS)の画面切り替えが解る、jQuery とのコラボ

Google ドキュメントを使ってソースコード配布と解説

余計なものを全て排除した Win8 Metro(JS) アプリの画面遷移

querySelectorAll(結果はNodeList) と forEach( Array のメソッド ) の動作確認コード

Win8 Metro(JS) のクラス定義用クラスでの記述仕様で、getter が存在します

Win8 Metro で画面の表示変更は、画面部分(?)オブジェクトの入れ替えを自分で行います

Win8 Metro(JS) : 印刷処理

Win8 Metro(JS) : WinJS.xhr の内容(XMLHttpRequest)