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

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

チュートリアル（Monaca）

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

概要

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

解説動画

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

第3回でインストールするテンプレートのURLは以下になります。

-RSSリーダー作成用テンプレート

また、途中で詰まってしまった場合には、こちらの完成版テンプレートもご参考ください。

-RSSリーダー作成用テンプレート

以下、各回参考情報

参考情報

第1回　アプリ概要とmobile backendの登録

-mobile backend公式HP
-mobile backend会員登録ページ

第2回　Monaca登録とmobile backend連携

-Monaca公式HP

第3回　テンプレートインポート

-RSSリーダー作成用テンプレート

第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回　お気に入り登録機能の反映（１）
    // 一つの記事に対してお気に入り状態を反映させる
    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回　お気に入り登録機能の反映（２）
        // 自分がお気に入り登録済みか調べる
        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>

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

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

ページの先頭へ