【Monaca×mobile...

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

ここではで囲んだ部分のファイルを作成して、ビルドできる状態にしておきましょう！

ビルドに必要なファイル

プッシュ通知に必要なファイル

※本編で作成します！


色見本３

準備するもの

•MacMac OS X 10.10.5(Yosemite)以上の環境で動作確認しています。

•Monacaの利用登録アカウントの取得（無料）が必要です。（URL：https://ja.monaca.io/）

• iPhoneXcodeのバージョンと対応するバージョンにする必要があります。

iPhone6（Ver. 9.2.1）で動作確認しています。

• Lightningケーブル

•Apple Developer Programの登録（有償）本セミナーでは有償登録が必須となります。(URL：https://developer.apple.com/programs/jp)

※いずれも最新版をご用意いただくことをお勧めします。

※上記以下の環境では動作しない可能性があります。

3

デスクトップにフォルダを

作っておきましょう

作成した証明書等を保存していきます

https://ja.monaca.io/

https://developer.apple.com/programs/jp

Copyright @ NIFTY Corporation All Rights ReservedCopyright @ NIFTY Corporation All Rights Reserved 4

ビルド環境を整えましょう！必要な証明書やファイルを準備していきます

デスクトップにフォルダを

作っておきましょう

作成したファイルは

ここに保存していきます

前半


色見本３

Monacaにログインする

5


「新規プロジェクトの作成」をクリック

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

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

Apple Developer Programに登録したユーザー名と

アドレスを入力して「秘密鍵とCSRを作成する」

をクリック

「OK」をクリック

秘密鍵が設定されたことを

確認 CSR

作成されたCSRはエクスポートして移動して

おきましょう

Monaca


色見本３

開発用証明書.cerを作成する

12

Apple Developer Programのメンバーセンターにログインします

「Certificates, Identifiers & Profiles」

をクリック

Apple Developer Program

どちらからでも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/

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




色見本３

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

確認



「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


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

http://docs.monaca.mobi/cur/ja/manual/deploy/non_market_deploy/

https://deploygate.com/


色見本３

ビルドしたアプリの確認

48

インストールができたら

アプリをタップして起動します

iPhone

こんな画面が出ればOK！

ビルド完了！！


色見本３

事前準備の最終チェック

49


を書いたText

CSR

証明書.p12

これまでに用意したファイルの確認をしますMonacaから作成

Monacaから作成


色見本３

事前準備の最終チェック

50


を書いたText

これまでに用意したファイルの確認をします

ｷｰﾁｪｰﾝｱｸｾｽから書き出し

ｷｰﾁｪｰﾝｱｸｾｽから書き出し


続きはセミナーで！

当日お会いできることを楽しみに

しております★

51

事前準備は以上です

【Monaca×mobile...

Education

Transcript of 【Monaca×mobile...