目次


Node-RED: bot 操作の基礎

ラボ 4: コグニティブな Web ページと Messenger ボットの作成

Comments

コンテンツシリーズ

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

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

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

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

ラボ 4 の紹介

概要

このラボでは、以下のような Node-RED 拡張フローを作成します。

  • Watson Conversation サービスを Facebook Messenger に接続する。
  • CSS およびブラウザー JavaScript の再利用を許可するテクニックを利用する。
  • 翻訳のためにビデオ・ストリームから音声を分離するメディア・ユーティリティーを使用する。

前提条件

前のラボをすべて完了していること。Watson Language Translator サービス、Speech to Text サービス、Text to Speech サービス、Conversation サービスが接続された Node-RED インスタンスが既に実行中である必要があります。

ステップ 1. Facebook Messenger 資格情報を取得する

Facebook Messenger に接続するために、以下のトークンが必要です。

  • ページ・アクセス・トークン: ユーザーが Messenger に送信するときにユーザーの身元を証明するために使用する、Facebook によって生成されるトークン。
  • 確認トークン: Facebook がユーザーのアプリケーション・エンドポイントを検査するために使用する、ユーザーによって生成されるトークン。
  1. 確認トークンを作成します。(確認トークンは、単純にテキスト・エディターで作成して保存できます。)

    このトークンは自分以外のユーザーに知らせないでください。これは、着信要求が有効かどうかを検査するために使用します。トークンは任意のテキストにできますが、他の人には推測するのが難しいテキストにする必要があります。以下に例を示します。

    ThisIsMyPersonalVerificationTokenThatOnlyIKnowAbout

    以下のステップで、Facebook のページ・アクセス・トークンを生成する方法を示します。

  2. Web ページを開きます。

    https://developers.facebook.com/docs/messenger-platform

  3. 「スタートガイド」をクリックします。

    「クイックスタート」ガイドのステップに従って、新しいアプリケーションを登録し、新規ページを作成します。それらのステップについて、このラボで説明します。

  4. 「Facebook アプリ」をクリックします。その後、Facebook にログインします。
  5. まだ登録が済んでいない場合、Facebook 開発者として登録します。
  6. 既に Facebook 開発者として登録済みの場合は、「新しいアプリを追加」をクリックします。このラボの一環として新しく登録した場合、このボタンは表示されません。代わりに、次のステップに進んでください。
  7. 「新しいアプリ ID を作成」フォームで、アプリケーションの表示名を入力し、カテゴリーを選択します。次に、「アプリ ID を作成」をクリックします。
  8. セキュリティー検査の一部として難読化テキストを入力します。
  9. 「Messenger」ページで、「トークン生成」セクションを見つけます。統合するページが既に存在する場合は、そのページを選択します。ない場合は、「新しいページを作成 (Create a new Page)」をクリックします。
  10. ページ・オプションを選択します。例えば、「Cause or Community」を選択します。
  11. 新しいページの名前を入力します。次に、「スタート (Get Started)」をクリックします。
  12. ページの「基本データ」セクションに何らかのテキストを入力します。次に、「情報を保存」をクリックします。
  13. オプション: プロフィール写真を追加します。写真やその他の情報を追加する必要がなければ、各タブで「スキップ」をクリックします。最後のタブで、「保存」をクリックします。

    これで新しいページができました。「Message」リンクに注目してください。この後コーディングするボットの会話がここに表示されることになります。

  14. 開発者ページの「トークン生成」セクションに戻ります。
  15. 「ページを選択」をクリックします。リストに新しいページを表示するには、ページの最新表示が必要な場合があります。
  16. <your_user_name> として続行 (Continue As <your_user_name>)をクリックします。
  17. 「OK」をクリックして、ページにアクセス権を付与します。
  18. 後で入力できるように、ページ・アクセス・トークンをコピーしておきます。
  19. 前に作成したページ・アクセス・トークンと確認トークンの両方のコピーを保管していることを確認します。

ステップ 2. Node-RED Webhook を作成する

ここまでで、Node-RED アプリケーションによる Facebook Messenger 上でのチャットの listen を可能にする Webhook を作成する準備ができました。

  1. Facebook 開発者ページ上で Webhook セクションを見つけます。
  2. 「Webhookの設定」をクリックします。
  3. 新しいページのサブスクリプションを完了します。
    • 「コールバック URL」を入力します。これは、必要な任意のエントリー・ポイントを持つ、Node-RED インスタンスの URL です。例えば、以下のように入力します。

      <your_Node-RED_instance_URL>/mybot

    • 「トークンを確認」に入力します。
    • 「サブスクリプションフィールド」の下の「messages」チェック・ボックスを選択します。
    • 「確認して保存」をクリックします。

    コールバック確認エラーが表示されます。原因は、まだ /mybot コールバックの作成が完了していないためです。

  4. フロー・エディターで、Node-RED インスタンスに移動します。
  5. 新しいタブを作成し、それに Messenger Webhooks などの名前を付けます。
  6. 以下のノードをキャンバスにドラッグ・アンド・ドロップします。
    • 「入力」の http ノード
    • 「出力」の http response ノード
    • function ノード
    • 「出力」の debug ノード
  7. ノード間をワイヤリングします。まず、debug ノード (msg.payload) を入力 http ノードと function ノードにワイヤリングします。そこから、http response ノードにワイヤリングします。
  8. http 入力ノードをダブルクリックします。メソッドには GET を設定し、URL には、Facebook Messenger の Webhook として登録した URL を設定します。例えば、/mybot です。Messenger Verification Webhook という名前を付けます。次に、「完了」をクリックします。
  9. function ノードをダブルクリックします。GET Subscribe という名前を付けてから、以下の JavaScript を入力します。トークン 'ThisIsMyPersonalVerificationTokenThatOnlyIKnowAbout' (緑色で表示されている部分) を実際の確認トークンに置換することを忘れないでください。

    このスクリプトによって、着信要求が確認トークンの要求であるかどうかが検査されます。スクリプトは、送信されたトークンが予期したものであるかどうかをチェックします。次にスクリプトは msg.payload を Facebook Messenger によって送信されたチャレンジに設定して、サブスクリプションが受け入れられたこと (ページがフォローされていること) を確認します。

    var mode = '';
    var vtoken = '';
    var challenge = '';
    if (msg.payload['hub.mode']) 
    {
        mode = msg.payload['hub.mode'];
    }
    if (msg.payload['hub.verify_token']) 
    {
        vtoken = msg.payload['hub.verify_token'];
    }
    if (msg.payload['hub.challenge']) 
    {
        challenge = msg.payload['hub.challenge'];
    }
    if ('subscribe' == mode &&
      'ThisIsMyPersonalVerificationTokenThatOnlyIKnowAbout' == vtoken) {
        msg.payload = challenge;
    }
    
    return msg;
  10. 「完了」をクリックし、フローをデプロイします。
  11. Facebook 開発者ページに戻り、「確認して保存」をクリックします。

    これで、Webhook は登録されました。

  12. 「ページを選択」をクリックします。次に、「フォローする」をクリックします。

これで、アプリケーションは新しいページ上で Messenger イベントをサブスクライブします。

ステップ 3. Node-RED Messenger リスナーを作成する

Facebook Messenger 用の Node-RED Webhook の作成は完了しています。次は、メッセージ・テキストを listen するフローを作成します。

  1. Node-RED フロー・エディターで、以下のノードをキャンバスにドラッグ・アンド・ドロップします。
    • 「入力」の http ノード
    • 「出力」の http response ノード
    • function ノード
    • 「出力」の 2 つの debug ノード
  2. function ノードをダブルクリックし、「Outputs」を 2 に設定します。Look for Messages という名前にします。次に、「完了」をクリックします。
  3. ノード間をワイヤリングします。

    「入力」の http ノードを最初の debug ノード (msg.payload) にワイヤリングします。「入力」の http ノードは function ノードにもワイヤリングします。次に、function ノードを debug ノード (msg.payload) と出力 http response ノードの両方にワイヤリングします。

  4. 「入力」の http ノードをダブルクリックし、メソッドには POST を指定し、URL には /mybot を指定するか、Webhook として登録した URL を指定します。Messenger Chat Listener という名前を付けます。次に、「完了」をクリックします。
  5. function ノードをダブルクリックし、Look for messages という名前を付け、以下のコードを入力します。

    この関数は、送信されたエントリーをループし、検出されたメッセージごとにメッセージ・シグナルを最初の出力に送信します。最後にメッセージ (msg) オブジェクトを 2 番目の出力に送信して終了します。

    最初の出力は、到着した各メッセージ・イベントを処理するために使用され、イベントは単一の HTTP POST にバンドルされます。2 番目の出力は、POST を受け取ったことを知らせる、Facebook Messenger に返される HTTP 応答として出されるシグナルです。これが送信されない場合、Facebook Messenger は同じメッセージを再送し続けます。

    if (msg.payload.object && 'page' == msg.payload.object) {
        if (msg.payload.entry){
            var entry = msg.payload.entry;
            for (var i = 0; i < entry.length; i++) {
                var pageID = entry[i].id;
                var timeOfEvent = entry[i].time; 
                var messaging = entry[i].messaging
                for (var j =0; j < messaging.length; j++) {
                    if (messaging[j].message) {
                        msg.messagingEvent = messaging[j];
                        node.send([msg,null]); 
                    }               
                }
            }
        }
    }
    return [null,msg];
  6. 「完了」をクリックします。
  7. 2 番目の debug ノード (msg.payload) をダブルクリックします。「Output」フィールドに、 msg.messagingEvent と入力します。MessengingEvent from Messenger などの名前を付け、「完了」をクリックします。
  8. アプリケーションをデプロイします。

    現在フローは以下のようになります。

  9. Facebook ページに戻ります。
  10. 「メッセージ」をクリックし、テキストを入力してアプリケーションをテストします。
  11. Node-RED フロー・エディターに戻ります。

    「デバッグ」タブを調べます。Node-RED アプリケーションが Facebook Messenger チャットを listen しているのがわかります。

ステップ 4. Node-RED Messenger ライターを作成する

Node-RED アプリケーションは Facebook Messenger 上のチャットを認識できています。次に、ライトバックを必要としています。Node-RED コミュニティー・ライブラリーから新しいノードをインストールする必要があります。

  1. http://flows.nodered.org から Node-RED ライブラリー・ページにアクセスします。Messenger を検索します。
  2. node-red-contrib-facebook-messenger-writer というドメインを選択します。 このノードを IBM Cloud パレットに追加します。
  3. IBM Cloud ダッシュボードを開きます。
  4. 目的のアプリケーションを選択します。
  5. 「Continuous Delivery」セクションを見つけ、「コードの編集」をクリックします。
  6. アプリケーションを停止します。
  7. package.json ファイルを編集します。
  8. 以下の行を追加します。任意の場所に挿入してかまいません。末尾に追加する場合、最後のコンマを忘れずに削除してください。

    "node-red-contrib-facebook-messenger-writer": "0.x",

  9. 変更内容を保存し、アプリケーションをデプロイします。アプリケーションが開始するまで待ちます。
  10. Node-RED フロー・エディターに移動します。以下のノードをキャンバスにドラッグ・アンド・ドロップします。これらのノードは Messenger Chat Listener グループにワイヤリングすることになります。
    • 一般的 function ノード
    • A function facebook messenger ノード
    • 出力 debug ノード
  11. 新しい function ノードを facebook messenger ノードにワイヤリングし、そこから debug (msg.payload) ノードにワイヤリングすることで、ノード間をワイヤリングします。
  12. 新しい function ノードをダブルクリックし、Set up response という名前を付け、以下のコードを追加します。次に、「完了」をクリックします。
    msg.facebookevent = msg.messagingEvent;
    msg.payload = 'Hello, this is all I say for now.';
    return msg;
  13. facebook messenger ノードをダブルクリックし、Messenger Writer という名前を付け、以前にコピーしておいたアクセス・トークンを入力します。その後、「完了」をクリックし、フローをデプロイします。
  14. Facebook Messenger に戻り、ボットを試します。

Facebook アプリケーションはメッセージを listen して応答できるようになりました。

ステップ 5. Watson Conversation サービスを Messenger ボットに接続する

現時点で、Watson Conversation サービスを Facebook Messenger に接続するための作動可能なコンポーネントがすべて揃いました。

  1. Node-RED フロー・エディターで、listener コンポーネントと writer コンポーネントの間の接続を削除します。途中にある conversation ノードに接続をリダイレクトします。
  2. 新しい function ノードと出力 link ノードをキャンバスにドラッグ・アンド・ドロップします。
  3. ノード間をワイヤリングします。
  4. 新しい function ノードを以下のコードで編集します。このコードで、Conversation サービス用のテキストを設定するとともに、Messenger からテキストが到着したことをシグナル通知します。
    msg.fromMessenger = true;
    msg.payload = msg.messagingEvent.message.text;
    return msg;
  5. 「完了」をクリックします。
  6. link out ノードをダブルクリックします。Text from Messenger という名前にし、OK Watson ページ上の名前なしの link input ノードに接続するために、それをリストから選択します。31523e2d.2777a2 などの名前になっている可能性があります。
  7. 「完了」をクリックします。
  8. 「OK Watson」タブをクリックします。function ノードと「出力」の link ノードをキャンバス上にドラッグ・アンド・ドロップします。
  9. 新しい function ノードをダブルクリックします。「Outputs」を 2 に設定します。
  10. 以下のコードを追加します。これは、Messenger から入力が到着した場合にメッセージを両方の出力に送信します。これにより、Node-RED で Conversation サービスの応答を引き続き聞きながら、Messenger でもそれを確認することが可能になります。
    if (msg.fromMessenger) {
        return [msg,msg];
    } else {
        return [msg, null];
    }
  11. 「完了」をクリックします。
  12. 新しい link out ノードをダブルクリックし、Conversation Out for Messenger という名前を付けます。次に、「完了」をクリックします。
  13. text to speech ノードの左側への以前のリンクを壊して、ノード間をワイヤリングします。
  14. 「Messenger」タブに移動し、入力 link ノードをキャンバスにドラッグ・アンド・ドロップします。
  15. 新しい link ノードをダブルクリックします。Writer Output という名前にし、OK Watson フローの Conversation Out for Messenger にリンクします。次に、「完了」をクリックします。
  16. ノード間をワイヤリングします。
  17. Set up response 機能ノードをダブルクリックします。ハードコードされている以下の行を削除します。

    msg.payload = 'Hello, this is all I say for now.';

    この時点で機能のコードは以下のようになります。

  18. 「完了」をクリックし、フローをデプロイします。
  19. Facebook Messenger に移動し、ボットを試します。

これで、Watson Conversation サービスを使用して、Facebook Messenger ボットを動かせるようになりました。

ステップ 6. CSS およびブラウザー・サイド JavaScript を再利用できる Node-RED アプリケーションを構築する

ここからは、新しい上級トピックに移ります。Node-RED アプリケーション間での HTML、CSS、ブラウザー・サイド JavaScript の再利用を許可する Git リポジトリーを使用する HTML Web ページを作成します。

  1. 次の Web ページを開きます。https://github.com/ibm-early-programs/watson-tv

    これは Web ページ (HTML、CSS、JavaScript) のリポジトリー (repo) です。

  2. tv.html をクリックします。
  3. 「Raw」をクリックし、ブラウザーのアドレス・バーにある URL をコピーします。
  4. Node-RED フロー・エディターに移動します。新しいタブを作成し、そのタブに Watson TV などの名前を付けます。
  5. 以下のノードをキャンバスにドラッグ・アンド・ドロップします。
    • 「入力」の http ノード
    • 「機能」の http request ノード
    • function ノード
    • 「出力」の http response ノード
  6. ノード間をワイヤリングします。
  7. 「入力」の http ノードをダブルクリックします。URL /tele 上の GET メソッドとして構成します。次に、「完了」をクリックします。
  8. http request ノードをダブルクリックします。先ほどコピーした tv.html の未加工 URL を入力します。「出力形式」フィールドは文字列に設定します。次に、「完了」をクリックします。
  9. function ノードをダブルクリックして以下のコードを入力し、ヘッダーのコンテンツ・タイプを 'text/html' に設定します。
  10. 「完了」をクリックし、アプリケーションをデプロイします。
  11. 新しいページでブラウザー・タブを開きます。

これで、複雑な HTML、CSS、JavaScript を Node-RED Web ページに追加する方法を理解しました。

ステップ 7. ビデオ・キャプション作成アプリケーションを構築する

再利用した HTML は、ビデオ・キャプション作成アプリケーションから入手したものです。このセクションでは、そのアプリケーション全体をインポートします。

  1. ビデオ・キャプション作成スターター・キットの Web ページを開きます。https://github.com/watson-developer-cloud/node-red-labs/tree/master/starter-kits/video_captioning
  2. スクロールダウンし、Translation JSON のリンクをクリックします。
  3. 「Raw」をクリックします。コードをすべて選択し、JSON コンテンツをクリップボードにコピーします。JSON コンテンツにはフローが記述されています。
  4. Node-RED で、「読み込み (Import)」>「クリップボード (Clipboard)」をクリックします。
  5. フローを貼り付け、「読み込み (Import)」をクリックします。

    スターター・キットには 3 つのフローがあります。最初のフローは、/tele アプリケーションに類似しています。

    2 番目のフローは、コンテキストを設定します。

    3 番目のフローは、ビデオ・ストリームの URL を受け取り、ビデオをオーディオ・ストリームに変換し、音声を接合し、それを順番に Watson Speech to Text サービスに渡します。

    フローでは古い language translation サービスが使用されていますが、ここでは新しい translator サービスにバインド済みです。

  6. 「IBM_Watson」の language translator ノードをキャンバスにドラッグ・アンド・ドロップします。
  7. 古い translation ノードを新しい language translator ノードに置き換えます。
  8. language translator ノードをダブルクリックします。以下の情報を選択して、翻訳用にノードを構成します。次に、「完了」をクリックします。
    • Mode: Translate
    • Domains: News
    • Target: 言語を選択します
  9. アプリケーションをデプロイします。
  10. アプリケーションを試します。/tele と /tv の両方が動作するはずです。
  11. 「Translation」をクリックします。次に、ビデオ・ストリーム URL の「Load」をクリックします。
  12. ビデオ・ストリームが現れ、翻訳が開始されるのを待ちます。

まとめ

ここでは、Watson Conversation サービスを Facebook Messenger ボットとして実装しました。

また、HTML、CSS、ブラウザー・サイド JavaScript を保持する Git によってホストされるリポジトリーを使用して、Node-RED で魅力的な Web アプリケーションを作成する方法についても学習しました。

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

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

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


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


コメント

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

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Cloud computing, Web development
ArticleID=1056034
ArticleTitle=Node-RED: bot 操作の基礎: ラボ 4: コグニティブな Web ページと Messenger ボットの作成
publish-date=12262017