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編】クーポン配信アプリを作ろう!

587 views

Published on

・ニフティクラウドmobile backendレベルアップセミナー用資料です
・「Download」>「No thanks. Continue to download」をクリックしてPDFをダウンロードしてご利用ください

Published in: Education
  • Be the first to comment

【Monaca編】クーポン配信アプリを作ろう!

  1. 1. 【Monaca編】ニフティクラウドmobile backend レベルアップセミナー クーポン配信アプリを作ろう! @ncmbadmin 20160817作成 1 / 108
  2. 2. 事前準備 ニフティクラウドmobile backendのアカウント登録がお済みでない方は、 ホームページ右上にある「無料登録」ボタンをクリックして、 アカウント登録を実施してください 2 / 108
  3. 3. 150分でアプリ完成させます 講義形式で説明と演習を繰り返して アプリを作成します 今回のハンズオンセミナーについて セミナーの形式 3 / 108
  4. 4. 今回のハンズオンセミナーについて 学ぶ内容 「mBaaS Shop List」アプリの作成を通して、アクティブユーザー率を上げる 効率的なプッシュ通知の組み込み方を学びます 4 / 108
  5. 5. 今回のハンズオンセミナーについて 学ぶ内容 「mBaaS Shop List」アプリの作成を通して、アクティブユーザー率を上げる 効率的なプッシュ通知の組み込み方を学びます 5 / 108
  6. 6. ニフティクラウド mobile backendとは サービス紹介 スマホアプリで汎用的に実装される機能を、クラウドサービスとして提供して いるサービスです 通称「mBaaS」 Monaca環境も対応しており、JavascriptSDKを利用することで上記の機能を簡 単に実装できます 6 / 108
  7. 7. ニフティクラウド mobile backendとは Javascript SDKの特徴 SDKのインストールが必要  (済み) 今回は実装済み 参考:クイックスタート 7 / 108
  8. 8. ニフティクラウド mobile backendとは Javascript SDKの特徴 SDKの初期化処理が必要です 後で処理を実装します varncmb=newNCMB("YOUR_APPLICATIONKEY","YOUR_CLIENTKEY"); 8 / 108
  9. 9. ニフティクラウド mobile backendとは Javascript SDKの特徴 サーバへリクエストする際、Javascriptは基本的に非同期処理として実行され ます 同期処理と非同期処理 同期処理はその処理が完了するまで、次の処理が実行されません 非同期処理はバックグラウンドで処理を実行し、次の処理を実行します (Javascript) 9 / 108
  10. 10. ニフティクラウド mobile backendとは Javascript SDKの特徴 SDKの代表利用例を紹介します オブジェクトを登録する Promise形式で実装されています. then, catchでそれぞれ成功/失敗の時の処理を定義します //クラスのBookを作成 varBook=ncmb.DataStore("Book"); //データストアへの登録 varbook=newBook(); book.set("message","Hello,NCMB!"); book.save() .then(function(){ //保存に成功した場合の処理 }) .catch(function(err){ //保存に失敗した場合の処理 }); 10 / 108
  11. 11. ハンズオンの概要 作成するアプリについて クーポン配信アプリをイメージした「mBaaS Shop List」アプリの作成を通し て、mBaaSの機能を理解していきます mBaaSの連携部分をコーディングし、アプリを完成させ、次の内容を実現して いきます 会員登録をするとお店情報を見ることができます お店のお気に入り登録ができ、お気に入り登録をしたお店からプッシュ通 知で届きます 性別や都道府県限定のプッシュ通知ができます お店からのプッシュ通知でクーポンを直接配信することができます 決まった時間に通知を出すようにプッシュ通知を仕掛けることができます 11 / 108
  12. 12. ハンズオンの概要 作成するアプリについて 12 / 108
  13. 13. ハンズオンの流れ 前半 「mBaaS Shop List」アプリを作ろう! 1. ハンズオンの準備 2. 会員管理機能の作成 3. Shop情報の設定 4. お気に入り機能の作成 後半 プッシュ通知を送ろう! 1. プッシュ通知の準備 2. プッシュ通知を送信:セグメント配信 3. プッシュ通知を送信:リッチプッシュ 13 / 108
  14. 14. 「mBaaS Shop List」 アプリを作ろう! <前半> 14 / 108
  15. 15. 1.ハンズオンの準備 15 / 108
  16. 16. ハンズオンの準備 プロジェクトをダウンロード 下記リンクをクリックして、ZIPファイルでダウンロードしてください▼ MonacaAdvancePush ダウンロードしたzipファイルを、Monacaにインポートします 16 / 108
  17. 17. ハンズオンの準備 プロジェクトにあらかじめ実施していること mBaaSのJavascript SDKをインストール済み ( JavascriptSDKv.2.1.2 ) mBaaSのプッシュ通知Cordovaプラグインをインストール済み ( MonacaNCMB Pushpluginv.2.0.2 ) mBaaSとの連携以外の処理のコーディング アプリのデザインをjQuery Mobileベースで作成し、画面遷移、ボタン処理 はコーディングしています( index.html ) 17 / 108
  18. 18. ハンズオンの準備 mBaaSの準備 mBaaSにログインしてアプリを作成します 18 / 108
  19. 19. ハンズオンの準備 APIキーの設定とSDKの初期化 www/js/app.jsを開きます 一番最初に実行される処理を実装します 以下のコメントの直下に初期化コードを追加します BEFORE //【mBaaS】 APIキーの設定とSDKの初期化 AFTER //【mBaaS】 APIキーの設定とSDKの初期化 varappKey ="YOUR_APP_KEY"; varclientKey="YOUR_CLIENT_KEY"; varncmb=newNCMB(appKey,clientKey); 19 / 108
  20. 20. ハンズオンの準備 APIキーの設定とSDKの初期化 初期化処理の「YOUR_APP_KEY」,「YOUR_CLIENT_KEY」の部分をアプリ作成時 に発行されたAPIキーに書き換えてください APIキーは、mBaaSのダッシュボードから「アプリ設定」→「基本」にあ ります 20 / 108
  21. 21. 2.会員管理機能の作成 21 / 108
  22. 22. 会員管理機能の作成 mBaaSの設定 会員管理設定の「メールアドレス/パスワード認証」を許可します 「許可する」と選択し、保存します 22 / 108
  23. 23. 会員管理機能の作成 会員管理①:会員登録用メールを要求する[実装済み] 23 / 108
  24. 24. 会員管理機能の作成 会員管理①:会員登録用メールを要求する[実装済み] HTMLフォームコードは index.htmlにて確認できます <!--[2SIGNUP]会員ログインリクエストページ --> <divdata-role="page"id="SignupPage"data-theme="t"> <headerdata-role="header"data-position="fixed"data-theme="t"> <h1>mBaaSショップ</h1> </header> <sectiondata-role="content"> <h1>新規登録</h1> メールアドレス <inputtype="text"id="signup_mailaddress"> <ahref="#"id="SignupBtn"data-role="button"data-inline="false"data-theme="e">送信 <ahref="#LoginPage"data-role="button"data-mini="true"data-inline="true"data-theme </section> </div> 24 / 108
  25. 25. 会員管理機能の作成 会員管理①:会員登録用メールを要求する[実装済み] app.jsのonSignupBtn()を開きます 会員登録処理を実装します[実装済み] //【mBaaS:会員管理①】会員登録用メールを要求する varmailaddress=$("#signup_mailaddress").val(); ncmb.User.requestSignUpEmail(mailaddress) .then(function(data){ //会員登録用メールの要求成功時の処理 }) .catch(function(err){ //会員登録用メールの要求失敗時の処理 }); 25 / 108
  26. 26. 会員管理機能の作成 会員管理①:会員登録用メールを要求する[実装済み] それぞれ処理を追記しています[実装済み] 成功時の処理 //会員登録用メールの要求成功時の処理 alert("リクエストを送信しました!メールをご確認ください"); $.mobile.changePage('#LoginPage'); 失敗時の処理 //会員登録用メールの要求失敗時の処理 alert("リクエスト失敗!次のエラー発生:"+err); $.mobile.changePage('#LoginPage'); 26 / 108
  27. 27. 会員管理機能の作成 会員管理②:メールアドレスとパスワードでログイン [実装済み] 27 / 108
  28. 28. 会員管理機能の作成 会員管理②:メールアドレスとパスワードでログイン [実装済み] HTMLフォームコードは index.htmlにて確認できます <!--[1LOGIN]ログインページ --> <divdata-role="page"id="LoginPage"data-theme="t"> <headerdata-role="header"data-position="fixed"data-theme="e"> <h1>mBaaSショップ</h1> </header> <sectiondata-role="content"> <center><h1>mBaaSショップ</h1></center> メールアドレス <inputtype="text"id="login_mailaddress"> パスワード <inputtype="password"id="login_password"> 新規登録? <ahref="#SignupPage"data-role="button"data-mini="true"data-inline="true"data-theme <ahref="#"id="LoginBtn"data-role="button"data-inline="false"data-theme="e">ログイン </section> </div> 28 / 108
  29. 29. 会員管理機能の作成 会員管理②:メールアドレスとパスワードでログイン [実装済み] app.jsのonLoginBtn()を開きます ログイン処理を実装します[実装済み] //【mBaaS:会員管理②】メールアドレスとパスワードでログイン //入力したメールアドレスの値 varmailaddress=$("#login_mailaddress").val(); //入力したパスワードの値 varpassword=$("#login_password").val(); //メールアドレスとパスワードでログイン処理実施 ncmb.User.loginWithMailAddress(mailaddress,password) .then(function(user){ //ログイン成功時の処理 }) .catch(function(error){ //ログイン失敗時の処理 }); 29 / 108
  30. 30. 会員管理機能の作成 会員管理②:メールアドレスとパスワードでログイン [実装済み] それぞれ処理を追記しています 成功時の処理 //ログイン成功時の処理 alert("ログイン成功"); currentLoginUser=ncmb.User.getCurrentUser(); if(currentLoginUser.nickname){ showShopList(); }else{ //ユーザ情報登録画面遷移 $.mobile.changePage('#RegisterPage'); } 30 / 108
  31. 31. 会員管理機能の作成 会員管理②:メールアドレスとパスワードでログイン [実装済み] それぞれ処理を追記しています 失敗時の処理 //ログイン失敗時の処理 alert("ログイン失敗!次のエラー発生:"+error); 31 / 108
  32. 32. 会員管理機能の作成 動作確認(1)ログインをしてみましょう デバッグについて(プッシュ通知がない場合) 方法1(monacaデバッガーツール) iOS & Androidを利用 32 / 108
  33. 33. 会員管理機能の作成 動作確認(1)ログインをしてみましょう デバッグについて(プッシュ通知がない場合) 方法2(monaca IDEのプレビュー機能を利用) 33 / 108
  34. 34. 会員管理機能の作成 動作確認(1)ログインをしてみましょう ログイン画面で「会員登録」をタップします 会員登録画面でメールアドレスを入力し、「登録メールを送信」をタップしま す 34 / 108
  35. 35. 会員管理機能の作成 動作確認(1)ログインをしてみましょう 会員登録メールが届くので、パスワード設定します 35 / 108
  36. 36. 会員管理機能の作成 動作確認(1)ログインをしてみましょう 再びログイン画面に戻り「メールアドレス」と「パスワード」でログインしま す ログを確認してください mBaaSのダッシュボードを確認してください 会員管理にユーザーが登録されました エラーコード一覧 36 / 108
  37. 37. 会員管理機能の作成 会員管理③:ユーザー情報更新 37 / 108
  38. 38. 会員管理機能の作成 会員管理③:ユーザー情報更新 HTMLフォームコードは index.htmlにて確認できます <!--[3REGISTER]会員登録ページ --> <divdata-role="page"id="RegisterPage"data-theme="t"> <headerdata-role="header"data-position="fixed"data-theme="e"> <h1>mBaaSショップ</h1> </header> <sectiondata-role="content"> <h1>新規会員登録</h1> ニックネーム <inputtype="text"id="reg_nickname"> <divclass="ui-field-contain"> <fieldsetdata-role="controlgroup"> <legend>性別</legend> <inputid="reg_male"name="reg_gender"type="radio"value="男性"/> <labelfor="reg_male">男性</label> <inputid="reg_female"name="reg_gender"type="radio"value="女性"/> <labelfor="reg_female">女性</label> </fieldset> </div> 都道府県 <inputtype="text"id="reg_prefecture"> <ahref="#"id="RegisterBtn"data-role="button"data-inline="false"data-theme="e">登録 </section> 38 / 108
  39. 39. 会員管理機能の作成 会員管理③:ユーザー情報更新 app.jsのonRegisterBtn()を開きます 初回のみ表示されるユーザー情報登録画面に入力した情報をmBaaSのユーザー 情報に追加する処理を実装します 以下のコメントの直下にコードを追加します BEFORE //【mBaaS:会員管理③】ユーザー情報更新- 39 / 108
  40. 40. 会員管理機能の作成 会員管理③:ユーザー情報更新 AFTER //【mBaaS:会員管理③】ユーザー情報更新- //入力フォームからnickname,prefecture,genderを値セット varnickname=$("#reg_nickname").val(); varprefecture=$("#reg_prefecture").val(); vargender=$('input[name=reg_gender]:checked').val(); //currentLoginUserユーザー情報を設定 currentLoginUser.nickname=nickname; currentLoginUser.prefecture=prefecture; currentLoginUser.gender=gender; currentLoginUser.favorite=[]; //user情報の更新 currentLoginUser.update() .then(function(user){ //更新成功時の処理 }) .catch(function(error){ //更新失敗時の処理 }); 40 / 108
  41. 41. 会員管理機能の作成 会員管理③:ユーザー情報更新 それぞれ処理を追記します 更新成功時の処理 //更新成功時の処理 //【mBaaS:プッシュ通知②】installationにユーザー情報を紐づける alert("会員情報登録に成功"); //お店一覧画面遷移 showShopList(); 更新失敗時の処理 //更新失敗時の処理 alert("会員情報登録に失敗!次のエラー発生:"+error); 41 / 108
  42. 42. 会員管理機能の作成 動作確認(2): ユーザー情報更新 会員情報を入力し、登録しましょう 42 / 108
  43. 43. 会員管理機能の作成 動作確認(2): ユーザー情報更新 登録した情報を確認ページでみてみましょう 43 / 108
  44. 44. 3.Shop情報の設定 44 / 108
  45. 45. Shop情報の設定 mBaaSにShop情報を用意する(データストア) 以下の手順でデータストアに「Shop」という名前のクラスを作成します ニフティクラウド mobile backendのダッシュボードから「データストア」 を開く 「+作成▼」ボタンをクリックし、「インポート」をクリックします クラス名に「Shop」と入力します ダウンロードしたプロジェクトにあるSettingフォルダ内の「### Shop.json### 」を選択してアップロードします 45 / 108
  46. 46. Shop情報の設定 mBaaSにShop情報を用意する(データストア) ダッシュボードでデータがインポートされていることを確認しましょう 46 / 108
  47. 47. Shop情報の設定 mBaaSにShop情報を用意する(ファイルストア) 以下の手順で各icon・Shop画面・リッチプッシュで使用する画像をmBaaSに 設定します 「ファイルストア」を開き、「↑アップロード」ボタンをクリックします ダウンロードしたサンプルプロジェクトにあるSettingフォルダ内の 「icon」「Shop」「Sale」内にあるファイルをすべてをアップロードしま す 47 / 108
  48. 48. Shop情報の設定 mBaaSにShop情報を用意する(ファイルストア) ファイルストアでファイルがアップロードされていることを確認しましょう 48 / 108
  49. 49. Shop情報の設定 データストア:「Shop」クラスのデータを取得 これからデータストアに入っているショップデータの取得を実装していきます 49 / 108
  50. 50. Shop情報の設定 データストア:「Shop」クラスのデータを取得 HTMLフォームコードは index.htmlにて確認できます <!--[5TOP]メインページ --> <divdata-role="page"id="TopPage"data-theme="t"> <--省略 --> <uldata-role="listview"data-theme="e"id="listShop" > </ul> <--省略 --> </div> 50 / 108
  51. 51. Shop情報の設定 データストア:「Shop」クラスのデータを取得 app.jsのshowShopList()を開きます インポートしたShopクラスのデータを取得する処理を実装します BEFORE //【mBaaS:データストア】「Shop」クラスのデータを取得 AFTER //【mBaaS:データストア】「Shop」クラスのデータを取得 //「Shop」クラスのクエリを作成 varShopClass=ncmb.DataStore("Shop"); // データストアを検索 ShopClass.fetchAll() .then(function(shops){ //検索成功時の処理 }) .catch(function(error){ //検索失敗時の処理 }); 51 / 108
  52. 52. Shop情報の設定 データストア:「Shop」クラスのデータを取得 それぞれ処理を追記します 検索成功時の処理 //検索成功時の処理 shopList=convertShopList(shops); //shopArrayに取得しやすいショップのobjectIdと「Shop」クラスの情報を保持 shopArray=shops; //listShopの内容を設定 for(vari=0;i<shops.length;i++){ varshop=shops[i]; vartmpStr='<liclass="ui-li-has-thumb"><aid="ShopBtn"href="#"onclick="showShopDetail('' +shop.name+'</a></li>'; $("#listShop").append(tmpStr); } //listShopの内容を更新 $('#listShop').listview('refresh'); 52 / 108
  53. 53. Shop情報の設定 データストア:「Shop」クラスのデータを取得 それぞれ処理を追記します 検索失敗時の処理 //検索失敗時の処理 alert(error.message); 53 / 108
  54. 54. Shop情報の設定 ファイルストア:icon画像の取得 54 / 108
  55. 55. Shop情報の設定 ファイルストア:icon画像の取得 今回の実装は公開ファイル機能を利用して、アプリの画像を取得します 公開ファイルとは 「公開ファイル」機能とは、ファイルストアに保存した画像をリンクでア クセスできるようにする機能です ファイルストアに登録した画像を「公開ファイル」にする必要があります 55 / 108
  56. 56. Shop情報の設定 ファイルストア:icon画像の取得 mBaaSのダッシュボードで、公開ファイル設定「HTTPでの取得」を有効にし ます 56 / 108
  57. 57. Shop情報の設定 ファイルストア:icon画像の取得 公開ファイルURL確認方法 ファイルストアで公開ファイルURLを確認できます https://mb.api.cloud.nifty.com/2013-09-01/applications/[アプリケID]/publicFiles/[ファイル名] 57 / 108
  58. 58. Shop情報の設定 ファイルストア:icon画像の取得 app.jsの「YOUR_APP_ID」をmBaaSのアプリケーションIDに書き換えます 「ダッシュボード」を選択し、URLから「YOUR_APP_ID」を確認してくださ い varapplicationID="YOUR_APP_ID"; 58 / 108
  59. 59. Shop情報の設定 ファイルストア:icon画像の確認 59 / 108
  60. 60. Shop情報の設定 ファイルストア:Shop画面の画像の取得 上記同様、ショップ詳細画像の表示を実装します 60 / 108
  61. 61. Shop情報の設定 ファイルストア:Shop画像の取得 app.jsのshowShopDetail()を開きます Shop画面に各ショップの画像をmBaaSから取得して表示する処理を実装しま す BEFORE //【mBaaS:ファイルストア②】Shop画像の取得 61 / 108
  62. 62. Shop情報の設定 ファイルストア:Shop画像の取得 AFTER //【mBaaS:ファイルストア②】Shop画像の取得 currentShopId=shopId; varshopTmp=shopList[shopId]; $("#shopName").text(shopTmp.name); $("#shopImage").attr("src",publicFileUrl+shopTmp.shop_image); //お気に入り登録されている場合の表示設定 if(currentLoginUser.favorite.indexOf(shopId)>=0){ //お気に入り登録された場合の♥ 表示 $("#favoriteImage").attr("src","images/favorite.png"); //お気に入り登録ボタンを非アクティブ表示 $("#FavoriteBtn").addClass('ui-disabled'); }else{ //お気に入り登録された場合の♡表示 $("#favoriteImage").attr("src","images/nofavorite.png"); //お気に入り登録ボタンをアクティブ表示 $("#FavoriteBtn").removeClass('ui-disabled'); } 62 / 108
  63. 63. Shop情報の設定 動作確認(2)会員情報登録とShop情報表示_ トップ画面が表示されます このとき、 画面に「icon画像」「Shop名」が表示されます Shopを1つ選んでタップします mBaaSに登録されているimageにアクセスし、Shopページ(画像)が表示 されます 会員ページをタップします 初回登録画面で登録した内容と、ログイン用のアドレスを表示しています エラーコード一覧 63 / 108
  64. 64. Shop情報の設定 動作確認(3)会員情報登録とShop情報表示 64 / 108
  65. 65. お気に入り登録機能の作成 お気に入り機能について お気に入り機能は好きなShopをお気に入りとして保存できる機能です 「お気に入り」画面と「Shop」画面で登録可能です 65 / 108
  66. 66. お気に入り登録機能の作成 お気に入り機能について 「お気に入り」画面ではSwitchのON/OFFを設定し、「お気に入りを更新す る」ボタンで設定します ショップ詳細画面ではまだお気に入り登録していない場合、「お気に入りを登 録」をタップすることでShop単位で設定できます 「♥」…ON  「♡」…OFF 66 / 108
  67. 67. お気に入り登録機能の作成 お気に入り機能について 67 / 108
  68. 68. お気に入り登録機能の作成 会員管理④:ユーザー情報の更新(お気に入り画面) app.jsのonUpdateFavoriteBtn()を開きます mBaaSの会員データとして保持していた「favorite」データを、お気に入り画 面で設定したデータに更新する処理を実装します コメントの直下に追加します 68 / 108
  69. 69. お気に入り登録機能の作成 会員管理④:ユーザー情報の更新(お気に入り画面) BEFORE //【mBaaS:会員管理④】ユーザー情報の更新 69 / 108
  70. 70. お気に入り登録機能の作成 会員管理④:ユーザー情報の更新(お気に入り画面) AFTER //【mBaaS:会員管理④ユーザー情報の更新 //ONを設定している項目を取得 vararray=[]; $('[name=favorite_shop]').each(function(){ vartmp=$(this).val(); if(tmp!="off"){ array.push(tmp); } }); //ログイン中のユーザーの更新favoriteを設定 currentLoginUser.favorite=array; //ユーザー情報を更新 currentLoginUser.update() .then(function(currentLoginUser){ //【mBaaS:プッシュ通知③】installationにユーザー情報を紐づける alert("お気に入り情報更新に成功しました"); showFavorite(); }) .catch(function(error){ //更新に失敗した場合の処理 alert("お気に入り登録に失敗!次のエラー発生:"+error); 70 / 108
  71. 71. お気に入り登録機能の作成 会員管理⑤:ユーザー情報の更新(Shop画面) app.jsのonFavoriteBtn()を開きます 同様にmBaaSの会員データとして保持していた「favorite」データを、Shop画 面で設定したデータに更新する処理を実装します 71 / 108
  72. 72. お気に入り登録機能の作成 会員管理⑤:ユーザー情報の更新(Shop画面) BEFORE //【mBaaS:会員管理⑤】ユーザー情報の更新 72 / 108
  73. 73. お気に入り登録機能の作成 会員管理⑤:ユーザー情報の更新(Shop画面) AFTER //【mBaaS:会員管理⑤】ユーザー情報の更新 //ログイン中のユーザーのお気に入り情報(favorite)を設定 currentLoginUser.favorite.push(currentShopId); //ユーザー情報を更新 currentLoginUser.update() .then(function(currentLoginUser){ //【mBaaS:プッシュ通知④】installationにユーザー情報を紐づける //更新に成功した場合の処理 alert("お気に入り登録に成功"); showShopDetail(currentShopId); }) .catch(function(error){ //更新に失敗した場合の処理 alert("お気に入り登録に失敗!次のエラー発生:"+error); }); 73 / 108
  74. 74. お気に入り登録機能の作成 動作確認(4)お気に入り情報登録・更新 ログインをするとトップ画面が表示されます 画面下の「お気に入り」をタップします お気に入り画面が表示されるので、登録してみましょう 各Shop画面でも同様に登録してみましょう お気に入りが反映しているかどうかを確認してください 74 / 108
  75. 75. お気に入り登録機能の作成 動作確認(4)お気に入り情報登録・更新 75 / 108
  76. 76. プッシュ通知を送信 このあとのデバッグについて 以下の用意が必要です デバッグ用の実機 (iOS, Android) プッシュ通知用証明書 (iOSの場合) プッシュ通知用APIキー (Androidの場合) ※ Androidの場合、既にGCMにてプロジェクトの作成・GCMの有効化設定を終えている場合は、 APIキーは継続してご利用いただくことが可能です。新規の場合、FCMで作成する必要があります。 APIキー、証明書の取得がまだの場合は下記をご参照ください 【サンプル】アプリにプッシュ通知を組み込もう! 76 / 108
  77. 77. プッシュ通知を送信 mBaaSの設定(iOS) プッシュ通知の許可とAPNsの証明書(p12形式)のアップロードを行います 77 / 108
  78. 78. プッシュ通知を送信 mBaaSの設定(Android) プッシュ通知の許可とAPIキーの設定を行います 78 / 108
  79. 79. プッシュ通知を送信 プッシュ通知①:デバイストークンの取得 app.jsのfunction()を開きます 以下のコメントの直下にコードを追加 BEFORE //【mBaaS:プッシュ通知①】デバイストークンの取得し、サーバへ登録処理 79 / 108
  80. 80. プッシュ通知を送信 プッシュ通知①:デバイストークンの取得 AFTER //【mBaaS:プッシュ通知①】デバイストークンの取得し、サーバへ登録処理 document.addEventListener("deviceready",function(){ //デバイストークンを取得してinstallationに登録する window.NCMB.monaca.setDeviceToken( appKey, clientKey, sender_id ); setTimeout(function(){ //currentInstallationの情報を取得 window.NCMB.monaca.getInstallationId(function(id){ //JavaScriptSDKのInstallationクラスを利用して端末情報を取得 ncmb.Installation.fetchById(id) .then(function(installation){ //サーバから取得した結果をcurrentInstallationに保存 currentInstallation=installation; }) .catch(function(err){ //エラー処理 }); }); },20000); },false); 80 / 108
  81. 81. プッシュ通知を送信 プッシュ通知①:デバイストークンの取得 Androidの場合、SENDER_ID を設定します 81 / 108
  82. 82. プッシュ通知を送信①セグメント配信 プッシュ通知②:installationにユーザー情報を紐づける app.jsのonRegisterBtn()を開きます セグメント配信のために必要なユーザー情報をinstallationに紐付けるための処 理を実装します 実装箇所は「【mBaaS:会員管理③】ユーザー情報更新」の更新成功時の 処理内です 以下のコメントの直下にコードを変更します(追記ではありません) BEFORE //【mBaaS:プッシュ通知②】installationにユーザー情報を紐づける alert("会員情報登録に成功"); //お店一覧画面遷移 showShopList(); 82 / 108
  83. 83. プッシュ通知を送信①セグメント配信 プッシュ通知②:installationにユーザー情報を紐づける AFTER //【mBaaS:プッシュ通知②】installationにユーザー情報を紐づける if(currentInstallation){ //ユーザー情報を設定 currentInstallation.prefecture=prefecture; currentInstallation.gender=gender; currentInstallation.favorite=[]; //installation情報の更新 currentInstallation.update() .then(function(installation){ //installation更新成功時の処理 }) .catch(function(error){ //installation更新失敗時の処理 }); }else{ alert("会員情報登録に成功"); //お店一覧画面遷移 showShopList(); } 83 / 108
  84. 84. プッシュ通知を送信①セグメント配信 プッシュ通知②:installationにユーザー情報を紐づける それぞれ処理を追記します //installation更新成功時の処理 alert("会員情報登録に成功"); //お店一覧画面遷移 showShopList(); 84 / 108
  85. 85. プッシュ通知を送信①セグメント配信 プッシュ通知②:installationにユーザー情報を紐づける それぞれ処理を追記します //installation更新失敗時の処理 alert("installation更新(ユーザー登録)に失敗しました:)"+error.code); 85 / 108
  86. 86. プッシュ通知を送信①セグメント配信 プッシュ通知③:installationにユーザー情報を紐づける 同様に、お気に入り画面・Shop画面でお気に入り情報が更新されるたびに、 installation情報も書き換えます 86 / 108
  87. 87. プッシュ通知を送信①セグメント配信 プッシュ通知③:installationにユーザー情報を紐づける app.jsのonUpdateFavoriteBtn()を開きます 以下のコードを更新します(追記ではありません) BEFORE //【mBaaS:プッシュ通知③】installationにユーザー情報を紐づける alert("お気に入り情報更新に成功しました"); showFavorite(); 87 / 108
  88. 88. プッシュ通知を送信①セグメント配信 プッシュ通知③:installationにユーザー情報を紐づける AFTER //【mBaaS:プッシュ通知③】installationにユーザー情報を紐づける //更新に成功した場合の処理 if(currentInstallation){ //お気に入り情報を設定 currentInstallation.favorite=array; //installation情報の更新 currentInstallation.update() .then(function(installation){ //installation更新成功時の処理 alert("お気に入り情報更新に成功しました"); showFavorite(); }) .catch(function(error){ //installation更新失敗時の処理 }); }else{ //installation更新成功時の処理 alert("お気に入り情報更新に成功しました"); showFavorite(); } 88 / 108
  89. 89. プッシュ通知を送信①セグメント配信 プッシュ通知④:installationにユーザー情報を紐づける app.jsのonFavoriteBtn()を開きます 以下のコードを更新します(追記ではありません) BEFORE //【mBaaS:プッシュ通知④】installationにユーザー情報を紐づける alert("お気に入り登録に成功"); showShopDetail(currentShopId); 89 / 108
  90. 90. プッシュ通知を送信①セグメント配信 プッシュ通知④:installationにユーザー情報を紐づける AFTER //【mBaaS:プッシュ通知④】installationにユーザー情報を紐づける if(currentInstallation){ //お気に入り情報を設定 currentInstallation.favorite=currentLoginUser.favorite; //installation情報の更新 currentInstallation.update() .then(function(installation){ //更新に成功した場合の処理 alert("お気に入り登録に成功"); showShopDetail(currentShopId); }) .catch(function(error){ //更新に失敗した場合の処理 }); }else{ //更新に成功した場合の処理 alert("お気に入り登録に成功"); showShopDetail(currentShopId); } 90 / 108
  91. 91. プッシュ通知を送信①セグメント配信 動作確認(5)mBaaS準備 もう一度会員情報登録画面を表示するため、mBaaSの会員管理画面で「クラス の編集」をクリックします 「nickname」にチェックを入れて上の「削除」ボタンで削除します 91 / 108
  92. 92. プッシュ通知を送信①セグメント配信 動作確認(5)mBaaS準備 92 / 108
  93. 93. プッシュ通知を送信①セグメント配信 動作確認(6)セグメント配信 実機でアプリをビルドします アプリを起動します iOSの場合、「プッシュ通知」を許可(Yes)を選択ください 93 / 108
  94. 94. プッシュ通知を送信①セグメント配信 動作確認(6)セグメント配信 mBaaSのダッシュボードでは端末が登録さていることを確認します 94 / 108
  95. 95. プッシュ通知を送信①セグメント配信 動作確認(6)セグメント配信 以下のユーザーに絞り込んでプッシュ通知を配信してみましょう shopBをお気に入り登録しているユーザー 今回は登録ユーザーが1人(1端末)なので、shopBをお気に入りに設定してお いてください 95 / 108
  96. 96. プッシュ通知を送信①セグメント配信 動作確認(6)セグメント配信 mBaaSのダッシュボードからShopクラスのデータを開きます shopBの「objectId」をコピーします 96 / 108
  97. 97. プッシュ通知を送信①セグメント配信 動作確認(6)セグメント配信 プッシュ通知を作成します メッセージを入力します 例:ShopBセール開催中! 「iOS端末に配信する」にチェックを入れます 「配信端末」を設定します 97 / 108
  98. 98. プッシュ通知を送信①セグメント配信 動作確認(6)セグメント配信 「installationクラスからの絞込み」を選択します 絞り込み設定をします ここでコピーしたShopBのobjectIdを貼り付けます 98 / 108
  99. 99. プッシュ通知を送信①セグメント配信 動作確認(6)セグメント配信 「1端末に向けて送信されます」と表示されればOKです 「プッシュ通知を作成する」をクリックします 少し待つと配信されます→端末を確認! 99 / 108
  100. 100. プッシュ通知を送信①セグメント配信 動作確認(6)セグメント配信 いろいろなパターンで送ってみましょう! 別のショップを絞り込み 性別で絞込み ShopAをお気に入り登録かつ女性で絞込み ShopDをお気に入り登録かつ東京都で絞込み etc... 100 / 108
  101. 101. プッシュ通知を送信②リッチプッシュ リッチプッシュについて プッシュ通知登録時にURLを指定することで、開封時にWebビューを表示でき る機能です プッシュ通知開封でアプリが起動するときに表示されます アプリ起動中には表示されませんので閉じる必要があります(iOS仕様) 101 / 108
  102. 102. プッシュ通知を送信②リッチプッシュ リッチプッシュについて 今回はShopのセール画像を「公開ファイル」機能を利用して配信します 102 / 108
  103. 103. プッシュ通知を送信②リッチプッシュ リッチプッシュについて リンクはファイルストアで画像を選択すると表示されます セール画像を1つ選択し、リンクをコピーしてください 103 / 108
  104. 104. プッシュ通知を送信②リッチプッシュ リッチプッシュについて ブラウザでリンクをたたいて確認してください! 104 / 108
  105. 105. プッシュ通知を送信②リッチプッシュ 動作確認(7)リッチプッシュ 実機でアプリをビルドします アプリを一旦完全に閉じます プッシュ通知を作成します URL欄に作成した公開ファイルのURLを貼り付けます そのまま送信してみましょう 105 / 108
  106. 106. プッシュ通知を送信②リッチプッシュ 動作確認(7)リッチプッシュ 106 / 108
  107. 107. まとめ 学んだこと mBaaSの各機能を使用してアプリ作成方法を学んだ! 会員管理機能・データストア・ファイルストア・プッシュ通知をマスター ◎ プッシュ通知の活用方法がわかった! 絞り込み配信・リッチプッシュをマスター◎ 107 / 108
  108. 108. 参考 開催中のセミナーのご案内 ハンズオン内容が実装された完全版プロジェクト MonacaAdvancePush【完成版】 コードはGitHubに公開しています full_version:完成版 handson_version:セミナー版 108 / 108

×