このセクションでは、エンドユーザーの入り口となるページを作成する方法を学びます。エンドユーザーは、作成されたページに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)にファイルをアップロードするための処理ロジックを実装します。