読者です 読者をやめる 読者になる 読者になる

アプリカンブログ

HTML5でiOS/Androidアプリが開発できるプラットフォーム、アプリカンのブログです。

アプリカンでプッシュ通知を受け取る(iOS編)

アプリマーケティングにおいて大事な要素になるプッシュ通知。アプリカンで作成したアプリでももちろん使うことができます。サイト上ではpopinfoを紹介していますが、AWSや独自の開発、アピアリーズニフティクラウド mobile backendなどのmBaaSサービスを使ったプッシュ通知も可能です。

そこで今回はまずiOSでのプッシュ送信方法について紹介します。なおiOS Dev Centerのアカウントは既にお持ちであることを前提としています。

アプリカンでの設定

プッシュ通知はアプリカンシミュレータでは確認できません。そのためアプリ設定に加えてビルド設定も行います。プロジェクトのビルド設定にあるiOSアプリ設定を開きます。

iOSアプリ設定

アプリ設定

Bundle identifierはiOS Dev Centerで作成するものと合わせてください。更新は一度しかできませんので間違えないように入力してください。

続いて追加オプション設定を開き、PUSH通知機能を使用する設定にしてください。

プッシュ通知を有効に

iOSビルド設定

次にiOSビルド設定を行います。こちらは秘密キーの登録、iOS開発証明書の登録、プロビジョニングの登録になります。いずれもiOS Dev Centerでの作業になります。

iOSビルド設定

アプリのコード

今回はプッシュ通知の確認になりますので以下のようなHTMLになりました。

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, initial-scale=1.0, user-scalable=no">
    <title>Sample</title>
    <script type="text/javascript" charset="utf-8" src="js/applican.js"></script>
  </head>
  <body>
    <script>
      document.addEventListener("deviceready", onDeviceReady, false);
      function getPushTokenSuccess(res){
        alert(res);
        var token = res.pushToken;
        prompt("トークンはこちらです", token);
      }
      function getPushTokenError(err) {
        alert(err);
      }
      function onDeviceReady(){
        applican.device.getPushToken(getPushTokenSuccess, getPushTokenError);
      }
    </script>
  </body>
</html>

applican.device.getPushToken にてプッシュ通知に使うトークンが得られます。取得できた時のコールバックは getPushTokenSuccess になります。本来、こういったトークンはサーバサイドに保存するのですが、今回は用意していませんのでJavaScriptのプロンプトに表示してコピーすることにします。

アプリのビルド

HTMLコードを上記のものとしてアプリカンの管理画面でアップロードし、ビルドを行います。

ビルド中

ビルドが終わるとビルド履歴に表示されます。

ビルド完了

ビルドが終わったら iOSデバイスからアプリカンにログインし、アプリをインストールします。

iOSで実行

iOSアプリを立ち上げるとプッシュ通知を利用する可否ダイアログが表示されます。これはiOSアプリ設定にあったプッシュ通知を使うという設定にしたからです。

通知の可否

通知を許可するとトークンが取得できて、その結果がプロンプトに表示されます。この文字をコピーしてメールやメモなどのアプリを通じて母艦で送ります。

トークン

これで準備は完了です。

プッシュ通知を飛ばしてみる

プッシュ通知を飛ばす方法は幾つかありますが、今回はローカルから送信してみます。使うのは Houston というRubyライブラリです。インストールは gem install houston でできます。

Houstonのロゴ

下準備として、証明書のp12ファイルをpem形式に変換します。まず、キーチェーンアクセスに入っている iOS Push Servicesを書き出します。

キーチェーンアクセス

パスワードは適当に設定してください。

パスワード設定

作成したp12ファイル(今回はpush.p12)を指定して下記コマンドを実行します。

$ openssl pkcs12 -in push.p12 -out push.pem -nodes -clcerts
Enter Import Password:
MAC verified OK

これでpemファイル(今回はpush.pem)が生成されます。

HoustonはCLIが用意されています。

apn push "TOKEN" -c push.pem -m "こんにちはアプリカン" -P '{"uri":"local://index.html?test=test"}'

この処理の場合外部サービスを経由せずに直接APNsに接続しているのですぐに通知が確認できます。

プッシュ通知を受信

ここで大事なのは {"uri":"local://index.html?test=test"} というペイロードです。uriというキーで local://index.html?hogehoge といった形でプッシュ通知を送るとアプリカンアプリ側でこの内容を受け取れるようになります。例えば、deviceReadyを次のように変更します。

function onDeviceReady(){
  alert(location.search);
  applican.device.getPushToken(getPushTokenSuccess, getPushTokenError);
}

このようにしてプッシュ通知を開くとダイアログが次のように表示されます。

プッシュ通知で処理分けする

この文字列は好きなように送れますのでユーザIDをつけたり、イベント名や開く画面を指定すると言ったような使い方もできます。単純にアプリを開くだけでなく、様々な使い方が考えられるでしょう。


いかがでしょうか。アプリカンでのプッシュ通知は管理画面の設定とアプリ側でのトークンの取得だけで簡単にできます。もちろん本格運用する際にはサーバサイドの仕組みが必要になるでしょう。ぜひアプリマーケティングにお役立てください。

アプリカン | アプリ開発支援プラットフォーム