monacaとニフティクラウドmobile...

Copyright © NIFTY Corporation All Rights Reserved. 1

事前準備

Monaca

ニフティクラウド mobile backend

https://ja.monaca.io/

http://mb.cloud.nifty.com/

※ 利用登録／ Monaca デバッガーのインストール

※ 利用登録

Copyright © NIFTY Corporation All Rights Reserved.

【ハンズオン】

Monaca とニフティクラウド mobile backend

でWeb コンテンツのスマホアプリ化を

体験してみようニフティ株式会社


本日、体験して頂く内容

ブログコンテンツのスマホアプリ化スマホ対応済み

ブログ

アプリでのみ扱うお気に入り情報を

データストアに格納

ブログの RSS からアプリの記事リストを構築。

記事本体は WebView でブログ本体へ遷移。


手順

① Monaca の利用登録

② Monaca で RSS リーダーを体験する

③ mobile backend の利用登録

④ mobile backend のアプリを作る

⑤ お気に入り機能をオンライン化する

⑥ 動作確認！


①Monaca の利用登録

※ 登録済みの方は不要です


①Monaca の利用登録

https://ja.monaca.io/



Monaca デバッガーのインストール

今回作成する RSS リーダーは動作確認にMonaca デバッガーが必須です！

重要

https://ja.monaca.io/debugger.html


②Monaca で RSS リーダーを体験する


②Monaca で RSS リーダーを体験する 1/9

スマホ対応済みブログ

まずは単独で動く

RSS リーダーを体験します！



Monaca の新しいプロジェクトを作ります

「開発をスタート」をクリック



「 Monaca.io で開発」を選択してください



「 Import Project 」を選択してください



「インポート」をクリック

https://github.com/ndyuya/fav-rss-reader-v2/archive/master.zip

Web コンテンツのスマホアプリ化



「開く」をクリック

ダッシュボードの左側に作成したプロジェクトが追加されています



プロジェクトの開発環境が開きます



何も変更せずに Monaca デバッガーで試してみましょう

ニフティクラウド mobile backend が提供しているブログコンテンツの一覧が表示されます。星をタップするとお気に入りの ON/OFF ができます。




LocalStorage

お気に入りの情報はスマホのローカルストレージに

保存されています。自分しか見れません。

js/favorite-offline.js にお気に入りの処理が記述されています


次のステップ！


お気に入りの情報を mobile backend に保存して、ある記事をお気に入りしている人が何人いるかを表示。

お気に入りの情報をクラウドに保存します。


③mobile backend の利用登録



③mobile backend の利用登録

http://mb.cloud.nifty.com/

@nifty 会員登録とmobile backend の利用登録を行います。


④mobile backend のアプリを作る


④mobile backend のアプリを作る　 1/4

利用登録が終わるとアプリの新規作成画面が表示されます。アプリ名を入力して新規作成してください。

「 IoTBlogApp 」と入力してください



アプリが作成されました。

２つのキーは後で使います

OK をクリックすると管理画面が表示されます

※ 後でキーを確認する方法は　次のページに掲載しています。



後でキーを確認するには…【その１】

アプリ設定



後でキーを確認するには…【その２】

ここにあります


⑤ お気に入り機能をオンライン化する


⑤ お気に入り機能をオンライン化する 1/3

完成イメージ

・気に入った記事に★を付けられる・何人が★を付けているかが見える



index.html を編集して mobile backend と接続する

14 行目の「 js/favorite-offline.js 」を「 js/favorite-online.js 」に変更する



index.html を編集して mobile backend と接続する

applicationKey とclientKey には

mobile backend の管理画面で取得したものを

転記すること！

重要

mobile backend の管理画面から

アプリケーションキーとクライアントキーを

コピーする


⑥ 動作確認！


⑥ 動作確認！

Monaca デバッガーで試してみましょう

☆ をタップしてみましょう


⑥ 動作確認！

mobile backend 上のデータを見てみましょう

☆ を付けるとデータが増えます


⑥ 動作確認！

お気に入り数が変更されることを確認してみよう

「新しいレコード」をクリック


⑥ 動作確認！


uuid のフィールドをダブルクリックして「 dummy_uuid 」と入力する


⑥ 動作確認！


url のフィールドをダブルクリックして他のレコードの url をコピーする


⑥ 動作確認！


Reload をタップ

ダミーデータを複製した記事のお気に入り数が２になる


コードの解説


コードの解説

favorite-offline.js とfavorite-online.js を比べてみてください

２つの js ファイルはメソッド定義まで全く同じように作ってあります。メソッドの中身が違うだけです。オンライン版とオフライン版を

比べてみてください！


コードの解説　（ favorite-online.js ）

favorite-online.js を見ながら解説します

ncmb-latest.min.js はmobile backend の SDK です。

index.html で読み込んでいます



NCMB.initializeSDK の初期化

SDK の初期化を行うためのメソッドです。SDK の各種機能を利用する前に必ず呼び出す必要があります。

引数には mobile backend の管理画面から取得したアプリケーションキーとクライアントキーを設定してください。



お気に入りの追加処理 (save)

① NCMB.Object.extend(“ クラス名” ) で　保存先のクラスを表すオブジェクトを生成② ①で作ったオブジェクトのインスタンスを作成③ set メソッドで保存したい値をインスタンスに設定④ save メソッドでサーバ側へ保存する



お気に入りの検索処理 (count)

① NCMB.Object.extend(“ クラス名” ) で　検索先のクラスを表すオブジェクトを生成② ①で作ったオブジェクトを引数に渡して　 NCMB.Query のインスタンスを作成③ equalTo メソッドで検索条件を設定④ count メソッドで検索条件に合致する　データの件数を取得する


まとめ

なぜWebサイトからスマホアプリなのかについて

学びました

Web コンテンツのスマホアプリ化を体験しました


その他のハンズオンのご紹介

mBaaS を活用して業務システムをスマホアプリ化！～mBaaS と自社システムの

　連携の仕方教えます～

Monaca にプッシュ通知を組み込もう

募集中

7月実施予定


こんなことが出来るようになるかも！？

スマホ対応済みブログ記事の更新をトリガーに

REST API でプッシュ登録

Monaca 製のアプリへ更新を知らせるプッシュ通知

APNs

GCM

monacaとニフティクラウドmobile...

Software