2015年2月17日火曜日

ニフティクラウドmobile backendでiOSにプッシュ通知してみた

概要

これから始めるプッシュ通知の一連流れを試してみたいと思います
最終的にはニフティクラウドmobile backend(以下NCMB)のコンパネからプッシュ通知が送信できるようになります
出来る限り詳細に書いたつもりなので長いです

環境

  • Mac OS X 10.10
  • iPhone 5 ( iOS 8.1.3 )
  • Xcode 6.1.1
  • Developer Center 2015/02/17 時点でのUI
  • ニフティクラウド mobile backend 2015/02/17 時点でのUI
  • NCMB iOS SDK 2.0.5

試す

いきなりですが

いきなり超ハードルが高いのですがiPhoneアプリを作ることになるのでAppleIDを取得してiOSのDeveloperProgramに登録する必要があります
個人的にはこれが一番ハードルが高いです(面倒でコストもかかるので。。。)
有料です(8,000円/年くらいかと思ったら11,800円/年に値上げされてた)
これがクリアできないと先に進めません
アクティベーションが完了してDeveloperCenterにログインできるようになり、証明書が作成できればOKです

あと環境には書いていますが、MacとiPhoneの実機も必要です

DeveloperCenterでの作業

CSRの作成

ここだけMac上での作業になります
作成方法はこちらを参照してください
最終的には「CertificateSigningRequest.certSigningRequest」というファイルが作成できればOKです

App IDの作成

DeveloperCenterにログインし証明書を作成する画面を表示してください

左メニューの「Identifiers」にある「App IDs」を選択してApp IDを作成します
choose_app_id.png
右上に「+」ボタンがあるのでクリックして作成画面を表示します

「Registering an App ID」という画面になるのでApp IDを作成していきます
regist_app_id.png
以下の項目を確認し入力してください

  • App ID Description・・・好きなApp IDを入力します
  • App ID Suffix・・・Explicit App IDかWildcard App IDを選択します、Bundle IDはXcodeで作成するプロジェクトで指定するBundle IDと同じにする必要があります、今回はExplicit App IDを選択して「kakakikikeke.ios-push-sample」と入力しました
  • App Services・・・Push Notificationsにチェックを入れます

入力し終えたらContinueをクリックします
「Confirm your App ID」という確認画面になるので確認して問題なければSubmitをクリックしApp IDを作成します

一覧に戻って作成したApp IDが存在していればOKです

Certificateの作成

次に左メニューの「Certificates」にある「All」を選択してCertificateを作成します
choose_certificate.png

右上に「+」ボタンがあるのでクリックして作成画面を表示します

「What type of certificate do you need?」という画面になるのでCertificateを作成していきます
regist_certificate.png
以下の項目を確認し入力してください

  • Development or Production・・・開発用の証明書か製品用の証明書か選択します、今回はテストなのでDevelopmentを選択し「Apple Push Notification service SSL (Sandbox)」を選択しました、AppleStoreで公開するアプリであればProductionを選択し「Apple Push Notification service SSL (Production)」を選択してください

選択したらContinueをクリックします

すると「Which App ID would you like to use?」という画面になります
ここでは先ほど作成したApp IDを選択します
choose_app_id_for_certificate.png
選択したらContinueをクリックします

「About Creating a Certificate Signing Request (CSR)」という画面になります
ここでは特に選択や入力する項目はないので内容を確認したらContinueをクリックします

「Generate your certificate.」という画面になります
Upload CSR file. で先ほど作成したCSRを選択してください
choose_csr.png
選択が完了したら「Generate」をクリックして証明書を作成しましょう

一覧に戻って作成した証明書が存在することを確認してください
証明書の作成はこれで完了です

作成した証明書からp12ファイルを作成する

先ほど作成した証明書を選択します、詳細表示にDownloadボタンがあるのでクリックして証明書をダウンロードしてください
download_certificate.png

aps_development.cer というファイルがダウンロードされるのでクリックして「キーチェーンアクセスで開く」を選択します
するとキーチェーンアクセスで開き証明書がローカルのMacにインストールされます
インストールされた証明書を選択し右クリックして「… を書き出す」を選択します
write_p12_file.png

するとp12ファイルを保存するダイアログが出力されるので保存するフォルダを指定して「保存」をクリックします
save_p12.png

パスワードを入力する画面が出るのでここは何も入力せずにOKをクリックします
パスワードを入力するとプッシュが送信できないので入力しないようにしてください
input_password.png

p12ファイルが作成されていることを確認しましょう
これでp12ファイルの書き出しは完了です

ここまでで70%くらい完了しました

NCMBでの作業

ここからはこれをやっていきます
以下の作業は@niftyIDが必要になるので事前に取得しておいてください、@niftyIDの取得方法は省略します

アプリを作成する

まずNCMBのダッシュボードにログインします
https://console.mb.cloud.nifty.com
アプリが1つもないとはじめにアプリを作ることになるのでアプリ名を入力して作成します
create_app.png
使えない文字があるので注意してください
入力が完了したら「新規作成」をクリックし作成します
次の画面でOKをクリックするとダッシュボードに遷移します
これでアプリの作成は完了です

アプリの設定をする

以下をコンパネから順次設定していきます

ダッシュボード -> アプリ設定 -> プッシュ通知

「許可する」を保存

ダッシュボード -> アプリ設定 -> プッシュ通知

iOSプッシュ通知に作成したp12ファイルを選択してアップロード

ダッシュボード -> アプリ設定 -> 基本

APIキーのアプリケーションキーとクライアントキーをコピーしておく

アプリの設定は以上です
ここまでで80%くらい完了です

Xcodeでサンプルアプリの作成

Xcodeが必要になるのでAppleStoreからダウンロードしておいてください
ここからはこれをやっていきます

プロジェクトの作成

Xcodeを起動してプロジェクトを作成しましょう(SSは省略します)
新規で問題ないので「Create a new Xcode project」を選択してプロジェクトを作成します
「Single View Application」を選択してNextをクリックします
「Choose options your new project」では以下のように入力します

  • Product Name・・・好きなプロジェクト名を入力してください
  • Organization Name・・・好きな組織名を入力してください
  • Organization Identifier・・・ios-push-sample
  • Language・・・Objective-C
  • Devices・・・Universal

ポイントはOrganization IdentifierでこれはDeveloperCenterで作成したApp IDの後ろの部分と同じにする必要があります
Bundle IDという概念がありこれがXcode側とDeveloperCenter側で同じ値である必要があります

必要な内容を入力したらNextをクリックしてプロジェクトを保存するディレクトリを指定したらCreateをクリックしてプロジェクトの作成します

Bundle Identifierの確認

プロジェクトの作成が完了したら「Bundle Identifier」を確認します
先程も言いましたがここがApp IDと同じになるように修正します
confirm_bundle_id.png

「.」以降はここでは修正できません
プロジェクトを作成した際のOrganization Identifierに紐付いているので間違えた場合はプロジェクトを作成し直してください(もしくはApp IDを作成しなおしてください)

XcodeとDeveloperCenterの証明書情報を同期

これをやりましょう
これをやることでDeveloperCenterにDevelopment用のProvisioning Profileが作成されます
いきなり出てきたProvisioning Profileですが、これをプロジェクトに設定することでDeveloperCenterとの情報と紐付けます

DeveloperCenterでProvisioning ProfilesからAllを選択し、一覧からXcodeで作成されたProvisioning Profileを選択すれば詳細を確認できます
choose_provisioning.png

confirm_provisioning.png

このProvisioning Profileはあとで使用します

Teamを設定する

先ほど設定したBundle Identifierと同じ箇所に「Team」というのがあるのでそこに登録した自分のAppleIDを選択しましょう

Build SettingsにProvisioning Profileを設定する

プロジェクトの設定にBuild Settingsというタブがあるので選択します
その中の設定項目に「Provisioning Profile」という欄があるのでここに先ほど作成されたProvisioning Profileを選択します

Xcodeに「Provisioning Profile」という欄がない場合はTeamの設定箇所の下に「Fix Issue」というボタンがあるのでこれを押してみましょう
適当なProvisioning Profileを設定してくれてBuild Settingsにも設定欄が作成されると思います
これで正しいProvisioning Profileを設定してみてください
config_provisioning_profile.png
※Fix IssueをするとDeveloperCenterにApp IDとProvisioning Profileが自動で生成されるので不要なものは削除してください

実機を接続して実機にProvisioning Profileを登録する

実機でテストするためにProvisioning Profileを設定する必要があります
MacにiPhoneを接続してください
そしてXcodeで

Window -> Devices

で接続されているデバイスを選択します
choose_device.png

右クリックから「Show Provisioning Profile」を選択します
add_provisioning_profile_to_device.png

するとダイアログが表示されるのでそのダイアログの左下にある「+」ボタンからProvisioning Profileを選択してください
Provisioning ProfileはDeveloperCenterからダウンロードすればOKです(先ほど紹介したProvisioning Profileの詳細確認画面からダウンロードできます)

コーディング

ようやくコーディングです
ここからは先ほどのドキュメントとこれをやっていきます

NCMB iOS SDKのインストール

CocoaPodsを使ってもインストールできますが今回はframeworkをダウンロードしてインストールします
この作業はドキュメントに記載の方法とほぼ同じなので詳細な説明は省略します

zipをダウンロードしてNCMB.frameworkをプロジェクトに追加すればOKです
NCMB.frameworkはプロジェクト内に移動してからLink Binary With Librariesを設定するといいと思います

端末情報をNCMBに登録するコードを記載する

これもドキュメント通りですが、簡単に説明すると

  • AppDelegate.mのヘッダ部分
#import <NCMB/NCMB.h>

先頭のヘッダファイル読み込み部分に上記を追記します
NCMBのSDKを使うためのインポート文です

  • AppDelegate.mのdidFinishLaunchingWithOptions
[NCMB setApplicationKey:@"YOUR_APPLICATION_KEY" clientKey:@"YOUR_CLIENT_KEY"];

didFinishLaunchingWithOptions メソッドに上記を追記します
@"YOUR_APPLICATION_KEY"
@"YOUR_CLIENT_KEY"
はNCMBのアプリ設定画面でメモしておいたアプリケーションキーとクライアントキーを入力してください
これでSDKを通してNCMBのAPIを端末からコールできるようになります

  • AppDelegate.mのdidFinishLaunchingWithOptions
if (NSFoundationVersionNumber > NSFoundationVersionNumber_iOS_7_1){
    UIUserNotificationType type = UIUserNotificationTypeAlert |
    UIUserNotificationTypeBadge |
    UIUserNotificationTypeSound;
    UIUserNotificationSettings *setting = [UIUserNotificationSettings settingsForTypes:type categories:nil];
    [[UIApplication sharedApplication] registerUserNotificationSettings:setting];
    [[UIApplication sharedApplication] registerForRemoteNotifications];
} else {
    [[UIApplication sharedApplication] registerForRemoteNotificationTypes:
     (UIRemoteNotificationTypeAlert |
      UIRemoteNotificationTypeBadge |
      UIRemoteNotificationTypeSound)];
}

先ほどのコードの直後にかけばOKです
デバイスを識別するのID情報(デバイストークン)をAppleから取得します
iOSのバージョンによって取得方法が異なるようです

  • AppDelegate.m
- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken {
    NSLog(@"%@", deviceToken);
    NCMBInstallation *currentInstallation = [NCMBInstallation currentInstallation];
    [currentInstallation setDeviceTokenFromData:deviceToken];
    [currentInstallation save:nil];
}

別メソッドとして定義してください
取得したデバイストークンをNCMB上に保存するためのメソッドです

アプリをビルドして実機にアプリを転送する

実機を接続している状態でビルドするデバイスを実機に変更してください
Xcodeの左上でテストするデバイスを選択できます
choose_real_device.png

これでビルドをして実機上にアプリが転送されアプリが起動することを確認しましょう
起動時にプッシュ通知の許可をするかどうか聞かれるのでOKをタップしてください

アプリの起動が確認できたらNCMBのコンパネを確認してみてください

ダッシュボード -> データストア -> Installtaion

にデバイスIDが登録されていると思います
登録されていない場合はアプリケーションキーとクライアントキーの設定が正しいか確認してください

よし!プッシュを送ってみる

NCMBのコンパネにログインしてプッシュを送ってみましょう

ダッシュボード -> プッシュ通知 -> 新しいプッシュ通知

と移動してプッシュ通知を作成しましょう
特に気にすることはないと思いますポチポチやっていけばOKです
時間指定もできますがテストなので即時配信でいいと思います

「プッシュ通知を作成する」をクリックするとすぐに通知がくると思います
iPhoneでのプッシュ通知はアプリを起動した状態だと通知が見えない(実際には来ているがブーってならない)のでホーム画面に戻してからプッシュ通知を作成してください

きっとプッシュ通知がくるはずです

最後に

いかがでしたでしょうか、正直ボクはややこしすぎると感じました
慣れれば簡単ですが正直慣れてない人にはハードルが高いかなと思います
AppleのAPNSのドキュメントも基本的に英語なので読み解くのも大変でした
コーディングよりも環境構築や設定のほうがだいぶ大変な印象を受けたというのが正直な感想です

0 件のコメント:

コメントを投稿