目次


Bluemix 対応の Cordova プラグインを追加して、ハイブリッド・モバイル・アプリでプッシュ機能を利用する

Comments

IBM Bluemix には、モバイル端末とクラウド・サービスとの間でやりとりするための強力な SDK のセットが用意されています。これらの SDK の 1 つである Push を使用すると、開発者は Push サービスに端末を登録し、プッシュ通知を送信することや、受信することができるようになります。このチュートリアルでは、ハイブリッド・モバイル・アプリケーション (既存のもの、または新規のもの) において IBM Bluemix 用の新しい Apache Cordova プラグインを有効にして動作させることで、プッシュ機能を利用し始められるようにする方法を紹介します。

Apache Cordova は拡張可能なフレームワークであり、このフレームワークを使用すると、サード・パーティーの開発者がプラグインを作成できるようになります。プラグインは、ネイティブ開発とハイブリッド開発の橋渡しをする役割を果たすものとして、ネイティブ・コードで作成されますが、プラグインへのアクセスには JavaScript インターフェースが使われます。したがって、JavaScript を使用してハイブリッド・アプリケーションを作成したいと思っている開発者にとって、プラグインはネイティブ機能を簡単に呼び出す手段となります。

プッシュ機能をアプリケーションに追加するために必要となるもの

IBM Bluemix 対応の新しい Apache Cordova プラグイン一式は、短時間でモバイル・サービスに接続しようとするハイブリッド・モバイル開発者の役に立ちます。

ステップ 1. Apache Cordova プロジェクトを作成する

すでにハイブリッド・モバイル・プロジェクトがある場合は、ステップ 2 へスキップしてください。

  1. Apache Cordova 用の環境をまだ構築していない場合は、この環境を構築します。それには、Apache Cordova の node パッケージ・モジュールをダウンロードします。
  2. コマンド プロンプトを開きます。
  3. 下記のコマンドを実行することで、新規プロジェクトを作成します。
    cordova create bluemixpush com.example.bluemixpush BluemixPush
  4. cd bluemixpush を実行することで、新しく作成したプロジェクト・ディレクトリーにカレント・ディレクトリーを変更します。
  5. テストに使用するプラットフォームを追加します。以下に一例を示します。
    cordova platform add android

特定のプラットフォームを対象に初めて Cordova プロジェクトを開発する場合は、追加のセットアップ・ステップを実行する必要があります。例えば、Android 環境を構成するには、以下のステップを実行します。
 

  1. Android SDK をダウンロードします。
  2. Android の toolsplatform-tools の場所を PATH に追加します。
  3. ANT をダウンロードしてインストールした場所を PATH 環境変数に追加します。
  4. Java がインストールされている場所が PATH 環境変数に設定されていることを確認します。
  5. オプションで、エミュレーターを実行するため、さらには Eclipse の LogCat 機能を使用してアプリケーションをデバッグするために、ADT をインストール済みの Eclipse をダウンロードしてインストールします。

ステップ 2. IBM Push for Bluemix 用の Cordova プラグインを追加する

  1. Apache Cordova のプラグインのページにアクセスします。
  2. 「IBM」と入力して検索を行い、IBM から入手できるすべてのプラグインを表示します。
  3. 「com.ibm.mobile.cordova.ibmpush」プラグインをクリックして詳細ページを開きます。このページに、Cordova IBMPush Plugin の説明が記載されています。
  4. プラグインをインストールします。Cordova CLI を使用するために、Cordova プロジェクトの中で以下のコマンドを入力します。
    cordova plugin add com.ibm.mobile.cordova.ibmpush
    インストールが完了すると、プロジェクトにインストールされたプラグインが plugins ディレクトリーに表示されます。あるいは、コマンドラインで以下のコマンドを実行してください。
    cordova plugins list
    このコマンドにより、インストール済みのプラグインを表示することができます。

これで、Android 対応ハイブリッド・アプリケーション内で IBM Push for Bluemix を使用する準備が整いました。

ステップ 3. IBM Bluemix をセットアップする

  1. Bluemix にサインインします。
  2. 「DASHBOARD (ダッシュボード)」ビューで、「Applications (アプリケーション)」の下にある「CREATE AN APP (アプリケーションを作成)」をクリックします。
  3. 新しく表示されるページの「Boilerplates (ボイラープレート)」セクションで、「Mobile Cloud」を選択します。
  4. 右側の「Create an app (アプリケーションの作成)」から必要事項を入力します。
  5. このダイアログでは、スペースを選択し、アプリケーション名とホスト名を入力します。
  6. 「CREATE (作成)」をクリックします。これにより、ダッシュボード (DASHBOARD) には、作成したアプリケーションと緑色のステータス・ボタンが表示されます。
  7. 作成したアプリケーションを「Applications (アプリケーション)」セクションでクリックします。表示されるページで「MOBILE OPTIONS (モバイル・オプション)」を展開すると、アプリケーションにバインドされているサービスに加えて、アプリケーション ID (App ID) が表示されます。Bluemix のサービスに接続するには、このアプリケーション ID が必要です。アプリケーション ID の値を書き留めて (どこかにコピーして) おいてください。「Applications (アプリケーション)」セクションのスクリーン・キャプチャー
    「Applications (アプリケーション)」セクションのスクリーン・キャプチャー

ステップ 4. Push サービスについて理解する

  1. Bluemix で新しく作成したモバイル・アプリケーション用のモバイル・アプリケーション情報ページを詳しく調べる際に、「Services (サービス)」セクションにある Push サービスを見つけてください。 「Services (サービス)」セクションのスクリーン・キャプチャー
    「Services (サービス)」セクションのスクリーン・キャプチャー
  2. 「Push」サービスをクリックします。すると、このアプリケーションでプッシュに関連するあらゆるものを含むダッシュボードが表示されます。このダッシュボードを使用して、端末にテスト通知を送ることもできます。

ステップ 5. Bluemix の Push サービスをモバイル・アプリケーションに組み込む

開発モードに入る準備ができたところで、端末を登録するために、Bluemix の Apache Cordova によるプッシュ JavaScript API をハイブリッド・モバイル・アプリケーションに追加します。

  1. お好きな IDE で、ハイブリッド・アプリケーションを開きます (完成版のアプリケーションを複製するには、このチュートリアルの最初のほうにある「コードを入手する」ボタンをクリックしてください)。
  2. www/js ディレクトリーに格納されている index.js ページ (または、別の JavaScript ファイルを使用する場合は、そのファイル) を開きます。
  3. JSON オブジェクトを作成し、以下の構成値を設定します。
    applicationId: 前のステップで書き留めたアプリケーション ID の値
    applicationRoute: アプリケーションが作成された時点でのアプリケーションの URL の値 (例えば、bluemixpush123.mybluemix.net)
    applicationSecret: アプリケーションのセキュリティーのためのシークレット (「ステップ 7. アプリケーション・シークレットを確定する」を参照)
  4. IBM MBaaS (Mobile Backend as a Service) サービスを初期化するための関数 initPush() を新規に作成します。
    // Push Notification content
    var ibmbluemix, ibmpush;
    var values = {
                applicationId: "____your app id___________",
                applicationRoute: "___your app route____",
                applicationSecret: "___your app secret____",
            };
    function initPush(){
        console.log("initPush called-------------------------------");
        ibmbluemix = IBMBluemix.hybrid;
        ibmpush = IBMPush.hybrid;
        
        console.log("calling bluemix initialize with values-------------------------------");
        
        ibmbluemix.initialize(values)
        //ibmpush.initializeService();
    }
  5. onDeviceReady 関数内から initPush() メソッドを呼び出します。
  6. コマンドラインから cordova run android を実行して、プラグインが正常にインストールされていることを確認します (インストールに失敗した場合の解決策のヒントについては、「ステップ 8. よくあるエラーをデバッグする」を参照してください)。
  7. 新規に作成した関数に戻り、この関数が Bluemix のサービスの初期化後に Push サービスを初期化するように変更を加えます。
    function initPush(){
       console.log("initPush called---------------------------------");
       ibmbluemix = IBMBluemix.hybrid;
       ibmpush = IBMPush.hybrid;
       
       console.log("calling bluemix initialize with values--------------------------------");
       ibmbluemix.initialize(values).then(function(status) {
          console.log("IBM Bluemix Initialized", status);
          return ibmpush.initializeService();
       }, function (err) {
          console.error("IBM Bluemix initialized failed" , err);
       }).then(function(pushObj) {
          console.log("IBM Push Initialized", pushObj);
          push = pushObj;
          return push.registerDevice();
       }, function (err) {
          console.error("IBM Bluemix Push initialized failed" , err);
       }); 
    }
  8. コードを実行します。出力に、プッシュの初期化が正常に行われたことが示されるはずです。

ステップ 6. 端末を登録する

ハイブリッド・モバイル・アプリケーションにプッシュ機能が追加されるまで、あと少しです!ログを詳しく調べると、通知の成功によるコールバックが含まれていなかったというエラー・メッセージが見つかります。このエラーに対処するには、以下の手順に従います。

  1. registerDevice の呼び出しを更新し、追加の情報として、エイリアス、コンシューマー ID、およびコールバック・メソッドの名前を含めます。
    push.registerDevice("LisaTest","Lisa123","pushReceived");
    consumerIdalias には、任意の値を設定することができます。エイリアスまたはコンシューマー ID に基づく特定の端末にプッシュ・メッセージを送信するときには、これらの値を使用します。3 つ目の値は、端末でメッセージを受信したときに処理を行うメソッドの名前です。その名前を付けた新規関数を作成してください。以下に一例を示します。
    //success callback for when a message comes in
    function pushReceived(info) {
       console.log("registerListener - " + info.alert);
       alert('got a push message! ' + info.alert);
    }
  2. コードを実行します。すると、端末が正常に登録されたことを通知するログ・ステートメントが確認されるはずです。
  3. 端末が登録されたことを確認するには、Bluemix コンソールにアクセスします。アプリケーションの Push サービスをクリックし、「Registrations (登録)」タブを表示します。このタブに表示されるリストに、登録した端末が含まれているはずです。コンシューマー ID (Consumer ID) が、端末を登録したときに指定した ID と一致していることに注目してください。 「Registrations (登録)」タブのスクリーン・キャプチャー
    「Registrations (登録)」タブのスクリーン・キャプチャー

Bluemix の Push サービスを利用するようにハイブリッド Apache Cordova アプリケーションをセットアップし、端末を登録する作業が完了しました。これで、プッシュ通知の受信をテストすることができます。

ステップ 7. アプリケーション・シークレットを確定する

  1. IBM Bluemix コンソールを開いて、作成したアプリケーションをクリックします。表示されるサービスの中から「Mobile Application Security」サービスをクリックします。 作成したアプリケーションの「Overview (概要)」ページのスクリーン・キャプチャー
    作成したアプリケーションの「Overview (概要)」ページのスクリーン・キャプチャー
  2. 表示されるページの最初のタブ「Registered Clients (登録済みクライアント)」に、アプリケーション ID (Application ID) とアプリケーション・シークレット (Application Secret) が表示されます。 「Registered Clients (登録済みクライアント)」タブのスクリーン・キャプチャー
    「Registered Clients (登録済みクライアント)」タブのスクリーン・キャプチャー
  3. アプリケーション・シークレットの値をコピーして、ハイブリッド・アプリケーションのプッシュを構成するためのアプリケーション・シークレット・フィールドに貼り付けます。万が一、この値が漏洩してしまった場合は、「Regenerate (再生成)」ボタンをクリックして新しい値を取得することができます。

ステップ 8. よくあるエラーをデバッグする

ログ・コンソールに「Uncaught ReferenceError: IBMLogger is not defined (参照未捕捉エラー: IBMLogger が定義されていません)」というメッセージが表示された場合は、以下のステップに従って解決を試みてださい。

  1. アプリケーションからプラットフォームを削除します。
    cordova platform remove android
  2. プラットフォームを再び追加します。
    cordova platform add android
  3. 再試行します。

これでも問題が解決されない場合は、以下の手順を試してください。

  1. IBMPush プラグインおよび IBMBluemix プラグインを削除します。
    cordova plugin remove com.ibm.mobile.cordova.ibmpush を実行すると、両方のプラグインが削除されるはずです。削除されない場合は、手作業で IBMBluemix プラグインも削除してください。
  2. 最初に IBMBluemix プラグインを追加します。
    cordova plugin add com.ibm.mobile.cordova.ibmbluemix
  3. 次に IBMPush プラグインを追加します。
    cordova plugin add com.ibm.mobile.cordova.ibmpush
  4. 再試行します。

「missing GCM & APNS credentials (GCM および APNS の資格情報が見つかりません)」というエラーが表示されたとしたら、それは、Bluemix 内のアプリケーションに対して Google Cloud Messaging の資格情報または Apple Push Notification Service の資格情報が入力されていないためです。このエラーを修正するには、「ステップ 9. Bluemix でプッシュ通知の資格情報を入力する」の手順に従ってください。

「IBMPush: Invalid value specified for notification callback function. Specify the callback function name to be when notification arrives (IBMPush: 通知コールバック関数に無効な値が指定されました。通知を受け取るときのコールバック関数名を指定してください)」というエラーが表示される場合もあります。その場合は、Cordova プラグインに含まれる IBMPushHybrid.js ファイルを調べると、以下の registerDevice 関数を呼び出すためのシグニチャーを確認することができます。

registerDevice: function (consumerId, alias, pushCallback)

コールバック・メソッド名が含まれるように、コードを更新してください。

ステップ 9. Bluemix でプッシュ通知の資格情報を入力する

GCM および APNS の資格情報が入力されなかったというエラーが表示された場合は、以下の手順に従います。

  1. Bluemix のダッシュボード (DASHBOARD) に戻って、モバイル・アプリケーション・ページを表示します。
  2. 「Push」サービスを選択して、プッシュのダッシュボード・ページを開きます。
  3. 「Configuration (構成)」タブをクリックします。
  4. 資格情報が入力されていない場合は、有効にする Push サービスの「EDIT (編集)」ボタンをクリックします。
  5. 資格情報を持っている場合は、その情報を該当するフィールドに入力して保存します。資格情報を持っていない場合、その取得方法がわからなければ、情報アイコンをクリックします。すると、それぞれのプラットフォームでプッシュ・サービスの資格情報を取得するためにサインアップする方法について説明するポップアップが表示されます (入力できる資格情報には、サンドボックス (Sandbox) 用と本番 (Production) 用の 2 つがあります。サービス・モード (Service mode) を切り替える準備ができている場合は、サンドボックス (Sandbox) モードと本番 (Production) モードの間で切り替えてください)。
  6. 変更内容を保存します。

ステップ 10. プッシュ通知受信のテストをする

これで、アプリケーションがプッシュ通知を受け取ったときの動作をテストする準備が整いました。プッシュ通知を送信するには、いくつかの方法があります。

Bluemix の JavaScript SDK を使用してプッシュ・メッセージを送信する

ステップ・バイ・ステップの手順については、「5 分以内にモバイル・アプリケーションからプッシュ通知を送信する」を参照してください。

IBM Bluemix コンソールを使用してプッシュ・メッセージを送信する

  1. Bluemix にアクセスしてアプリケーションをクリックします。
  2. 「Push」サービスをクリックします。
  3. 「Notification (通知)」タブに切り替えて、プッシュ通知を送信するためのフォームを表示します。
  4. フォームに必要な情報を入力して、「Next (次へ)」をクリックします。
  5. 次に表示される画面では、テスト・メッセージの送信先とする端末を選択します。
  6. 「Send (送信)」をクリックします。メッセージが送信されたことを通知するメッセージが表示されます。
  7. モバイル端末またはエミュレーターを見てください。メッセージを受信した場合は、前のステップでセットアップしたアラートが表示されます。メッセージが正常に受信されたことを示すアラートのスクリーン・キャプチャー
    メッセージが正常に受信されたことを示すアラートのスクリーン・キャプチャー

REST サービスを使用してプッシュ通知を送信する

プッシュ通知を送信するには、IBM Bluemix REST API を呼び出すという方法もあります。以下の例では、Chrome の Postman アプリケーションを使用しました。

  1. メソッドを POST に設定します。
  2. URL を https://mobile.ng.bluemix.net/push/v1/apps/YOUR-APPID/messages に設定します。
  3. ヘッダーを以下のように設定します。
    Content-Type:application/json
    Cache-Control:no-cache
    IBM-Application-Secret:___your app secret____
  4. リクエストを送信するための JSON ペイロードを作成します。
    { 
       "message": {
          "alert": "Test Message from REST"
    }
    }

    ページは以下のようになっているはずです。REST サービスを使用してプッシュのテストを行う画面のスクリーン・キャプチャー
    REST サービスを使用してプッシュのテストを行う画面のスクリーン・キャプチャー
  5. 「Send (送信)」をクリックします。
  6. 端末がメッセージを受信します。 REST サービスを使用してメッセージが正常に受信されたことを示すアラートのスクリーン・キャプチャー
    REST サービスを使用してメッセージが正常に受信されたことを示すアラートのスクリーン・キャプチャー

まとめ

このチュートリアルのステップを完了した今、皆さんは、Cordova CLI を使用して IBM Bluemix のプッシュ機能をハイブリッド・モバイル・アプリケーション (既存のもの、または新規のもの) に追加できるようになりました。また、Bluemix のサービスを呼び出して端末を登録し、プッシュ通知を受け取ることもできるはずです。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Mobile development, Cloud computing
ArticleID=990686
ArticleTitle=Bluemix 対応の Cordova プラグインを追加して、ハイブリッド・モバイル・アプリでプッシュ機能を利用する
publish-date=12042014