AndroidでAmazonSNSのプッシュ通知サンプルアプリを作成

クラウドサービスの代表といえば、AWS(Amazon Web Service) ですよね？

そのAWSの『Amazon Simple Notification Service』にも、モバイルデバイスへのプッシュ通知機能が、2013年8月に追加されています。
http://aws.amazon.com/jp/sns/

AWSの無料利用枠で、1ヶ月100万通知迄は無料とのことですので、『Android+Parse.comのプッシュ通知』に続いて、『Android + AmazonSNSによるプッシュ通知』を作成してみました。

（といっても、AWS公式サンプルアプリをダウンロードし、各種設定を行っただけです・・・それで動きます＾＾；）

AmazonSNS と GCM(Google Cloud Messaging for Android) を連携し、Androidモバイルアプリにメッセージを送信します。

[前提条件]

• Amazon Web Service アカウントを作成済であること（１年間無料で利用できます）
• Google アカウントを作成済であること（GCMも無料で利用できます）

[サンプル作成内容]

• AWS公式サンプルアプリをダウンロードし、Androidプロジェクトを作成
• GCMにアプリケーションを登録し、Project Number と API Access Key を取得
• Androidサンプルアプリに、GCMのProjectNumber を設定
• AmazonSNSにアプリケーションを登録し、GCMのAPI-Keyを設定
• AmazonSNSに設定したアプリに、モバイルデバイスの情報を追加
• AmazonSNSに設定したアプリのコンソールから、プッシュ通知

こちらのブログを参考にさせて頂きました

AWS公式
＞http://aws.typepad.com/aws_japan/2013/08/push-notifications-to-mobile-devices-using-amazon-sns.html

クラスメソッド株式会社様 開発ブログ
＞http://dev.classmethod.jp/smartphone/android/amazon-sns-mobile-push/

 

1. AWS公式サンプルアプリをダウンロードし、Androidプロジェクトを作成

　【AWS発表】 Amazon SNS を使ったモバイルデバイスへのプッシュ通知

　上記公式ブログ中段頃にあるリンク サンプルのモバイルプッシュアプリケーション を押下し、ZIP　
　ファイルをダウンロード後、展開します。

　

　AndroidMobilePushAppフォルダを、Androidプロジェクトとして、Eclipse ADT でインポートします。

　インポートしたプロジェクトのプロパティを開き、google-play-service_lib を追加しておきます。

　

 

2. GCMにアプリケーションを登録し、Project Number と API Access Key を取得

　Google apis (https://code.google.com/apis/console/) にアクセスし、任意のプロジェクトを作成します。
（私は『GCMsampleAWS』としました）

　メニュー Overview に、Project Number が表示されます。

　

　メニューから、Service を選択し、『Google Cloud Messaging for Android』 を有効にします。

　

　

　メニューの API Access に、API-Key が表示されます。

　

3. Androidサンプルアプリに、GCMのProjectNumber を設定（デバイスのIDも確認）

　Androidサンプルアプリの、res/values/strings.xml に、GCM で取得した ProjectNumber を設定します。

　

　設定が完了したら、デバッグモードの実機を接続し、実行します。

　無事にアプリケーションが起動したら、デバイス固有の registration_id が表示されます。

　

　Eclipse ADT の LogCat にも表示されているはずなので、コピーしておきます。

　

4. AmazonSNSにアプリケーションを登録し、GCMのAPI-Keyを設定

　AWSコンソール (https://console.aws.amazon.com/console/) から、SNSを選択します。

　

　SNS Dashboard より、Add a New App を押下します。

　

　Application Name を入力、Push Plathome は GCM を選択し、Google Apis で取得した API-Key を入力します。

　

　Add New App を押下し、次の手順に進みます。

5. AmazonSNSに設定したアプリに、モバイルデバイスの情報を追加

　上記 4. の手順後、以下の画面に遷移していると思いますので、Add Endpoints を押下します。

　

　※もし、違った画面が表示されている場合は、SNS Dashboard の Apps から、登録したアプリを選択し、Add Endpoints を押下します。

　

　Device Token に、手順 3. で取得した registration_id を設定します。

　成功メッセージ
　
　

6. AmazonSNSに設定したアプリのコンソールから、プッシュ通知

　SNS Dashboard の Application Details で、登録したデバイスを選択し Publish を押下します。

　

　Message: を入力し、Publish Message を押下すれば、Androidアプリにプッシュ通知が行われます。

　

　Androidアプリが起動していない場合、ステータスバーに通知されます。

　　


以上です。

AndroidでParse.comのプッシュ通知サンプルアプリを作成

MBaaS【Mobile Backend as a Service】と呼ばれるクラウドサービスが、去年辺りから盛り上がっているようです。

米国のParse(www.parse.com)が、無料トライアル可能なので、『Android + Parseによるプッシュ通知』を作成してみました。


Parse に登録したプッシュ通知アプリから、Androidモバイルアプリにメッセージを送信します。

• Parse にサインイン　（メールアドレス、GitHubアカウント、FacebookアカウントでOK）
• Parse にアプリを登録　（アプリ名のみでOK）
• ローカル環境(ADTなど)で、Androidプロジェクトを作成　（デフォルトのHello World! でOK）
• Parse から SDK をダウンロードし、作成したAndroidプロジェクトの libs に配置
• Parse の Start Guide 通りに Androidソースに追記
• Parse に登録したアプリから、Androidアプリにプッシュ通知

こちらの書籍を参考にさせて頂きました
＞『Effective Android』 http://techbooster.org/event/16422/

１．Parse にサインイン（同時にアプリ登録も行われます）

Parse(www.parse.com)



中央にある『Try it for free』をクリック



GitHubアカウントでログインすることにしたので、左下の『Log in with GitHub』をクリック



GitHubのサイトに遷移し、Parseと連携する許可を求められるので、



下にスクロールして、『Allow access』をクリック



GitHubアカウントのパスワードを入力して、



Sign up 完了です。

作成するアプリケーション名を入力して、『Start using Parse』へ

（ちなみに Company type は、individual developer を選択しました）

 

２．Parse の Push QuickStart Guide の開始

　　※あらかじめ、Androidプロジェクトを作成しておきます

上記 Welcome to Parse の Start sending push with Parse を開始します。



（１） platform は、Android を選択。

（２） は、Sign up 時に登録したアプリが選択済みとなっています。

（３） 1. SDKをダウンロード＆展開し、2. ローカルに作成したAndroidプロジェクトの “libs” フォルダに Parse-1.3.5.jar (※2013/10/4現時点) を、配置します。



（３） 3. Androidプロジェクトの MainActivity に追記していきます

　表示されている source のコピー＆ペーストでOK

　（※自分が登録したParseアプリの application id と client key が既にセットされている）

（４） 『uses-permission』 を、AndroidManifest.xml へ追記



（５） プッシュ通知を解析したい場合、MainActivityに追記

（６） AndroidManifest.xml へ追記

　※この状態で、一度Androidアプリを実行します　（実機デバッグでもエミュレータでもOK）

 

３．Parse の ダッシュボードを確認

Push Start Guide のページは、そのままにしておいて、右上ユーザネームにフォーカスし、Dashboard を別タブで開きます。



登録したアプリが表示されているので、Data Browser を選択します。



ここにデバイスが登録されていれば、Parseからのプッシュ通知が可能です。

４．Parse に登録したアプリから、Androidアプリにプッシュ通知

Push Start Guide のページから、テスト通知が行えます。

ページ最下段の Test the SDK で、



『Send Test Push』 をクリック



上記のようなメッセージが表示されます。

Androidアプリをデバッグ実行させていた Nexus7 に、メッセージが届きました。

（※２段目がメッセージ内容です）





Parse のダッシュボードから、任意のメッセージをプッシュ通知してみます。



Push Notifications タブの 『+ Send a push』 をクリック



プッシュ通知するメッセージを入力し、『Send Notification』 をクリック



日本語も問題なくプッシュ通知されました。

Google Maps Android API v2 のサンプルを実機(Nexus7)で動かす。

公式サイト（https://developers.google.com/maps/documentation/android/start）のサンプルを、eclipse ADT (Build: v22.0.5) で作成しました。

上記サイトの手順通り進めて、実機（新Nexus7 Android 4.3）をUSBデバッグモードにて、テストしたところ、サンプルアプリは起動したのですが、画面がグレーとなってMAPが表示されません。


エラーログは、以下が表示されるため、

　Failed to load map. Error contacting Google servers. This is probably an 　authentication issue (but could be due to network errors).

　訳：マップのロードに失敗しました。 Googleのサーバに接触しエラーが発生しました。これはおそらく、認証の問題（ただし、ネットワークエラーが原因である可能性があります）。


検索したところ、stackoverflow に解決策が掲載されていました。

http://stackoverflow.com/questions/17491400/failed-to-load-map-error-contacting-google-servers-issue-with-android-google-ma


【対応内容】

AndroidManifest.xml に以下を追記。

      <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>


再度デバッグ実行したところ、無事にMAPが表示されました。




尚、eclipse ADT のエミュレータでは、別の問題で表示が出来ていません。

対応策が分かったら、Blogに書きたいと思います。

以上です。

CakePHP-2.3.8 にBoostCakeを導入する。

 

CentOS + Apache + MySQL + PHP & CakePHP-2.3.8 に、プラグイン「BoostCake」 を導入する。

CakePHPへ「Twitter Bootstrap 2.3.2 & 3.0.0 に対応したプラグイン BoostCake」を導入します。
　　※１：CakePHP-2.3.8 の導入方法は、こちらの記事参照→CakePHP-2.3.8のセットアップ
　　※２：CakePHP-2.3.8 は、/var/www/html/cakephp238/ にセットアップされています。
　　※３：CakePHP公式サイトの「ブログチュートリアル」を試しています。
　　　　→ http://book.cakephp.org/2.0/ja/getting-started.html#id2
　　※４：参考にさせて頂いた BoostCake 作成者様のサイト

• 忍び歩く男 - SLYWALKER
  
• BoostCake  http://slywalker.github.io/cakephp-plugin-boost_cake/

 

 

1.Twitter Bootstrap v2.3.2 を、ダウンロード後、解凍し、各フォルダへ配置する

　・http://getbootstrap.com/2.3.2/
　　　→ 今回は、TwitterBootstrap の version は、2.3.2 にしました。
　　　　※上記の各js、css、img を、app/webroot 配下の js、css、img に配置しました。

2. Composer の導入

　・github(https://github.com/slywalker/cakephp-plugin-boost_cake)には、『BoostCake のインストールは、Composer で』と書いてあるので、まずはComposer から導入します。

 

　・「venderディレクトリを作成するルートディレクトリ」で、curl コマンドで Composer をインストール
　　　→[ユーザ名@ホスト名 app]$ curl -s http://getcomposer.org/installer | php

  

3. composer.json ファイルを作成し、boost_cake をインストールする

　・以降、こちらのサイト(http://slywalker.github.io/cakephp-plugin-boost_cake/)の手順通りに進めます。
　・app/composer.json を作成

 {
   "require":{
    "slywalker/boost_cake": "*"
   }
 }

　・composer の実行
　　　→[ユーザ名@ホスト名 app]$ php composer.phar install


   

　　　→無事 BoostCake は、app/Plugin 下にセットアップされました。

4. プラグインの読み込みを追記する

　・cakephp238/app/Config/bootstrap.php へ、BoostCake の情報を追記　　

 CakePlugin::load(‘BoostCake’);

5. ヘルパー、Authコンポーネントへの追加

　・app/Controller/AppController.php へ、以下を追加。

  public $components = array(
    'Acl',
    'Auth' => array(
       'authorize' => array(
           'Actions' => array('actionPath' => 'controllers')
       ),
       'flash' => array(
           'element' => 'alert',
           'key' => 'auth',
           'params' => array(
               'plugin' => 'BoostCake',
               'class' => 'alert-error'
           )
       )
    ),
    'Session',
    'DebugKit.Toolbar'
 );
 public $helpers = array(
    'Session',
    'Html' => array('className' => 'BoostCake.BoostCakeHtml'),
    'Form' => array('className' => 'BoostCake.BoostCakeForm'),
    'Paginator' => array('className' => 'BoostCake.BoostCakePaginator'),
 );

6. ACLの登録（ACLを使用している場合）

　・Plugin-ACLを使用している場合、アクションへの権限を許可しておくと、WEBブラウザで、ホスト名/cakephp238/boost_cake にアクセスして、各リファレンスが確認出来ます。

　※Plugin-Acl の導入についてはこちら→CakePHP-2.3.8 に Plugin–Acl を導入する。

WEBブラウザで、ホスト名/cakephp238/admin/acl/acos にアクセスし、Sychronaize ACOs をクリック
 

BoostCakeのアクションが追加される。

 

権限を付与

 

7. default.ctp へ適用してみる

　・CakePHP の View に適用される default.ctp へ、BoostCake を適用します。
　　　　→　app/View/Layouts/default.ctp を編集

　編集前の「Posts index」表示：

 

• head の修正（script の追記、css の追記）

 <head>
     <?php echo $this->Html->charset(); ?>
     <title>
        <?php echo $cakeDescription ?>:
        <?php echo $title_for_layout; ?>
     </title>
     <?php
        echo $this->Html->meta('icon');

        echo $this->Html->script('jquery-1.7.2.min');
        echo $this->Html->script('bootstrap');

        echo $this->Html->css('cake.generic');
        echo $this->Html->css('bootstrap');
        echo $this->Html->css('bootstrap-responsive');

        echo $this->fetch('meta');
        echo $this->fetch('css');
        echo $this->fetch('script');
     ?>

 <style>
   body {
      padding-top: 60px;
   }
   .affix {
      position: fixed;
      top: 60px;
      width: 220px;
   }
   </style>

 </head>

• body の修正（ boostCake の ナビを追記）

 <body>

   <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
         <div class="container">
            <?php echo $this->Html->link('Posts', array(
                'plugin' => 'BoostCake',
                'controller' => 'posts',
                'action' => 'index'
             ), array('class' => 'brand')); ?>
         </div>
      </div>
   </div>

編集後の「Posts index」表示：

  

8. BoostCake導入後のForm

　・編集前の「login」ページ：ホスト名/cakephp238/users/login

  

　・編集後の「login」ページ：ホスト名/cakephp238/users/login

   

9. 表示が崩れてしまったページの対応

　・各Viewページが、崩れてしまっていました。

　・編集前の「Posts View」ページ：ホスト名/cakephp238/posts/view

 

　・編集後の「Posts View」ページ：ホスト名/cakephp238/posts/view

 

　・デフォルトの「dl、dt、dd」 タグ を、無効にすることで、回避しました。

  /** Scaffold View **/
  /*dl {
     line-height: 2em;
     margin: 0em 0em;
     width: 60%;
  }
  dl dd:nth-child(4n+2),
  dl dt:nth-child(4n+1) {
     background: #f4f4f4;
  }

  dt {
     font-weight: bold;
     padding-left: 4px;
     vertical-align: top;
     width: 10em;
  }
  dd {
     margin-left: 10em;
     margin-top: -2em;
     vertical-align: top;
  }
  */

　※とりあえず、この方法で対応しましたが、CSSのコメントアウト以外でどうにかしたいものです。

　・詳細な編集については、http://slywalker.github.io/cakephp-plugin-boost_cake/bootstrap2.html を参考に。


以上です。