ゼミの彷徨: MonacaでRSSリーダ

今回MonacaでRSSリーダアプリを作成します。

HTML5モバイルアプリ開発講座　RSSリーダー編

このアプリではAjaxを用いて外部のサーバから情報を取得する技術を学びます。
まず、下記サイトからRSSリーダのプロジェクトZIPファイルをダウンロードします。

http://s3.asial.co.jp/~monaca/rss.zip

ダウンロードしたプロジェクトをMonacaでインポートしようとすると

Internal Server Error (500)
Neither project_info.json nor config.xml was found. Maybe an old project?

というエラーメッセージが出ます。どうも古いようです。しかたがありません。チュートリアルを見ながらダウンロードしたソースコードを入力（コピペ）するしかありません。

その前にAjaxを学ぶサンプルが紹介されています。スライドのP7～16までです。スライドにしたがってやってみましょう。IDEで「新規プロジェクト」を選んでテンプレートから「Onsen UI V1 Minimum」を選びます。これが「最小限のテンプレート」です。必ずV1を選んでください。あとはスライドにしたがって作業をしていきます。

    <script>
    $.ajax({
        url: 'http://s3.asial.co.jp/~monaca/rss/blog.xml',
        dataType: 'xml',
    })
    .done(function(data){
        $(data).find('item').each(function(){
            var title = $(this).find('title').text();
            alert(title);
        });
    })
    .fail(function(err){
        alert(JSON.stringify(err));
    })
    </script>

このサンプルプログラムは以下のサイトから情報を取得しています。

http://s3.asial.co.jp/~monaca/rss/blog.xml

実は、これがRSSフィードです。ソースを見てください。XMLで情報が記述されれていることがわかるでしょう。

次に、RSSリーダアプリを作っていきます。スライドのP17から始まります。P22でindex.htmlをアップロードするように書いてありますが、どうも、index.htmlは上書きできないようです。ですから、コピペでMonacaのindex.htmlの内容を書き替えてください。

ところで、このチュートリアル、困ったことにサンプルコード集が見当たりません。ですから、スライドP23の「RSSリーダ STEP①」を実装できません。そこで、多分そうだろうと見当をつけてコーディングしてみました。それがこれです。

        // アプリ起動時の処理
        $(function(){
            $.ajax({
                url: 'http://s3.asial.co.jp/~monaca/rss/blog.xml',
                dataType: 'xml',
            })
            .done(function(data){
                var html = '';
                $(data).find('item').each(function(){
                    var pubDate = $(this).find('pubDate').text();
                    var title = $(this).find('title').text();
                    var link = $(this).find('link').text();
                    var description = $(this).find('description').text();
                    html += createArticleNode(pubDate, link, title, description);
                })
                $('#articleList').html(html);
            })
            .fail(function(){
                alert(JSON.stringify(err));
            })
        });

これは、アプリ起動時の処理です。Ajaxを使ってRSSフィード'http://s3.asial.co.jp/~monaca/rss/blog.xml'を読み込んで更新日 pubDate、タイトル title、記事URL link、そして本文 descriptionを取り出してcreateArticleNode関数を使ってhtmlタグ（li要素）を作っています。これをリストの数だけ作ってくっつけてそれをセレクタ'#articleList'で示されるulタグ内に挿入しています。
このプログラムではXMLデータの処理の仕方やHTMLの生成方法など参考になるTipsがたくさん出てきているのでしっかり身につけてください。
次はcreateArticleNode関数の中身です。

    // １件分の記事を表示するli要素を生成
    function createArticleNode(pubDate, link, title, description) {
        var date = new Date(pubDate);
        var li = 
            '<li class="btn">' +
                '<a href="' + link + '">' +
                    '<time>' +
                        '<span class="date">' + date.getFullYear() + '</span>' +
                        '<span class="month">' + (date.getMonth() + 1) + '</span>' +
                        '<span class="year">' + date.getDate() + '</span>' +
                    '</time>' +
                    '<div>' +
                        '<h2>' + title + '</h2>' +
                        '<p>' + description + '</p>' +
                    '</div>' +
                '</a>' +
            '</li>';
        return li;
    }

RSS提供サイト一覧

これらをajaxに渡すリクエストの送信先(url)に設定してどのように変わるかを確かめてください。

はてなブックマークはRSS1.0でpubDateの代わりにdc:dateになっている。ところが、XMLのタグ名がdc:dateだとjQueryのfindメソッドでは取ってこれないようだ。そこで、その場合はDOMを使って以下のようにしてdc:date要素を取ってくる。

$(this).children().each(function(){
    if($(this)[0].tagName == "dc:date") {
        pubDate = $(this).text();
    }
})

ゼミの彷徨

2016年11月8日火曜日

MonacaでRSSリーダ

0 件のコメント:

コメントを投稿