目次


Web ユーザーと Pebble ユーザーのための Where? アプリを作成する

IBM Bluemix と Node.js、Pitney Bowes サービス、Cloudant を使用して日常の「どこ?」の質問に答えます

Comments

私はどこにいるの? 私はどこに行けるの? 私はどこに行っていたの? このチュートリアルでは、こうした質問や、Web ユーザーと Pebble スマートウォッチ利用者のためのその他の「どこ?」の質問に答えるクライアント/サーバー・アプリケーションをビルドします。

最初に、バックエンド、つまり、IBM Bluemix™ にデプロイする Node.js アプリケーションをビルドします。このバックエンドは、クライアントで以下の操作を可能にする REST API を提供します。

  • ユーザーの地理位置情報をサーバーに登録します。この情報は Cloudant NoSQL データベースに保管されます。
  • Pitney Bowes の Reverse Geocoding サービスを使用して、その位置に対応する最も近くの住所を取得します。このサービスは、GPS 位置情報に基づいて住所を検索するための強力な API を提供します。
  • Pitney Bowes の Travel Boundary サービスを使用して、あるロケーションから到達可能な場所の情報を取得します。このサービスは、車の運転時間または運転距離に基づいて、指定された位置を中心とした到達可能範囲の「境界」を求めるための GPS 座標を提供します。
  • 人気のある「チェックイン」位置と最近の「チェックイン」位置に関する世界中の統計を (Cloudant の MapReduce 機能を使用して) 提供します。

次に、この REST API をベースとして、2 つのまったく異なるクライアント・アプリケーションをビルドします。

  • AngularJSBootstrapLeaflet.js を使用して実装され、多くの豊富なリッチ・コンテンツを提供する、レスポンシブな単一ページ Web アプリケーション。
  • Pebble 用に作成されたアプリケーション。このスタイリッシュなウェアラブル・デバイスの小さな画面に、有用かつ焦点を絞った情報を表示するように設計されています。 このクライアント・アプリケーションは、Pebble.js ライブラリーと CloudPebble オンライン IDE を使用して JavaScript で作成します。

このバックエンド REST API を基に、ほぼすべてのプラットフォームでクライアントを構築できます。

このバックエンド REST API を基に、ほぼすべてのプラットフォームでクライアントを構築できます。 いずれのクライアントでも Bluemix バックエンドはまったく同じですが、Web アプリケーションと Pebble クライアントの間には重要な機能上の違いが存在します。

アプリケーションの作成に必要となるもの

  • JavaScript およびクライアント/サーバー Web 開発に関する知識。
  • Bluemix アカウントと DevOps Services アカウント (いずれも IBM ID にリンクされたもの)。
  • Pitney Bowes の開発者アカウントとアプリケーション ID。Pitney Bowes 開発者ポータルでアカウントを登録します。 その後にログインし、アプリケーションを登録します。そこで与えられるアプリケーション ID は、Pitney Bowes サービスへの API 呼び出しを行う際に必要になります。
  • オプションの Pebble クライアントの場合:
    • Pebble スマートウォッチ (および iPhone または Android デバイス) が使用できること。
    • Pebble アカウント。
    • GitHub アカウント。GitHub アカウントがない場合は、代わりに手動で ZIP ファイルをダウンロードし、インポートできます。

アプリを実行するコードを入手する

ステップ 1. Bluemix でサービス・インスタンスを作成する

  1. Bluemix にログインします。
  2. カタログに進み、Web and Application カテゴリーから Pitney Bowes の Reverse Geocoding サービスを選択します。
  3. Add Service」ダイアログ・ボックスで「Leave unbound」を選択し、サービス名を ReverseGeocoding に設定し、Pitney Bowes の appId (『アプリケーションの作成に必要となるもの』を参照) を入力し、「CREATE」をクリックします。
  4. カタログに戻り、今回は Pitney Bowes の Travel Boundary サービスを選択します。Reverse Geocoding サービスの場合と同じくフォームに記入します。ただし、サービス・インスタンスの名前は TravelBoundary にします。「CREATE」をクリックします。
  5. もう一度カタログに戻り、Data Management カテゴリーから Cloudant NoSQL DB サービスを選択します。 フォームに記入し、インスタンス名を CloudantNoSQLDB に設定します。「CREATE」をクリックします。

ステップ 2. バックエンドと Web クライアント・コードを fork し、 Web アプリをデプロイする

  1. このチュートリアルの上にある「コードの入手」ボタンをクリックします。
  2. aerwin | bluemix-where プロジェクトの概要ページで、「EDIT CODE」ボタンをクリックし (まだログインしていない場合は DevOps Services の資格情報を入力します)、メニューの「FORK」ボタンをクリックします。
  3. コードのコピーを新規プロジェクトに保存するためのダイアログ・ボックスで、「Deploy to Bluemix」チェック・ボックスを選択し、サービスを作成したスペースを選択し、「CREATE」をクリックします。
  4. 新規プロジェクトで「DEPLOY AS」 > 「Deploy application from Web IDE to Bluemix」を選択します。
  5. ウィザード・ページの手順を 1 つずつ順に実行し、「DEPLOY」をクリックしてコードを Bluemix にプッシュします。

ステップ 3. Web クライアントを試してみる

  1. ブラウザーで、ステップ 2 でのデプロイメント中にアプリケーション用に作成された Bluemix の URL にアクセスします。
  2. プロンプトが表示されたら、地理位置情報の共有をブラウザーに許可します。 これでマップを表示できます。自分の位置がマップの中央にあり、「Where Am I?」セクションには (Reverse Geocoding サービスで確認された) 最も近い住所が表示されます。Screenshot of the Where? app's UI: initial map and Where am I?
    Screenshot of the Where? app's UI: initial map and Where am I?
  3. では、「Where Can I Go?」セクションを見てください。「Find Out!」ボタンをクリックします。これで、到達可能範囲の境界 (「Cost」フィールドに指定した車の運転時間または運転距離に基づく) を取得するためのサーバー・リクエストが行われます。このスクリーン・ショットでは、自分の位置から車で 5 分以内に到達できる区域を示しています。
    Screenshot of the Where? app's UI demonstrating the Where Can I Go? feature
    Screenshot of the Where? app's UI demonstrating the Where Can I Go? feature

    例えばピザハウスを開店しようとしている場合、この画像を見ると、最初の段階で配達可能区域をある程度把握できます。 いくつかの側道が通っていることがわかります。こうした側道は、通常は高速道路や幹線道路に沿っています。
  4. 画面の下半分にある、「Where Is Most Popular?」セクションと「Where Have Others Been?」セクションを見てください。最初のセクションは、人々が位置を登録した基点となっている国の上位のものが順にリストされ、2 番目のセクションには最近のチェックイン位置が 10 件示されています。 このデータは、「Update Location」ボタンをクリックするか Web ページを再ロードすれば、Cloudant MapReduce 機能を使ってすぐに取得できます。 Screenshot of the botton section of the Where? app's UI
    Screenshot of the botton section of the Where? app's UI

ステップ 4. バックエンド・コードを検証する

バックエンド・アプリケーションはいくつかのサード・パーティー・モジュールに依存しています。主なものとして、 Expressnodejs-cloudantcfenvrestler があります。

バックエンドのメインファイルは server.js です。このファイルは (筆者は、これを意図的に軽量に維持しています)、主に Express フレームワークの基本的なセットアップを実行するために使用します。

コードの大半は、lib ディレクトリー内の 4 つのカスタム・モジュールに入っています。

  • cfenv-wrapper.js は、cfenv パッケージのシン・ラッパーとして機能します。cfenv モジュールは便利なユーティリティーで、これを使用すると、VCAP_SERVICES やその他の環境情報にシンプルかつ一貫した方法でアクセスできます。
  • router.js このファイルは経路を定義し、クライアント・アプリケーションが使用する単純な REST API 用のハンドラーを提供します。
    // Define the routes for our API
    router.post('/locations', postLocation);
    router.get('/locations/summary', getSummary);
    router.get('/locations/:locationId/boundary', getBoundary);
    router.get('/locations/:locationId', getLocation);
    router.get('/locations', getLocations);

    地理位置情報に基づいて「チェックイン」を作成するために、1 回の POST が行われます。 POST が成功すると、Pitney Bowes が提供する住所を含む応答が得られます。その他のエンドポイントは、特定の位置 (位置 ID による) に対する到達可能範囲の境界の取得や、人気のある場所または最近訪れた場所に関する要約情報の取得といった操作を行うための GET オペレーションです。
  • pitney-bowes.js は、Reverse Geocoding と Travel Boundary の REST API にアクセスするための抽象化層を提供します。
  • locations.js は、Cloudant データベースとのすべての操作をラップし、nodejs-cloudant モジュールを利用してその処理を行います。 nodejs-cloudant は、Node.js 用の正式な Cloudant ライブラリーです。このライブラリーを使用して、自分の位置コードにより、データベースの作成 (まだ存在しない場合)、データベースの索引 (またはビュー) の作成、データベースへの位置/住所の挿入、それ以前の位置のソート済みリスト (日時別) の取得、人気のある場所に関する統計の MapReduce による計算が行われます。

ステップ 5. Web クライアント・コードを検証する

Web クライアントは単一ページのアプリケーションであり、バックエンドによって public ディレクトリーから提供された静的リソース (HTML、JavaScript、CSS、画像など) で構成されます。

メインファイル index.html は、以下のコンテンツ配布ネットワーク (CDN) リポジトリーからいくつかの外部依存関係をロードします。

index.html ファイルは、アプリケーション用のカスタム・コードもロードします。

  • partials/where.html は、表示上の各要素のレイアウトを示し、メインのアプリケーション・コントローラー js/whereApp.js 内にすべてのフックを提供します。筆者がこのアプリケーションを実動用に開発するなら、おそらくこのファイルをいくつかのテンプレートに分割すると思いますが、このサンプルの目的には十分に役立ちます。
  • css/where.css は、カスタムの CSS クラスを提供し、オーバーライドを行います。
  • js/whereApp.js は、メインのアプリケーション・コントローラーとして機能し、where.html によって定義された要素にバインドすることで、データとアクション・ハンドラーを提供します。
  • js/services/geolocation.js は、操作をしやすくするために、navigator.geolocation.getCurrentPosition 用の Promise ベースのラッパーを提供するカスタム・サービスです。
  • js/services/whereHttp.js は、バックエンド REST API の呼び出しの詳細を抽象化するカスタム・サービスです。これにより、アプリケーション・コントローラーは、Angular $http サービスについて何も知らずにいることができます。

このチュートリアルの次の段階では、Pebble スマートウォッチについて解説します。別のタイプのクライアントがどのようにして、バックエンドに変更を加えずに REST API を利用できるかを紹介します。Pebble をお持ちでない場合でもこの内容を面白いと感じるかもしれませんが、コードは実行できません。

ステップ 6. CloudPebble IDE へのアクセス、コードのインポート、Pebble クライアント・アプリケーションのインストール

  1. CloudPebble にアクセスし、Pebble アカウントを使用してログインします。CloudPebble IDE は非常に優れたブラウザー・ベースのツールです。これを使用すると、ローカル PC に何もインストールしなくても Pebble アプリケーションを開発できます。
  2. 「Projects」ページで「Import」ボタンをクリックします。
  3. 「import」ダイアログ・ボックスから、ZIP ファイルを手動でアップロードすることも、GitHub から直接インポートすることもできます。どちらの方法でもかまいません。
    • ZIP ファイルのオプションの場合は、bluemix-where-pebble リポジトリーから master.zip ファイルをダウンロードしてから、そのファイルをファイル選択機能で選択し、CloudPebble にアップロードします。
    • 直接インポートする場合は、GitHub プロジェクトの以下の URL をコピー・アンド・ペーストします。
      https://github.com/aerwin/bluemix-where-pebble
  4. config.js ファイルを開き、baseUrl パラメーターを変更して Bluemix バックエンドの URL をポイントするようにします。
  5. モバイル・デバイスの Pebble アプリケーションで、「Enable Developer Connections」オプションをオンにします。この設定により、CloudPebble が Pebble アプリと通信してアプリをインストールできるようになります。
  6. CloudPebble に戻り、「Save, build, install, and run」の緑色のボタンをクリックします。進行インジケーターが表示され、CloudPebble がスマートフォンと通信できるようになると、最終的に、成功したことを示す通知が表示されます。
  7. このプロセスが完了すると、手首に付けたウォッチが振動し、アプリケーションが使用できるようになります。

ステップ 7. Pebble クライアント・アプリの UI

このアプリケーションの UI はとても単純です。メニューには、以下のように「Where Am I?」、「Where Was I?」、「About」のオプションが表示されます。

Where Am I?」を選択すると、ウォッチで実行されている JavaScript がユーザーの GPS 位置を取得し、それをバックエンドの Node.js アプリケーションに POST します。つまり、Web アプリケーションと同様の処理です。応答には、ウォッチに表示される住所が含まれます。

メインメニューに戻って「Where Was I?」を選択すると、最後に訪れた 10 件の場所のメニューが表示されます。

リストで任意の項目を選択すると、詳しい位置データ (住所など) が表示されます。

いずれのクライアントでも Bluemix バックエンドはまったく同じですが、Web アプリケーションと Pebble クライアントの間には重要な機能上の違いが存在します。

  • Pebble クライアントは単純化されており、手首のウォッチを一目見たらわかるように、必要な最重要情報に焦点が絞られています。 したがって、Web クライアントにある「Where Can I Go?」、「Where Is Most Popular?」、「Where Have People Been?」のセクションはどれも含まれていません。特に到達可能範囲の境界は、この種類のデバイスではあまり実用的ではありません。
  • 「Where Have I Been?」のデータは、そのユーザーとデバイスに固有のデータです。 Pebble SDK は、ログに記録された位置に関連付けることができる固有 ID を提供します。

ステップ 8. Pebble クライアント・コードを検証する

Pebble アプリケーションの JavaScript ファイルを見ると、Web アプリケーションと構成が類似した部分があることがわかります (ただし、実際には CloudPebble はサブディレクトリーをサポートしません)。

セットアップと構成:

  • app.js は、Pebble クライアントの起動時に実行されるファイルです。筆者は、ほとんどのアクティビティーを他のモジュールに代行させるために、このファイルを意図的に軽量に維持しようしています。
  • config.js は、ステップ 3 で別の URL を使用するために編集したので、既になじみのあるファイルです。

サービス:

  • geolocation.js は、navigator.geolocation.getCurrentPosition の処理の詳細を一部抽象化するモジュールです。これは、Web クライアント内の同じ名前のモジュールと似ています。
  • ajax-locations.js は、Pebble.js の ajax クラスの使用の詳細を隠すための抽象化として機能するモジュールです。Web クライアントでの whereHttp.js モジュールの機能と同様です。

UI ビュー:

アプリケーションのビルドには JavaScript が使用されますが、Pebble プラットフォームでは現在 HTML と CSS の使用をどちらもサポートしていません。それに代わり、Pebble.js には、UI をビルドするためにインスタンス化できるハイレベルの UI ウィジェット・クラスがいくつか用意されています。筆者は、アプリケーションの主な「ページ」ごとにモジュールを 1 つずつ作成することにしました。 この構成では、app.js が本当の意味でコントローラーとして機能でき、必要に応じてさまざまなページを表示できます。

  • location-view.js は、ステップ 7 の 2 つ目のスクリーン・ショットに示した「Where Am I?」ページの UI を表示します。
  • previous-locations-view.js は、ステップ 7 に示した「Where Have I Been?」ページの UI を表示します。
  • error-view.js は、エラー条件の発生時に共通して表示される通知を提供します。
  • working-view.js は、アプリケーションがサーバーの応答を待っているときの「Working...」インディケーターを表示するための共通ウィンドウを表示します。
  • about-view.js は、アプリケーションに関する概要情報を少しだけ表示するための、単純なカード用のモジュールです。

まとめ

実にさまざまな内容を学習してきました。最初に、Node.js アプリケーションがいかに簡単に Bluemix にデプロイできるか、そして 2 つの異なるクライアント・アプリケーションをサポートするためのバックエンド REST API がどのように提供されるかを知りました。 このアプリケーションの構成を学習し、Pitney Bowes と Cloudant のサービスがどのようにこのアプリケーションで利用されるかも学習しました。その後はさらに詳しい説明に踏み込み、Web クライアント、興味深い到達可能境界のビジュアライゼーション機能、人気のある場所と最近訪れた場所の要約リストを紹介しました。 Pebble の利用者の方々は、CloudPebble で Pebble.js ライブラリーを使用して JavaScript アプリケーションをビルドし、それらをスマートウォッチにインストールする方法を学習しました。


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


関連トピック


コメント

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

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Mobile development, Cloud computing, Web development
ArticleID=1000328
ArticleTitle=Web ユーザーと Pebble ユーザーのための Where? アプリを作成する
publish-date=03192015