【Monaca×mobile backend】プッシュ通知をカンタン実装！スピード感ある開発をしよう！-準備編(iOS)-

Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved
【Monaca×mobile backend】
プッシュ通知をカンタン実装！
スピード感ある開発をしよう！
-準備編（iOS）-
前半：Monacaでビルド環境を整えましょう！
後半：Monacaでビルドしましょう！
1
2016/06/06更新

Copyright @ NIFTY Corporation All Rights Reserved
色見本３
はじめに...
• Androidと違って、iOSのプッシュ通知はちょっと面倒なんです...
参照関係のあるファイルをこんなに作成しないといけません！
2
ここではで囲んだ部分のファイルを作成して、ビルドできる状態にしておきましょう！
ビルドに必要な
ファイル
プッシュ通知に必要
なファイル
※本編で作成します！

色見本３
準備するもの
• Mac
 Mac OS X 10.10.5(Yosemite)以上の環境で動作確認しています。
• Monacaの利用登録
 アカウントの取得（無料）が必要です。（URL：https://ja.monaca.io/）
• iPhone
 Xcodeのバージョンと対応するバージョンにする必要があります。
 iPhone6（Ver. 9.2.1）で動作確認しています。
• Lightningケーブル
• Apple Developer Programの登録（有償）
 本セミナーでは有償登録が必須となります。(URL：https://developer.apple.com/programs/jp)
※いずれも最新版をご用意いただくことをお勧めします。
※上記以下の環境では動作しない可能性があります。
3
デスクトップに
フォルダを
作っておきましょう
作成した証明
書等を保存し
ていきます

Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 4
ビルド環境を整えましょう！
必要な証明書やファイルを準備していきます
デスクトップに
フォルダを
作っておきましょう
作成した
ファイルは
ここに保存して
いきます
前半

色見本３
Monacaにログインする
5
https://ja.monaca.io/
「新規プロジェクトの作成」
をクリック
Monaca

色見本３
プロジェクトを作成する
6
「サンプルアプリ」
タブをクリック
「作成」
をクリック
スクロールすると出てきます↓
特に何も変更せず
「プロジェクトを作成する」
をクリック
プロジェクト
を開きます
Monaca

色見本３
プロジェクトが開きます
7
Monaca

色見本３
ここからは該当する作業を行います
8
初めて
Apple Developer Program
（有償）アカウントを
使用しますか？
CRSファイルと開発用証明書
は既に作成されていますか？
Monacaで作成した
秘密鍵とCSRを使って
開発用証明書.cerを作成して
ビルドする
既に作成されている
秘密鍵.p12と
開発用証明書.cerで
ビルドする
パターン
１
パターン
２
NO
NOYES YES
スライド16へスライド４へ
お持ちのPC
はMac
ですか？
YES
NO
Start

Monacaで作成した
秘密鍵とCSRを使って
開発用証明書.cerを作成して
ビルドする
パターン
１
参考：https://docs.monaca.io/ja/manual/build/ios/build_ios/#step-1-configure-ios-app-in-monaca

色見本３
秘密鍵とCSRを作成する
10
「設定」＞「iOSビルド設定...」をクリックして、iOSビルド設定を開きます
「秘密鍵とCSRの作成...」
をクリック
Monaca

色見本３
秘密鍵とCSRを作成する
11
に登録したユーザー名と
アドレスを入力して
「秘密鍵とCSRを作成する」
をクリック
「OK」
をクリック
秘密鍵が設定
されたことを
確認 CSR
作成された
CSRはエクス
ポートして
移動して
おきましょう
Monaca

色見本３
開発用証明書.cerを作成する
12
Apple Developer Programのメンバーセンター
にログインします
「Certificates,
Identifiers & Profiles」
をクリック
どちらからでもOK
https://developer.apple.com/account/

色見本３
13
「Certificates」＞「All」＞右上の「＋」をクリックして、
「iOS App Development」にチェックをいれます
下の方にある
「Continue」
をクリック

色見本３
「Choose File…」
をクリックして
先ほどMonacaで作成した
CSRファイルを選択
「Continue」
をクリック
14

色見本３
Download
「Done」
をクリック
15
作成した
証明書.cerは
移動して
おきましょう
個別作業はここまで！
スライド20へ

既に作成されている
秘密鍵.p12と
開発用証明書.cerで
ビルドする
パターン
２
参考：https://docs.monaca.io/ja/manual/build/ios/import_export/

色見本３
秘密鍵.p12と証明書.cerを書き出す
「証明書」
を選択
使用する開発用証明書
「iPhone Developer: ****」
を選択します
キーチェーンアクセスを開きますキーチェーンアクセス
17

色見本３
秘密鍵.p12を書き出す
18
選択した開発用証明書で右クリックします
「書き出す」を選択
名前：「秘密鍵」
フォーマット：
「個人情報交換(.P12)」
に設定して
「保存」をクリック
MacのPWを入力して
「許可」をクリック
このアラートが出たら…
作成された
秘密鍵.p12は
移動して
おきましょう
キーチェーンアクセス

色見本３
証明書.cerを書き出す
19
名前：「証明書」
フォーマット：
「証明書(.cer)」
に設定して
「保存」をクリック
作成された
証明書.cerは
移動して
おきましょう
個別作業はここまで！
スライド20へ
同様に
「書き出す」を選択
先程と同様、開発用証明書で右クリックします

ここから共通作業
ここまでで右の
ファイルが
できれいればOK
• AppIDの作成
• 端末の登録 ※既に登録されている場合はこの作業は不要です
• プロビジョニングプロファイルの作成
CSR
※パターン１のみ
※パターン２のみ

色見本３
Apple Developer Programのメンバーセンターにログインする
21
「Certificates,
Identifiers & Profiles」
をクリック
どちらからでもOK
https://developer.apple.com/account/

色見本３
AppIDを作成する
22
「Identigiers」
の「AppIDs」
をクリック
「＋」
をクリック

色見本３
23
App ID Descriptionに
アプリの概要を入力します
任意の名前をつけます
例）「MonacaPushApp」と入力します
MonacaPushApp

色見本３
画面を↓にスクロールします「Explicit App ID」
チェックを入れます
重要：ここで決めた
Bundle ID は
あとで使います！
※Textに控えて保存しておいて下さい！
24
注意：WildcardAppIDでは
プッシュ通知を
送ることはできないので、
選択しないでください！
（事前準備では問題ありませんが、
本編では必須となります）
「Bundle ID」
を入力します
jp. . .monaca.push
BundleID
は任意です

色見本３
さらに画面を↓にスクロールします
「Continue」
をクリックします
「Push Notifications」
にチェックを入れます
25
重要：事前準備では不要ですが、
本編で必要な設定ですので忘れず
にチェックを入れてください！

色見本３
「Push Notifications」が
Configurableになっている
ことを確認しましょう！
「Register」
26
これでAppID
の作成は
完了です！

色見本３
端末を登録する
27
Apple Developer Program左側の「Devices」＞「All」をクリックします
「＋」
をクリック
※既に登録されている場合はこの作業は不要です

色見本３
28
「Register Device」
にチェックを入れる
Nameを入力
（任意）
端末のUDIDを入力
※UDIDの確認方法は
次のページ！

色見本３
端末を登録する-UDIDの確認方法①-
29
iPhoneをMacに
接続します
ここにあります
※コピーして使います
「Window」＞
「Devices」
Xcodeで確認する方法
Xcodeを起動します
※XcodeがMacにない場合は方法②へ

色見本３
端末を登録する-UDIDの確認方法②-
30
iTunesで確認する方法
iPhoneをMacに
接続します
接続するとiTunesが起動します
※起動しない場合は手動で起動してください
ここにあります
※コピーして使います
ここを
クリック
ここを
クリック

色見本３
31
「Continue」
をクリックする
コピーしたUDIDを
貼り付けます

色見本３
32
確認
「Done」
をクリック
「Register」

色見本３
33
一覧に登録された
ことを確認します
これで
端末登録は
完了です！

色見本３
プロビジョニングプロファイルを作成する
34
Apple Developer Program左側の「Provisioning Profiles」＞「All」
「＋」
をクリック

色見本３
35
「iOS App
Development」
をクリック
先ほど作成した
「AppID」
を選択する
AppIDの紐付け

色見本３
36
端末の紐付け開発用証明書
の紐付け
「登録した端末」
を選択する
使用する
「開発用証明書」
を選択する

色見本３
37
ファイルの名前を入力
例）「Monaca Push App Provisioning Profiles」
紐付けの確認
「Continue」
をクリックする
Monaca Push App Provisioning Profiles
MonacaPushApp ( )

色見本３
38
Download
「Done」
をクリック
Monaca Push App Provisioning Profiles
作成したプロビ
ジョニングプロ
ファイルは
移動して
おきましょう
プロビジョニング
プロファイル

Monacaでビルドしましょう！
ここまでの作業で
用意したファイルは
右記です
プロファイルを書いたText
CSR
※パターン２のみ
後半
※MonacaのPersonalプラン以上にすれば回数無制限です

色見本３
Monacaに証明書.cerを設定する
40
Monaca
再びMonacaを開きます
「設定」＞「iOSビルド設定...」をクリックして、iOSビルド設定を開きます

色見本３
41
パターン
２
「インポート」
をクリック
パターン
１
設定済み
※ここでは
何もしません
「Browse...」
秘密鍵を選択、
パスワードは何も入力せ
ず「インポート」
をクリック
秘密鍵が表示さ
れればOK！
※CSRは不要
秘密鍵.p12の設定をします※パターン２の方のみ作業
Monaca

色見本３
42
証明書.cerの設定をします
デベロッパー証明書
の「アップロード」
をクリック
証明書.cerが
表示されれば
OK！
証明書.cerを
設定します
Monaca

色見本３
43
の場合は、次の作業も行っておきます
Monaca
パターン
１
※ アップロードした時点では秘密鍵が
紐付いていない証明書(.cer)ですが、
アップロードすることでMonacaで
発行された秘密鍵が紐付き、
p12形式の証明書に書き換わります！
作成した
証明書.p12は
移動して
おきましょう
証明書.p12が
書き出されます
ダブルクリックして
キーチェーンアクセスで
確認してします
パスワード設定
を求められます
証明書.p12
※パスワードを設定した場合
はキーチェーンアクセスで
入力を求められます。
（空白でもOKです）
アップロード
した証明書を
エクスポート
します
秘密鍵が
あればOK

色見本３
Bundle IDを設定する
44
「設定」＞「iOSアプリ設定...」をクリックして、iOSアプリ設定を開きます Monaca
「App ID」を
Bundle ID
に書き換えます
「保存する」
をクリック
他は
触らなくて
OK！
メモを
チェック！

色見本３
アプリをビルドする
45
「ビルド」＞「iOSアプリのビルド」をクリックして、iOSアプリケーションのビルドを開きます
Monaca
「デバッグビルド」
をクリック
「次へ」を
クリック
「参照...」を
クリックして
プロファイル
を選択
プロファイル
ここに
表示され
ればOK！
「次へ」を
クリック「OK」を
クリック

色見本３
46
ビルドが始まります…
成功するとダウンロードができるようになります
注意：失敗した場合は
前半の作業で作成した
証明書等に間違いがあ
る可能性があります
「ダウンロード」
をクリック
アプリを端末にインストールするには...
「1.ローカルPCに
ダウンロード」
プロジェクト.ipa
を保存します
Monaca

色見本３
1. iTunesを使う方法
• ダウンロードしたプロジェクト.ipaをドラッグ＆ドロップ
2. Xcodeを使う方法
• 詳しくはこちら
http://docs.monaca.mobi/cur/ja/manual/deploy/non_market_deploy/
3. DeployGateを使う方法
• アカウント（無料）を取得し、ダウンロードしたプロジェクト.ipaをドラッグ＆ドロップ
• https://deploygate.com/
ローカルに
ダウンロード
したファイル
アプリのインストール方法
47

色見本３
ビルドしたアプリの確認
48
インストール
ができたら
アプリをタップして
起動します
iPhone
こんな画面が
出ればOK！
ビルド
完了！！

色見本３
事前準備の最終チェック
49
プロファイル
を書いたText
CSR
証明書.p12
これまでに用意したファイルの確認をします
Monaca
から作成
Monaca
から作成

色見本３
事前準備の最終チェック
50
プロファイル
を書いたText
これまでに用意したファイルの確認をします
ｷｰﾁｪｰﾝｱｸｾｽ
から書き出し
ｷｰﾁｪｰﾝｱｸｾｽ
から書き出し

続きは
セミナーで！
当日お会いでき
ることを
楽しみに
しております★
51
事前準備は以上です

【Monaca×mobile backend】プッシュ通知をカンタン実装！スピード感ある開発をしよう！-準備編(iOS)-

More Related Content

Viewers also liked

Similar to 【Monaca×mobile backend】プッシュ通知をカンタン実装！スピード感ある開発をしよう！-準備編(iOS)-

More from natsumo

【Monaca×mobile backend】プッシュ通知をカンタン実装！スピード感ある開発をしよう！-準備編(iOS)-