このセクションでは、エンドユーザーの入り口となるページを作成する方法を学びます。エンドユーザーは、作成されたページにWindowsの ファイルダイアログから画像をドロップしたり選択したりすることができるようになります。
http inノードをワークスペースにドラッグします。
http inノードを2回クリックし、プロパティタブを開きます。
ユーザはそのURLを好きなサブロケーションに設定することができますが、簡単のために/google-vision-complex と設定します。 これは、プロパティの権限を持つエンドユーザは、Node-REDインスタンスのURLと上記のサブロケーション、つまりpaulo.app.openiap.io/google-vision-complex からページにアクセスすることができるということです。 Node-REDインスタンスを設定する方法について分からない場合はNode-RED に初めてアクセスする方法を参考にしてみてください。
このサブロケーションをどこかに保存してください。次のセクションで、ユーザーはこのサブロケーションを指すウェブソケットをセットアップするからです
URLを設定した後、ユーザーはDoneボタンをクリックして、ノードの設定を終了することができます。
備考
また、ワークスペース内でノードにフォーカスがある限り、ユーザーはRETURNキーを押してノードのプロパティを編集することができます。
備考
Node-REDインスタンスの設定方法については、Node-REDへの初回アクセスに進んでください。
テンプレートノードをワークスペースにドラッグして、http inノードに配線します。
テンプレートノードを2回クリックして、そのプロパティタブを開きます。
まず、ノードの名前をdropzone.jsに変更します。
次に、そのプロパティを msg.dropzonejsに、シンタックス ハイライトを Javascript に変更します。
最後に、DropzoneJS for AI Image Recognition(https://gist.github.com/syrilae/945838275bf729fb568d91dd63147706)に含まれる生のコードをTemplateボックスに貼り付けてください。このコードは、Dropbox内に画像がドロップされたときの画像処理とAPIへのアップロードのロジックを担っています。
次に、別のテンプレートノードをワークスペースにドラッグして、上で作成したばかりのdropzone.jsノードに配線します。このノードは、カスタムCSS でDropboxをスタイリングする役割を果たします。
新しく追加されたテンプレートノードを2回クリックして、そのプロパティタブを開きます。
ノードの名前をcssに変更します。
プロパティを msg.cssに、シンタックス ハイライトを CSS に変更します。
ここで、DropzoneJS CSS for AI Image Recognition(https://gist.github.com/syrilae/dde9fcbbdcfe6a4ff4750a2359963d7f)に含まれる生のコードをTemplateボックスに貼り付けてください。このコードは、Dropboxページのスタイリングを担当します。
別のテンプレートノードをワークスペースにドラッグして、上で作成したばかりのcss`ノードに配線します。このノードの役割は、ページの背後にあるHTMLコードになります。基本的に、これまでに追加されたすべてのものを構造化します。
このテンプレートノードを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>
最初のMustache（https://mustache.github.io/mustache.5.html）、すなわち{{dropzonejs}}は、http innodeによって作成されたエンドポイントに渡されるdropzone.jsノードの実行ロジックをページに追加する役割を担っています。
2番目のヒゲは、この同じページにCSSのスタイルを追加する役割を担っています。また、justinbieber.jpgという名前のファイルをアップロードできないようにするためのダジャレ（イースターエッグ）も追加されていますが、この部分は削除してもかまいません。
残りのコードは、Google Vision API - Upload a file hereを含む<h1>ラベルを表示し、ウェブサービスへの接続とフォールバック 実行のためのロジックを設定します。
http 応答ノードをワークスペースにドラッグし、先に作成したテンプレートノードに配線します。
最後に、最後のステップとして。Node-REDで自分のFlowにコメントをつける方法を学習します。
コメントノードをワークスペースにドラッグして、http inノードのすぐ上に挿入します。
コメントノードを2回クリックし、プロパティタブを開きます。
ノードの名前をDropboxに変更します。
最後に、「デプロイ」ボタンをクリックして、変更をコミットします。
以上です。あなたは、このフローの例の最初の部分を終了しました。あなたのフローは、以下の画像のようになるはずです。
Dropboxページの設定が終わったので、Google Cloud Vision API（https://cloud.google.com/vision）にファイルをアップロードするための処理ロジックを実装します。