サーバー構築不要!スマートフォンアプリ向けの新クラウド

トップ >ドキュメント >チュートリアル(JavaScript):MonacaでRSSリーダーを作成する(動画解説付き)

チュートリアル(JavaScript)

ドキュメント内検索

MonacaでRSSリーダーを作成する(動画解説付き)

概要

今回のチュートリアルでは、mBaaSお役立ちblogのRSSを取得し、閲覧できるアプリを作成します。
記事に対するお気に入り機能と、プッシュ通知機能がついています。
全8回で、主にお気に入り機能とプッシュ通知機能の実装に焦点を当てて解説していきます。

解説動画

RSSリーダーの作成については、以下の動画を参考に作業を進めてください。
(mobile backendのアカウント登録がまだの方は、こちらから無料アカウントの登録を行ってください。)

動画のプレイリストはこちら

インポート用テンプレート

テンプレートのURLは以下になります。

【第三回】RSSリーダー作成用テンプレート(インポート用テンプレート)
http://mb.cloud.nifty.com/zip/tutorial_rssreader_before.zip

動画の通りに作成しても動かない場合には、第7回までの内容を実装済みのこちらの【完成版】のプロジェクトもご参考ください。

RSSリーダー作成用テンプレート(完成版)
http://mb.cloud.nifty.com/zip/tutorial_rssreader_after.zip

参考情報

第1回 アプリ概要とmobile backendの登録
第2回 Monaca登録とmobile backend連携
第3回 テンプレートインポート
第4回 お気に入り登録機能の実装
    // お気に入り登録処理
    Favorite.prototype.add = function(item) {
        var self = this;

        // タップしたデータのURLを取得
        var url = item.data('link');

        // 保存するオブジェクトを生成
        var favorite = new this.FavoriteClass();
        favorite
            .set("uuid", self.uuid)
            .set("url", url)
            // 保存したい値をセットし、保存
            .save()
            .then(function(favorite){
                // 保存が成功した場合
                self.apply(item);
            })
            .catch(function(error){
                // 保存が失敗した場合
                self.apply(item);
            });
    };

第5回 お気に入り登録機能の反映(1)
    // 一つの記事に対してお気に入り状態を反映させる
    Favorite.prototype.apply = function(item) {        
        // 変数の定義
        /// 自分自身
        var self = this;
        /// URL
        var url = item.data('link');
        /// アイコン
        var icon = item.children('i');

        // お気に入り登録数を検索
        this.FavoriteClass
            .equalTo("url", url)
            .count()
            .fetchAll()
            .then(function(results){
                if (results.count > 0){
                    icon.text(results.count);
                } else {
                    icon.text("0");
                }
            })
            .catch(function(error){
                console.log(error.message);
                icon.text("0");
            });

第6回 お気に入り登録機能の反映(2)
        // 自分がお気に入り登録済みか調べる
        this.FavoriteClass
            .equalTo("uuid", self.uuid)
            .equalTo("url", url)
            .count()
            .fetchAll()
            .then(function (results){
                if (results.count > 0){
                    // 登録済みであれば★マークを黄色に
                    icon.addClass('fa-star');
                    icon.removeClass('fa-star-o');
                } else {
                    // 未登録の場合は★マークを黒に
                    icon.removeClass('fa-star');
                    icon.addClass('fa-star-o');
                }
            })
            .catch(function(error){
                console.log('own favorite check error: ' + error.message);
            });
    };

第7回 お気に入り削除機能を開発
    // お気に入り解除処理
    Favorite.prototype.remove = function(item) {
        var self = this;
        var url = item.data('link');

        // uuidとurlの両方が合致するオブジェクトを検索し、見つけたものを削除する
        this.FavoriteClass
            .equalTo("uuid", self.uuid)
            .equalTo("url", url)
            .fetch() // 今回はcountではなくfetchを利用
            .then(function(favorite){
                // データが見つかった場合
                favorite.delete()
                .then(function(result){
                    // 削除処理が成功した場合
                    self.apply(item);
                })
                .catch(function(error){
                    // 削除処理が失敗したばあい
                    self.apply(item);
                });
            })
            .catch(function(error){
                // エラーがあった場合
                self.apply(item);
            });
    };

第8回 プッシュ通知の導入
    <script>
            document.addEventListener("deviceready", function()
            {
                // プッシュ通知受信時のコールバックを登録します
                window.NCMB.monaca.setHandler
                (
                    function(jsonData){
                        // 送信時に指定したJSONが引数として渡されます
                        alert("callback :::" + JSON.stringify(jsonData));
                    }
                );


                // デバイストークンを取得してinstallation登録が行われます
                // ※ aplication_key,client_keyはニフティクラウドmobile backendから発行されたkeyに置き換えてください
                // ※ sender_idは【GCMとの連携に必要な準備】で作成したProjectのProject Numberを入力してください
                window.NCMB.monaca.setDeviceToken(
                     " #####application_key#####",
                     " #####client_key#####",
                     " #####sender_id#####"
                );

                // 開封通知登録の設定
                // trueを設定すると、開封通知を行う
                window.NCMB.monaca.setReceiptStatus(true);

                alert("DeviceToken is registed");
            },false);

            function getInstallationId() {
                // 登録されたinstallationのobjectIdを取得します。
                window.NCMB.monaca.getInstallationId(
                    function(id) {
                        alert("installationID is: " + id);
                    }
                );
            }
    </script>

完成版テンプレートについて

動画の通りに作成しても動かない場合には、こちらの【完成版】のプロジェクトもご参考ください。
【第三回】RSSリーダー作成用テンプレート(完成版):http://mb.cloud.nifty.com/zip/tutorial_rssreader_after.zip

お探しの内容が見つからなかった場合はユーザーコミュニティ もご活用ください。(回答保証はいたしかねます)
なお、 Expertプラン以上のお客様はテクニカルサポートにてご質問を承らせて頂きます。

推奨画面サイズ1024×768px以上

ページの先頭へ