目次


IBM Watson を利用して言語翻訳機能をアプリケーションに追加する

Language Translation サービス、Node-RED、AngularJS を利用して、ユーザーが入力したテキストを翻訳する IBM Cloud アプリケーションを作成する

Comments

アプリケーションに言語翻訳機能を追加したいと思いませんか?IBM CloudWatson Language Translator サービスは、IBM Watson コグニティブ・コンピューティング・システムを使用して、ユーザーが入力したテキストを別の言語に変換します。Node-RED フロー・エディターを使用すれば、ポイント・アンド・クリック操作で簡単に、この Language Translator サービスを IBM Cloud アプリケーション内で利用できるようにすることができます。このチュートリアルでは、Language Translator サービス・インスタンス用の REST エンドポイントを公開するアプリケーションを、Node-RED を使用して作成する方法を紹介します。その後、AngularJS を使用して作成済みのユーザー・インターフェース (UI) を追加します。この UI には、ユーザーが入力するテキストの AFINN-111 センチメント・スコアを可視化したものが含まれています。ほんの数分で、皆さんのアプリケーションが英語からスペイン語に翻訳すると同時に、ユーザーの感情もレポートできるようになります。

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

この Watson Language Translator サービスを利用した Node センチメント分析アプリケーションを作成するには、以下のアカウントとリソースが必要です。

  • インターネット・ブラウザー (Chrome、Firefox、Internet Explorer、Safari など)
  • IBM Cloud アカウント

アーキテクチャーの概要

以下の図に、このアプリケーションのアーキテクチャーが示されています。

アーキテクチャーの概要図
アーキテクチャーの概要図

この図に示されているステップの内容は以下のとおりです。

  1. ユーザーが、Web フロント・エンドの AngularJS Web アプリケーションにテキストを入力し、ソース言語とターゲット言語を指定します。
  2. AngularJS Web アプリケーションが REST 呼び出しを使用して、ユーザーが入力したメッセージを Node-RED バックエンド・アプリケーションに渡します。
  3. IBM Cloud 内で稼働中の Node-RED アプリケーションに含まれる sentiment ノードが、ユーザーのメッセージを分析してセンチメント・スコアを返します。続いて Node-RED アプリケーションが、入力テキストを Watson Language Translator サービスに送信します。
  4. Watson Language Translator サービスが、入力テキストをターゲット言語に翻訳し、翻訳後のテキストを Node-RED アプリケーションに返します。
  5. Node-RED アプリケーションが、翻訳されたメッセージとセンチメント・スコアを Web アプリケーションに送信します。
  6. Web アプリケーションが、翻訳されたメッセージとセンチメント・スコアをユーザーに提示します。
1

IBM Cloud サービスをセットアップする

言語翻訳フローでは、IBM Cloud に用意されている Node-RED の機能を使用します。フローを開発するには、最初に Node-RED アプリケーションを作成して、そのアプリケーションに Language Translator サービスを追加する必要があります。

  1. IBM Cloud にログインします。
  2. カタログに表示される利用可能なボイラープレートの中から、「Node-RED Starter」を選択します。 Node-RED Starter ボイラープレートを示すスクリーンショット
    Node-RED Starter ボイラープレートを示すスクリーンショット
  3. 「App name (アプリケーション名)」および「Host name (ホスト名)」フィールドに、一意に決まる名前を入力してから、「Create (作成)」をクリックします。 一意の名前を入力する画面のスクリーンショット
    一意の名前を入力する画面のスクリーンショット
    : アプリケーションのデプロイが完了するまでに数分かかる場合があります。進捗状況をモニターするには、「Getting started (開始)」タブから「Logs (ログ)」タブに切り替えてください。 「Logs (ログ)」タブのスクリーンショット
    「Logs (ログ)」タブのスクリーンショット
  4. ログにデプロイメントが完了したことが示されたら、Node-RED のセキュリティー・パラメーターをセットアップする作業に取り掛かれます。 セットアップを開始できる状態を示すスクリーンショット
    セットアップを開始できる状態を示すスクリーンショット
  5. 「Visit App URL (アプリケーション URL にアクセス)」をクリックします。これにより新しいブラウザー・ウィンドウが開き、作成した Node-RED アプリケーションが表示されます。
  6. ユーザー名とパスワードを入力して、Node-RED アプリケーションをセキュリティーで保護するための手順に従います。
  7. ログが表示されているブラウザー・ウィンドウに戻り、左側にあるメニューで「Connections (接続)」タブをクリックし、続いて「Connect new (新規接続)」をクリックします。 「Connect new (新規接続)」ボタンを示すスクリーンショッ
    「Connect new (新規接続)」ボタンを示すスクリーンショッ
  8. カタログの「Watson」カテゴリーに含まれる「Language Translator」をクリックします。 Language Translator サービスを示すスクリーンショット
    Language Translator サービスを示すスクリーンショット

    デフォルト名を使用するか、デフォルト名を編集してカスタマイズした名前にします。また、左側にある「Connect to (接続先)」ドロップダウン・ボックスから必ず、前のステップで作成した Node-RED アプリケーションを選択してください。 Node-RED アプリケーションを選択する画面のスクリーンショット
    Node-RED アプリケーションを選択する画面のスクリーンショット
  9. 「Create (作成)」をクリックし、再ステージを促されたら「Restage (再ステージ)」をクリックします。アプリケーションの再ステージングが行われている間、その進捗状況を「Logs (ログ)」タブで確認できます。
  10. アプリケーションの再ステージングが完了したら、ダッシュボードに戻ってアプリケーションを開きます。アプリケーションの右下に、継続的デリバリーに関する情報が表示されます。 継続的デリバリーに関する情報を示すスクリーンショット
    継続的デリバリーに関する情報を示すスクリーンショット
  11. 継続的デリバリーの「Enable (有効化)」をクリックします。 継続的デリバリーの「Enable (有効化)」を示すスクリーンショット
    継続的デリバリーの「Enable (有効化)」を示すスクリーンショット
  12. 次に、「Create (作成)」をクリックして、アプリケーション用の継続的デリバリー・ツールチェーンを作成します。 継続的デリバリー・ツールチェーンを作成する画面のスクリーンショット
    継続的デリバリー・ツールチェーンを作成する画面のスクリーンショット
  13. ツールチェーン・リポジトリーの作成が完了したら、右上隅にある「View (表示)」をクリックします。これにより、Node-RED アプリケーションが表示されます。
  14. Node-RED アプリケーションで、「Go to your Node-RED flow editor (Node-RED フロー・エディターを開く)」ボタンをクリックします。
2

Node-RED で REST 言語翻訳フローを作成する

ここからは、Node-RED フロー・エディターを使って REST サービスを作成します。Node-RED フローでメッセージを取り、そのメッセージのセンチメント・スコアを取得してから、Watson を使ってメッセージを翻訳します (この例では、スペイン語に翻訳します)。以下の手順に従って、ワークフローを作成、構成、テストしてください。

  1. パレットから http 入力ノードをキャンバスにドラッグします。 http 入力ノードを示すスクリーンショット
    http 入力ノードを示すスクリーンショット
  2. キャンバス内の http ノードをダブルクリックし、GET メソッドに対応するようにノードを構成します。「url」フィールドには、「/olli」と入力します。 http 入力ノードを編集する画面のスクリーンショット
    http 入力ノードを編集する画面のスクリーンショット
    「Done (完了)」をクリックし、/olli をリッスンする REST サービスを作成します。
  3. function という名前の関数ノードをキャンバスにドラッグします。 関数ノードをキャンバスにドラッグする画面のスクリーンショット
    関数ノードをキャンバスにドラッグする画面のスクリーンショット

    コンピューターのマウスを使って、http ノード上の出力を表す四角を、function ノード上の入力を表す四角に接続します。 ノードを相互に接続する画面のスクリーンショット
    ノードを相互に接続する画面のスクリーンショット
  4. この関数が必要となる理由は、http 入力ノードのデフォルトのメッセージ・ペイロード出力は、各リクエスト・パラメーターがフィールドとなっている複合 JSON オブジェクトであるためです。翻訳サービスとセンチメント分析は、どちらも単純なストリングを要求します。そのためこの関数では、リクエスト・パラメーターとして受信されたメッセージを msg オブジェクトのペイロード・フィールドにコピーして、フローの残りで使用できるようにします。

    新しいノードをダブルクリックして、「Name (名前)」フィールドに「Swap Arguments」と入力します。「Function (関数)」フィールドには、以下の 3 行のコードを追加します。
    msg.lang=msg.payload.lang;
    msg.payload=msg.payload.message;
    return msg;
    関数ノードを編集する画面のスクリーンショット
    関数ノードを編集する画面のスクリーンショット
  5. 「Done (完了)」をクリックします。
  6. sentiment 分析ノードをキャンバスにドラッグし、このノードを「Swap Arguments」という名前の関数ノードに接続します。 sentiment 分析ノードと Swap Arguments 関数ノードを接続する画面のスクリーンショット
    sentiment 分析ノードと Swap Arguments 関数ノードを接続する画面のスクリーンショット

    センチメント分析は、人間の言語でのストリングを要求し、-5 から +5 の範囲のセンチメント・スコアを返します。負の値はネガティブな感情に相当し、正の値はポジティブな感情に相当します。ゼロはニュートラルな感情を意味します。
  7. language translator IBM Watson ノードをキャンバスにドラッグし、このノードを sentiment ノードに接続します。 language translator ノードと sentiment ノードを接続する画面のスクリーンショット
    language translator ノードと sentiment ノードを接続する画面のスクリーンショット

    このノードは、Language Translator 呼び出しと sentiment ノードからの出力を抽出し、その出力を使用しやすいストリングに変換してから返します。
  8. language translator ノードをダブルクリックして、編集します。「Mode (モード)」には「Translate (翻訳)」、「Domain (ドメイン)」には「Conversational (会話)」、「Source (ソース)」には「English (英語)」、「Target (ターゲット)」には「Spanish (スペイン語)」を選択します。「Parameters Scope (パラメーター・スコープ)」ボックスにチェック・マークが付けられていることを確認してから、「Done (完了)」をクリックします。 language translator 入力ノードを編集する画面のスクリーンショット
    language translator 入力ノードを編集する画面のスクリーンショット
  9. 別の function ノードを追加して、language translator ノードに接続します。新しく追加したノードをダブルクリックして、名前 (例えば、「concatenate response」) を入力します。 concatenate response ノードを示すスクリーンショット
    concatenate response ノードを示すスクリーンショット
  10. 「Function (関数)」フィールドに以下の 2 行のコードを追加します。
    msg.payload=msg.payload+";"+msg.sentiment.score;
    return msg;
    concatenate response ノードを編集する画面を示すスクリーンショット
    concatenate response ノードを編集する画面を示すスクリーンショット
  11. 「Done (完了)」をクリックします。
  12. 使用可能な出力ノードの中から http レスポンス・ノードを追加して、上記で追加した関数ノードに接続します。Node-RED の最終的なフローは、以下のようになっているはずです。 完成したフロー
    完成したフロー
  13. 「DEPLOY (デプロイ)」をクリックします。これで、REST サービスが稼働状態になり、誰でも使えるようになります。

    : デプロイ中に許可エラーを受け取った場合は、Node-RED インスタンス用に作成したユーザー名とパスワードを使ってログインしていることを確認してください。
  14. ブラウザーで、REST サービスをテストするために、以下の URL にメッセージを送信します。
    http://<<yourappname>>.mybluemix.net/olli?message=the%20world%20is%20great&lang=mt-enus-eses
  15. レスポンスでテキストがスペイン語に翻訳され、センチメント・スコアが返されることを確認します。 スペイン語に翻訳されたテキストを示すスクリーンショット
3

AngularJS UI を Node-RED に追加する

REST サービスの準備ができたので、次はこのサービスを呼び出すアプリケーションが必要です。このチュートリアルのために、AngularJS を使用して、スターター・アプリケーションを作成しておきました。この単一ページのアプリケーションは、1 つの index.html ファイルと REST サービスの呼び出しで構成されています。皆さんが行う必要がある作業は、このコードのコピーを IBM Cloud DevOps Services にダウンロードし、IBM Cloud DevOps Services からデプロイして Node-RED ランタイムに UI を注入することです。

  1. IBM Cloud ダッシュボードに戻り、作成したアプリケーションをクリックします。
  2. アプリケーションの概要ページで、「Continuous Delivery (継続的デリバリー)」セクションに示されている「View toolchain (ツールチェーンを表示)」リンクをクリックします。 「View toolchain (ツールチェーンを表示)」リンクを示すスクリーンショット
    「View toolchain (ツールチェーンを表示)」リンクを示すスクリーンショット
  3. ツールチェーンに含まれている「Eclipse Web IDE」タイルを選択して、コードを編集します。
  4. このチュートリアルの「UI コードを入手する」をクリックして、ui.zip ファイルをローカル・ファイル・システムに保存します。
  5. Toolchain Web IDE コード・エディターのディレクトリー・ツリー内で、public フォルダーを右クリックして「Import (インポート)」->「File or Zip Archive (ファイルまたは zip アーカイブ)」を選択します。 アーカイブをインポートする画面のスクリーンショット
    アーカイブをインポートする画面のスクリーンショット
  6. ローカル・ストレージから ui.zip を選択し、「OK」をクリックしてファイルの中身をプロジェクトの public ディレクトリーに解凍します。
  7. これでコードがプロジェクトの public/ui ディレクトリーに格納されました。このコードを変更する必要はありませんが、index.html の内容を調べることで、ロジックを確認することができます。ライン 36 が、Node-RED ワークフローに対する REST サービス呼び出しです。ページが表示されると、customerController() 関数が実行されて、submit() 関数がビューのスコープに追加されます。この関数は、ユーザーが「Translate (翻訳)」ボタンをクリックすると呼び出されます。このボタンをクリックすると、Node-RED REST サービスに対する HTTP リクエストがトリガーされます。このリクエストにより、ユーザーが選択した翻訳言語の指定と併せて翻訳対象のテキストがサービスに渡されます。レスポンスを受信すると、スコープに設定された翻訳済みメッセージとセンチメント・スコアの値がビューに表示されます。
  8. 再生ボタン (右向きの三角形) をクリックして、AngularJS UI が含まれる変更後の Node-RED ボイラープレートを IBM Cloud にデプロイします。 再生ボタンをクリックしてデプロイする画面のスクリーンショット
    再生ボタンをクリックしてデプロイする画面のスクリーンショット
  9. アプリケーションが http://yourappname.mybluemix.net/ui で稼働中になりました。
4

アプリケーションをテストする

  1. ブラウザーで http://yourappname.mybluemix.net/ui を開きます。目的の言語翻訳を選択し、翻訳するテキストを入力したら、「Translate (翻訳)」をクリックします。 「Translate (翻訳)」ボタンを示すスクリーンショット
    「Translate (翻訳)」ボタンを示すスクリーンショット

    アプリケーションの内部では、Angular コードが Node-RED ワークフローに対する REST サービス呼び出しを開始します。REST サービスから返されたストリングは、AngularJS アプリケーションによって整形されます。
  2. アプリケーションが正常に機能したことを確認します。選択した言語に翻訳されたテキスト、センチメント・スコア、そしてそのセンチメント・スコアを反映するように表情が設定された顔の画像が表示されていれば、アプリケーションは正常に機能しています。 翻訳されたテキストとセンチメント・スコアを可視化した画像を表示する画面のスクリーンショット

まとめ

このチュートリアルでは、Node-RED を使用して迅速に REST サービスを作成する方法、そしてそのサービスに IBM Cloud 上で実行中の AngularJS アプリケーションからアクセスする方法を説明しました。作成したアプリケーションは、Watson Language Translator サービスを利用してテキストを別の言語に翻訳するほか、センチメント分析サービスを利用してセンチメント・スコアを表示します。Node-RED を使用してさらに別の REST サービスを作成し、これらのサービスを利用するアプリケーションを作成してください。


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


関連トピック


コメント

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

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Cloud computing, Web development
ArticleID=1056757
ArticleTitle=IBM Watson を利用して言語翻訳機能をアプリケーションに追加する
publish-date=01182018