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
Jan 15, 2017
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
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デバッガーのインストール
今回作成するアプリは動作確認にMonacaデバッガーが必須です!
重要
https://ja.monaca.io/debugger.html
Copyright © NIFTY Corporation All Rights Reserved.
②Monacaで RSSリーダーを体験する
Copyright © NIFTY Corporation All Rights Reserved. 9
本日、体験して頂く内容 (再確認 )
ブログコンテンツのスマホアプリ化スマホ対応済み
ブログ
アプリでのみ扱うお気に入り情報をデータストアに格納
ブログの RSSからアプリの記事リストを構築。記事本体はWebViewでブログ本体へ遷移。
Copyright © NIFTY Corporation All Rights Reserved. 10
②Monacaで RSSリーダーを体験する
まずは単独で動く
RSSリーダーを体験します!
スマホ対応済みブログ
Copyright © NIFTY Corporation All Rights Reserved. 11
②Monacaで RSSリーダーを体験する
Monacaの新しいプロジェクトを作ります
「新規プロジェクト」をクリック
Copyright © NIFTY Corporation All Rights Reserved. 12
②Monacaで RSSリーダーを体験する
「 Import Project」を選択してください
Copyright © NIFTY Corporation All Rights Reserved. 13
②Monacaで RSSリーダーを体験する
「インポート」をクリック
★https://github.com/natsumo/Favorite_RSS_Reader/archive/master.zip
Webコンテンツのスマホアプリ化
Copyright © NIFTY Corporation All Rights Reserved. 14
②Monacaで RSSリーダーを体験する
【GitHub】 https://goo.gl/m39vLV
「Download Zip」を右クリック
→URLをコピー
★https://github.com/natsumo/Favorite_RSS_Reader/archive/master.zip
Copyright © NIFTY Corporation All Rights Reserved. 15
②Monacaで RSSリーダーを体験する
「開く」をクリック
ダッシュボードの左側に作成したプロジェクトが追加されています
Copyright © NIFTY Corporation All Rights Reserved. 16
②Monacaで RSSリーダーを体験する
プロジェクトの開発環境が開きます
Copyright © NIFTY Corporation All Rights Reserved. 17
②Monacaで RSSリーダーを体験する
何も変更せずにMonacaデバッガーで試してみましょう
ニフティクラウドmobile backendが提供しているブログコンテンツの一覧が表示されます。星をタップするとお気に入りの ON/OFFができます。
Copyright © NIFTY Corporation All Rights Reserved. 18
②Monacaで RSSリーダーを体験する
スマホ対応済みブログ
LocalStorage
お気に入りの情報はスマホのローカルストレージに
保存されています。自分しか見れません。
js/favorite-offline.js にお気に入りの処理が記述されています
Copyright © NIFTY Corporation All Rights Reserved. 19
次のステップ!
スマホ対応済みブログ
お気に入りの情報をmobile backendに保存して、ある記事をお気に入りしている人が何人いるかを表示。
お気に入りの情報をクラウドに保存します。
Copyright © NIFTY Corporation All Rights Reserved.
③mobile backendの利用登録
※登録済みの方は不要です
Copyright © NIFTY Corporation All Rights Reserved. 21
③mobile backendの利用登録
http://mb.cloud.nifty.com/
@nifty会員登録とmobile backendの利用登録を行います。
※登録済みの方は不要です
Copyright © NIFTY Corporation All Rights Reserved.
④mobile backendのアプリを作る
Copyright © NIFTY Corporation All Rights Reserved. 23
④mobile backendのアプリを作る
利用登録が終わるとアプリの新規作成画面が表示されます。アプリ名を入力して新規作成してください。
「 IoTBlogApp」と入力してください
Copyright © NIFTY Corporation All Rights Reserved. 24
④mobile backendのアプリを作る
※ログイン後に、この画面が出た方は…
「+新しいアプリ」をクリックするとでてきます !
Copyright © NIFTY Corporation All Rights Reserved. 25
④mobile backendのアプリを作る
アプリが作成されました。
2つのキーは後で使います
OKをクリックすると管理画面が表示されます
※後でキーを確認する方法は 次のページに掲載しています。
Copyright © NIFTY Corporation All Rights Reserved. 26
④mobile backendのアプリを作る
後でキーを確認するには…【その1】
アプリ設定
Copyright © NIFTY Corporation All Rights Reserved. 27
④mobile backendのアプリを作る
後でキーを確認するには…【その2】
ここにあります
Copyright © NIFTY Corporation All Rights Reserved. 28
④mobile backendのアプリを作る
データストアを確認しておく
データストア
Copyright © NIFTY Corporation All Rights Reserved. 29
④mobile backendのアプリを作る
データストアを確認しておく
今はまだありません!
Copyright © NIFTY Corporation All Rights Reserved.
⑤お気に入り機能をオンライン化する
Copyright © NIFTY Corporation All Rights Reserved. 31
⑤お気に入り機能をオンライン化する
完成イメージ
・気に入った記事に★を付けられる・何人が★を付けているかが見える
Copyright © NIFTY Corporation All Rights Reserved.
MonacaにJavaScript SDKを入手する
「設定 →」 「 JS/CSSコンポーネントの追加と削除… を選」択
⑤お気に入り機能をオンライン化する
Copyright © NIFTY Corporation All Rights Reserved. 33
⑤お気に入り機能をオンライン化する
右上の検索欄に「NCMB 」と入力して検索ボタンを押す
Copyright © NIFTY Corporation All Rights Reserved. 34
⑤お気に入り機能をオンライン化する
「追加」を選択インストール開始「 」を選択「 components/ncmb/min.js 」にチェックをつけて「OK を選択」
簡単!!
↓そのまま
Copyright © NIFTY Corporation All Rights Reserved. 35
⑤お気に入り機能をオンライン化する
index.htmlを編集する
12行目の「 js/favorite-offline.js」を「 js/favorite-online.js」に変更する
Copyright © NIFTY Corporation All Rights Reserved. 36
⑤お気に入り機能をオンライン化する
index.htmlを編集する
applicationKeyとclientKeyには
mobile backendの管理画面で取得したものを
転記すること!
重要 mobile backendの管理画面から
アプリケーションキーとクライアントキーを
コピーする
Copyright © NIFTY Corporation All Rights Reserved. 37
⑤お気に入り機能をオンライン化する
js/favorite-online.jsを編集して機能を追加する
ここ
ここ
保存先クラスの定義
★コピペボードは
https://goo.gl/m39vLVここに用意してあります!
↑ここを変えれば別のクラス名で作成されます
Copyright © NIFTY Corporation All Rights Reserved. 38
⑤お気に入り機能をオンライン化する
js/favorite-online.jsを編集して機能を追加する
値のセット .setと保存 .save
保存するオブジェクトの生成
addメソッド
Copyright © NIFTY Corporation All Rights Reserved. 39
⑤お気に入り機能をオンライン化する
js/favorite-online.jsを編集して機能を追加する
削除対象オブジェクトの検索 .fetchと削除 .delete
removeメソッド
Copyright © NIFTY Corporation All Rights Reserved. 40
⑤お気に入り機能をオンライン化する
js/favorite-online.jsを編集して機能を追加する
お気に入り数の取得
applyメソッド
画面の更新
Copyright © NIFTY Corporation All Rights Reserved. 41
⑤お気に入り機能をオンライン化する
js/favorite-online.jsを編集して機能を追加する
applyメソッド
画面の更新
自身のお気に入り状況の取得
Copyright © NIFTY Corporation All Rights Reserved.
⑥動作確認!
Copyright © NIFTY Corporation All Rights Reserved. 43
⑥動作確認!
Monacaデバッガーで試してみましょう
☆をタップしてみましょう
Copyright © NIFTY Corporation All Rights Reserved. 44
⑥動作確認!
mobile backend上のデータを見てみましょう
☆を付けるとデータが増えます
Copyright © NIFTY Corporation All Rights Reserved. 45
⑥動作確認!
お気に入り状態が変更されることを確認してみよう任意の行の uuidをダブルクリック
編集モードになるので 適当な文字列に書き換える※自分以外の人がお気に入りした状態
Copyright © NIFTY Corporation All Rights Reserved. 46
⑥動作確認!
お気に入り状態が変更されることを確認してみよう
Reloadをタップ
UUIDをダミーに変えた記事の★の色が消えます
Copyright © NIFTY Corporation All Rights Reserved. 47
まとめ
なぜ Web サイトからスマホアプリなのかについて
学びました
Webコンテンツのスマホアプリ化を体験しました
Copyright © NIFTY Corporation All Rights Reserved. 48