目次


クラウド内で気象情報追跡アプリケーションを構築する

第 2 回

IBM Insights for Weather サービスを PHP アプリケーションに追加する

Comments

コンテンツシリーズ

このコンテンツは全#シリーズのパート#です: クラウド内で気象情報追跡アプリケーションを構築する

このシリーズの続きに乞うご期待。

このコンテンツはシリーズの一部分です:クラウド内で気象情報追跡アプリケーションを構築する

このシリーズの続きに乞うご期待。

第 1 回では、ベースとなるアプリケーションを作成して、オンライン・サービスから世界の都市の緯度と経度の座標を取得して保管する方法を紹介しました。

今回は、IBM の新しい Insights for Weather サービスをこのサンプル・アプリケーションに追加してみるほか、世界の都市を 5 つ選んでそれらの気象情報を追跡するために、第 1 回で取得した都市の情報を使用してみましょう。さらに、完成したアプリケーションを IBM Bluemix 上でホストする方法についても見て行きます。

サンプル・アプリを実行するサンプル・アプリのコードを入手する

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

前提条件となる知識とソフトウェアについては、第 1 回を参照してください。

ステップ 1. Insights for Weather サービス・インスタンスを初期化する

各場所の情報が保管されているデータベースのレコードには、それぞれの場所の緯度と経度が含まれていることから、アプリケーションに Insights for Weather サービスを統合することができます。始めは Insights for Weather サービス・インスタンスは、アプリケーションにバインドされていない状態で実行されるため、リモートの Bluemix 上にホストされたサービス・インスタンスと一緒に、このアプリケーションをローカルで開発することができます。

  1. Insights for Weather サービスの新しいインスタンスを作成します。それには、Bluemix のアカウントにログインし、ダッシュボードで「Use Services or APIs (サービスまたは API の使用)」タイルをクリックします。表示されるサービスのリストから、「Insights for Weather」を選択します。 Bluemix カタログで Insights for Weather サービスを選択する画面のスクリーンショット
    Bluemix カタログで Insights for Weather サービスを選択する画面のスクリーンショット
  2. このサービスについての説明に目を通してから、「CREATE (作成)」をクリックしてサービスを起動します。「App (アプリ)」フィールドが「Leave unbound (アンバインドのまま)」に設定されていて、「Free Plan (無料プラン)」を選択していることを確認します。 Insights for Weather サービスを作成して起動する画面のスクリーンショット
    Insights for Weather サービスを作成して起動する画面のスクリーンショット
  3. サービス・インスタンスが初期化されて、サービス情報ページが表示されるので、サービス名をメモしておいてください。この情報はステップ 4 で必要になります。左側のナビゲーション・バーを表示し、「Service Credentials (サービス資格情報)」をクリックして、サービス・インスタンスへのアクセス詳細情報を表示します。 サービス資格情報を表示してアクセス詳細情報を確認する画面のスクリーンショット
    サービス資格情報を表示してアクセス詳細情報を確認する画面のスクリーンショット
  4. url フィールドの内容を、アプリケーションの $APP_ROOT/config.php ファイル内の weather_uri キーにコピーします。これにより、アプリケーションがリモートの Insights for Weather サービス・インスタンスに接続して、そこから気象データの取得を始められるようになります。

ステップ 2. 現在の気象データを表示する

  1. Insights for Weather サービスを利用するには、単に前のセクションのスクリーンショットに示した、サービスの URL にリクエストを送信しますが、その際に API シグニチャーを追加します。例えば、API エンドポイント https://USERNAME:PASSWORD@twcservice.mybluemix.net/api/weather/v2/observations/current?units=m&language=en-US&geocode=51.50853-0.12574 にリクエストを送信すると、以下のように、ロンドンの現在の気象情報を示すレスポンスが生成されます。
     ロンドンの現在の気象情報を示すレスポンスのスクリーンショット
    ロンドンの現在の気象情報を示すレスポンスのスクリーンショット
  2. この JSON 出力に含まれる具体的な内容は、現在の気象状況を説明する言葉 (例えば、「Partly cloudy (ところによって曇り)」) と現在の気温、風速、湿度をはじめとするデータです。これと同じ情報をアプリケーションで表示するには、データベースから場所のリストを取得するように /index ルート・ハンドラーを更新します。その上で、Insights for Weather サービスに接続して (前のステップを参照)、場所ごとの現在の気象状況を取得します。
    <?php
    // index page handlers
    $app->get('/', function () use ($app) {
      return $app->redirect($app["url_generator"]->generate('index'));
    });
    
    $app->get('/index', function () use ($app, $db) {
      // get list of locations from database
      // for each location, get current weather from Weather service
      $collection = $db->locations;  
      $locations = iterator_to_array($collection->find());
      foreach ($locations as &$location) {
        $uri = $app->config['weather_uri'] . '/api/weather/v2/observations/current?units=m&language=en-US&geocode=' . urlencode(sprintf('%f,%f', $location['lat'], $location['lng']));
        $json = file_get_contents($uri);
        if ($json === FALSE) {
         throw new Exception("Could not connect to Weather API.");  
        }
        $location['weather'] = json_decode($json, true);
      }
      return $app['twig']->render('index.twig', array('locations' => $locations));
    })
    ->bind('index');
  3. 次に、この情報を表示するように、$APP_ROOT/views/index.twig にある Twig テンプレートを更新します。
          <div data-role="content">       
            <h2 class="ui-bar ui-bar-a">Current Weather</h2>
            <div class="ui-body">
              <ul data-role="listview" data-split-icon="minus" data-split-theme="d">          
              {% for item in locations %}
                <li>
                  <a href="{{ app.url_generator.generate('forecast', {'id': item._id|trim}) }}" data-ajax="false">{{ item.location }}, {{ item.country }}
                  <br/>
                  {{ item.weather.observation.metric.temp }}&deg; C | {{ item.weather.observation.phrase_22char }}
                  </a>
                  <a href="{{ app.url_generator.generate('delete', {'id': item._id|trim}) }}" data-ajax="false">Remove</a>                 
                </li>
              {% endfor %}
              </ul>
            </div>             
            <div>
              <p><a href="{{ app.url_generator.generate('search') }}" data-ajax="false" data-inline="true" data-role="button" data-icon="plus" data-theme="a">Add Location</a></p>
            </div>             
          </div>
  4. テンプレートがどのように表示されるかを以下に示します。テキストの代わりにアイコンを使用したければ、Insights for Weather サービスにはさまざまなアイコンと、それらの使用方法についての説明も用意されています。 Insights for Weather サービスのテンプレートのスクリーンショット
    Insights for Weather サービスのテンプレートのスクリーンショット

それぞれの場所の横には削除ボタンが表示されていることに注目してください。削除ボタンは /delete ルート・ハンドラーにリンクされていて、このボタンをクリックすると、該当する場所の一意の MongoDB レコード ID がこのハンドラーに渡されます。レコード ID が渡されると、/delete ハンドラーは、その指定されたレコードを MongoDB データベースから削除します。

<?php
// handler to remove location from database
$app->get('/delete/{id}', function ($id) use ($app, $db) {
  $collection = $db->locations;
  $collection->remove(array('_id' => new MongoId($id)));
  return $app->redirect($app["url_generator"]->generate('index'));
})
->bind('delete');

ステップ 3. 天気予報を取得する

  1. Insights for Weather サービスでは、任意の場所の現在の気象状況を取得できるのとまったく同様に、その場所の向こう 10 日間の天気予報を取得することもできます。API リクエストを https://USERNAME:PASSWORD@twcservice.mybluemix.net/api/weather/v2/forecast/daily/10day?units=m&language=en-US&geocode=51.50853-0.12574 に更新すると、以下のように、日中と夜間両方の気象状況に関する詳細情報が返されます。出力に含まれる dow フィールドと narrative フィールドは、それぞれ曜日、その日の天気予報の抜粋を示します。この 2 つが、アプリケーションで使用する主要なフィールドです。
     ロンドンの向こう 10 日間の天気予報が含まれたレスポンスのスクリーンショット
    ロンドンの向こう 10 日間の天気予報が含まれたレスポンスのスクリーンショット
  2. この機能をアプリケーションに追加するために、/forecast ルートの新しいハンドラーを作成します。このハンドラーに、データベースに保管されている場所 ID を渡し、場所の座標を上記 API リクエストに挿入します。そのためのコードは以下のとおりです。
    <?php
    // handler to display 7-day forecast for selected location
    $app->get('/forecast/{id}', function ($id) use ($app, $db) {
      // look up location record in database
      // connect and get forecast from Weather service
      $collection = $db->locations;
      $location = (array)$collection->findOne(array('_id' => new MongoId($id)));
      $uri = $app->config['weather_uri'] . '/api/weather/v2/forecast/daily/10day?units=m&language=en-US&geocode=' . urlencode(sprintf('%f,%f', $location['lat'], $location['lng']));
      $json = file_get_contents($uri);
      if ($json === FALSE) {
        throw new Exception("Could not connect to Weather API.");  
      }
      $location['weather'] = json_decode($json, true);
      return $app['twig']->render('forecast.twig', array('data' => $location));
    })
    ->bind('forecast');
  3. この新しいハンドラー用のページ・テンプレートを追加して、そのテンプレートにメインの index ページからリンクすることもできます。このテンプレートは、アプリケーションのコード・リポジトリーにあります。このテンプレートがどのように表示されるか、その一例を以下に示します。
     ページ・テンプレートのスクリーンショット
    ページ・テンプレートのスクリーンショット

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

この時点でアプリケーションは完成し、Bluemix にデプロイできる状態になっています。

  1. まず、アプリケーション構成ファイルを更新して、データベース資格情報を変更することで、リモートにデプロイされた MongoDB データベースが参照されるようにします。
  2. 次に、アプリケーションのマニフェスト・ファイルを作成します。ホスト名とアプリケーション名にランダムなストリング (自分のイニシャルなど) を追加することで、一意のホスト名とアプリケーション名にするのを忘れないでください。
    ---
    applications:
    - name: weather-tracker-[initials]
    memory: 256M
    instances: 1
    host: weather-tracker-[initials]
    buildpack: https://github.com/cloudfoundry/php-buildpack.git
    stack: cflinuxfs2
  3. デフォルトでは、CloudFoundry の PHP ビルドパックに PHP MongoDB 拡張モジュールは含まれていないため、デプロイ時にこの拡張モジュールを有効にするビルドパックを構成する必要があります。また、Insights for Weather サービスの資格情報を Bluemix から自動的に取り込むには、Bluemix の VCAP_SERVICES 変数を使用するようにコードを更新します (以下を参照)。
    <?php
    if ($services = getenv("VCAP_SERVICES")) {
      $services_json = json_decode($services, true);
      $app->config['weather_uri'] = $services_json["weatherinsights"][0]["credentials"]["url"];
    }
  4. これで、アプリケーションを Bluemix にプッシュできる状態になりました。アプリケーションをプッシュした後は、そのアプリケーションに Insights for Weather サービスをバインドします。
    shell> cf api https://api.ng.bluemix.net
    shell> cf login
    shell> cf push
    shell> cf bind-service weather-tracker-[initials] "Insights for Weather-[id]"
    shell> cf restage weather-tracker-[initials]

この時点で、アプリケーション・マニフェストに指定したホスト (例えば、http://weather-tracker-[initials].mybluemix.net) にブラウザーでアクセスすれば、早速アプリケーションを使い始めることができます。空白のページやその他のエラーが表示されたら、PHP コードをデバッグして問題の原因となっている場所を突き止めてください。

まとめ

Insights for Weather サービスでは、モバイル・アプリや Web アプリケーションに、場所固有の気象データと天気予報を簡単に追加できるようになっています。Insights for Weather サービスには REST API でアクセスできるので、任意のプログラミング言語を統合することが可能です。さらに、Insights for Weather サービスは Bluemix 上にホストされていることから、Bluemix 上にホストされているアプリケーションにこのサービスを接続するのは、このサービスをアプリケーションにバインドして再ステージングするのと同じぐらい簡単です。

このチュートリアルで実装したすべてのコードは、チュートリアルの初めのほうに記載されているリンクから、PHP ビルドパックの構成ファイルと併せてダウンロードすることができます。ぜひともコードを入手して、いろいろといじってみてください。また、新しい機能を追加するのも一考です。何も壊れることはありませんので、よい勉強になること請け合いです。お楽しみください!


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


関連トピック


コメント

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

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Cloud computing, Mobile development
ArticleID=1031107
ArticleTitle=クラウド内で気象情報追跡アプリケーションを構築する: 第 2 回
publish-date=05192016