Coming soon – Work in progress
OpenIAPカテゴリー: 4.6. Flow Examples
4.6.1.1. OpenFlowでフォームを作成する
このセクションでは、OpenFlow でフォームを作成する方法を学びます。フォームが何なのか分からない場合は、フォームのセクションを参照してください。
まず最初に、"Hello from OpenFlow!
“など、ユーザーが挿入した入力をNode-REDに渡すためのフォームを設定します。
Forms ページ(デフォルトはhttp://demo.openiap.io/#/Forms )に
移動し、Add Form
ボタンをクリックします。
![images/nodered_openflow_forms_click_add_form_button.png](https://docs.openiap.io/images/nodered_openflow_forms_click_add_form_button.png)
次に、テキスト フィールドの
フォームをフォームデザイナにドラッグします。
![images/nodered_openflow_forms_drag_textfield_form.png](https://docs.openiap.io/images/nodered_openflow_forms_drag_textfield_form.png)
Label
パラメータをPlease enter 'Hello from OpenFlow!' 以下に
変更します。
![images/nodered_openflow_forms_change_label_textfield_form.png](https://docs.openiap.io/images/nodered_openflow_forms_change_label_textfield_form.png)
API
タブをクリックし、Property Name
パラメータをhello_from_openflowに
変更します。 これがNode-REDに渡される変数になります。
![images/nodered_openflow_forms_openflow_change_property_name.png](https://docs.openiap.io/images/nodered_openflow_forms_openflow_change_property_name.png)
最後に、「保存
」ボタンをクリックします。
![images/nodered_openflow_forms_click_save_textfield_form.png](https://docs.openiap.io/images/nodered_openflow_forms_click_save_textfield_form.png)
Form名をhellofromopenflowと
し、Save
ボタンをクリックして保存します。
![images/nodered_openflow_forms_set_name_and_save.png](https://docs.openiap.io/images/nodered_openflow_forms_set_name_and_save.png)
これで完了です。これでOpenFlowでFormを
構成することに成功しました。次のセクションで、Node-REDでどのように設定するかを見ていきましょう。
4.6.1.2. Node-REDのフォームを設定する
ここでは、Node-REDでFormを正しく設定する方法を学習します。
Node-REDインスタンスに移動し、新しいフローを作成し、そのタブで2回クリックして、名前をFormsに
変更します。そして、Done
ボタンをクリックして保存します。
備考
Node-RED
インスタンスの設定方法については、Node-REDへの初回アクセスに進んでください。
![images/nodered_openflow_forms_rename_flow.png](https://docs.openiap.io/images/nodered_openflow_forms_rename_flow.png)
ワークフローインノードを
ワークスペースにドラッグします。このノードは Form 処理ロジックを実行する実行フローを開始する役割を担います。
![images/nodered_openflow_forms_drag_workflow_in.png](https://docs.openiap.io/images/nodered_openflow_forms_drag_workflow_in.png)
ノード 内の
ワークフローを
2回クリックし、プロパティタブを開きます。Queue nameを
openflowformsexampleに
設定し、RPAと
WEBの
両方のチェックボックスにチェックを入れます。RPAは
前項で作成したFormをOpenRPAから呼び出せるようにするためのチェック、WEBは
OpenFlowから呼び出せるようにするためのチェックです。また、名前を「OpenFlow Forms Workflow
」に変更します。
備考
また、ワークスペース内でノードにフォーカスがある限り、ユーザーはRETURN
キーを押してノードのプロパティを編集することができます。
![images/nodered_openflow_forms_configure_workflow_in.png](https://docs.openiap.io/images/nodered_openflow_forms_configure_workflow_in.png)
次に、Formから返された変数を処理するロジックを設定します。
ワークスペースにスイッチ
ノードをドラッグし、あらかじめ設定しておいたOpenFlow Forms Workflow
ノードに配線します。
switch
ノードを2回クリックして、Propertiesタブを開きます。そのプロパティ・パラメータを
msg.payload.hello_from_openflow
に設定します。
![images/nodered_openflow_forms_configure_property_switch.png](https://docs.openiap.io/images/nodered_openflow_forms_configure_property_switch.png)
次に、Property
パラメータのすぐ下にあるパターンマッチングボックスの中で、入力ケースごとに異なるポートを設定することができます。
まず、最初のケース(==
) をis empty
に変更します。 次に、パターンマッチングボックスのすぐ下の+ 追加
ボタンをクリックして新しいケースを追加し、is null
に設定します。 新しいケースを追加して、other
に設定します。 最後に、Done
ボタンをクリックしてください。
これは、エンドユーザーが空の
入力やNULL
入力をしたときに、この実行フローがアイドル
状態になり、OpenFlowのホームページでフォームが利用可能になるようにするためのものです。一方、ユーザーが何らかの入力を行った場合、その入力はNode-REDに渡されます。
![images/nodered_openflow_forms_configure_cases_switch.png](https://docs.openiap.io/images/nodered_openflow_forms_configure_cases_switch.png)
ワークス
ペースに ワークフローアウトノードを
ドラッグし、スイッチ
ノードの最初の2つのポートに配線します。 これらのポートは、前のステップで設定したis emptyと
is nullの
ケースにそれぞれ対応しています。つまり、ユーザーが空の
入力かNULLの
入力をした場合、実行フローはここで終了します。
![images/nodered_openflow_forms_drag_first_workflow_out.png](https://docs.openiap.io/images/nodered_openflow_forms_drag_first_workflow_out.png)
ワークフローアウトノードを
2回クリックし、プロパティタブを開きます。Stateを
idleに
変更し、Userformを
hellofromopenflow
(前項で定義したフォーム)に変更します。その後、「Done
」ボタンをクリックして変更を保存します。
![images/nodered_openflow_forms_configure_first_workflow_out.png](https://docs.openiap.io/images/nodered_openflow_forms_configure_first_workflow_out.png)
ワークス
ペースに別の ワークフローノードを
ドラッグし、スイッチ
ノードの3番目のポート(つまり終了ポート)に配線します。 このポートは、前に設定した他の
ケースに対応します。
![images/nodered_openflow_forms_drag_second_workflow_out.png](https://docs.openiap.io/images/nodered_openflow_forms_drag_second_workflow_out.png)
ワークフローアウトノードを
2回クリックし、プロパティタブを開きます。Stateを
completedに
変更し、Userformを
hellofromopenflowに
変更します。Done
ボタンをクリックし、変更を保存します。
![images/nodered_openflow_forms_configure_second_workflow_out.png](https://docs.openiap.io/images/nodered_openflow_forms_configure_second_workflow_out.png)
次に、デバッグ
ノードをワークスペースにドラッグし、2番目のワークフロー 出力
ノードに配線します。このノードは、ユーザーが Form に渡されるメッセージを見ることができるようにするために使用されます。
![images/nodered_openflow_forms_drag_debug_node.png](https://docs.openiap.io/images/nodered_openflow_forms_drag_debug_node.png)
最後に「Deploy」ボタンをクリックすると、Formの設定が完了し、現在のFlowが更新されます。これで、フローは以下の画像のようになります。
![images/nodered_openflow_forms_flow_configuration_finished.png](https://docs.openiap.io/images/nodered_openflow_forms_flow_configuration_finished.png)
4.6.1.3. フォームの呼び出し
ここでは、Node-REDを使って、作成したFormを呼び出す方法を学びます。
まず、ワークスペースにインジェクトノードを
ドラッグします。
![images/nodered_openflow_forms_drag_inject_node.png](https://docs.openiap.io/images/nodered_openflow_forms_drag_inject_node.png)
さて、assign
ノードをワークスペースにドラッグして、先に設定した“inject´`ノードに配線します。
![images/nodered_openflow_forms_drag_assign_node.png](https://docs.openiap.io/images/nodered_openflow_forms_drag_assign_node.png)
割り当て
ノードを2回クリックして、「プロパティ」タブを開きます。ワークフローを、前項で設定したopenflowformsexample
ワークフローに割 り当てます。ここで、ここで設定したワークフローは、[ワークフロー ]
ノードで定義したワークフ ローのキュー 名に
対応することを、ユーザーに確認しておいてください。
ここでユーザーは、ワークフローを実行するターゲットを
、ロールか特定のユーザーに割り当てることができます。この例では、ユーザを
選択することで、ユーザ・
ロールに属するユーザは誰でもOpenFlowから呼び出すことができるようになります。
![images/nodered_openflow_forms_configure_assign_node.png](https://docs.openiap.io/images/nodered_openflow_forms_configure_assign_node.png)
ここで、もう一度[デプロイ]ボタンをクリックして、フローを更新します。
![images/nodered_openflow_forms_click_deploy_button_invoke.png](https://docs.openiap.io/images/nodered_openflow_forms_click_deploy_button_invoke.png)
次に、inject
ノード内のボタンをクリックして、事前に作成したワークフローのインスタンスをロールユーザーに
割り当てます。
新しいタブを開いて、OpenFlow のホームページに移動します。先ほど割り当てたワークフローのインスタンスが表示されます。
![images/nodered_openflow_forms_homepage.png](https://docs.openiap.io/images/nodered_openflow_forms_homepage.png)
これで、ユーザはOpenボタンをクリックして、先ほど作成した Form をテストすることができます。テキストフィールドにHello from OpenFlow!
と入力し、Submitボタンをクリックします。Node-REDにデバッグメッセージが表示されます。
![images/nodered_openflow_forms_debug_message.png](https://docs.openiap.io/images/nodered_openflow_forms_debug_message.png)
4.6.2. ダミーインテグレーションOpenRPA-OpenFlow-NodeREDのご紹介です
この例では、メッセージパッシングにOpenRPA、OpenFlow、Node-REDを使用する方法を学習します。
4.6.3. AI画像認識
この例では、Google Cloud Vision API(https://cloud.google.com/vision
) に接続して画像の内容を識別するDropzone – Copyright (c) 2012 Matias Meno(https://www.dropzonejs.com/
) を含むページをNode-REDで作成する方法を学びます。この例の最終結果は以下のとおりです。ここで興味深いのは、ユーザが最初にAPIキーを適切に設定する必要があることです(
https://cloud.google.com/vision/docs/setup)。
![images/image_recognition_final_result.png](https://docs.openiap.io/images/image_recognition_final_result.png)
Node-REDインスタンスに移動し、新しいフローを作成し、そのタブで2回クリックしてAI Image Recognitionに
名前を変更します。 その後、Done
ボタンをクリックして保存します。
![images/image_recognition_rename_flow.png](https://docs.openiap.io/images/image_recognition_rename_flow.png)
これでフローが作成されたので、ユーザーはページを提供するHTTPエンドポイントの作成に進むことができます。Deploy]ボタンをクリックして、変更を保存することを忘れないでください。
4.6.3.1. テンプレートとHTTPエンドポイントによるページの提供
このセクションでは、エンドユーザーの入り口となるページを作成する方法を学びます。エンドユーザーは、作成されたページにWindowsの ファイルダイアログから
画像をドロップしたり選択したりすることができるようになります。
http in
ノードをワークスペースにドラッグします。
![images/image_recognition_drag_http_in_node.png](https://docs.openiap.io/images/image_recognition_drag_http_in_node.png)
http in
ノードを2回クリックし、プロパティタブを開きます。
ユーザはそのURLを
好きなサブロケーションに設定することができますが、簡単のために/google-vision-complex
と設定します。 これは、プロパティの権限を持つエンドユーザは、Node-REDインスタンスのURLと
上記のサブロケーション、つまりpaulo.app.openiap.io/google-vision-complex
からページにアクセスすることができるということです。 Node-REDインスタンスを設定する方法について分からない場合はNode-RED に初めてアクセスする方法を参考にしてみてください。
このサブロケーションをどこかに保存してください。次のセクションで、ユーザーはこのサブロケーションを指すウェブソケットを
セットアップするからです
URLを
設定した後、ユーザーはDone
ボタンをクリックして、ノードの設定を終了することができます。
![images/image_recognition_configure_http_in_node.png](https://docs.openiap.io/images/image_recognition_configure_http_in_node.png)
備考
また、ワークスペース内でノードにフォーカスがある限り、ユーザーはRETURN
キーを押してノードのプロパティを編集することができます。
備考
Node-RED
インスタンスの設定方法については、Node-REDへの初回アクセスに進んでください。
テンプレート
ノードをワークスペースにドラッグして、http in
ノードに配線します。
![images/image_recognition_drag_dropzone_template_node.png](https://docs.openiap.io/images/image_recognition_drag_dropzone_template_node.png)
テンプレート
ノードを2回クリックして、そのプロパティタブを開きます。
まず、ノードの名前をdropzone.jsに
変更します。
次に、そのプロパティを
msg.dropzonejs
に、シンタックス ハイライトを
Javascript
に変更します。
最後に、DropzoneJS for AI Image Recognition(https://gist.github.
com/syrilae/945838275bf729fb568d91dd63147706)に含まれる生のコードをTemplateボックスに貼り付けてください。このコードは、Dropbox
内に画像がドロップされたときの画像処理とAPIへのアップロードのロジックを担っています。
![images/image_recognition_configure_dropzone_template_node.png](https://docs.openiap.io/images/image_recognition_configure_dropzone_template_node.png)
次に、別のテンプレート
ノードをワークスペースにドラッグして、上で作成したばかりのdropzone.js
ノードに配線します。このノードは、カスタムCSS
でDropbox
をスタイリングする役割を果たします。
![images/image_recognition_drag_css_template_node.png](https://docs.openiap.io/images/image_recognition_drag_css_template_node.png)
新しく追加されたテンプレート
ノードを2回クリックして、そのプロパティタブを開きます。
ノードの名前をcssに
変更します。
プロパティを
msg.css
に、シンタックス ハイライトを
CSS
に変更します。
ここで、DropzoneJS CSS for AI Image Recognition(https://gist.github.
com/syrilae/dde9fcbbdcfe6a4ff4750a2359963d7f)に含まれる生のコードをTemplateボックスに貼り付けてください。このコードは、Dropbox
ページのスタイリングを担当します。
![images/image_recognition_configure_css_template_node.png](https://docs.openiap.io/images/image_recognition_configure_css_template_node.png)
別のテンプレート
ノードをワークスペースにドラッグして、上で作成したばかりのcss`
ノードに配線します。このノードの役割は、ページの背後にあるHTML
コードになります。基本的に、これまでに追加されたすべてのものを構造化します。
![images/image_recognition_drag_html_template_node.png](https://docs.openiap.io/images/image_recognition_drag_html_template_node.png)
このテンプレート
ノードを2回クリックすると、そのプロパティタブが開きます。
ノードの名前をhtmlに
変更します。
以下のコードをテンプレートボックス内に貼り付けてください。
<script> {{{dropzonejs}}}</script><style> {{{css}}}</style><script> // "myAwesomeDropzone" is the camelized version of the HTML element's ID Dropzone.options.myDropzone = { paramName: "myFile", // The name that will be used to transfer the file maxFilesize: 2, // MB accept: function(file, done) { if (file.name == "justinbieber.jpg") { done("Naha, you don't."); } else { done(); } } };</script><h1>Google Vision API - Upload a file here:</h1><body onload="wsConnect();" onunload="ws.disconnect();"> <form action="/uploadpretty" class="dropzone" method="post" enctype="multipart/form-data" id="my-dropzone"> <div class="fallback"> <input name="myFile" type="file" /> <input type="submit" value="Submit"> </div> </form> <font face="Arial"> <pre id="messages"></pre> <hr/> </font> <img src='https://bpatechnologies.com/images/logo_footer.png'></body>
![images/image_recognition_configure_html_template_node.png](https://docs.openiap.io/images/image_recognition_configure_html_template_node.png)
最初のMustache(https://mustache.github.io/mustache.5.html)、すなわち{{dropzonejs}}は
、http in
nodeによって作成されたエンドポイントに渡されるdropzone.js
ノードの実行ロジックをページに追加する役割を担っています。
2番目のヒゲは
、この同じページにCSSのスタイルを追加する役割を担っています。また、justinbieber.jpg
という名前のファイルをアップロードできないようにするためのダジャレ(イースターエッグ)も追加されていますが、この部分は削除してもかまいません。
残りのコードは、Google Vision API - Upload a file hereを
含む<h1>
ラベルを表示し、ウェブサービスへの
接続とフォールバック 実行の
ためのロジックを設定します。
http 応答
ノードをワークスペースにドラッグし、先に作成したテンプレート
ノードに配線します。
![images/image_recognition_drag_http_response_node.png](https://docs.openiap.io/images/image_recognition_drag_http_response_node.png)
最後に、最後のステップとして。Node-REDで自分のFlowにコメントをつける方法を学習します。
コメント
ノードをワークスペースにドラッグして、http in
ノードのすぐ上に挿入します。
![images/image_recognition_drag_comment_node.png](https://docs.openiap.io/images/image_recognition_drag_comment_node.png)
コメント
ノードを2回クリックし、プロパティタブを開きます。
ノードの名前をDropboxに
変更します。
![images/image_recognition_configure_comment_node.png](https://docs.openiap.io/images/image_recognition_configure_comment_node.png)
最後に、「デプロイ」ボタンをクリックして、変更をコミットします。
以上です。あなたは、このフローの例の最初の部分を終了しました。あなたのフローは、以下の画像のようになるはずです。
![images/image_recognition_first_step_finished.png](https://docs.openiap.io/images/image_recognition_first_step_finished.png)
Dropbox
ページの設定が終わったので、Google Cloud Vision API(https://
cloud.google.com/vision)にファイルをアップロードするための処理ロジックを実装します。
4.6.3.2. Google Cloudのビジョン処理ロジック
ここでは、エンドユーザーから取得する画像をGoogle Cloud Vision API(https://
cloud.google.com/vision)にアップロードし、データを受信するロジックを実装する方法を学習します。
まず、http in
ノードをFlowにドラッグします。
![images/image_recognition_second_step_drag_http_in_node.png](https://docs.openiap.io/images/image_recognition_second_step_drag_http_in_node.png)
http in
ノードを2回クリックし、プロパティタブを開きます。
メソッドプロパティを
POSTに
設定する。
前のセクションのhtml
で定義したフォームの
action
プロパティがこのサブロケーションに設定されているので、ユーザーはURL
を/uploadpretty
に設定する必要があります。
また、Accept file uploads?
チェックボックスをチェックすると、ウェブソケットに
ファイルをアップロードすることができなくなります。
![images/image_recognition_second_step_configure_http_in_node.png](https://docs.openiap.io/images/image_recognition_second_step_configure_http_in_node.png)
関数
ノードをワークスペースにドラッグし、[post] /uploadpretty
ノードに配線します。このノードは、Google Cloud Vision API(https://cloud.google.com/vision
) にアップロードできるように、アップロードされた画像をBase64(https://developer.mozilla.org/en-US/docs/Glossary/Base64
) に変換する役割を担います。
![images/image_recognition_second_step_drag_function_node.png](https://docs.openiap.io/images/image_recognition_second_step_drag_function_node.png)
関数
ノードを2回クリックして、そのプロパティタブを開きます。
toBase64に
リネームしてください。
関数]ボックスに次のコードを貼り付けます。
msg.payload = msg.req.files[0].buffer.toString('base64');return msg;
このコードは、アップロードされた最初の画像を収集し、エンコードされたBase64
文字列にバッファリングする役割を担っています。
![images/image_recognition_second_step_configure_first_function_node.png](https://docs.openiap.io/images/image_recognition_second_step_configure_first_function_node.png)
これで実行フローは3つのブランチに分かれることになる。
最初のブランチは、エンドユーザーのクライアントに、サブミットアクションが
成功したかどうかを示すステータス
メッセージを
返す責任を負います。
2番目のブランチは、ペイロードをフォーマットし、画像をGoogle Cloud Vision API(https://
cloud.google.com/vision)にアップロードし、前のセクションで作成したページを更新します。後者の部分は、 ウェブソケットアウトノードを
作成することによって行われます。
3つ目のブランチは、エンドポイントに渡されたすべてのリクエストをリスニングし、それをデバッグメッセージに変えます。
なお、これらのブランチはすべて、エンドユーザーがウェブサイトに画像をアップロードする際に実行されます。
まず、ワークスペースにhttp response
ノードをドラッグして、toBase64
ノードに配線します。
![images/image_recognition_second_step_drag_first_http_response_node.png](https://docs.openiap.io/images/image_recognition_second_step_drag_first_http_response_node.png)
ここで、関数
ノードをワークスペースにドラッグし、同様にtoBase64
ノードに配線します。
![images/image_recognition_second_step_drag_second_function_node.png](https://docs.openiap.io/images/image_recognition_second_step_drag_second_function_node.png)
フォーマットペイロードに
改名する。
関数]ボックスに、次のコードを貼り付けます。
msg.image64 = msg.payload;msg.payload = { requests: [ { image: { content: msg.payload }, features: [ { maxResults: 5, type: "LABEL_DETECTION" } ] } ]}return msg;
このコードは、画像をmsg.payload
変数に渡すことと、検出されたLABEL_DETECTION 機能(https://cloud.google.com/vision/docs/labels)
の数を5
件の結果に制限することを担当します。
http request
ノードをワークスペースにドラッグして、format payload
ノードに配線します。このノードは、Google Cloud Vision API(https://cloud.google.com/vision
) にペイロードを接続して送信し、API
から取得したデータを担当するJSON オブジェクトを
返す役割を担います。
![images/image_recognition_second_step_drag_http_request_node.png](https://docs.openiap.io/images/image_recognition_second_step_drag_http_request_node.png)
http リクエスト
ノードを2回クリックし、プロパティタブを開きます。
メソッドを
POSTに
設定します。
URLを
https://vision.googleapis.com/v1/images:annotate?key={KEY}
と設定します
。{KEY}
はGoogle Cloud Vision API Key(https://cloud.google.com/vision/docs/setup) に対応します。
変更 パースされた JSON オブジェクトに
戻ります
。
Google APIに
リネームしてください。
![images/image_recognition_second_step_configure_http_request_node.png](https://docs.openiap.io/images/image_recognition_second_step_configure_http_request_node.png)
別の関数
ノードをワークスペースにドラッグして、Google API
ノードに配線する。このノードは、Google Cloud Vision API(https://cloud.google.com/vision
) から返されたデータを戻り値の配列に渡し、シリアライズされた JSON 文字
列に変換して、websocket out
ノードに渡せるようにする役割を果たします。これによって、ユーザーが画像をアップロードすると、ページが自動的にアップロードされるようになります。
![images/image_recognition_second_step_drag_third_function_node.png](https://docs.openiap.io/images/image_recognition_second_step_drag_third_function_node.png)
関数
ノードを2回クリックして、そのプロパティタブを開きます。
ノードの名前を「Trim Response
」に変更します。
関数]ボックスに次のコードを貼り付けます。
var retArray = []for( var i in msg.payload.responses[0].labelAnnotations ){ let desc = msg.payload.responses[0].labelAnnotations[i].description let score = msg.payload.responses[0].labelAnnotations[i].score let thisObj = { desc: desc, score: score } retArray.push(thisObj)}msg.payload = { result: retArray, resultJSON: JSON.stringify(retArray, null, '\t')}msg.payload = msg.payload.resultJSONreturn msg
ワークスペースに ウェブソケットアウトノードを
ドラッグし、それを トリムレスポンスノードに
配線します。このノードは、イベント・リスナーを設定する役割を果たし、そのリスナーは
![images/image_recognition_second_step_drag_websocket_out_node.png](https://docs.openiap.io/images/image_recognition_second_step_drag_websocket_out_node.png)
ウェブソケットアウトノードを
2回クリックして、そのプロパティタブを開きます。
Add new websocket-listener
…の右側にあるEditボタンをクリックします。
![images/image_recognition_second_step_configure_websocket_out_node.png](https://docs.openiap.io/images/image_recognition_second_step_configure_websocket_out_node.png)
ウェブソケットの
パスを/ws/google-vision-complex
に設定します。
このウェブソケットを
使用できるフローをAI 画像 認識
フローのみに設定します。
Addボタンをクリックして、変更を保存します。その後、Doneボタンをクリックして、このノードの設定を終了します。
![images/image_recognition_second_step_websocket_out_node.png](https://docs.openiap.io/images/image_recognition_second_step_websocket_out_node.png)
最後に、ワークスペースにデバッグ
ノードを追加し、toBase64
ノードに配線します。
![images/image_recognition_second_step_drag_debug_node.png](https://docs.openiap.io/images/image_recognition_second_step_drag_debug_node.png)
デバッグ
ノードを2回クリックし、プロパティタブを開きます。
その出力を完全な msg オブジェクトとして
設定します。
![images/image_recognition_second_step_configure_debug_node.png](https://docs.openiap.io/images/image_recognition_second_step_configure_debug_node.png)
最後に、[Deploy]ボタンをクリックして変更をコミットします。ワークフローは以下の画像のようになるはずです。
![images/image_recognition_finished_flow_example.png](https://docs.openiap.io/images/image_recognition_finished_flow_example.png)
以上です。これでこのフローの例は終わりです。これで、自分のNode-REDインスタンスに定義したサブロケーションに移動してテストすることができます。私の場合は、https://paulo.app.openiap.io/google-vision-complex。試してみて
ください。
4.6.4.1. 電子メールを受信する
まず、「メールウォッチャー」、つまりIMAPサーバーから新しいメールを繰り返し検索し、メッセージとして転送するノードを設定します。このため、このノードには出力しかありません。このノードの設定は非常に直感的で自明ですが、いくつかの特徴を強調することが重要です。
ユーザーは、電子メールサービスにアクセスするために、電子メールIDとパスワードを提供する必要があります。また、「Disposition」パラメータを「None」に設定すると、ノードが未読の電子メールを検索するため、同じ電子メールに関するメッセージを常に送信するようになることに留意することが重要です。そのため、このパラメータは「既読マーク」に設定することをお勧めします。Port」パラメータは、推奨値(993)を使用することができます。
![images/emailin_node.png](https://docs.openiap.io/images/emailin_node.png)
ただし、電子メールサービスによっては、この種のアプリケーションから電子メールアカウントにアクセスできない場合があります。そのため、より安全性の低いアプリケーションからのアクセスを可能にする必要があります。この例では、Gmailのアカウントを使用しました。Gmailで許可を与えるには、ユーザーは画面左上のアバターをクリックして、「Googleアカウントの管理」をクリックする必要があります。新しいタブが開き、ユーザーは「セキュリティ」をクリックします。オプションの1つは、「安全性の低いアプリを有効にする」です。このタイプのアプリを有効にすると、メールウォッチャーノードが
選択した受信トレイにアクセスできるようになります。
4.6.4.2. 電子メールのリダイレクト
メッセージのフィルタリングには「switch」ノードが採用され、メッセージの複数のプロパティをフィルタリングのパラメータとして設定することができる。最も一般的なプロパティは、メールの本文に相当する「msg.payload
」である。特定のキーワードが含まれているかどうかをチェックすることが可能になる。
msg.date
(メールの送信日時を返す)、msg.from
(送信者のメールアドレスを返す)など、他のプロパティを使用することも可能です。
この例では、msg.date
を使って、例えばDelay
ノードを使って週末に送信された電子メールのリダイレクトを次の月曜日に延期しています。使用されている「フィルター」は、実際にリダイレクトを実行するスイッチ
ノードです。
![images/email_complete.png](https://docs.openiap.io/images/email_complete.png)
4.6.4.3. 電子メールを送信する
電子メールを送信するには、ユーザーはもう1つのEmail
ノード(「電子メール送信者」)を採用することができます。これは入力を持つノードで、つまり、メッセージを受信し、選択されたアドレスに送信します。
また、送信者のメールアドレスとパスワードを入力し、選択したアカウントからメールを送信できるようにする必要があります。この例では、”e-mail watcher “としてアカウントを使用していますが、他のアカウントを使用することも可能です。つまり、新しい電子メールが見つかり、フロー内のメッセージとして送信されると、元のアカウントとの関連はなくなり、別のアカウントで送信される可能性があるということです。
![images/emailout_node.png](https://docs.openiap.io/images/emailout_node.png)
4.6.5. HTTPエンドポイントの作成
-
APIの基本構造
-
データベースの作成と新規項目の追加
-
アイテム一覧を見る
4.6.5.1. APIの基本構造について
Node-RED で新しい HTTP エンドポイントを作成するには、2 つのノードだけが必要です。この2つのノードは必ず接続されなければならず、APIが適切にアクションを実行するために、他のノードがこの構造に追加されます。
ユーザーは、これら2つのノードをWorkspaceに
ドラッグして接続します。この2つのノードは、APIの各エンドポイントに必要です。 この最初のエンドポイントでは、ドメイン内で利用可能なすべてのエンドポイントを含むWebページを表示するとします。
HTMLページを追加するには、すでに作成されている2つのノードの間に新しいTemplate
ノードを追加します。このノードのプロパティで、「Syntax Highlight」フィールドをHTMLに変更する必要があります。その後、ユーザーはHTMLを使用してAPIのホームページを作成することができます。
最初のノード(HTTP In
)は、フローをデプロイする前に設定する必要があります。その設定において、ユーザーは3つのフィールドを見つけることができます。メソッド、URL、名前です。このホームページでは、メソッドは「GET」、URLは「/homepage」が使用されます。
![images/httpendpoint-1.png](https://docs.openiap.io/images/httpendpoint-1.png)
4.6.5.2. データベースを作成し、新しい項目を追加する
新しいデータベースは、ユーザーが新しいアイテムを追加した時点で作成されます。ユーザーは、情報を受け取って MongoDB のデータベースに追加することができる新しいエンドポイント (つまり、HTTP In
とHTTP Response
ノードが 1 つずつ接続されている) を作成することになります。この 2 つのノードのほかに、パレットのAPIカテゴリからAdd
ノードを追加する必要があります。
その後、ユーザーはHTTP In
ノードを設定する必要があります。ここで必要なアクションは、データベースに新しいアイテムを追加することなので、このエンドポイントのメソッドは「POST」になります。また、URLも設定する必要があります。この例では、”/newuser “です。
最後のステップは、add
ノードの設定です。 ユーザーは、ここに7つのフィールドを見つけることができます。Type
,Collection
,Entity from
,Result to
,Write Concern
,Journal
,Name
です。このカテゴリのノードの完全な説明はMongoDB Entities にあります。この例では、コレクションの名前 (これもまだ存在しない場合は自動的に作成されます)、正しい入力 (「Entity from」)、出力 (「Result to」) を記入するだけです。
APIをテストするために、任意のAPIテスターを使用することが可能です。リクエストはノードの設定で指定したのと同じメソッド、つまり “POST “に従わなければなりません。リクエストのボディはMongoDBデータベースに追加されるため、JSON形式でなければなりません。レスポンスが “200” であった場合は、API が動作していることを意味します。
![images/httpendpoint-2.png](https://docs.openiap.io/images/httpendpoint-2.png)
4.6.5.3. アイテムの全リストを取得する
このAPIの最後のエンドポイントでは、すべてのアイテムのリストが取得される。フローの設計は同じで、HTTP In
ノードが1つ、Get
(Addの
代わり)ノードが1つ、HTTP Response
ノードが1つとなります。
この場合、HTTP In
ノードのメソッドは “GET “に設定する必要があります。この例で使用されているURLは、”/listusers “です。
その後、ユーザーはget
ノードを設定する必要があります。ユーザーの完全なリストを取得するには、「Query」フィールドを空白にする必要があります。必要であれば、「Query」フィールドを設定することで、このエンドポイントによって取得される情報を指定し、必要な情報を返すことができる。その後、ユーザーはコレクションの名前を入力する必要があります。
![images/httpendpoint-3.png](https://docs.openiap.io/images/httpendpoint-3.png)
4.6.6. Excel検出器
この例では、Excel読み取りワークフローの例で作成したワークフローを自動的に実行する検出器を設定する方法について説明します。
4.6.6.1. OpenRPA内のDetectorをセットアップする
Detector を使用するには、まず Detector の設定内でそれを定義する必要があります。以下のステップは、新しいMicrosoft Excelファイルをチェックするために、FileWatcher Detectorを
設定する方法を示しています。
FileWatcher Detector
プラグインは、指定されたPath
内にファイルが追加されたときに起動します。また、File filter
パラメータを使用することで、特定のファイル拡張子のみをチェックすることも可能です。特定のファイルをチェックするだけでなく、サブ ディレクトリ
の
チェックボックスをオンにすることで、OpenRPAがサブディレクトリ内のファイル変更をチェックすることもできます。
まず、メインリボン内の「設定」
タブをクリックします。
![images/openrpa_configuring_detector_click_settings.png](https://docs.openiap.io/images/openrpa_configuring_detector_click_settings.png)
次に、Detectorsの
アイコンをクリックします。
![images/openrpa_configuring_detector_click_detectors.png](https://docs.openiap.io/images/openrpa_configuring_detector_click_detectors.png)
ここで、デザイナー内の「Add FileWatcherDetectorPlugin
」ボタンをクリックします。FileWatcherという
名前の新しい検出器が表示されます。
![images/openrpa_configuring_detector_click_add_filewatcher.png](https://docs.openiap.io/images/openrpa_configuring_detector_click_add_filewatcher.png)
最後に、ユーザーは検出器の名前
(ここではExcel 検出器
)を設定する必要があります。 また、検出器がリッスンするパスも
設定する必要があります。また、ファイル フィルタを
設定し、検出器は指定された拡張子を持つファイルのみをチェックする必要があります。
![images/openrpa_excel_detector_configure_parameter.png](https://docs.openiap.io/images/openrpa_excel_detector_configure_parameter.png)
これで完了です。これでOpenRPA内部でDetectorを適切に設定することができました。では次のセクションで、Node-RED内部でDetectorを設定し、ワークフローを呼び出す方法を学びましょう。
4.6.6.2. Node-RED内でDetectorを設定し、ワークフローを起動する
Node-REDインスタンスに移動し、新しいフローを作成し、そのタブで2回クリックしてExcel Detectorに
名前を変更します。 その後、Done
ボタンをクリックして保存します。
備考
Node-RED
インスタンスの設定方法については、Node-REDへの初回アクセスに進んでください。
![images/openrpa_excel_detector_configure_flow.png](https://docs.openiap.io/images/openrpa_excel_detector_configure_flow.png)
次に、rpa 検出器
ノードをワークスペースにドラッグします。
![images/openrpa_excel_detector_drag_rpa_detector_node.png](https://docs.openiap.io/images/openrpa_excel_detector_drag_rpa_detector_node.png)
rpa 検出器
ノードを2回クリックして、そのプロパティタブを開きます。
名前を「Excel Detector
」に変更し、「Detector」
ドロップダウンで「Excel Detector
」を選択します。最後に、Doneボタンをクリックして、ノードの設定を完了します。
![images/openrpa_excel_detector_configure_rpa_detector_node.png](https://docs.openiap.io/images/openrpa_excel_detector_configure_rpa_detector_node.png)
次に、ロボット
ノードをワークスペースにドラッグして、Excel Detector
ノードに配線します。
![images/openrpa_excel_detector_drag_robot_node.png](https://docs.openiap.io/images/openrpa_excel_detector_drag_robot_node.png)
rpa ワークフローノードを
2回クリックし、プロパティタブを開きます。
検出器発火時にワークフローを実行するOpenRPAクライアントをRobotの
ドロップダウンから選択します。この例では、paulo
ユーザです。
検出器の発火時に実行されるOpenRPAワークフローを選択します。この例では、Excel読み込みワークフローの例で作成したワークフローを使用します。
最後に、ワークスペースをもう少し使いやすくするために、「名前
」を「Excel Workflow
」に変更します。
![images/openrpa_excel_detector_configure_robot_node.png](https://docs.openiap.io/images/openrpa_excel_detector_configure_robot_node.png)
デプロイボタンをクリックして、変更を保存します。
4.6.6.3. デバッグノードを追加し、Flowをテストする
ここでは,フロー実行時の出力を確認するためのデバッグ
ノードの追加方法について説明する.
3つのデバッグ
ノードをワークスペースにドラッグして、Excel Workflow
ノードに配線します。
![images/openrpa_excel_detector_drag_debug_nodes.png](https://docs.openiap.io/images/openrpa_excel_detector_drag_debug_nodes.png)
これで、OpenRPA内のDetector
設定タブで定義したフォルダ内にファイルをドロップすることで、Flowをテストすることができます。
OpenRPAワークフローの実行後、ユーザーはワークフローが正しく実行され終了したことを確認することができる。
![images/openrpa_excel_detector_workflow_finished.png](https://docs.openiap.io/images/openrpa_excel_detector_workflow_finished.png)
デバッグ出力メッセージはNode-REDにも表示され、ファイルが正常に検出されたことが指定されます。
![images/openrpa_excel_detector_debug_node_output.png](https://docs.openiap.io/images/openrpa_excel_detector_debug_node_output.png)
これで、このワークフローの例は終了です。