目次


Node-RED: bot 操作の基礎

ラボ 3: コミュニティー・ノードと Watson サービスの追加

Comments

コンテンツシリーズ

このコンテンツは全6シリーズのパート#です: Node-RED: bot 操作の基礎

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

このコンテンツはシリーズの一部分です:Node-RED: bot 操作の基礎

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

ラボ 3 の紹介

概要

このラボでは、Watson サービスとコミュニティー・ノードを Node-RED アプリケーションに追加する方法を紹介します。

Node-RED には、便利なノードのコア・セットが付属していますが、ユーザーは、Node-RED プロジェクトとさらに広範なコミュニティーの両方から提供される多数の追加ノードを使用できます。

以下の Watson サービスを追加します。

  • Speech to Text
  • Language Translator
  • Tone Analyzer
  • Conversation
  • Text to Speech

ツイートを Twitter アカウントへ送信できるようにするコードも追加します。

前提条件

ラボ 1 とラボ 2 を完了していること。Watson Language Translator サービスと Watson Conversation サービスが接続され、HTML テンプレートが組み込まれた Node-RED インスタンスが既に実行中である必要があります。

アプリケーションから Twitter にテキストを送信する場合、Twitter アカウントも必要です。

WebRTC をサポートするブラウザーが必要です。

ステップ 1. コミュニティー・ノードを検索する

IBM Cloud で実行する Node-RED インスタンスにはサンプル・ノードのセットが付属しています。しかし、ユーザーは、開発者のコミュニティーによって作成され公開されているコミュニティー・ノードも使用できます。

コミュニティーからノード・ライブラリーをインポートして、マイク、音声、ダッシュボード用のノードを作成します。

このセクションでは、次の Web サイトから Interpreter フローと会話ボット (OK Watson) フローを作成します。
https://github.com/watson-developer-cloud/node-red-labs/tree/master/starter-kits

  1. これから作り直す予定の 2 つのスターター・アプリケーションを含む次の Web ページを開きます。
    https://github.com/watson-developer-cloud/node-red-labs/tree/master/starter-kits
  2. 「Set up Instructions」までスクロールダウンします。

    以下のようなノードを見つける方法を説明します。

  3. 新しいブラウザー・ページを開いて、http://flows.nodered.org/ で Node-RED ライブラリーにナビゲートします。
  4. アプリケーションに追加する microphone ノードを検索します。「nodes」チェック・ボックスを選択します。「flows」は選択しないでください。

    node-red-contrib-browser-utils ライブラリーは、マイク、カメラ、ファイル注入、unzip に対応するノードを提供します。

  5. audio を検索します。node-red-contrib-play-audionode-red-contrib-media-utils の 2 つのライブラリーが表示されます。

    node-red-contrib-play-audio ライブラリーは、speaker ノードを提供します。node-red-contrib-media-utils ライブラリーは、ビデオ・ストリーム用とオーディオ・ストリーム用の media ノードを提供します。このラボでは speaker ノードを使用し、ラボ 4 で、media ノードを使用します。

  6. dashboard を検索します。

    node-red-dashboard ライブラリーは、ダッシュボードの構築に使用できるノードのセットを提供します。これらのノードはこのラボでは使用しません。代わりに、Breaking News と Dashboard Translation の各スターター・キットがダッシュボードを使用します。

ステップ 2. package.json ファイルにコミュニティー・ノードを追加する

Node-RED インスタンスでこれらのノードを使用可能にするために、それらを package.json ファイルに追加する必要があります。

  1. IBM Cloud ページから自分のアプリケーションを見つけて、そのアプリケーションを停止します。
  2. アプリケーションが停止したら、(「経路」ではなく) アプリケーション名をクリックします。
  3. 「Continuous Delivery」という見出しのセクションを見つけて、「Git リポジトリーおよびパイプラインの追加」をクリックします。
  4. 「続行」をクリックして、アプリケーション用の Git リポジトリーを作成します。
  5. Git リポジトリーが作成されるまで待ちます。作成されたら、「閉じる」をクリックします。
  6. 「コードの編集」をクリックします。アプリケーション・ファイルのリストから、package.json ファイルを選択します。
  7. 以下の 4 行をファイル内の任意の場所に追加します。これらの行をファイルの末尾に追加する場合、最後のコンマを忘れずに削除してください。
    "node-red-contrib-browser-utils":"0.x",
    "node-red-contrib-media-utils":"0.x",
    "node-red-contrib-play-audio": "2.0.x",
    "node-red-dashboard": "2.0.x",
  8. 「ファイル」>「保存」をクリックして、変更内容を保存します。

    ここで、もう 1 つ変更を加えておきます。microphone ノードによってメモリー内に一時ファイルが作成されるため、Node-RED インスタンスのメモリー割り振りを増やす必要があります。

  9. manifest.yml ファイルを選択します。
  10. メモリー割り振りを 1024 M 以上に増やします。
  11. 変更内容を保存し、Node-RED インスタンスを再デプロイします。
  12. アプリケーションが再デプロイされ、再起動するまで待ちます。
  13. IBM Cloud ダッシュボードまたは自分のアプリケーションにナビゲートします。
  14. フロー・エディター内で、Node-RED インスタンスに移動します。これはブラウザー・アプリケーションであるため、ページを最新表示します。
  15. microphone ノードを検索します。

    microphone ノードは、Chrome と新しいバージョンの Firefox でしか使用できないブラウザーの機能を使用します。

  16. Chrome を使用していない場合は、Chrome または Firefox に切り替えます。

    microphone ノードは、コンピューターのマイクにアクセスする必要があり、これは HTTPS でのみ可能です。Node-RED インスタンスを IBM Cloud などのプラットフォーム上で実行している場合、必ず HTTPS を使用してください。

  17. 新しいタブを作成し、タブに Interpreter という名前を付けます。次に、「完了」をクリックします。
  18. 「入力」の microphone ノードをキャンバスにドラッグ・アンド・ドロップします。
  19. 「機能」の delay ノードをキャンバスにドラッグ・アンド・ドロップします。
  20. 「出力」の play audio ノードをキャンバスにドラッグ・アンド・ドロップします。
  21. ノード間をワイヤリングし、変更をデプロイします。
  22. microphone ノードのタブをクリックして、録音を開始します。
  23. プロンプトが出された場合、ノードがマイクにアクセスするのを許可します。
  24. マイクに向かって話します。タブをクリックして録音を停止します。

    約 5 秒後に、録音した声が再生されます。

ステップ 3. Speech to Text、Tone Analyzer、Text to Speech の各サービスを追加する

これから作成するアプリケーションでは、Watson サービスである Speech to Text、Tone Analyzer、Text to Speech を使用します。このセクションでは、それらのサービスを Node-RED インスタンスに接続します。

  1. 自分の IBM Cloud ページに移動し、「サービスの作成」をクリックします。
  2. 「Speech to Text」サービスを選択します。
  3. サービスをアプリケーションに接続します。アプリケーションは再ステージングしないでください。
  4. 上記の処理を繰り返して、Tone Analyzer サービスを作成します。
  5. サービスをアプリケーションに接続します。アプリケーションは再ステージングしないでください。
  6. 上記の処理を繰り返して、Text to Speech サービスを作成し、接続します。
  7. 3 つのすべてのサービスを追加した後で、アプリケーションを再ステージングします。
  8. アプリケーションが再起動するまで待ちます。

ステップ 4. Interpreter アプリケーションを再作成する

このセクションでは、GitHub の Interpreter アプリケーションを再作成します。このアプリケーションは、マイクで録音された音声を各種言語に翻訳する Node-RED フローです。

  1. Node-RED フロー・エディターに移動します。ワイヤーを選択し、削除します。
  2. speech to text ノードをキャンバスにドラッグ・アンド・ドロップします。
  3. speech to text ノードを選択し、「情報」タブをクリックします。
  4. スクロールダウンし、入力として msg.payload 上の音声バッファーが要求されていることを確認します。
  5. さらにスクロールダウンします。出力は、 msg.transcription に置かれることがわかります。
  6. speech to text ノードをダブルクリックして、構成を編集します。言語を「US English」に設定し、「Continuous」チェック・ボックスを選択します。次に、「完了」をクリックします。
  7. microphone ノードを speech to text ノードにワイヤリングします。
  8. language translator ノードをキャンバスにドラッグ・アンド・ドロップします。
  9. language translator ノードを選択します。
  10. 「情報」タブに移動します。入力は msg.payload 上に置かれること、および出力は msg.translation 上に置かれることを確認します。

    speech to text ノードは出力を msg.transcription に送信しますが、language translator ノードは msg.payload で入力を受け取る必要があります。これは、これらのノードを直接接続できないことを意味します。

  11. function ノードをキャンバスにドラッグ・アンド・ドロップします。function ノードをダブルクリックして編集します。以下の名前とコードを追加し、speech to text ノードからの出力を language translation ノードへ渡せるようにします。

    名前:
    Prepare for Translation

    コード:
    msg.payload = msg.transcription;
    return msg;

  12. 「完了」をクリックします。
  13. speech to text ノード、function ノード、language translator ノードをワイヤリングします。
  14. language translator ノードをダブルクリックして構成します。ソース言語とターゲット言語を選択します。この例では、「English」「Spanish」を選択します。次に、「完了」をクリックします。
  15. text to speech ノードをキャンバスにドラッグ・アンド・ドロップします。そのノードを選択し、「情報」タブを見ます。
  16. スクロールダウンし、入力は msg.payload 上に置かれ、出力は msg.speech 上に置かれることを確認します。

    これは、単純な翻訳結果を msg.payload に出力する language translator ノードを直接 text to speech ノードに接続できることを意味します。しかし、text to speech ノードは play audio ノードに直接接続できません。

  17. text to speech ノードをダブルクリックして構成します。言語、音声、フォーマットを指定します。次に、「完了」をクリックします。
  18. function ノードをキャンバスにドラッグ・アンド・ドロップします。function ノードをダブルクリックして編集します。「Function」の下で、「msg.payload = msg.speech」と設定します。これで、msg.payload は text to speech サービスからの音声を指し示すようになり、それを play audio ノードに渡すことができるようになります。
  19. 「完了」をクリックします。
  20. ノード間をワイヤリングします。
  21. フローをデプロイします。これで、アプリケーションを使用して音声の録音を試すことができます。
  22. 自分の声を録音するには、「microphone」タブをクリックし、コンピューターのマイクに向かって話します。録音を停止するには、再度タブをクリックします。
  23. アプリケーションが入力を処理するまで待ち、翻訳された出力を聴きます。

ステップ 5. OK Watson アプリケーションを準備する

このセクションでは、Watson Conversation サービスを使用して、「OK Watson」という名前でボット・アプリケーションを再作成します。Watson チャットボットの詳細については、Conversation サービスのチュートリアルを参照してください。

OK Watson スターター・キットから事前ビルドされた Conversation をインポートします。

  1. GitHub の OK Watson スターター・キットのページを開きます。
  2. このページにある OK Watson Starter Conversation JSON へのリンクをクリックします。
  3. 「Raw」を右クリックし、「名前を付けてリンク先を保存」を選択します。
  4. .json ファイル拡張子のファイルを保存します。
  5. マシン上でこのファイルを見つけて開き、ファイルが適切にダウンロードされたこと、ファイルに JSON コンテンツが含まれていることを確認します。

    これで、ファイルを Conversation サービスにインポートする準備ができました。

  6. 自分の IBM Cloud ページを開き、Conversation サービスを選択します。
  7. 「Conversation ツール」セクションを見つけて、「ツールの起動 (Launch tool)」をクリックします。
  8. 「インポート (Import)」アイコンをクリックします。
  9. 目的のファイルを選択します。「インポート (Import)」の下の「すべて (インテント、エンティティー、およびダイアログ) (Everything (Intents, Entities, and Dialog))」を選択します。次に、「インポート (Import)」をクリックします。このアクションによってワークスペースが作成されます。
  10. 「メニュー」アイコン (3 つの点) をクリックし、「詳細を表示 (View details)」をクリックします。

    このビューには、ワークスペースの要約とワークスペース ID が表示されます。Node-RED フローで Conversation サービスを使用するためにはこの ID が必要です。

  11. ロードされたインテント、エンティティー、ダイアログの各ノードを表示するために、「戻る」ボタンをクリックします。
  12. 「開始 (Get Started)」をクリックします。

    ワークスペースが表示されます。

  13. サービスはユーザーの会話に基づいてトレーニングをするためにしばらく時間を必要とします。トレーニングが終了したかどうかを確認するには、「Watson に質問 (Ask Watson)」アイコンをクリックします。

    「Watson is training on your recent changes」というメッセージが表示された場合、Conversation はまだ使用できる状態ではありません。

    メッセージが何もない場合、Conversation は使用できる状態です。

ステップ 6. link ノードを追加してアプリケーション・フローのロジックを見やすくする

  1. OK Watson スターター・キットのホーム・ページを開きます。
  2. JSON フローのリンクをクリックします。
  3. 「Raw」をクリックして、すべての JSON コードを表示します。
  4. すべてのコードを選択してクリップボードにコピーします。インポートするフローでは、アプリケーション・フローのロジックの見やすくするために link ノードを使用します。
  5. フロー・エディターで、Node-RED インスタンスを開きます。これらの link ノードがどのように機能するかを確認するために、「Flow 1」タブをクリックします。
  6. このタブに、Hello World などの名前を付けます。次に、「完了」をクリックします。
  7. inject ノードをキャンバスにドラッグ・アンド・ドロップします。
  8. 「出力」の link ノードを 2 つキャンバスにドラッグ・アンド・ドロップします。
  9. 「入力」の link ノードをキャンバスにドラッグ・アンド・ドロップします。
  10. Hello World Inject ノードと language translator ノードの間のリンクを選択し、削除します。
  11. 2 番目の inject ノードをダブルクリックし、Goodbye Inject などの名前にします。「ペイロード」フィールドに適当なストリングを設定します。例えば、「It's time for me to go now」などにします。次に、「完了」をクリックします。
  12. Hello World Inject ノード、language translator ノード、Goodbye Inject ノードがそれぞれ別個の link ノードにワイヤリングされるように、ノード間をワイヤリングします。
  13. Hello World Inject ノードに接続されている link をダブルクリックします。
  14. link out ノードを Hello String などの名前にします。次に、「完了」をクリックします。
  15. Goodbye Inject ノードに接続されている link ノードに対しても前のステップを繰り返します。
  16. この link ノードは Goodbye String などの名前にします。次に、「完了」をクリックします。
  17. language translator ノードにワイヤリングされている link ノードをダブルクリックします。
  18. このリンクには Translation Input などの名前を付けて、両方の出力リンクに接続するためのオプション (青いチェック・ボックス) を選択します。次に、「完了」をクリックします。
  19. 特定の link ノードがどこに接続されているかを確認するには、そのノードを選択します。例えば、language translator ノードに接続されている入力 link ノードを選択します。
  20. 「デプロイ」をクリックして変更を保存します。
  21. 「デバッグ」タブをクリックします。リストをフラッシュするには、「ごみ箱」アイコンをクリックします。
  22. inject ノードを順番にクリックします。

    出力が「デバッグ」タブに表示されます。

これで、OK Watson フローをインポートする準備ができました。

ステップ 7. OK Watson フローをインポートする

このセクションでは、OK Watson アプリケーションを再作成します。これはより複雑なフローになるため、フローを作成するためのショートカットを使います。

  1. 新しいタブを作成し、タブの名前を OK Watson などに設定します。「完了」をクリックします。

    フローはまだユーザーのクリップボードに残っています。残っていない場合は、ステップ 6 の手順 1 から 4 を繰り返してください。

    フローをフロー・エディターにインポートする準備ができました。

  2. フロー・エディターのメニューをクリックします。
  3. 「読み込み (Import)」>「クリップボード (Clipboard)」をクリックします。
  4. フローをテキスト・ボックスに貼り付けます。次に、「読み込み (Import)」をクリックします。

    「Zoom」ボタンを使用すると、フロー全体を表示できます。

    OK Watson フローがフロー・エディター内に表示されるようになりました。

    test txt in グループ内のノードに注目します。これらのノードは、サンプル入力ストリングを提供します。

  5. link ノードをクリックします。テキストが直接 tone analyzer ノードに渡されている点に注目してください。
  6. speech in ノード・グループに注目します。このグループは、microphone ノードと speech to text ノードを使用します。
  7. speech to text ノードをダブルクリックして、使用言語を設定します。次に、「完了」をクリックします。
  8. link ノードを選択します。speech to text 入力ノードは、tone analyzer ノードにも接続されている点に注目してください。
  9. tone analyzer ノード・グループ内の tone analyzer ノードをダブルクリックします。このトーンは、入力テキストの感情を検出するように構成されています。
  10. 「キャンセル」をクリックします。
  11. add emotion to context という名前の function ノードをダブルクリックします。

    この function ノードのスクリプトによってトーンの最高スコアが判定され、そのスコアが、conversation ノードが探す msg フィールドに設定されます。

  12. 「中止」をクリックします。
  13. link ノードをクリックします。tone analyzer からの出力が conversation ノードにリンクされている点に注目してください。
  14. conversation ノード・グループに注目します。
  15. conversation ノードを構成するために、ステップ 5. OK Watson アプリケーションの準備の手順 6 から手順 11 で作成した conversation ワークスペース ID を見つけます。次に、IBM Cloud に移動します。
  16. Conversation サービスのインスタンスを見つけます。
  17. サービスをクリックし、ツールを起動します。
  18. 目的のワークスペースを見つけます。
  19. 「詳細を表示 (View details)」をクリックしてワークスペース ID を確認します。
  20. 「コピー」ボタンをクリックして、ID をクリップボードにコピーします。
  21. Node-RED フロー・エディターに戻ります。
  22. conversation ノードをダブルクリックします。ワークスペース ID を貼り付けます。「Save context」チェック・ボックスを選択して、ノードが conversation のコンテキストを保持するようにします。

    「Save context」を選択しない場合は、コンテキストに関連付けられたコンテキスト・オブジェクトを使って、アプリケーション・フローの責任でコンテキストを受け渡す必要があります。このオプションを設定してコンテキストを保存すると、ノード内のコードが自動的にこの制御を実行できるようになります。

  23. 「完了」をクリックします。
  24. text to speech ノードを編集します。出力言語を設定します。
  25. 「完了」をクリックします。ここでは、twitter ノードは構成しません。
  26. 「デプロイ」をクリックしてフローをデプロイします。
  27. マイクを使用するか、サンプルのテスト・テキストを使用してアプリケーションを試します。

ステップ 8. Twitter アカウントに接続する

  1. Config ノード・グループに注目します。reset context 入力によって Conversation コンテキストが強制的にリセットされます。これにより、会話は始めから再開されます。
  2. add context という名前の function ノードをダブルクリックします。情報が流れる先の Twitter ハンドルを組み込むように機能を編集します。

    handle: "<your_twitter_handle>",

  3. 「完了」をクリックします。
  4. link ノードを選択します。このノードは、直接 conversation ノードに流れています。
  5. conversation ノード・グループ内の twitter (Tweet) ノードをダブルクリックします。
  6. 「鉛筆」アイコンをクリックします。次に、「Click here to authenticate」をクリックします。
  7. プロンプトが出された場合、Twitter にログインします。次に、「連携アプリを認証」をクリックします。
  8. 認証が完了するまで待ちます。
  9. Node-RED フロー・エディターに戻ります。「追加」をクリックします。次に、「完了」をクリックします。
  10. 「デプロイ」をクリックして、変更したフローをデプロイします。これでアプリケーションの準備ができました。
  11. reset context のボタンをクリックします。
  12. set user details のボタンをクリックします。
  13. 各 inject ノードのマイクまたはサンプル・テキストを使用してアプリケーションと対話すると、アプリケーションがツイートを送信します。
  14. Twitter でツイートを確認します。

まとめ

これで、以下のような複数の Watson サービスを使用する 2 つのアプリケーションが実行可能になりました。

  • Speech to Text
  • Translation
  • Tone Analyzer
  • Conversation
  • Text to Speech

また、Twitter アカウントにツイートを送信できるようにもなりました。

ラボ 3 ソリューション、パート 1

ラボ 3 ソリューション、パート 2


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


コメント

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

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Cloud computing, Web development
ArticleID=1056033
ArticleTitle=Node-RED: bot 操作の基礎: ラボ 3: コミュニティー・ノードと Watson サービスの追加
publish-date=12262017