集中講座1 monacaとmbaasでwebコンテンツをスマホアプリ化しよう
Post on 15-Aug-2015
163 views
TRANSCRIPT
Copyright © NIFTY Corporation All Rights Reserved.
【集中講座①】
Monaca とニフティクラウド mobile backend
でWeb コンテンツのスマホアプリ化を
体験してみようニフティ株式会社
Copyright © NIFTY Corporation All Rights Reserved. 2
今日のゴール
スマホ対応済みブログ記事の更新をトリガーに
REST API でプッシュ登録
Monaca 製のアプリへ更新を知らせるプッシュ通知
APNs
GCM
Copyright © NIFTY Corporation All Rights Reserved. 3
この時間帯に体験して頂く内容
ブログコンテンツのスマホアプリ化スマホ対応済み
ブログ
アプリでのみ扱うお気に入り情報を
データストアに格納
ブログの RSS からアプリの記事リストを構築。
記事本体は WebView でブログ本体へ遷移。
Copyright © NIFTY Corporation All Rights Reserved. 4
手順
① C4SA の利用登録
② C4SA で WordPress 環境を作る
③ Monaca の利用登録
④ Monaca で RSS リーダーを作る
⑤ mobile backend の利用登録
⑥ mobile backend のアプリを作る
⑦ お気に入り機能を追加する
⑧ 動作確認!
Copyright © NIFTY Corporation All Rights Reserved. 5
ハンズオンに入る前に…
完成品が にあります
https://github.com/ndyuya/fav-rss-reader
作業中に分からなくなったときは参考にしてください
Copyright © NIFTY Corporation All Rights Reserved. 7
①C4SA の利用登録 [1/6]
http://c4sa.nifty.com/ここをクリック
C4SA で使う ID でログインしてから、利用登録手続きを行います。
Copyright © NIFTY Corporation All Rights Reserved. 8
①C4SA の利用登録 [2/6]
@nifty ID を選択
@nifty ID 以外でも OK です
利用する ID は選べます。
Copyright © NIFTY Corporation All Rights Reserved. 10
①C4SA の利用登録 [4/6]
受信可能なメールアドレスを入力して「確認」
個人情報の取扱いについて確認後、同意して送信
Copyright © NIFTY Corporation All Rights Reserved. 11
①C4SA の利用登録 [5/6]
メールが届くのでURL を開く
利用規約に同意して利用開始!
Copyright © NIFTY Corporation All Rights Reserved. 15
②C4SA で WordPress 環境を作る [2/15]
ここをクリック
15 日間無料で使えます!試用期間を過ぎると…
決済情報【無】 → 期限切れのキャンバスは非公開になります決済情報【有】 → 本サービス(有償)に切り替わります
重要
Copyright © NIFTY Corporation All Rights Reserved. 16
②C4SA で WordPress 環境を作る [3/15]
WordPress を選択する
Copyright © NIFTY Corporation All Rights Reserved. 20
②C4SA で WordPress 環境を作る [7/15]
サイトのタイトル 任意の文字列
ユーザー名 任意の文字列
パスワード 任意の文字列
メールアドレス 受信可能なメールアドレス
プライバシー チェックを外す(任意)
必要事項を入力してWordPress をインストールしてください。
Copyright © NIFTY Corporation All Rights Reserved. 21
②C4SA で WordPress 環境を作る [8/15]
ログイン
先ほど入力したアカウントでログイン
WordPress の管理画面の URL → http:// 【キャンバスに設定されているドメイン】 /wp-login.php
Copyright © NIFTY Corporation All Rights Reserved. 22
②C4SA で WordPress 環境を作る [9/15]
WordPress 環境が構築できました!
Copyright © NIFTY Corporation All Rights Reserved. 23
②C4SA で WordPress 環境を作る [10/15]
次に、スマホ最適化を行います。
プラグインの新規追加を選択
Copyright © NIFTY Corporation All Rights Reserved. 24
②C4SA で WordPress 環境を作る [11/15]
「 WPTouch 」を検索してください
Copyright © NIFTY Corporation All Rights Reserved. 25
②C4SA で WordPress 環境を作る [12/15]
「 WPtouch Mobile Plugin 」をいますぐインストールする
OK
Copyright © NIFTY Corporation All Rights Reserved. 27
②C4SA で WordPress 環境を作る [14/15]
WPtouch Mobile Plugin が有効になりました!
Copyright © NIFTY Corporation All Rights Reserved. 28
②C4SA で WordPress 環境を作る [15/15]
スマホ最適化されました!
※PC ブラウザの場合
※ スマホブラウザの場合
Copyright © NIFTY Corporation All Rights Reserved. 32
③Monaca の利用登録 3/3
Monaca が使えるようになりました。※ 登録メールアドレス宛に確認メールが 届いているので本登録を行ってください
Copyright © NIFTY Corporation All Rights Reserved. 33
Monaca デバッガーのインストール
今回作成する RSS リーダーは動作確認にMonaca デバッガーが必須です!
重要
https://ja.monaca.io/debugger.html
Copyright © NIFTY Corporation All Rights Reserved. 35
④Monaca で RSS リーダーを作る 1/12
まずは右側半分を作ります!
スマホ対応済みブログ
Copyright © NIFTY Corporation All Rights Reserved. 36
④Monaca で RSS リーダーを作る 2/12
「開発をスタート」をクリック
Monaca の新しいプロジェクトを作ります
Copyright © NIFTY Corporation All Rights Reserved. 37
④Monaca で RSS リーダーを作る 3/12
「 Monaca.io で開発」をクリック
Copyright © NIFTY Corporation All Rights Reserved. 38
④Monaca で RSS リーダーを作る 4/12
「 RSS リーダー」を選択してください
Copyright © NIFTY Corporation All Rights Reserved. 39
④Monaca で RSS リーダーを作る 5/12
「プロジェクトを作成する」をクリック
プロジェクト名と説明はお好きな内容を設定してください。
Copyright © NIFTY Corporation All Rights Reserved. 40
④Monaca で RSS リーダーを作る 6/12
「開く」をクリック
ダッシュボードの左側に作成したプロジェクトが追加されています
Copyright © NIFTY Corporation All Rights Reserved. 42
④Monaca で RSS リーダーを作る 8/12
何も変更せずに Monaca デバッガーで試してみましょう
BBC のニュースが表示されます
Copyright © NIFTY Corporation All Rights Reserved. 43
④Monaca で RSS リーダーを作る 9/12
データソースとなる RSS の設定を変更します
C4SA 上に作った WordPress の RSS を使います。ブログの右下の「投稿の RSS 」をクリックして開いた URL を使います。
「投稿の RSS 」をクリック
Copyright © NIFTY Corporation All Rights Reserved. 44
④Monaca で RSS リーダーを作る 10/12
index.html の 13 行目にあるfeedUrl の値を変更します
http://【WordPress のブログ URL 】 /?feed=rss2変更
Copyright © NIFTY Corporation All Rights Reserved. 46
④Monaca で RSS リーダーを作る 12/12
Monaca デバッガーで試してみましょう
WordPress で作成したブログの記事が表示されます。
Copyright © NIFTY Corporation All Rights Reserved. 49
⑤mobile backend の利用登録 1/6
http://mb.cloud.nifty.com/ 無料登録をクリック
まず、 @nifty 会員登録を行います。
※ 右クリックして新しいタブで開くと便利です
Copyright © NIFTY Corporation All Rights Reserved. 52
⑤mobile backend の利用登録 4/6
http://mb.cloud.nifty.com/ ここをクリック
次に、ニフティクラウド mobile backend の利用登録を行います。
Copyright © NIFTY Corporation All Rights Reserved. 53
⑤mobile backend の利用登録 5/6
ご登録いただいた@nifty ID で
ログイン
Copyright © NIFTY Corporation All Rights Reserved. 56
⑥mobile backend のアプリを作る 1/4
利用登録が終わるとアプリの新規作成画面が表示されます。アプリ名を入力して新規作成してください。
「 IoTBlogApp 」と入力してください
Copyright © NIFTY Corporation All Rights Reserved. 57
⑥mobile backend のアプリを作る 2/4
アプリが作成されました。
2つのキーは後で使います
OK をクリックすると管理画面が表示されます
※ 後でキーを確認する方法は 次のページに掲載しています。
Copyright © NIFTY Corporation All Rights Reserved. 58
⑥mobile backend のアプリを作る 3/4
後でキーを確認するには…【その1】
アプリ設定
Copyright © NIFTY Corporation All Rights Reserved. 59
⑥mobile backend のアプリを作る 4/4
後でキーを確認するには…【その2】
ここにあります
Copyright © NIFTY Corporation All Rights Reserved. 61
⑦お気に入り機能を追加する 1/17
完成イメージ
・気に入った記事に★を付けられる・何人が★を付けているかが見える
Copyright © NIFTY Corporation All Rights Reserved. 63
⑦お気に入り機能を追加する 3/17
★の表示空間確保のために style.css を変更します
追記
変更
Copyright © NIFTY Corporation All Rights Reserved. 64
⑦お気に入り機能を追加する 4/17
★を表示する空間が確保されました。
ここに★を追加します
Copyright © NIFTY Corporation All Rights Reserved. 65
⑦お気に入り機能を追加する 5/17
① 以下のページからfavorite.css を取得してください。
② CSS ディレクトリを右クリックしてアップロードを選択
③ 取得した favorite.css を アップロードしてください
★のスタイル調整のために favorite.css を追加します
https://goo.gl/SzM2Oi
こうなればOK
Copyright © NIFTY Corporation All Rights Reserved. 66
⑦お気に入り機能を追加する 6/17
★の表示に必要な 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">
追記
Copyright © NIFTY Corporation All Rights Reserved. 67
⑦お気に入り機能を追加する 7/17
RSS読込時に★を表示するためfeed-reader.js を変更します
<i class="star fa fa-star-o fa-2x"></i>
追記
Copyright © NIFTY Corporation All Rights Reserved. 68
⑦お気に入り機能を追加する 8/17
☆が表示されるようになりました。
☆をタップした時にお気に入りが
追加されるように処理を追加します
Copyright © NIFTY Corporation All Rights Reserved. 69
⑦お気に入り機能を追加する 9/17
http://mb.cloud.nifty.com/doc/current/introduction/sdkdownload_javascript.html
JavaScript SDK をダウンロードします
ここを右クリックして「名前を付けて
リンク先を保存」するncmb-latest.min.js
Copyright © NIFTY Corporation All Rights Reserved. 70
⑦お気に入り機能を追加する 10/17
js ディレクトリを右クリックして
「アップロード」
Copyright © NIFTY Corporation All Rights Reserved. 71
⑦お気に入り機能を追加する 11/17
表示されたポップアップで先ほど入手した
ncmb-latest.min.jsをアップロードする
Copyright © NIFTY Corporation All Rights Reserved. 73
⑦お気に入り機能を追加する 13/17
お気に入りの処理を行う favorite.js をアップロードします
こうなればOK
① 以下のページから favorite.jsを取得してください。
② js ディレクトリを右クリックしてアップロードを選択
③ 取得した favorite.js をアップロードしてください
https://goo.gl/omGGkq
Copyright © NIFTY Corporation All Rights Reserved. 74
⑦お気に入り機能を追加する 13.5/17
favorite.js の中身を少しだけご紹介SDK を初期化
データストアのクラスを定義
オブジェクトを生成
保存したい情報をオブジェクトにセット
保存処理を行います
Copyright © NIFTY Corporation All Rights Reserved. 75
⑦お気に入り機能を追加する 14/17
お気に入りの処理に必要な js を読み込むように index.html へ追記します
<script src="js/ncmb-latest.min.js"></script> <script src="js/favorite.js"></script>
追記
Copyright © NIFTY Corporation All Rights Reserved. 76
⑦お気に入り機能を追加する 15/17
RSS読込時に★を更新するため feed-reader.js を変更します
self.favorite.applyAll();追記
Copyright © NIFTY Corporation All Rights Reserved. 77
⑦お気に入り機能を追加する 16/17
追記変更
Feed クラスで Favorite クラスが利用できるようにする
Copyright © NIFTY Corporation All Rights Reserved. 78
⑦お気に入り機能を追加する 17/17
Feed クラスで Favorite クラスが利用できるようにする
applicationKey とclientKey には
Mobile backend の管理画面で取得したものを
転記すること!
重要
mobile backend の管理画面から
アプリケーションキーとクライアントキーを
コピーする
Copyright © NIFTY Corporation All Rights Reserved. 80
⑧動作確認!
Monaca デバッガーで試してみましょう
☆をタップして色を付けてみましょう
Copyright © NIFTY Corporation All Rights Reserved. 81
⑧動作確認!
mobile backend 上のデータを見てみましょう
☆を付けるとデータが増えます