目次


React を使用して IBM Watson エクスプローラーを作成する

React と Material-UI コンポーネント・ライブラリーを使用して、Watson サービスを探るアプリを IBM Bluemix 上で作成する

Comments

おそらく皆さんは、これまで長い間、IBM Watson コグニティブ・コンピューティング・システムの噂を耳にしてきたはずです。今や Bluemix のおかげで、(夜中に作業する JavaScript マニアを含む) 誰もが Watson の機能を自分のアプリに数分で追加し、その機能をグローバルに利用可能にすることができます。

このチュートリアルでは、3 つの主要な Watson サービスを探るためのアプリを Bluemix 上に作成します。この 3 つの Watson サービスとは以下のとおりです。

  • Language Identification: ユーザーが入力したテキストの言語を識別します。
  • Question and Answer: 質問を分析し、コーパス (収集されたデータの集合) から節を選択します。返される情報には、各項目に関連付けられた 0 から 1 までの信頼度が含まれます。
  • Machine Translation: 入力されたテキストを、サポートされている言語のなかから選択された言語で臨機応変に翻訳します。

このアプリのユーザー・インターフェースは、React というオープンソースの JavaScript ライブラリーを利用して作成します。React に馴染みがあれば、これがハイパフォーマンスの Web UI を作成するには最適なライブラリーであることをご存知のはずです (React を使用するのが初めての場合は、私の developerWorks 記事「React: 保守しやすいハイパフォーマンスの UI コンポーネントを作成する」で、包括的な概要を理解することができます)。

この Watson Explorer アプリでは、自分のアプリに組み込むことが可能な Material Design のサブセットを実装するオープンソースの React コンポーネント・ライブラリー Material-UI を採用します。Material Design は陰影がついた 3 次元の図面を、紙にインクで印刷したような綺麗な見た目で提供します。

Watson Explorer UI のスクリーンショット
Watson Explorer UI のスクリーンショット

ハイパフォーマンスの UI 作成用ライブラリーである React は、それぞれのコンポーネントに関連するほぼすべてのものを単一のソース・ファイル内に配置することから、開発者の生産性を向上させることも可能です。

React を使用すると、Watson Explorer のコードが構造化されて、整理され、コードを理解しやすくなります。

必要になるもの

ステップ 1. アプリの UI を探る

このステップの上に示されている「アプリを実行する」ボタンをクリックし、以下の手順に従って Watson サービスを探索してください。

  1. スプラッシュ画面の右下隅にあるオレンジ色の丸いボタンをクリックしてアプリを起動し、「Identify language (言語識別)」サービスを表示します。
  2. 任意の言語で約 10 個の単語を入力し、丸いボタンをクリックします。すると、Watson がすぐに言語を識別します。
  3. 左上にあるハンバーガーのようなボタンをクリックしてスライドイン・メニューを表示し、「Translation (翻訳)」サービスを選択します。
  4. 1 つか 2 つの文を入力して、ソース言語とターゲット言語を選択します。丸いボタンをクリックすると、Watson が入力されたテキストを翻訳します。
  5. メニューで「Q and A (質問応答)」サービスをクリックします。「Travel (旅行)」または「Health care (医療)」を選択し、関連する質問を入力してから、丸いボタンをクリックします。Watson がその質問に最も関連性がある文書から、少なくとも部分的には質問に答えるテキストを取得します。応答が返されない場合は、スライダーを調整して、しきい値を下げてみてください。

ステップ 2. プロジェクトのコードを複製してその内容を探る

このチュートリアルをスクロールアップして、「コードを入手する」ボタンをクリックします。DevOps Services の singli | Create an IBM Watson explorer with React プロジェクトの概要ページで、ダウンロード・アイコンをクリックし、ZIP ファイルをローカル・ファイル・システムに保存して解凍します (または、Git URL をクリップボードにコピーし、git clone <giturl> を実行することで、その URL から PC にプロジェクトの Git リポジトリーを複製するという方法もあります)。

  • clientsrc ディレクトリーには、このアプリのブラウザー・サイドの React ソース・コードが格納されています。
  • bluemixdeploy ディレクトリーには、サーバー・サイドのプロキシーと最適化されたクライアント・コードが、そのまま Bluemix にデプロイできるフォーマットで格納されています。

ブラウザー・サイドの React コンポーネント・コードは、サーバー・サイドのプロキシー・サーバーにリクエストを送信します。すると、プロキシー・サーバーが Watson 向けの定型リクエストにして、個人の資格情報を追加します。そのリクエストが Watson サービスに転送されて処理されます。Watson が結果を返す際は、プロキシー・サーバーによってレスポンスがパッケージ化され、ブラウザー・サイドのコードに返されます。

ブラウザー・サイドのコードがプロキシー・サーバーを介して Watson へのリクエストを送信する仕組みを示す図
ブラウザー・サイドのコードがプロキシー・サーバーを介して Watson へのリクエストを送信する仕組みを示す図

この手法は、ブラウザー・サイドのリクエスト・コードを単純にするだけでなく (単なる HTML フォームの POST です)、サーバー・サイドの Watson にアクセスするための個人の資格情報を保護することにもなります。

プロジェクトのコードを探るにあたって重要なファイルは以下の 2 つです。

  • clientsrc/src/www/index.html: ブラウザー・サイドのコードの出発点です。
  • clientsrc/src/app/app.js: index.html によってロードされる JavaScript コードの出発点です。

その他の重要なソース・ディレクトリーとファイルには、以下のものがあります。

  • clientsrc/src/app/app-routes.jsx: 相互に関連するビューの階層を指定する、React Router の仕様です。
  • clientsrc/src/app/components/main.jsx: アプリの最上位レベルのビューです。ここに、外側のフレームが含まれます。
  • clientsrc/src/app/less/custom-overrides.less: アプリが使用する、Material-UI およびカスタム CSS スタイルのデフォルト・スタイルのオーバーライドです。
  • clientsrc/src/app/components/views: アプリの機能ビューのすべてを格納するディレクトリーです。
  • clientsrc/src/app/components/stores: アプリのモック Flux ストアのすべてを格納するディレクトリーです。Flux パターンでは、ストア内のデータ変更を通知するビューを登録します。ここで、ストアはプロキシーを介して Watson サービスに対する Ajax 呼び出しを行うシムです。

ステップ 3. 自分用の Watson Explorer アプリを Bluemix にデプロイする

自分用のアプリを正常に Bluemix にデプロイするために必要なのは、bluemixdeploy ディレクトリーに含まれているファイルやディレクトリーのみです。

  1. Bluemix にログインします。
  2. ダッシュボード内で、アプリを作成します。「WEB」テンプレートを選択して、「SDK for Node.js」から開始します (以降のステップでは、既存のプロジェクトを上書きすることになります)。
  3. 入力を促されたら、アプリに一意の名前を入力します (名前には空白や特殊文字を使用しないでください)。
  4. 「ADD A SERVICE OR API (サービスまたは API の追加)」をクリックして、Language Identification サービスのインスタンスを自分のアプリにバインドします。このサービスに「watlidserv」という名前を付けます。
  5. Machine Translation サービスのインスタンスを追加して自分のアプリにバインドします。このサービスに「wattransserv」という名前を付けます。
  6. Question and Answer サービスのインスタンスを追加して自分のアプリにバインドします。このサービスに「watqaserv」という名前を付けます。
  7. ローカル・ファイル・システムで、アプリの bluemixdeploy ディレクトリーにカレント・ディレクトリーを変更します。
  8. manifest.xml を編集して、name の値を一意のアプリ名に変更します。
  9. bluemixdeploy ディレクトリーから cf push コマンドを実行して、Watson Explorer の自分用のバージョンをデプロイします。デプロイが完了すると、この Watson Explorer には http://<自分のアプリ名>.mybluemix.net/ でアクセスできるようになります。

次は、Material-UI ビルド/同期ライブ・アップデート・ツール・チェーンを使用して、迅速な開発を行える環境を構築し、アプリに変更を加えたり、アプリを適応させたりする方法を説明します。

ステップ 4. Material-UI 用に迅速な開発/ビルドを行える環境を構築する

Material-UI 開発/ビルド・ツール・チェーンを (BrowserSync を統合して) 使用すると、1 つ以上のブラウザー (例えば、Firefox のウィンドウ、モバイル Safari のウィンドウ、さらに Chrome のウィンドウ) にアプリを表示しながらコードを変更することができ、変更は瞬時に反映されます。

  1. Material-UI GitHub リポジトリーから、v0.7.0 リリースの ZIP ファイルをダウンロードします。Watson Explorer アプリには v0.7.0 が必要です。
  2. チェックアウトしたコードのルート・レベルと同じレベル (ここに、docs および examples ディレクトリーがあります) に、clientsrc ディレクトリー全体をコピーします。
  3. Material-UI コードのルートで、npm install を実行します。
  4. カレント・ディレクトリーを clientsrc ディレクトリーに変更し、npm install を実行します。
  5. clientsrc ディレクトリーから gulp を実行し、ブラウザーのインスタンスを起動してアプリを実行します。
  6. 必要に応じて、(コンソールから、または実行中のブラウザー・インスタンスから) アプリの URL を指すもう 1 つのブラウザーを起動します。すべてのブラウザー・インスタンスは、変更を行うと同時に同期されます。
  7. 任意のソース・ファイルに変更を加え、迅速な再ビルドとブラウザー更新を観察します。
  8. コードの変更とテストが完了したら、gulp セッションを終了します。gulp build コマンドで、デプロイ可能な成果物をビルドします。
  9. React コードのデプロイ可能な成果物は、clientsrc/build ディレクトリーに格納されます。再デプロイするために、clientsrc/build を bluemixdeploy/public ディレクトリーにコピーします (既存のファイルを上書きします)。

ステップ 5. 他の Watson サービスも探索するようにアプリを拡張する (オプション)

このエクスプローラー・アプリで現在サポートしているのは、12 ある Watson サービスのうち 3 つだけなので、1 つ以上のサービスのサポートをアプリに追加する演習を行う価値はあります。この演習はまた、React がどのようにして複雑な UI をわかりやすく、保守しやすくするかを理解するのにも役立ちます。なぜなら、サービスの新しい UI をこのアプリに追加するのは、ごく簡単なことだからです。

  1. ステップ 4 で Material-UI 開発環境をセットアップしなかった場合は、この時点でセットアップします。
  2. Bluemix にログインし、新しい Watson サービス・インスタンスを追加し、そのサービスをアプリにバインドして、サービスの名前を指定します。プロジェクトの manifest.yml ファイルを編集して、この新しいサービス名を含めます。
  3. Watson サービスの API ドキュメントを読んで、追加した新しいサービスの使用方法と、そのサービスの API を呼び出す方法を理解します。既存のプロキシー・コードを参考にしながら、bluemixdeploy/app.js に新規サービスのプロキシー・サポートを追加する変更を加えます。
  4. サービスの入力をサポートする React ビューの JSX コードを追加します。このコードは、clientsrc/src/app/components/views ディレクトリーに配置します。このディレクトリーにすでに配置されている他のビューのコードを参考にしてください。
  5. 必要になる新しい CSS スタイルがある場合は、そのスタイルを clientsrc/src/app/less/custom-overrides.less ファイルに定義します。
  6. Watson から返された結果をレンダリングする React ビューの JSX コードを追加します。このコードは、clientsrc/src/app/components/view ディレクトリーに配置します。このディレクトリーに配置されている他の結果ビューを参考にしてください。ここで実際に追加しているのは、アクションを (モック) Flux ストアに送信する React コントローラー・ビューです。
  7. clientsrc/src/app/components/store に、サービスをサポートするためのストアを追加します。clientsrc/src/app/components/store/callwatson.js には、サービスのプロキシーを呼び出すメソッドを追加する必要があります。他のストアのコードを参考にしてください。
  8. bluemixdeploy/app.js ファイル (プロキシー・サーバー) に、クライアントから受信した POST リクエストを Watson サービスの呼び出しに変換し、Watson からの結果をクライアント用に変換する新しい経路ハンドラーを追加します。
  9. clientsrc/src/app/app-routes.jsx で、アプリ (react-router) の経路を変更して、新しいビューを含めるようにします。

開発中は、プロキシーおよび React コードの両方をローカル PC 上で実行することができます。詳しくは、README.TXT を参照してください。

まとめ

React を使用すると、Watson Explorer のコードが構造化されて整理され、コードを理解しやすくなります。React のコーディングに関するベスト・プラクティスに従うことで、コードの保守性が向上し、新しいチーム・メンバー (あるいは、この短いチュートリアルの読者) が Web アプリのプロジェクトにすぐに参加することができます。Material-UI のような高品質のコンポーネント・ライブラリーを利用できることから、高性能の Web アプリを迅速に作成することが現実に可能になっています。必要最小限のアプリで、JSX を一元管理して生産性を向上させる React の構文を利用した後は、さらに複雑なプロジェクト (あるいはチームによるコラボレーション・プロジェクト) へとスケールアウトすることができます。


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


関連トピック


コメント

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

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development, Cloud computing
ArticleID=1007236
ArticleTitle=React を使用して IBM Watson エクスプローラーを作成する
publish-date=06112015