2020年アドベントカレンダーが始まりましたね！Noodlのアドベントカレンダーは発足から2年目です！
今年も盛り上げていきましょう🎄
今回はNoodlでUIを作成してみた事例をご紹介します。
Noodlって何？という方はNoodl JPのページをご参照ください。
作ったもの
地図にメモを書き込めるアプリのUIです！
保育活動をしていて、保育施設の場外を確認しながらメモを取りたいなと思ったのが作ろうとしたきっかけです。
【実装したい機能】
- 地図でメモを書き込む地点を決める
- メモ入力
- 入力したメモと地点情報を記録&共有
今回は入力したテキストをサーバーに送る機能を実装しました。
構成
システム構成
Noodlの記録ボタンを押すと、メモ入力欄のテキストをサーバーにhttp request（今回はGET）で送信します。
サーバーには手軽にサービス連携のできるenebularのNode-REDを使用しました。Node-REDもフローベースのビジュアルプログラミングツールなので、非常にプロトタイピングの作業コストを減らすことができます。
（ここの解説はenebularのアドベントカレンダー記事で解説予定です）
Node-REDではNoodlから受け取ったデータを外部のストレージに記録します。（例えばFirebae Realtime Databaseなど）
UI構成
UIは大きく分けて次の3つのパーツで構成されています。
- 地図表示
- メモ入力
- 記録ボタン
UIの解説
地図表示
プロトタイプ特化で作りましたので、地図は画像を張り付けた形にしています。もう少し実装するとしたら、Google map APIで動的に表示し、メモを書き込む地点を選べるようにしていけたらと思います。
画像を張り付けるには、「Imageノード」を使用します。
Imageノードで使用する画像ファイルは、Noodlエディタ上にドラッグ&ドロップで使用できるようになります。
Imageノードのプロパティを開きImageカテゴリのSourceに、表示させたいファイル名を入力します。
メモ入力欄
メモ入力には「Text Inputノード」を使用しています。このノードはその名の通り、テキスト入力が行えるノードです。
Text Inputノードのパラ目0太は次のようにしています。
Text：”メモ：” （ここは最初から表示させたいテキストを書く）
Text type：Text Area （Text Inputのサイズ全てにテキスト入力できるようにします）
Font size：25px
Background Color：#FFFFFF （白）
記録ボタン
記録ボタンはGroupノードとTextノードで作成しています。
Groupノードがボタンの背景色と外枠を表示しています。Textノードはボタンに表示するテキストを書きます。
Groupノードの設定は次のようにしています。工夫している点としては、角の丸みをつけるためにBorder Radiusプロパティを設定しています。
Textノードの設定はシンプルで次のようにしています。
外部に送信
外部連携はhttp requestで行うので、「RESTノード」を使用します。RESTノードは何らかのイベントで指定したURLに対してフェッチを行うノードです。
RESTノードの設定は次のようにしています。
・Resource：/input (http requestのアクセス先)
・Method：GET (http requestのプロトコル)
・Backend type：External （バックエンドサーバーを外部に建てる設定）
・Endpoint： （http requestの宛先URL）
注意 : enebularは1時間程度でセッションが切れてリロードしなおしとなるため、EndpointのURlが変わります。
・Send Text：送信すデフォルト値（カスタムで追加したプロパティです）
RESTノードのスクリプトは次のように記述しています。入力されたテキストデータを読み込んで、http requestのparmetorsに追加する形をとっています。
define({
inputs:{
sendtxt:'string',
},
outputs:{
},
request:function(inputs,request) {
request.parameters.memo = inputs.sendtxt;
console.log(request);
},
response:function(outputs,response) {
}
})
これでサーバ側（Node-RED）のデバッグログを見ると、メモしたデータが送信されていることが分かります。
以上で記録ボタンを押すとメモしたデータがhttp requestで送信できるようになります。あとは細かいレイアウトや色などの調整がありますが、凝ると奥が深いので割愛します。
まとめ
本職は組み込み系なので、ほとんどwebの事が分からな状態です。それでもNoodlを使用することで、直感的にUIのプロトタイプを作る事ができました🙂
Noodlの良いところは、考えたことを即座に動く形にできることだと思います。まだまだアドベントカレンダーは始まったばかりなので、今後の記事で面白い使い方やAPIなど（地図があると嬉しい）期待ですね！
それでは良きNoodlライフを！
リンク集
・Noodl 2.1 ベータ版に参加しよう！
・Noodl Slack
・Noodlのユーザコミュニティ Noodlもくもく会