SQLの窓

2012年07月03日


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 が同一のデータが一つのグループとしてまとめられます


posted by lightbox at 2012-07-03 14:00 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり