monacaとmbaasでwebコンテンツのスマホアプリ化を体験してみよう20160127ver

Copyright © NIFTY Corporation All Rights Reserved. 1

事前準備

Monaca

ニフティクラウド mobile backend

https://ja.monaca.io/

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

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

※ 利用登録

本日の資料

★ 【 GitHub 】 https://goo.gl/m39vLV



https://goo.gl/m39vLV


Copyright © NIFTY Corporation All Rights Reserved.

【ハンズオン】

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

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

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


本日、体験して頂く内容

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

ブログ

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

データストアに格納

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

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


手順

① Monaca の利用登録

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

③ mobile backend の利用登録

④ mobile backend のアプリを作る

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

⑥ 動作確認！


①Monaca の利用登録

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


①Monaca の利用登録




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

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

重要

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


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


本日、体験して頂く内容 ( 再確認 )

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

ブログ

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

データストアに格納

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

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



まずは単独で動く

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

スマホ対応済みブログ



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

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



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



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

★https://github.com/natsumo/Favorite_RSS_Reader/archive/master.zip

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



【GitHub】 https://goo.gl/m39vLV

「 Download Zip 」を右クリック

→URL をコピー

★https://github.com/natsumo/Favorite_RSS_Reader/archive/master.zip



「開く」をクリック

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



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



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

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




LocalStorage

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

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

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


次のステップ！


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

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


③mobile backend の利用登録



③mobile backend の利用登録


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



④mobile backend のアプリを作る



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

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



※ ログイン後に、この画面が出た方は…

「 + 新しいアプリ」をクリックすると

でてきます !



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

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

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

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



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

アプリ設定


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

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

ここにあります


④mobile backend のアプリを作る　 5- /5①

データストアを確認しておく

データストア


④mobile backend のアプリを作る　 5- /5②

データストアを確認しておく

今はまだありません！



完成イメージ

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


Monaca にJavaScript SDK を入手する

｢設定 →｣｢ JS/CSS コンポーネントの追加と削除… を選｣択




右上の検索欄に｢NCMB ｣と入力して検索ボタンを押す



｢追加｣を選択

インストール開始｢｣を選択

｢ components/ncmb/min.js ｣にチェックをつけて｢OK を選択｣

簡単！！

↓ そのまま



index.html を編集する

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



index.html を編集する

applicationKey とclientKey には

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

転記すること！

重要 mobile backend の管理画面から

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

コピーする


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

js/favorite-online.js を編集して機能を追加する

ここ

ここ

保存先クラスの定義

★ コピペボードは

https://goo.gl/m39vLVここに用意してあります！

↑ ここを変えれば別のクラス名で作成されます




⑤ お気に入り機能をオンライン化する 8/11js/favorite-online.js を編集して機能を追加する

値のセット .setと保存 .save

保存するオブジェクトの生成

add メソッド




削除対象オブジェクトの検索 .fetch と削除 .delete

remove メソッド




お気に入り数の取得

apply メソッド

画面の更新




apply メソッド

画面の更新

自身のお気に入り状況の取得


⑥ 動作確認！


⑥ 動作確認！

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

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


⑥ 動作確認！

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

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


⑥ 動作確認！

お気に入り状態が変更されることを確認してみよう任意の行の uuid をダブルクリック

編集モードになるので適当な文字列に書き換える※ 自分以外の人がお気に入りした状態


⑥ 動作確認！

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

Reload をタップ

UUID をダミーに変えた記事の★ の色が消えます


まとめ

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

学びました

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

monacaとmbaasでwebコンテンツのスマホアプリ化を体験してみよう20160127ver

Engineering