集中講座1 Monacaとmbaasでwebコンテンツをスマホアプリ化しよう

Copyright © NIFTY Corporation All Rights Reserved.

【集中講座①】

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

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

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

Copyright © NIFTY Corporation All Rights Reserved. 2

今日のゴール

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

REST API でプッシュ登録

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

APNs

GCM


この時間帯に体験して頂く内容

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

ブログ

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

データストアに格納

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

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


手順

① C4SA の利用登録

② C4SA で WordPress 環境を作る

③ Monaca の利用登録

④ Monaca で RSS リーダーを作る

⑤ mobile backend の利用登録

⑥ mobile backend のアプリを作る

⑦ お気に入り機能を追加する

⑧ 動作確認！


ハンズオンに入る前に…

完成品が　　にあります

https://github.com/ndyuya/fav-rss-reader

作業中に分からなくなったときは参考にしてください


①C4SA の利用登録

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


①C4SA の利用登録　 [1/6]

http://c4sa.nifty.com/ここをクリック

C4SA で使う ID でログインしてから、利用登録手続きを行います。



@nifty ID を選択

@nifty ID 以外でも OK です

利用する ID は選べます。



事前にご登録いただいた

@nifty ID でログイン



受信可能なメールアドレスを入力して「確認」

個人情報の取扱いについて確認後、同意して送信



メールが届くのでURL を開く

利用規約に同意して利用開始！



C4SA が使えるようになりました。


②C4SA で WordPress 環境を作る


②C4SA で WordPress 環境を作る　 [1/15]

ここをクリック




15 日間無料で使えます！試用期間を過ぎると…

決済情報【無】 → 期限切れのキャンバスは非公開になります決済情報【有】 → 本サービス（有償）に切り替わります　　

重要



WordPress を選択する






キャンバスを開く



この URL をクリック



サイトのタイトル任意の文字列

ユーザー名任意の文字列

パスワード任意の文字列

メールアドレス受信可能なメールアドレス

プライバシーチェックを外す（任意）

必要事項を入力してWordPress をインストールしてください。



ログイン

先ほど入力したアカウントでログイン

WordPress の管理画面の URL → http:// 【キャンバスに設定されているドメイン】 /wp-login.php



WordPress 環境が構築できました！



次に、スマホ最適化を行います。

プラグインの新規追加を選択



「 WPTouch 」を検索してください



「 WPtouch Mobile Plugin 」をいますぐインストールする

OK



プラグインを有効化する



WPtouch Mobile Plugin が有効になりました！



スマホ最適化されました！

※PC ブラウザの場合

※ スマホブラウザの場合


③Monaca の利用登録


③Monaca の利用登録 1/3

サインアップhttps://ja.monaca.io/



必要事項を記入して登録してください



Monaca が使えるようになりました。※ 登録メールアドレス宛に確認メールが　届いているので本登録を行ってください


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

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

重要

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


④Monaca で RSS リーダーを作る


④Monaca で RSS リーダーを作る 1/12

まずは右側半分を作ります！

スマホ対応済みブログ



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

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



「 Monaca.io で開発」をクリック



「 RSS リーダー」を選択してください



「プロジェクトを作成する」をクリック

プロジェクト名と説明はお好きな内容を設定してください。



「開く」をクリック

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



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



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

BBC のニュースが表示されます



データソースとなる RSS の設定を変更します

C4SA 上に作った WordPress の RSS を使います。ブログの右下の「投稿の RSS 」をクリックして開いた URL を使います。

「投稿の RSS 」をクリック



index.html の 13 行目にあるfeedUrl の値を変更します

http://【WordPress のブログ URL 】 /?feed=rss2変更


④Monaca で RSS リーダーを作る 11/12保存する



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

WordPress で作成したブログの記事が表示されます。


次のステップ！

お気に入り機能を作ります！

スマホ対応済みブログ次に

左側半分を作ります！


⑤mobile backend の利用登録


⑤mobile backend の利用登録　 1/6

http://mb.cloud.nifty.com/ 無料登録をクリック

まず、 @nifty 会員登録を行います。

※ 右クリックして新しいタブで開くと便利です



@nifty 会員の登録をクリック



必要事項を入力して会員登録してください



http://mb.cloud.nifty.com/ ここをクリック

次に、ニフティクラウド mobile backend の利用登録を行います。



ご登録いただいた@nifty ID で

ログイン



利用規約に同意して

利用開始！


⑥mobile backend のアプリを作る


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

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

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



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

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

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

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



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

アプリ設定



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

ここにあります


⑦お気に入り機能を追加する


⑦お気に入り機能を追加する 1/17

完成イメージ

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



まず、★を表示できるようにします



★の表示空間確保のために style.css を変更します

追記

変更



★を表示する空間が確保されました。

ここに★を追加します



① 以下のページからfavorite.css を取得してください。

② CSS ディレクトリを右クリックしてアップロードを選択

③ 取得した favorite.css をアップロードしてください

★のスタイル調整のために favorite.css を追加します

https://goo.gl/SzM2Oi

こうなればOK



★の表示に必要な CSS を読み込むように index.html へ追記します

<link rel="stylesheet" href="css/favorite.css"><link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

追記



RSS読込時に★を表示するためfeed-reader.js を変更します

<i class="star fa fa-star-o fa-2x"></i>

追記



☆が表示されるようになりました。

☆をタップした時にお気に入りが

追加されるように処理を追加します



http://mb.cloud.nifty.com/doc/current/introduction/sdkdownload_javascript.html

JavaScript SDK をダウンロードします

ここを右クリックして「名前を付けて

リンク先を保存」するncmb-latest.min.js



js ディレクトリを右クリックして

「アップロード」



表示されたポップアップで先ほど入手した

ncmb-latest.min.jsをアップロードする



こうなればOK



お気に入りの処理を行う favorite.js をアップロードします

こうなればOK

① 以下のページから favorite.jsを取得してください。

② js ディレクトリを右クリックしてアップロードを選択

③ 取得した favorite.js をアップロードしてください

https://goo.gl/omGGkq


⑦お気に入り機能を追加する 13.5/17

favorite.js の中身を少しだけご紹介SDK を初期化

データストアのクラスを定義

オブジェクトを生成

保存したい情報をオブジェクトにセット

保存処理を行います



お気に入りの処理に必要な js を読み込むように index.html へ追記します

<script src="js/ncmb-latest.min.js"></script> <script src="js/favorite.js"></script>

追記



RSS読込時に★を更新するため feed-reader.js を変更します

self.favorite.applyAll();追記



追記変更

Feed クラスで Favorite クラスが利用できるようにする



Feed クラスで Favorite クラスが利用できるようにする

applicationKey とclientKey には

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

転記すること！

重要

mobile backend の管理画面から

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

コピーする


⑧動作確認！


⑧動作確認！

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

☆をタップして色を付けてみましょう


⑧動作確認！

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

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


集中講座1 Monacaとmbaasでwebコンテンツをスマホアプリ化しよう

Software