【javascript sdk ver.2】...

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デバッガーのインストール

今回作成するアプリは動作確認に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をクリックすると管理画面が表示されます

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



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

アプリ設定



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

ここにあります



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

データストア



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

今はまだありません！


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



完成イメージ

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


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の管理画面から

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

コピーする



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

ここ

ここ

保存先クラスの定義

★コピペボードは

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

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






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

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

addメソッド




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

removeメソッド




お気に入り数の取得

applyメソッド

画面の更新




applyメソッド

画面の更新

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


⑥動作確認！


⑥動作確認！

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

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


⑥動作確認！

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

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


⑥動作確認！

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

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


⑥動作確認！

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

Reloadをタップ

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


まとめ

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

学びました

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

【javascript sdk ver.2】...

Engineering