Amazon SNSとAdobe PhoneGap Buildを利用したプッシュ通知アプリの作成

| 1件のフィードバック

BaaS(Backend as a service)の普及により、より手軽にスマートデバイス向けのアプリが開発できるようになりました。

そこで今回は、ハイブリッドアプリケーション向けのビルドサービス「Adobe PhoneGap Build」を利用してビルドしたアプリに、マルチデバイス対応の通知サービス「Amazon SNS」でプッシュ通知してみたいと思います。

サンプルアプリ作成

Adobe PhoneGap Buildでアプリをビルドするためのソースを作成します。

サンプルのダウンロード

以下のページからサンプルをダウンロードします。
https://github.com/phonegap-build/PushPlugin

任意のフォルダを作成しダウンロードしたサンプルから「Example/www」フォルダをコピーして配置します。

push-notification-sample
  +- www

設定ファイルの作成

ダウンロードしたサンプルには設定ファイルが存在しませんのでconfig.xmlを作成し
プッシュ通知用プラグインの設定を記述します。

保存場所

push-notification-sample
  +- www
    +- config.xml

config.xmlの内容

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns = "http://www.w3.org/ns/widgets" xmlns:gap = "http://phonegap.com/ns/1.0" id = "com.example.push-notication-sample" version = "1.0.0">

    <name>Push Notification Sample</name>
    <description>Push Notification Sample</description>
    <author email="dev@example.com" href="http://example.com">Example</author>

    <gap:plugin name="org.apache.cordova.device" />
    <gap:plugin name="com.phonegap.plugins.pushplugin" />

    <icon src="icon.png" />
    <access origin="*"/>
</widget>

Config.xmlファイルの仕様については以下のページを参照してください
http://cordova.apache.org/docs/ja/3.5.0/config_ref_index.md.html

Googleプロジェクト作成

Android端末へプッシュ通知するにはGCM(Google Cloud Messaging)を利用します。
Google Developer Consoleでプロジェクトを作成します。
1.create-google-project

APIsメニューにて「Google Cloud Messaging for Android」をONにします。
enable-gcm-api

プロジェクトナンバーをindex.htmlの52行目のsenderIDに設定します。
1.project-no

index.htmlの52行目

pushNotification.register(successHandler, errorHandler, {"senderID":"120281718381","ecb":"onNotification"});

ソースのビルド

Adobe PhoneGap Buildにサインインし、「push-notification-sample」フォルダをzip形式で圧縮したファイルをアップロードします。
1.phongap-build-upload

アップロードが完了したらビルドを開始します。
1.phongap-build-build-start

ビルドが完了したら以下のように各OS向けのアプリがビルドされます。
Android端末のブラウザでAdobe PhoneGap Buildにアクセスしアプリのインストールを行います。
4-08.app-install1

Amazon SNSの設定

アプリケーション作成

Google Developer ConsoleのCredentialsメニューでAPIキーを取得します。

4-01.gcm-api-key-1

4-02.gcm-api-key-2

Amazon SNSのコンソール画面でアプリケーションを新規作成します。「Push Platform」はGoogle Cloud Messaging(GCM)、「API KEY」に取得したAPIキーを設定しておきます。
4.create-aws-sns-app

エンドポイントの設定

エンドポイントに追加するために先ほどインストールしたアプリケーションを開きデバイスIDをコピーします。
4-04.device-id

コピーしたデバイスIDをエンドポイントに追加します。
4-05-1.add-endpoint

Publishボタンを選択してメッセージを送信します。
4-06-1.publish

メッセージタイプをJSON形式に選択すれば、アプリケーションにJSONデータをパラメータとして渡すこともできます。
4-06-3.publish

Androidの通知センターにメッセージが届き、アプリケーションにも通知されます。

4-09.notification-center

4-10.receive-message

次回はAmazon SNSのAPIを利用したプッシュ通知の方法について紹介したいと思います。

Amazon SNSとAdobe PhoneGap Buildを利用したプッシュ通知アプリの作成」への1件のフィードバック

  1. Scott Bolinger

    Hi, thank you for this article, I think there is a lot of people who want to integrate Phonegap Build with Amazon SNS. I would love to see the next article about using the API like you mentioned.

    Thanks!

    返信

Scott Bolinger にコメントする コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>