Pitney Bowes の位置情報サービスを利用してシンプルな写真位置情報アプリケーションを作成する

2014年 7月 24日
PDF (351 KB)
 
Photo of Jay Allen

Jay Allen

Software Developer, Software Group, Strategy, jStart Emerging Technologies

@jayallenmn

Rachel Reinitz

IBM Distinguished Engineer; CTO, IBM Bluemix Garage

@rreinitz

Srikant Varadarajan

Fellow, Integration Architect, Pitney Bowes

@IManageAPIs

Robert Vila

Program Director and Senior Technical Staff Member, IBM WebSphere Strategy

@robertvila

IBM Bluemix™ にサインアップ
無償のサービス、ランタイム、インフラを含むクラウド・プラットフォームが、新たなモバイルやウェブ・アプリのクイックな構築とデプロイを実現します。

IBM Bluemix には、素晴らしいアイデアをアプリケーションやサービスの形にする上で必要な、プラットフォームの機能がすべて揃っています。開発者は Bluemix から広範な API にアクセスし、サード・パーティーが提供する機能を利用してアプリケーションをマッシュアップすることにより、アプリケーションを機能強化することもできます。

例えば、Pitney Bowes では、ジオコーディング、住所の検索、そしてその他多くの機能に対応する強力な API を提供しています。この記事では、シンプルで楽しいサンプル (Instagram のメディア検索に、米国の任意の番地の緯度と経度を組み合わせるアプリケーション) を通して、Bluemix アプリケーションで Pitney Bowes のAPI を利用する方法を紹介します。

手順を開始するために必要なもの

 

開発者は Bluemix から広範な API にアクセスし、サード・パーティーが提供する機能を利用してアプリケーションをマッシュアップすることにより、アプリケーションを機能強化することができます。

Pitney Bowes による位置情報を利用したサービスの概要

 

開発者は Pitney Bowes による位置情報を利用した 4 つのサービスを、Bluemix プラットフォームを通じて利用することができます。

  • ジオコーディング— 住所を緯度と経度の地理的位置情報に変換します。
  • 逆ジオコーディング— 緯度と経度の位置情報 (GPS 信号など) を読んで理解できる住所に変換します。
  • 住所の検証— 住所を修正、標準化、検証することで、郵便機関が制定した品質標準に住所データを準拠させるようにして、郵便物や小包をより確実に配達できるようにします。
  • 走行範囲サービス— ジオ情報に基づく意思決定の信頼度を向上させるために、ある地点を中心とした範囲を一定の走行距離、または一定の走行時間を基にして判別します。

読む:Pitney Bowes による位置情報を利用したサービスの API ドキュメンテーション

ステップ 1. Pitney Bowes サービスに登録する

 
  1. Pitney Bowes 開発者向けポータルで開発者用アカウントを登録します。e-メールの検証ステップが完了すると、API 特権を与えられたアカウントが提供されます。
  2. ログインしてアプリケーションを登録します。登録時に提供されるアプリケーション ID は、Pitney Bowes に対して API 呼び出しを行うときに必要になります (登録時に同じく提供されるシークレットは、現在 Pitney Bowes API には必要ありません)。
  3. デフォルトでは、API 呼び出しを行う資格は与えられません。「Entitlements (資格)」ページで、「Select Entitlement (資格の選択)」をクリックして、自動的に承認される無料の資格レベル (1 日あたりの呼び出し回数 2,000) を選択します。 Pitney Bowes による位置情報を利用した API に対する 2 つの資格の選択肢を示すスクリーンショット

    クリックして大きなイメージを見る

これで、Bluemix に用意されている Pitney Bowes のサービスでアプリケーション ID を使用する準備が整いました。

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

 
  1. Bluemix にログインします。
  2. カタログから、Pitney Bowes ジオコーディング・サービスを選択します。 Bluemix カタログにおける Pitney Bowes のジオコーディング・サービスのスクリーンショット
  3. 「Do not associate (関連付けない)」を選択します (このサービス・インスタンスは、ステップ 3 でアプリケーションに追加します)。サービス・インスタンスの名前を選択し、Pitney Bowes から提供されたアプリケーション ID を入力します。

ステップ 3. Node.js 写真検索アプリケーション・コードを複製する

 

IBM jStart DevOps リポジトリーから Node.js 写真検索アプリケーションを複製します。

git clone https://hub.jazz.net/git/jstart/Picture.Finder.(Node)

すべてのアプリケーション・ロジックが含まれる app.js には、Web アプリケーションの開発を容易にする以下の Node.js モジュールを組み込むようにします。

  • Express Web 開発フレームワーク
  • Express 用 Hogan テンプレート作成エンジン
  • Pitney Bowes を呼び出すための REST クライアント
  • Instagram API ラッパー・ライブラリー
  • 日付のフォーマットを設定するための moment
  • JSON を操作するための pinch

/location に投稿すると、Pitney Bowes によるジオコーディング・サービスに対して GET 呼び出しが行われます。この呼び出しによって返される緯度と経度を Instagram に渡します (コードに含まれる instagramID と instagramSecret を、忘れずに自分の Instagram 開発者用アカウント ID とシークレットに置き換えてください)。これで、指定の住所の周囲 1 キロ以内のすべての写真を表す JSON を取得することができます。

ジオコーディング・サービスの呼び出しでは、ジオコーディング・サービスの資格情報から取り出された Pitney Bowes の URL とアプリケーション ID が使用されることに注意してください。

リスティングを見るにはここをクリック

   var Client = rest.Client;
   client = new Client();
   
   if (!address && !city && !state)
      res.render('index.html');

   // direct way
   client.get(url + "?address=" + address + "&city=" + city + "&stateProvince=" + state +    "&country=USA&fallbackToPostal=Y&fallbackToStreet=Y&fallbackToGeographic=Y&closeMatchesOnly=Y&appId   =" + appId, function(data, response){
               // data in callback contains the json returned from pitney bowes
                  
            if (data.httpCode != "500")
            {
               lat = data.Output.Geometry.Pos.Y;
               lng = data.Output.Geometry.Pos.X;
            
               instagram.media.search({
              lat: lat,
              lng: lng,
              complete: function(data){
               // pinch converts all unix timestamps to a friendly date
               pinch(data, /created_time/, function(path, key, value) {
                 return moment(value*1000).format("MMMM Do YYYY, h:mm a");
               });            

                res.render('index.html', {data: data, address: address, city: city, state: state});

              }, // end complete
            });// end search
            }// end httpCode check
            else
            {
              msg = "Can't find any pictures near this address";
              res.render('index.html', {msg: msg, address: address, city: city, state: state});
         } 


           }); // end PB call

Hogan と非常に簡潔な mustache テンプレート言語によって、index.html ビューに結果が表示されます。これは、Instagram によって返された JSON からそのままレンダリングされたものです (作成時刻は、サーバー・サイドの pinch ライブラリーによって、UNIX タイムスタンプから読みやすい日付のフォーマットに変更されます)。

リスティングを見るにはここをクリック

<div>
   <ul>
   {{#data}}
      <li style="display: inline-block; padding: 25px"><a href="{{link}}"><img src="{{#images}}{{#thumbnail}} {{url}} {{/thumbnail}}{{/images}}"></a> <br/>
         By: <em> {{#user}} {{username}} {{/user}}</em> <br/>
            {{created_time}} 
         <br/>
            {{#comments}} {{count}} {{/comments}} comment(s)  {{#likes}} {{count}} {{/likes}} likes. </li>   
   {{/data}}
   </ul>
</div>

ステップ 4. アプリケーションを Bluemix にプッシュする

 
  1. カレント・ディレクトリーをアプリケーションの app ディレクトリーに変更します。コマンドラインから、次のコマンドを使用して Bluemix にログインします。
    cf login -a api.ng.bluemix.net

    プロンプトが出されたら、ユーザー名、パスワード、組織、スペースを入力します。
  2. プロセスを簡素化するために、このアプリケーションには manifest.yml ファイルが同梱されています。このファイルが、アプリケーション名、メモリー、インスタンス数、およびステップ 2 で作成した Pitney Bowes ジオコーディング・サービス名を設定します。

    manifest.yml を編集して、アプリケーションに固有でなければならない値を変更します。 ホスト名は、picturefinder 以外に設定して、最終的な URL ルートがデモ URL (http://picturefinder.mybluemix.net/) と競合しないようにする必要があります。

    ---
    applications: #Reference http://docs.cloudfoundry.com/docs/using/deploying-apps/manifest.html
    - name: PictureFinder #Application Name. Unique to the user's Space
      memory: 256M #The maximum memory to allocate to each application instance
      instances: 1 #The number of instances of the application to start
      host: my-unique-ehostname #Hostname for app routing. Unique to domain ng.bluemix.net.  Change.
      path: . #Path to the application to be pushed
      command: node app.js #The command to use to start the application
    services: 
    - Geocoding-demo #the already created geocode service
  3. app.js と manifest.yml ファイルが保管されているアプリケーション・ディレクトリーから、アプリケーションをプッシュします。
    cf push

アプリケーションの実行中に、http://my-unique-hostname.mybluemix.net にアクセスしてください (ここで、my-unique-hostname はマニフェスト・ファイルで使用したホスト名です)。自分がいる場所の住所を入力すると、近くで投稿している Instagram ユーザーを確認することができます。

まとめ

 

Pitney Bowes による位置情報インテリジェンス・ソリューションは、世界中の 12 億を超える人々が主要なソーシャル・メディア・プラットフォーム上で位置情報共有機能をチェックしたり利用したりするために、選択しているソリューションです。まさにこれらのサービスを利用して、ユーザーの現在位置に合わせてユーザー・エクスペリエンスを調整すれば、ますますユーザーの心を引き付けるアプリケーションになるはずです。

コメントの追加

注意: HTML コードは、コメント内ではサポートされません。


残り 1000 文字

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Cloud computing, Web development
ArticleID=972531
ArticleTitle=Pitney Bowes の位置情報サービスを利用してシンプルな写真位置情報アプリケーションを作成する
publish-date=07242014