mBaaSとC4SAの簡単な使い方をご紹介します

1. Copyright © NIFTY Corporation All Rights Reserved.
Monaca/mBaaS体験会
「スマホサイトのアプリ化」

2. Copyright © NIFTY Corporation All Rights Reserved. 2
事前準備
Monaca
ニフティクラウドmobile backend
https://ja.monaca.io/
http://mb.cloud.nifty.com/
※利用登録とMonacaデバッガーのインストール
※利用登録
本日の資料
【SlideShare】http://goo.gl/FxoBEr
★【GitHub】https://goo.gl/La2G9J

3. Copyright © NIFTY Corporation All Rights Reserved. 3
事前準備
【GitHub】https://goo.gl/La2G9J
※このあと使いますので
開いておいてください！

4. Copyright © NIFTY Corporation All Rights Reserved. 4
本日、体験して頂く内容
ブログコンテンツのスマホアプリ化
スマホ対応済み
ブログ
アプリでのみ扱う
お気に入り情報を
データストアに格納
ブログのRSSから
アプリの記事リストを構築。
記事本体はWebViewで
ブログ本体へ遷移。

5. Copyright © NIFTY Corporation All Rights Reserved. 5
手順
① Monacaの利用登録
② MonacaでRSSリーダーを体験する
③ mobile backendの利用登録
④ mobile backendのアプリを作る
⑤ お気に入り機能をオンライン化する
⑥ 動作確認！

6. Copyright © NIFTY Corporation All Rights Reserved.
①Monacaの利用登録
※登録済みの方は不要です

7. Copyright © NIFTY Corporation All Rights Reserved. 7
①Monacaの利用登録
https://ja.monaca.io/
※登録済みの方は不要です

8. Copyright © NIFTY Corporation All Rights Reserved. 8
Monacaデバッガーのインストール
今回作成するRSSリーダーは動作確認に
Monacaデバッガーが必須です！
重要
https://ja.monaca.io/debugger.html

9. Copyright © NIFTY Corporation All Rights Reserved.
②MonacaでRSSリーダーを体験する

10. Copyright © NIFTY Corporation All Rights Reserved. 10
本日、体験して頂く内容(再確認)
ブログコンテンツのスマホアプリ化
スマホ対応済み
ブログ
アプリでのみ扱う
お気に入り情報を
データストアに格納
ブログのRSSから
アプリの記事リストを構築。
記事本体はWebViewで
ブログ本体へ遷移。

11. Copyright © NIFTY Corporation All Rights Reserved. 11
②MonacaでRSSリーダーを体験する
Monacaの新しいプロジェクトを作ります
「開発をスタート」
をクリック

12. Copyright © NIFTY Corporation All Rights Reserved. 12
②MonacaでRSSリーダーを体験する
「Monaca.ioで開発」を
選択してください

13. Copyright © NIFTY Corporation All Rights Reserved. 13
②MonacaでRSSリーダーを体験する
「Import Project」を
選択してください

14. Copyright © NIFTY Corporation All Rights Reserved. 14
②MonacaでRSSリーダーを体験する
「インポート」
をクリック
★https://github.com/hounenhounen/IoTBlogApp/archive/master.zip
Webコンテンツのスマホアプリ化

15. Copyright © NIFTY Corporation All Rights Reserved. 15
②MonacaでRSSリーダーを体験する
【GitHub】https://goo.gl/La2G9J
「Download Zip」
を右クリック
→URLをコピー
★https://github.com/hounenhounen/IoTBlogApp/archive/master.zip

16. Copyright © NIFTY Corporation All Rights Reserved. 16
②MonacaでRSSリーダーを体験する
「開く」
をクリック
ダッシュボードの左側に作成した
プロジェクトが追加されています

17. Copyright © NIFTY Corporation All Rights Reserved. 17
②MonacaでRSSリーダーを体験する
プロジェクトの開発環境が開きます

18. Copyright © NIFTY Corporation All Rights Reserved. 18
②MonacaでRSSリーダーを体験する
何も変更せずにMonacaデバッガーで試してみましょう

19. Copyright © NIFTY Corporation All Rights Reserved. 19
次のステップ！
スマホ対応済み
ブログ
お気に入りの情報をmobile backendに保存して、
ある記事をお気に入りしている人が何人いるかを表示。
お気に入りの情報を
クラウドに保存します。

20. Copyright © NIFTY Corporation All Rights Reserved.
③mobile backendの利用登録
※登録済みの方は不要です

21. Copyright © NIFTY Corporation All Rights Reserved. 21
③mobile backendの利用登録
http://mb.cloud.nifty.com/
@nifty会員登録と
mobile backendの利用登録を行います。
※登録済みの方は不要です

22. Copyright © NIFTY Corporation All Rights Reserved.
④mobile backendのアプリを作る

23. Copyright © NIFTY Corporation All Rights Reserved. 23
④mobile backendのアプリを作る
利用登録が終わるとアプリの新規作成画面が表示されます。
アプリ名を入力して新規作成してください。
「IoTBlogApp」
と入力してください

24. Copyright © NIFTY Corporation All Rights Reserved. 24
④mobile backendのアプリを作る
※ログイン後に、この画面が出た方は…
「+新しいアプリ」
をクリックすると
でてきます!

25. Copyright © NIFTY Corporation All Rights Reserved. 25
④mobile backendのアプリを作る
アプリが作成されました。
２つのキーは
後で使います
OKをクリックすると
管理画面が表示されます
※後でキーを確認する方法は
次のページに掲載しています。

26. Copyright © NIFTY Corporation All Rights Reserved. 26
④mobile backendのアプリを作る
後でキーを確認するには…【その１】
アプリ設定

27. Copyright © NIFTY Corporation All Rights Reserved. 27
④mobile backendのアプリを作る
後でキーを確認するには…【その２】
ここにあります

28. Copyright © NIFTY Corporation All Rights Reserved. 28
④mobile backendのアプリを作る
データストアを確認しておく
データストア

29. Copyright © NIFTY Corporation All Rights Reserved. 29
④mobile backendのアプリを作る
データストアを確認しておく

30. Copyright © NIFTY Corporation All Rights Reserved.
⑤お気に入り機能をオンライン化する

31. Copyright © NIFTY Corporation All Rights Reserved. 31
⑤お気に入り機能をオンライン化する
完成イメージ
・気に入った記事に★を付けられる
・何人が★を付けているかが見える

32. Copyright © NIFTY Corporation All Rights Reserved. 32
⑤お気に入り機能をオンライン化する
index.htmlを編集してmobile backendと接続する
applicationKeyと
clientKeyには
mobile backendの
管理画面で取得したものを
転記すること！
重要
mobile backendの
管理画面から
アプリケーションキーと
クライアントキーを
コピーする

33. Copyright © NIFTY Corporation All Rights Reserved.
⑥動作確認！

34. Copyright © NIFTY Corporation All Rights Reserved. 34
⑥動作確認！
Monacaデバッガーで試してみましょう
☆をタップ
してみましょう

35. Copyright © NIFTY Corporation All Rights Reserved. 35
⑥動作確認！
mobile backend上のデータを見てみましょう
☆を付けると
データが増えます

36. Copyright © NIFTY Corporation All Rights Reserved.
C4SA体験会
「HTMLコンテンツの公開」

37. Copyright © NIFTY Corporation All Rights Reserved. 37
C4SAの利用登録
http://c4sa.nifty.com/
ここをクリック
C4SAで使うIDでログインしてから、
利用登録手続きを行います。
下記URLよりC4SAのサービスサイトに
アクセスしていただきます。

38. Copyright © NIFTY Corporation All Rights Reserved. 38
C4SAの利用登録
@nifty IDを選択
@nifty ID以外でもOKです
利用するIDは選べます。

39. Copyright © NIFTY Corporation All Rights Reserved. 39
C4SAの利用登録
事前に
ご登録いただいた
@nifty IDで
ログイン

40. Copyright © NIFTY Corporation All Rights Reserved. 40
C4SAの利用登録
受信可能な
メールアドレスを
入力して「確認」
個人情報の取扱いに
ついて確認後、
同意して送信

41. Copyright © NIFTY Corporation All Rights Reserved. 41
C4SAの利用登録
メールが届くので
URLを開く
利用規約に同意して
利用開始！

42. Copyright © NIFTY Corporation All Rights Reserved. 42
C4SAの利用登録
C4SAが使えるようになりました。

43. Copyright © NIFTY Corporation All Rights Reserved. 43
C4SAでPHP環境を作る
ここを
クリック

44. Copyright © NIFTY Corporation All Rights Reserved. 44
C4SAでPHP環境を作る
ここを
クリック
15日間無料で使えます！
試用期間を過ぎると…
決済情報【無】 → 期限切れのキャンバスは非公開になります
決済情報【有】 → 本サービス（有償）に切り替わります
重要

45. Copyright © NIFTY Corporation All Rights Reserved. 45
C4SAでPHP環境を作る
ここを
クリック
ここを
クリック

46. Copyright © NIFTY Corporation All Rights Reserved. 46
C4SAでPHP環境を作る
このURLをクリックすると
新しいタブで「hello world」
と表示される
ここをクリック

47. Copyright © NIFTY Corporation All Rights Reserved. 47
C4SAにHTMLページを導入する
ここをクリック
アップロードボタンを使って
自分の作っHTMLページを
アップロードしてみよう！

48. Copyright © NIFTY Corporation All Rights Reserved. 48
HTMLページ導入の際の注意
index.htmlを導入しても、うまく表示されない場合は
index.phpを削除しよう
index.phpを選択
ここをクリック

49. Copyright © NIFTY Corporation All Rights Reserved. 49