Post on 08-Aug-2015
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 コンテンツのスマホアプリ化を
体験してみようニフティ株式会社
Copyright © NIFTY Corporation All Rights Reserved. 3
本日、体験して頂く内容
ブログコンテンツのスマホアプリ化スマホ対応済み
ブログ
アプリでのみ扱うお気に入り情報を
データストアに格納
ブログの RSS からアプリの記事リストを構築。
記事本体は WebView でブログ本体へ遷移。
Copyright © NIFTY Corporation All Rights Reserved. 4
手順
① Monaca の利用登録
② Monaca で RSS リーダーを体験する
③ mobile backend の利用登録
④ mobile backend のアプリを作る
⑤ お気に入り機能をオンライン化する
⑥ 動作確認!
Copyright © NIFTY Corporation All Rights Reserved.
①Monaca の利用登録
※ 登録済みの方は不要です
Copyright © NIFTY Corporation All Rights Reserved. 6
①Monaca の利用登録
https://ja.monaca.io/
※ 登録済みの方は不要です
Copyright © NIFTY Corporation All Rights Reserved. 7
Monaca デバッガーのインストール
今回作成する RSS リーダーは動作確認にMonaca デバッガーが必須です!
重要
https://ja.monaca.io/debugger.html
Copyright © NIFTY Corporation All Rights Reserved.
②Monaca で RSS リーダーを体験する
Copyright © NIFTY Corporation All Rights Reserved. 9
②Monaca で RSS リーダーを体験する 1/9
スマホ対応済みブログ
まずは単独で動く
RSS リーダーを体験します!
Copyright © NIFTY Corporation All Rights Reserved. 10
②Monaca で RSS リーダーを体験する 2/9
Monaca の新しいプロジェクトを作ります
「開発をスタート」をクリック
Copyright © NIFTY Corporation All Rights Reserved. 11
②Monaca で RSS リーダーを体験する 3/9
「 Monaca.io で開発」を選択してください
Copyright © NIFTY Corporation All Rights Reserved. 12
②Monaca で RSS リーダーを体験する 4/9
「 Import Project 」を選択してください
Copyright © NIFTY Corporation All Rights Reserved. 13
②Monaca で RSS リーダーを体験する 5/9
「インポート」をクリック
https://github.com/ndyuya/fav-rss-reader-v2/archive/master.zip
Web コンテンツのスマホアプリ化
Copyright © NIFTY Corporation All Rights Reserved. 14
②Monaca で RSS リーダーを体験する 6/9
「開く」をクリック
ダッシュボードの左側に作成したプロジェクトが追加されています
Copyright © NIFTY Corporation All Rights Reserved. 15
②Monaca で RSS リーダーを体験する 7/9
プロジェクトの開発環境が開きます
Copyright © NIFTY Corporation All Rights Reserved. 16
②Monaca で RSS リーダーを体験する 8/9
何も変更せずに Monaca デバッガーで試してみましょう
ニフティクラウド mobile backend が提供しているブログコンテンツの一覧が表示されます。星をタップするとお気に入りの ON/OFF ができます。
Copyright © NIFTY Corporation All Rights Reserved. 17
②Monaca で RSS リーダーを体験する 9/9
スマホ対応済みブログ
LocalStorage
お気に入りの情報はスマホのローカルストレージに
保存されています。自分しか見れません。
js/favorite-offline.js にお気に入りの処理が記述されています
Copyright © NIFTY Corporation All Rights Reserved. 18
次のステップ!
スマホ対応済みブログ
お気に入りの情報を mobile backend に保存して、ある記事をお気に入りしている人が何人いるかを表示。
お気に入りの情報をクラウドに保存します。
Copyright © NIFTY Corporation All Rights Reserved.
③mobile backend の利用登録
※ 登録済みの方は不要です
Copyright © NIFTY Corporation All Rights Reserved. 20
③mobile backend の利用登録
http://mb.cloud.nifty.com/
@nifty 会員登録とmobile backend の利用登録を行います。
Copyright © NIFTY Corporation All Rights Reserved.
④mobile backend のアプリを作る
Copyright © NIFTY Corporation All Rights Reserved. 22
④mobile backend のアプリを作る 1/4
利用登録が終わるとアプリの新規作成画面が表示されます。アプリ名を入力して新規作成してください。
「 IoTBlogApp 」と入力してください
Copyright © NIFTY Corporation All Rights Reserved. 23
④mobile backend のアプリを作る 2/4
アプリが作成されました。
2つのキーは後で使います
OK をクリックすると管理画面が表示されます
※ 後でキーを確認する方法は 次のページに掲載しています。
Copyright © NIFTY Corporation All Rights Reserved. 24
④mobile backend のアプリを作る 3/4
後でキーを確認するには…【その1】
アプリ設定
Copyright © NIFTY Corporation All Rights Reserved. 25
④mobile backend のアプリを作る 4/4
後でキーを確認するには…【その2】
ここにあります
Copyright © NIFTY Corporation All Rights Reserved.
⑤ お気に入り機能をオンライン化する
Copyright © NIFTY Corporation All Rights Reserved. 27
⑤ お気に入り機能をオンライン化する 1/3
完成イメージ
・気に入った記事に★を付けられる・何人が★を付けているかが見える
Copyright © NIFTY Corporation All Rights Reserved. 28
⑤ お気に入り機能をオンライン化する 2/3
index.html を編集して mobile backend と接続する
14 行目の「 js/favorite-offline.js 」を「 js/favorite-online.js 」に変更する
Copyright © NIFTY Corporation All Rights Reserved. 29
⑤ お気に入り機能をオンライン化する 2/3
index.html を編集して mobile backend と接続する
applicationKey とclientKey には
mobile backend の管理画面で取得したものを
転記すること!
重要
mobile backend の管理画面から
アプリケーションキーとクライアントキーを
コピーする
Copyright © NIFTY Corporation All Rights Reserved.
⑥ 動作確認!
Copyright © NIFTY Corporation All Rights Reserved. 31
⑥ 動作確認!
Monaca デバッガーで試してみましょう
☆ をタップしてみましょう
Copyright © NIFTY Corporation All Rights Reserved. 32
⑥ 動作確認!
mobile backend 上のデータを見てみましょう
☆ を付けるとデータが増えます
Copyright © NIFTY Corporation All Rights Reserved. 33
⑥ 動作確認!
お気に入り数が変更されることを確認してみよう
「新しいレコード」をクリック
Copyright © NIFTY Corporation All Rights Reserved. 34
⑥ 動作確認!
お気に入り数が変更されることを確認してみよう
uuid のフィールドをダブルクリックして「 dummy_uuid 」と入力する
Copyright © NIFTY Corporation All Rights Reserved. 35
⑥ 動作確認!
お気に入り数が変更されることを確認してみよう
url のフィールドをダブルクリックして他のレコードの url をコピーする
Copyright © NIFTY Corporation All Rights Reserved. 36
⑥ 動作確認!
お気に入り数が変更されることを確認してみよう
Reload をタップ
ダミーデータを複製した記事のお気に入り数が2になる
Copyright © NIFTY Corporation All Rights Reserved.
コードの解説
Copyright © NIFTY Corporation All Rights Reserved. 38
コードの解説
favorite-offline.js とfavorite-online.js を比べてみてください
2つの js ファイルはメソッド定義まで全く同じように作ってあります。メソッドの中身が違うだけです。オンライン版とオフライン版を
比べてみてください!
Copyright © NIFTY Corporation All Rights Reserved. 39
コードの解説 ( favorite-online.js )
favorite-online.js を見ながら解説します
ncmb-latest.min.js はmobile backend の SDK です。
index.html で読み込んでいます
Copyright © NIFTY Corporation All Rights Reserved. 40
コードの解説 ( favorite-online.js )
NCMB.initializeSDK の初期化
SDK の初期化を行うためのメソッドです。SDK の各種機能を利用する前に必ず呼び出す必要があります。
引数には mobile backend の管理画面から取得したアプリケーションキーとクライアントキーを設定してください。
Copyright © NIFTY Corporation All Rights Reserved. 41
コードの解説 ( favorite-online.js )
お気に入りの追加処理 (save)
① NCMB.Object.extend(“ クラス名” ) で 保存先のクラスを表すオブジェクトを生成② ①で作ったオブジェクトのインスタンスを作成③ set メソッドで保存したい値をインスタンスに設定④ save メソッドでサーバ側へ保存する
Copyright © NIFTY Corporation All Rights Reserved. 42
コードの解説 ( favorite-online.js )
お気に入りの検索処理 (count)
① NCMB.Object.extend(“ クラス名” ) で 検索先のクラスを表すオブジェクトを生成② ①で作ったオブジェクトを引数に渡して NCMB.Query のインスタンスを作成③ equalTo メソッドで検索条件を設定④ count メソッドで検索条件に合致する データの件数を取得する
Copyright © NIFTY Corporation All Rights Reserved. 43
まとめ
なぜWebサイトからスマホアプリなのかについて
学びました
Web コンテンツのスマホアプリ化を体験しました
Copyright © NIFTY Corporation All Rights Reserved. 44
その他のハンズオンのご紹介
mBaaS を活用して業務システムをスマホアプリ化! ~mBaaS と自社システムの
連携の仕方教えます~
Monaca にプッシュ通知を組み込もう
募集中
7月実施予定
Copyright © NIFTY Corporation All Rights Reserved. 45
こんなことが出来るようになるかも!?
スマホ対応済みブログ記事の更新をトリガーに
REST API でプッシュ登録
Monaca 製のアプリへ更新を知らせるプッシュ通知
APNs
GCM
Copyright © NIFTY Corporation All Rights Reserved. 46