Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Monacaとニフティクラウドmobile backendでwebコンテンツのスマホアプリ化を体験してみよう

1,608 views

Published on

スマートフォンやタブレットの急速な普及により、
従来より自社でWebコンテンツを保有するコンテンツホルダーは
スマホアプリ化による利用者の拡大が急務となっています。

既存のWebコンテンツを最大限活用したハイブリッドアプリ開発を「Monaca」と「ニフティクラウドmobile backend」で
実現する方法について解説いたします。

ハンズオンにて使用したソースコードはお持ち帰り頂けます。

Published in: Software
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Monacaとニフティクラウドmobile backendでwebコンテンツのスマホアプリ化を体験してみよう

  1. 1. Copyright © NIFTY Corporation All Rights Reserved. 1 事前準備 Monaca ニフティクラウドmobile backend https://ja.monaca.io/ http://mb.cloud.nifty.com/ ※利用登録/Monacaデバッガーのインストール ※利用登録 本日の資料 【SlideShare】http://goo.gl/fNXnN4 【GitHub】https://goo.gl/KQRcQy
  2. 2. Copyright © NIFTY Corporation All Rights Reserved. 【ハンズオン】 Monacaと ニフティクラウドmobile backendで Webコンテンツのスマホアプリ化を 体験してみよう ニフティ株式会社
  3. 3. Copyright © NIFTY Corporation All Rights Reserved. 3 本日、体験して頂く内容 ブログコンテンツのスマホアプリ化 スマホ対応済み ブログ アプリでのみ扱う お気に入り情報を データストアに格納 ブログのRSSから アプリの記事リストを構築。 記事本体はWebViewで ブログ本体へ遷移。
  4. 4. Copyright © NIFTY Corporation All Rights Reserved. 4 手順 ① Monacaの利用登録 ② MonacaでRSSリーダーを体験する ③ mobile backendの利用登録 ④ mobile backendのアプリを作る ⑤ お気に入り機能をオンライン化する ⑥ 動作確認!
  5. 5. Copyright © NIFTY Corporation All Rights Reserved. ①Monacaの利用登録 ※登録済みの方は不要です
  6. 6. Copyright © NIFTY Corporation All Rights Reserved. 6 ①Monacaの利用登録 https://ja.monaca.io/ ※登録済みの方は不要です
  7. 7. Copyright © NIFTY Corporation All Rights Reserved. 7 Monacaデバッガーのインストール 今回作成するRSSリーダーは動作確認に Monacaデバッガーが必須です! 重要 https://ja.monaca.io/debugger.html
  8. 8. Copyright © NIFTY Corporation All Rights Reserved. ②MonacaでRSSリーダーを体験する
  9. 9. Copyright © NIFTY Corporation All Rights Reserved. 9 ②MonacaでRSSリーダーを体験する 1/9 スマホ対応済み ブログ まずは 単独で動く RSSリーダーを 体験します!
  10. 10. Copyright © NIFTY Corporation All Rights Reserved. 10 ②MonacaでRSSリーダーを体験する 2/9 Monacaの新しいプロジェクトを作ります 「開発をスタート」 をクリック
  11. 11. Copyright © NIFTY Corporation All Rights Reserved. 11 ②MonacaでRSSリーダーを体験する 3/9 「Monaca.ioで開発」を 選択してください
  12. 12. Copyright © NIFTY Corporation All Rights Reserved. 12 ②MonacaでRSSリーダーを体験する 4/9 「Import Project」を 選択してください
  13. 13. Copyright © NIFTY Corporation All Rights Reserved. 13 ②MonacaでRSSリーダーを体験する 5/9 「インポート」 をクリック https://github.com/ndyuya/fav-rss-reader-v2/archive/master.zip Webコンテンツのスマホアプリ化
  14. 14. Copyright © NIFTY Corporation All Rights Reserved. 14 ②MonacaでRSSリーダーを体験する 6/9 「開く」 をクリック ダッシュボードの左側に作成した プロジェクトが追加されています
  15. 15. Copyright © NIFTY Corporation All Rights Reserved. 15 ②MonacaでRSSリーダーを体験する 7/9 プロジェクトの開発環境が開きます
  16. 16. Copyright © NIFTY Corporation All Rights Reserved. 16 ②MonacaでRSSリーダーを体験する 8/9 何も変更せずにMonacaデバッガーで試してみましょう ニフティクラウドmobile backendが提供している ブログコンテンツの一覧が表示されます。 星をタップするとお気に入りのON/OFFができます。
  17. 17. Copyright © NIFTY Corporation All Rights Reserved. 17 ②MonacaでRSSリーダーを体験する 9/9 スマホ対応済み ブログ LocalStorage お気に入りの情報は スマホのローカルストレージに 保存されています。 自分しか見れません。 js/favorite-offline.js にお気に入りの処理が記述されています
  18. 18. Copyright © NIFTY Corporation All Rights Reserved. 18 次のステップ! スマホ対応済み ブログ お気に入りの情報をmobile backendに保存して、 ある記事をお気に入りしている人が何人いるかを表示。 お気に入りの情報を クラウドに保存します。
  19. 19. Copyright © NIFTY Corporation All Rights Reserved. ③mobile backendの利用登録 ※登録済みの方は不要です
  20. 20. Copyright © NIFTY Corporation All Rights Reserved. 20 ③mobile backendの利用登録 http://mb.cloud.nifty.com/ @nifty会員登録と mobile backendの利用登録を行います。
  21. 21. Copyright © NIFTY Corporation All Rights Reserved. ④mobile backendのアプリを作る
  22. 22. Copyright © NIFTY Corporation All Rights Reserved. 22 ④mobile backendのアプリを作る 1/4 利用登録が終わるとアプリの新規作成画面が表示されます。 アプリ名を入力して新規作成してください。 「IoTBlogApp」 と入力してください
  23. 23. Copyright © NIFTY Corporation All Rights Reserved. 23 ④mobile backendのアプリを作る 2/4 アプリが作成されました。 2つのキーは 後で使います OKをクリックすると 管理画面が表示されます ※後でキーを確認する方法は 次のページに掲載しています。
  24. 24. Copyright © NIFTY Corporation All Rights Reserved. 24 ④mobile backendのアプリを作る 3/4 後でキーを確認するには…【その1】 アプリ設定
  25. 25. Copyright © NIFTY Corporation All Rights Reserved. 25 ④mobile backendのアプリを作る 4/4 後でキーを確認するには…【その2】 ここにあります
  26. 26. Copyright © NIFTY Corporation All Rights Reserved. ⑤お気に入り機能をオンライン化する
  27. 27. Copyright © NIFTY Corporation All Rights Reserved. 27 ⑤お気に入り機能をオンライン化する 1/11 完成イメージ ・気に入った記事に★を付けられる ・何人が★を付けているかが見える
  28. 28. Copyright © NIFTY Corporation All Rights Reserved. 28 ⑤お気に入り機能をオンライン化する 2/11 JavaScript SDK を入手する https://goo.gl/4i5Vx9 上記URLへアクセスするとJavaScript SDKが表示されます。 右クリックして「名前を付けて保存」してください。 ※通常時はmobile backendのサイトから入手してください
  29. 29. Copyright © NIFTY Corporation All Rights Reserved. 29 ⑤お気に入り機能をオンライン化する 3/11 JavaScript SDK をアップロードする Monaca IDEの左側にあるファイルツリーにて jsフォルダで右クリックしてアップロードを選択 表示されたポップアップに ダウンロードしたjs sdkをドラッグ&ドロップ
  30. 30. Copyright © NIFTY Corporation All Rights Reserved. 30 ⑤お気に入り機能をオンライン化する 4/11 index.htmlを編集してJavaScript SDKを読み込む 11行目と12行目の間に、 <script src=“js/ncmb.min.js”></script>
  31. 31. Copyright © NIFTY Corporation All Rights Reserved. 31 ⑤お気に入り機能をオンライン化する 5/11 index.htmlを編集してmobile backendと接続する 13行目の「js/favorite-offline.js」を 「js/favorite-online.js」に変更する
  32. 32. Copyright © NIFTY Corporation All Rights Reserved. 32 ⑤お気に入り機能をオンライン化する 6/11 index.htmlを編集してmobile backendと接続する applicationKeyと clientKeyには mobile backendの 管理画面で取得したものを 転記すること! 重要 mobile backendの 管理画面から アプリケーションキーと クライアントキーを コピーする
  33. 33. Copyright © NIFTY Corporation All Rights Reserved. 33 ⑤お気に入り機能をオンライン化する 7/11 js/favorite-online.jsを編集して機能を追加する (1)の部分にSDKの初期化処理を追記する (2)の部分に保存先クラスの定義を追記する
  34. 34. Copyright © NIFTY Corporation All Rights Reserved. 34 ⑤お気に入り機能をオンライン化する 8/11 js/favorite-online.jsを編集して機能を追加する (3)の部分に保存するオブジェクトの生成処理を追記する (4)の部分に値のセットと、 保存処理を追記する
  35. 35. Copyright © NIFTY Corporation All Rights Reserved. 35 ⑤お気に入り機能をオンライン化する 9/11 js/favorite-online.jsを編集して機能を追加する (5)の部分に削除対象オブジェクトの検索処理と削除処理を追記する
  36. 36. Copyright © NIFTY Corporation All Rights Reserved. 36 ⑤お気に入り機能をオンライン化する 10/11 js/favorite-online.jsを編集して機能を追加する (6)の部分にお気に入り数の取得処理を追記する
  37. 37. Copyright © NIFTY Corporation All Rights Reserved. 37 ⑤お気に入り機能をオンライン化する 11/11 js/favorite-online.jsを編集して機能を追加する (7)の部分に自身のお気に入り状況の取得処理を追記する
  38. 38. Copyright © NIFTY Corporation All Rights Reserved. ⑥動作確認!
  39. 39. Copyright © NIFTY Corporation All Rights Reserved. 39 ⑥動作確認! Monacaデバッガーで試してみましょう ☆をタップ してみましょう
  40. 40. Copyright © NIFTY Corporation All Rights Reserved. 40 ⑥動作確認! mobile backend上のデータを見てみましょう ☆を付けると データが増えます
  41. 41. Copyright © NIFTY Corporation All Rights Reserved. 41 ⑥動作確認! お気に入り状態が変更されることを確認してみよう 任意の行のuuidをダブルクリック 編集モードになるので 適当な文字列に書き換える ※自分以外の人がお気に入りした状態
  42. 42. Copyright © NIFTY Corporation All Rights Reserved. 42 ⑥動作確認! お気に入り状態が変更されることを確認してみよう Reloadをタップ UUIDをダミーに変えた記事の ★の色が消えます
  43. 43. Copyright © NIFTY Corporation All Rights Reserved. 43 まとめ なぜWebサイトから スマホアプリなのかについて 学びました Webコンテンツの スマホアプリ化を体験しました
  44. 44. Copyright © NIFTY Corporation All Rights Reserved. 44

×