目次


IBM Bluemix を利用して、クラウド内で投資追跡アプリケーションを作成してデプロイする: 第 2 回

PHP アプリケーションから投資ポートフォリオを評価するために金融データを利用する

Comments

この連載第 1 回では、オープン API を使用して金融データに接続し、必要なデータを取得する方法を紹介しました。この第 2 回では、(第 1 回で開発した) PHP アプリケーションの中で金融データを使用して、投資ポートフォリオを正確かつ即座に評価する方法を紹介します。モバイル対応のインターフェース・フレームワークを使用することで、アプリケーションはデスクトップ・コンピューター上でもモバイル端末上でも同じように有効に機能するようになります。さらにアプリケーションを IBM Bluemix 上にホストすることで、信頼性とスケーラビリティーが確保されます。

この連載で説明しているサンプル・アプリケーションは、ユーザーが株を検索して、オンライン投資ポートフォリオに 1 つ以上の株を追加するために使用することができます。

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

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

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

すべてのコードをダウンロードして試してください!

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

Bluemix プラットフォームとその多彩なサービスを Cloud Foundry PHP ビルドパックと組み合わせると、スケーラビリティーと信頼性を確保するように設計された、最先端の技術インフラストラクチャーを実現することができます。

ステップ 1. Cloudant を初期化して構成する

第 1 回では、「Add (追加)」ボタンを組み込んだページ・テンプレートをセットアップして URL ルート /add にリンクする方法を紹介しました。次に当然行うステップは、この機能に肉付けして、ユーザーが自分のポートフォリオに株を追加できるようにすることです。それには、永続データ・ストアが必要になるので、この例では Cloudant (または CouchDB) データベースを使用します。

  1. Cloudant を導入する最も簡単な方法として、Bluemix アカウントにログインし、Cloudant サービスの新しいインスタンスを追加します。最初は、この Cloudant サービス・インスタンスをアンバインドにしたままの状態で実行します。こうすることで、データベース自体は Bluemix クラウドにホストする一方、アプリケーションをローカルで開発することができます。後でアプリケーションが完成したら、アプリケーションを Bluemix にデプロイして、そのデプロイしたアプリケーション・インスタンスに Cloudant サービス・インスタンスをバインドします。
  2. 新しい Cloudant データベースを作成するために、Bluemix アカウントにログインし、ダッシュボードで「USE SERVICES OR APIS (サービスまたは API の使用)」ボタンをクリックします。「USE SERVICES OR APIS (サービスまたは API の使用)」ボタンを示す画面のスクリーン・キャプチャー
    「USE SERVICES OR APIS (サービスまたは API の使用)」ボタンを示す画面のスクリーン・キャプチャー
  3. 表示されるサービスのリストから、「Cloudant NoSQL DB」を選択します。「Cloudant NoSQL DB」を示す画面のスクリーン・キャプチャー
    「Cloudant NoSQL DB」を示す画面のスクリーン・キャプチャー
  4. Cloudant データベース・サービスに関する説明を読んでから、このサービスを起動するために「USE (使用)」をクリックしますが (訳注: 日本語版作成時点では、「CREATE (作成)」をクリックするように変更されています)、クリックする前に、「App (アプリ)」フィールドが「Leave unbound (アンバインドのまま)」に設定されていることを確認してください。 「Leave unbound (アンバインドのまま)」の設定を示す画面のスクリーン・キャプチャー
    「Leave unbound (アンバインドのまま)」の設定を示す画面のスクリーン・キャプチャー

    Cloudant データベース・サービス・インスタンスが初期化されて、サービス情報ページが表示されます。このページで「LAUNCH (起動)」をクリックすると、Cloudant ダッシュボードが起動します。皆さんのインスタンスの Cloudant ダッシュボードには、以下のような内容が表示されるはずです。

    Cloudant ダッシュボードを示す画面のスクリーン・キャプチャー
    Cloudant ダッシュボードを示す画面のスクリーン・キャプチャー
  5. ダッシュボードでの最初のタスクは、新しいデータベースを作成することです。最上部のメニュー・バーで「Add New Database (新規データベースの追加)」ボタンをクリックし、新規データベースの名前として「portfolios」と入力します。「Create (作成)」をクリックして新規データベースを作成します。「Add New Database (新規データベースの追加)」ボタンを示す画面のスクリーン・キャプチャー
    「Add New Database (新規データベースの追加)」ボタンを示す画面のスクリーン・キャプチャー

    これで、データベースが作成されます。

  6. このアプリケーションではユーザーがそれぞれに別々のポートフォリオを持つことができるため、アプリケーションで保管するすべてのドキュメントには、必ずユーザー ID を含めなければなりません。HybridAuth のおかげで、簡単に利用できるユーザー ID として、ユーザーの e-メール・アドレスを利用することができます。従って、指定した e-メール・アドレスと一致するすべてのドキュメントを検索して取得できるように、次のステップでは検索索引を Cloudant に追加します。

    検索索引を追加するために、使用可能なデータベースのリストから、新しく作成したデータベースを選択します。それによって表示されるページで「New Search Index (新規検索索引)」を作成するメニュー項目を選択します。

    「New Search Index (新規検索索引)」というメニュー項目のスクリーン・キャプチャー
    「New Search Index (新規検索索引)」というメニュー項目のスクリーン・キャプチャー
  7. 設計ドキュメントの名前として「users」と入力し、検索索引の名前として「searchByUID」と入力します。「Search index function (検索索引の関数)」には、以下のコードを入力してください
    function (doc) { 
     index("default", doc.uid);
    }
    検索索引の関数を示す画面のスクリーン・キャプチャー
    検索索引の関数を示す画面のスクリーン・キャプチャー
  8. 「Save and Build Index (索引を保存して作成)」をクリックして、索引をシステムに保存します。この searchByUID() 関数を使用することで、指定した e-メール・アドレスと同じ値が 'uid' プロパティーに設定されている、すべてのドキュメントを取得できるようになります。これについては後で詳しく説明します。
  9. 次は Bluemix ダッシュボードに戻って、使用可能なサービスのリストから新規 Cloudant サービス・インスタンスを選択します。インスタンスを選択すると表示されるページで、左側のナビゲーション・バーにある矢印をクリックします。それによって表示されるメニューから、「Service Credentials (サービス資格情報)」を選択します。「Service Credentials (サービス資格情報)」ボタンを示す画面のスクリーン・キャプチャー
    「Service Credentials (サービス資格情報)」ボタンを示す画面のスクリーン・キャプチャー
  10. JSON フォーマットの資格情報ブロック内に示されている URL をコピーして、アプリケーション構成ファイル内の 'db_uri' キーに貼り付けます。それと同時に、'db_name' キーを更新して、新しく作成したデータベースの名前 (この例では、「portfolios」) を反映させます。以下に一例を示します。
    <?php
    // config.php
    $config = [
      'quandl_key'    => 'YOUR-QUANDL-API-KEY',
      'oauth_id'      => 'YOUR-OAUTH-ID',
      'oauth_secret'  => 'YOUR-OAUTH-SECRET',
      'db_uri'        => 'https://username:password@instancexyz-bluemix.cloudant.com',
      'db_name'       => 'portfolios'
    ];
  11. この機会に、$APP_ROOT/index.php のアプリケーション・コードを更新し、このデータベースURI をすべてのリクエストのベース URI として使用するように Guzzle クライアントを構成します。
    <?php
    // application initialization and other routes – snipped!
    
    // initialize HTTP client
    $guzzle = new GuzzleHttp\Client([
      'base_uri' => $app->config['db_uri'] . '/'
    ]);

Cloudant データベース・インスタンスがアクティブになり、アプリケーションがこのデータベースを使用するように構成されました。ユーザーの投資ポートフォリオの詳細は、このデータベースを使用して保管することができます。今回のチュートリアルでは以降、そのための方法を紹介します。

ステップ 2. 株をポートフォリオに追加する

永続データ・ストアの用意ができました。次のステップは、フォームとフォーム・プロセッサーを追加して、ユーザーが検索画面から自分の投資ポートフォリオに株を追加できるようにすることです。以下のコード・リストに、単純なフォームを示します。このコードは、$APP_ROOT/views/add.twig という名前を付けて保存してください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>    
  </head>
  <body>

    <div data-role="dialog">

      <div data-role="content">	
        <div>
          <h2 class="ui-bar ui-bar-a">Add to Portfolio: {{symbol}}</h2>
          <div class="ui-body">
            <form method="post" action="{{ app.request.basepath }}/add" data-ajax="false">
              <input type="hidden" name="symbol" value="{{symbol}}" />
              <label for="units">Number of shares:</label>
              <input type="text" id="units" name="units" />
              <input type="submit" name="submit" value="Add" />
            </form>
          </div>      
        </div>        
      </div>
      
    </div>
      
  </body>
</html>

この Web フォームは、最上位のコンテナーに設定された data-role="dialog" 属性に基づき、jQuery Mobile によってダイアログとしてスタイル設定されます。ダイアログ自体は極めて単純なもので、ユーザーが指定の企業で保有している株の数を入力するためのフィールドと、「Submit (送信)」ボタンを表示するフォームで構成されます。企業の銘柄記号 (銘柄記号は URL パラメーターとしてページに渡されるということを覚えておくことになります) は、隠し入力としてフォームに含めます。

/add ルートの Silex コールバックも同じく単純なものです。このコールバックはフォームをレンダリングし、銘柄記号をテンプレート変数として渡します。これにより、フォームの隠しフィールドに銘柄記号を挿入することが可能になります。以下に示すコールバックのコードは、$APP_ROOT/index.php に追加してください。

<?php
// application initialization and other routes – snipped!

$app->get('/add/{symbol}', function ($symbol) use ($app) {
  return $app['twig']->render('add.twig', array('symbol' => $symbol));
})
->before($authenticate);

ユーザーがフォームを送信すると、別のコールバックがユーザー入力を受け取り、それを検証します。その上で、REST を使用して Cloudant データベースにユーザー入力を保存します。必要なコールバックは以下のとおりです。このコードで、フォームの POST 送信を処理します。

<?php
// application initialization and other routes – snipped!

// form submission handler
$app->post('/add', function (Request $request) use ($app, $guzzle) {
  $symbol = strip_tags($request->get('symbol'));
  $units = (int)$request->get('units');
  if ($units <= 0) {
    throw new Exception('Invalid input');
  }
  $doc = [
    'uid' => $_SESSION['uid'],
    'symbol' => $symbol,
    'units' => $units
  ];
  $guzzle->post($app->config['db_name'], [ 'json' => $doc ]);
  return $app->redirect($app["url_generator"]->generate('index') . '#manage');
})
->before($authenticate);

上記のコードでは、Silex コールバックがフォームの送信を POST リクエストとして受け取り、ユーザーが送信した個々の値を抽出します。抽出された値に対して基本的な入力検証とサニタイジングが行われた後 (例えば、入力された数値がゼロより大きい値であることを確認するなど)、結果の値が Cloudant に挿入するのに適した JSON ドキュメントにフォーマット設定されます。続いて Guzzle HTTP クライアントを使用して、JSON ドキュメントからなる POST リクエストを編成し、そのリクエストを Cloudant REST API に送信します。これにより、新しいドキュメントが作成されて Cloudant データベース内に保存されます。最後に、クライアント・ブラウザーがリダイレクトされてアプリケーションの index ページが表示されます。

この動作を確認するには、アプリケーションを使用して株を選択し、追加してみてください。これにより、以下のようなフォームが表示されます。

新しい株を選択する画面のスクリーン・キャプチャー
新しい株を選択する画面のスクリーン・キャプチャー

値を入力して「Add (追加)」をクリックすると、index ページにリダイレクトされます。その後、Bluemix コンソールに戻って Cloudant ダッシュボードを起動し、自分のデータベースに格納されているすべてのドキュメントを表示するために「All Documents (すべてのドキュメント)」をクリックすると、ポートフォリオに新しく追加した項目の詳細が含まれる新規レコードを確認できるはずです。

ポートフォリオに新しく追加した項目の詳細を示す画面のスクリーン・キャプチャー
ポートフォリオに新しく追加した項目の詳細を示す画面のスクリーン・キャプチャー

ステップ 3. ポートフォリオの値を更新する

現時点で、アプリケーションは株のポートフォリオのデータ入力をサポートできるようになっています。残る作業は、ポートフォリオ内の各項目の値を計算するために、入力された数量と現在の株価を乗算することだけです。現在の株価については、ここでも Quandl API の Wiki データ・セットにアクセスすることになります。(第 1 回のステップ 4 を見ると思い出すように) この Wiki データ・セットには、米国の株価の終値が提供されています。

Quandl API の Wiki データ・セットを利用するには、アプリケーションが Cloudant データベースに接続して、ログイン・ユーザーが入手可能なすべてのドキュメント (各ドキュメントが、1 つの株を表します) を取得しなければなりません。その後、取得した各ドキュメントについて、Quandl API に接続して対応する銘柄記号の現在の株価を取得します。この情報を、終値の計算を行ってからテンプレートに提供して表示することができます。.

以上のすべてのステップを実行するように更新した、/index ルート用のコードを以下に記載します。

<?php
// application initialization and other routes – snipped!

$app->get('/index', function () use ($app, $guzzle) {
  $uid = $_SESSION['uid'];
  // get all stocks in user's portfolio
  $response = $guzzle->get($app->config['db_name'] . '/_design/users/_search/searchByUID?include_docs=true&q='.urlencode($uid));
  $list = json_decode((string)$response->getBody());
  $symbols = [];
  $data = [];
  // extract unique list of stocks
  foreach ($list->rows as $row) {
    $symbol = $row->doc->symbol;
    $symbols[$symbol] = 0;
  }
  // get closing price for each stock
  foreach ($symbols as $key => &$value) {
    $url = "https://www.quandl.com/api/v1/datasets/WIKI/$key.json?api_key=" .$app->config['quandl_key'] . "&rows=1";
    $response = $guzzle->get($url);
    $eod = json_decode((string)$response->getBody());
    $idx = array_search('Close', $eod->column_names);
    $price = $eod->data[0][$idx];
    $value = $price;
  }
  // create structured array of stocks, prices and valuations
  foreach ($list->rows as $row) {
    $id = $row->doc->_id;
    $rev = $row->doc->_rev;
    $rid = "$id.$rev";
    $symbol = $row->doc->symbol;
    $units = $row->doc->units;
    $price = $symbols[$symbol];
    $data[$rid] = [
      'symbol' => $symbol,
      'units' => $units,
      'price' => $price,
      'value' => $units * $price,
    ];
  }
  return $app['twig']->render('index.twig', array('data' => $data, 'uid' => $uid));
})
->before($authenticate)
->bind('index');

/index コールバックは、前に作成した searchByUID() メソッドを使用して、現在ログインしているユーザーに属するすべてのドキュメントを取得します。次に、取得したドキュメントを繰り返し処理して株のリストを抽出し、それぞれの株について、最新の株価を取得するための Quandl API へのリクエストを生成します。そして API レスポンスから抽出した株価と、値の計算結果を 1 つの配列に結合し、その配列をテンプレートに渡して結果を表示します。

$APP_ROOT/views/index.twig にある index ページのテンプレートも、以下のように更新することができます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script>      
      var myApp = angular.module('myApp', []);
      
      myApp.controller("myAppController", function ($scope, $http) {
        $scope.items = {};
        $scope.items.results = [];
        $scope.items.query = '';
        
        $scope.search = function() {
          if ($scope.items.query != '') {
            $http({
                method: 'GET',
                url: '{{ app.request.basepath }}/search/' + $scope.items.query,
              }).
              success(function(data) {
                $scope.items.results = data.docs;
              });
          } else {
            $scope.items.results = [];
          }
        };
      });
    </script>    
  </head>
  <body>

    <div data-role="page">

      <div data-role="header">
        <h1>Portfolio Tracker</h1>
        <a data-ajax="false" href="{{ app.request.basepath }}/logout" data-role="button" class="ui-btn-right">Sign out</a>
        <div class="ui-bar ui-bar-a" style="text-align: center">
          {{ uid }}
        </div>
      </div>

      <div data-role="content">
        <div data-role="tabs">
        
          <div id="navbar" data-role="navbar">
            <ul>
              <li><a id="tab-search" href="#search" data-theme="a" class="ui-btn-active">Search</a></li>
              <li><a id="tab-manage" href="#manage" data-theme="a" class="">Manage</a></li>
            </ul>
          </div>
          
          <div id="search" ng-app="myApp" ng-controller="myAppController">
            <h2 class="ui-bar ui-bar-a">Stock Search</h2>
            <div class="ui-body">
                <input type="search" name="query" ng-model="items.query" />
                <button ng-click="search()">Search</button>
            </div>      
            <h2 class="ui-bar ui-bar-a">Search Results</h2>   
            <div class="ui-body">
              <ul data-role="listview" data-split-theme="d">
                <li ng-repeat="r in items.results">
                {% verbatim %}
                  <a>{{r.name}}</a>
                {% endverbatim %}
                  <a href="{{ app.request.basepath }}{% verbatim %}/add/{{r.code}}{% endverbatim %}" data-ajax="false" data-inline="true" data-role="button" data-icon="plus" data-theme="a">Add</a>                
                </li>
              </ul>                    
            </div>          
          </div>

          <div id="manage">
            <h2 class="ui-bar ui-bar-a">Portfolio Summary</h2>
            <div class="ui-body">
              <ul data-role="listview">          
              {% for id, item in data %}
                <li>
                  <a href="#">
                    <div class="ui-grid-a">
                      <div class="ui-block-a">
                        {{ item.symbol }}
                      </div>
                      <div class="ui-block-b">
                         <span class="ui-li-count">${{ item.value }}</span>                
                      </div>
                    </div>
                    <div>
                      <p>{{ item.units }} units at ${{ item.price}}</p>
                    </div>
                  </a>
                  <a href="{{ app.request.basepath }}/delete/{{ id }}" data-ajax="false" data-inline="true" data-role="button" data-icon="minus" data-theme="a">Remove</a>                 
                </li>
              {% endfor %}
              </ul>
            </div>          
          </div>

        </div>        
      </div>

      <div data-role="footer">
      </div>

    </div>
      
  </body>
</html>

上記のコード・リストは、index ページの「Manage (管理)」タブに「Portfolio Summary (ポートフォリオ概要)」という新しいセクションを追加します。このセクションには、ポートフォリオに含まれる各株がその単位数と現在の株価と一緒にリスト表示されます。この一例を以下に示します。

ポートフォリオに含まれる株のリストを示す画面のスクリーン・キャプチャー

ポートフォリオに含まれる株のリストを示す画面のスクリーン・キャプチャー

ステップ 4. ポートフォリオから株を削除する

上記の画像とコード・リストから明らかなように、「Portfolio Summary (ポートフォリオ概要)」ページでは、リスト表示されている株ごとに「Delete (削除)」ボタンが表示されます。このボタンは /delete ルートにリンクされており、Cloudant ドキュメントとリビジョン ID を URL パラメーターとしてルート・コールバックに渡します。これまでに学んだすべての知識を駆使すれば、提供された情報を使用して DELETE リクエストを Cloudant REST API に送信することでドキュメントをデータベースから削除するプログラムを、このルート用の Silex コールバックとして作成するのは簡単なはずです。

追加するコードは以下のとおりです。

<?php
// application initialization and other routes – snipped!

$app->get('/delete/{rid}', function ($rid) use ($app, $guzzle) {
  $arr = explode('.', $rid);
  $id = $arr[0];
  $rev = $arr[1];
  $guzzle->delete($app->config['db_name'] . '/' . $id . '?rev=' . $rev);
  return $app->redirect($app["url_generator"]->generate('index') . '#manage');
})
->before($authenticate);

エラー・ハンドラーをアプリケーションに追加するのにも、今が絶好のタイミングです。

<?php
// application initialization and other routes – snipped!

// error page handler
$app->error(function (\Exception $e, $code) use ($app) {
  return $app['twig']->render('error.twig', array('error' => $e->getMessage()));
});

上記の単純なエラー・ハンドラーは、すべての例外をインターセプトして、例外メッセージを取り込んだエラー・テンプレートをレンダリングします。エラー・テンプレートのコードは、アプリケーションのソース・コード・リポジトリーにあります。

ステップ 5. IBM Bluemix にデプロイする

アプリケーションのコーディングはすべて完了したので、最後のステップはこのアプリケーションをデプロイすることです。もちろん、ローカルにデプロイするだけであれば、他に必要な作業はありません。通常通りにアプリケーションを使用することができます。一方でアプリケーションを Bluemix にデプロイするとしたら、Bluemix アカウントCloud Foundry コマンド・ライン・ツールが必要になります。以下の手順に従って、デプロイメント・プロセスを完了してください。

  1. Bluemix 環境に合わせてアプリケーション・コードを更新します。

    Bluemix にデプロイする際には、Cloudant サービス・インスタンスをアプリケーションに関連付ける (バインドする) 必要があります。Cloudant サービス・インスタンスのプロビジョニングは、前のステップ 1 で Bluemix を介して完了していますが、このデータベース・インスタンスの資格情報を手作業で取得しなければ、データベース・インスタンスを使用することはできません。ただし、Bluemix 環境内で特殊な VCAP_SERVICES 環境変数によって公開される資格情報は同じであるため、この変数にアクセスして資格情報を取得できる場合には、この変数を読み取るようにアプリケーション・コードを更新するのが賢明です。そうすれば、アプリケーションを移植しやすくなり、必要に応じて新しい Cloudant サービス・インスタンスと「交換」するのが簡単になります。

    このようにアプリケーションを更新するには、$APP_ROOT/index.php ファイルに以下のコードを追加します。

    <?php
    // use Composer autoloader
    require 'vendor/autoload.php';
    require 'config.php';
    
    // load classes – snipped!
    
    // initialization – snipped!
    
    // load configuration from file – snipped!
    
    // add configuration for HybridAuth – snipped!
    
    // register various providers – snipped!
    
    // if Bluemix VCAP_SERVICES environment available
    // overwrite local database credentials with Bluemix credentials
    if ($services = getenv("VCAP_SERVICES")) {
      $services_json = json_decode($services, true);
      $app->config['db_uri'] = $services_json['cloudantNoSQLDB'][0]['credentials']['url'];
    }
    
    // start session
    session_start();
    
    // application route handlers – snipped!
    
    $app->run();
  2. アプリケーションのマニフェストを作成します。

    アプリケーションのマニフェスト・ファイルは、Bluemix に対し、アプリケーションをデプロイする方法を指示します。具体的には、使用する PHP ランタイム環境 (「ビルドパック」) をこのマニフェスト・ファイルで指定します。$APP_ROOT/manifest.yml に新規ファイルを作成し、以下の情報を入力してください。

    ---
    applications:
    - name: portfolio-tracker-[your-initials]
    memory: 256M
    instances: 1
    host: portfolio-tracker-[your-initials]
    buildpack: https://github.com/cloudfoundry/php-buildpack.git
    stack: cflinuxfs2

    必ず、ホストとアプリケーションの名前が一意になるように更新してください。それには、名前を変更するか、名前にランダムな文字列 (自分のイニシャルなど) や数値を追加するかします。私が使用しているのは Cloud Foundry PHP ビルドパックですが、別のビルドパックを使用するのでも構いません。

  3. Bluemix に接続して、アプリケーションをデプロイします。

    cf コマンド・ライン・ツールを使用して、IBM ID とパスワードで Bluemix にログインします。

    shell> cf api https://api.ng.bluemix.net
    shell> cf login

    カレント・ディレクトリーを $APP_ROOT ディレクトリーに変更し、アプリケーションを Bluemix にプッシュします。

    shell> cf push

    以下は、このプロセスの間に表示される出力の一例です。

    コマンド・ラインに表示されるプロセスのスクリーン・キャプチャー
    コマンド・ラインに表示されるプロセスのスクリーン・キャプチャー
  4. Cloudant サービスをアプリケーションにバインドします。

    これで、アプリケーションはデプロイされましたが、さらにアプリケーションを Cloudant データベース・インスタンスに接続する必要があります。Cloudant データベース・インスタンスはすでにステップ 1 でプロビジョニングしてあるので、アプリケーションをこのインスタンスに接続させるのはかなり簡単です。Bluemix ダッシュボードにアクセスして、IBM ID とパスワードでログインすると、アプリケーションが一覧表示されるはずです。アプリケーションの名前をクリックして、アプリケーションの詳細ページを表示してください。

    アプリケーションの詳細ページを示す画面のスクリーン・キャプチャー
    アプリケーションの詳細ページを示す画面のスクリーン・キャプチャー

    「BIND A SERVICE OR API (サービスまたは API のバインド)」ボタンをクリックし、表示されるページで前のステップ 1 でプロビジョニングした Cloudant データベース・インスタンスを選択してから、「ADD (追加)」ボタンをクリックしてアプリケーションにバインドします。

    アプリケーションにバインドするための「ADD (追加)」ボタンを示す画面のスクリーン・キャプチャー

    アプリケーションにバインドするための「ADD (追加)」ボタンを示す画面のスクリーン・キャプチャー
    アプリケーションを再ステージングするよう促されるので、再ステージングします。これにより、Bluemix ダッシュボードに、アプリケーションにバインドされた Cloudant サービス・インスタンスが表示されます。

  5. Google Developers Console で、リダイレクト URI を更新します。

    最後のステップとして、Google Developers Console に再びアクセスし、認可されたリダイレクト URL のリストを更新して、Bluemix アプリケーションのホスト名を含めます。この変更を行わなければ、OAuth リダイレクトが失敗するので、ユーザーがアプリケーションにログインすることはできません。

  6. アプリケーションの使用を開始します。

    アプリケーションのデプロイが完了したら、アプリケーション・マニフェストに指定したホスト (例えば、http://portfolio-tracker-[自分のイニシャル].mybluemix.net) にブラウザーでアクセスすることで、アプリケーションの使用を開始することができます。あるいは、このチュートリアルの先頭の方にある「サンプル・アプリを実行する」をクリックして、アプリケーションのライブ・デモを試してみることもできます。空白ページやその他のエラーが表示されたら、「Debugging PHP Errors on IBM Bluemix」を参照して、PHP コードをデバッグして問題の原因となっている個所を突き止めてください。

Bluemix 上で実行される PHP アプリケーションの manifest.yml ファイルを使用する方法についての詳細は、Carl Osipov 氏の投稿「Deploy a Hello World PHP Application to Zend Server on IBM Bluemix」を参照してください。

Bluemix 上で URL リライティングをセットアップする方法については、私の投稿「Configure URL Rewriting for Framework-Based PHP Applications on IBM Bluemix」で説明しています (このサンプル・アプリケーションの場合、URL リライティングは GitHub コード・ベースの .htaccess ファイル内で既に実施済みです)。

まとめ

オープン API によって幅広く金融データにアクセスできるようになっていると、その金融データを利用することにより、ユーザーが自分の金融面での状況を把握するのを支援するモバイル Web アプリケーションを作成するのは簡単です。Bluemix プラットフォームとその多彩なサービスを Cloud Foundry PHP ビルドパックと組み合わせると、スケーラビリティーと信頼性を確保するように設計された、最先端の技術インフラストラクチャーを実現することができます。さらに Silex、jQuery Mobile、HybridAuth のようなオープンソース・コンポーネントを追加すれば、クラウド内のアプリケーションを設計、作成、テストするための完全な機能を揃えたツールキットが得られます。


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


関連トピック


コメント

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

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Cloud computing, Mobile development, Web development
ArticleID=1027493
ArticleTitle=IBM Bluemix を利用して、クラウド内で投資追跡アプリケーションを作成してデプロイする: 第 2 回
publish-date=02252016