Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

保活支援アプリのUIをNoodlで爆速プロトタイピングしてみた!

2020年アドベントカレンダーが始まりましたね!Noodlのアドベントカレンダーは発足から2年目です!
今年も盛り上げていきましょう🎄

今回はNoodlでUIを作成してみた事例をご紹介します。

Noodlって何?という方はNoodl JPのページをご参照ください。

作ったもの

地図にメモを書き込めるアプリのUIです!
image.png

保育活動をしていて、保育施設の場外を確認しながらメモを取りたいなと思ったのが作ろうとしたきっかけです。

実装したい機能
 - 地図でメモを書き込む地点を決める
 - メモ入力
 - 入力したメモと地点情報を記録&共有

今回は入力したテキストをサーバーに送る機能を実装しました。

構成

システム構成

image.png

Noodlの記録ボタンを押すと、メモ入力欄のテキストをサーバーにhttp request(今回はGET)で送信します。

サーバーには手軽にサービス連携のできるenebularNode-REDを使用しました。Node-REDもフローベースのビジュアルプログラミングツールなので、非常にプロトタイピングの作業コストを減らすことができます。
(ここの解説はenebularのアドベントカレンダー記事で解説予定です)

Node-REDではNoodlから受け取ったデータを外部のストレージに記録します。(例えばFirebae Realtime Databaseなど)

UI構成

UIは大きく分けて次の3つのパーツで構成されています。
- 地図表示
- メモ入力
- 記録ボタン
image.png

UIの解説

地図表示

プロトタイプ特化で作りましたので、地図は画像を張り付けた形にしています。もう少し実装するとしたら、Google map APIで動的に表示し、メモを書き込む地点を選べるようにしていけたらと思います。

画像を張り付けるには、「Imageノード」を使用します。
image.png

Imageノードで使用する画像ファイルは、Noodlエディタ上にドラッグ&ドロップで使用できるようになります。

Imageノードのプロパティを開きImageカテゴリのSourceに、表示させたいファイル名を入力します。
image.png

メモ入力欄

メモ入力には「Text Inputノード」を使用しています。このノードはその名の通り、テキスト入力が行えるノードです。
image.png

Text Inputノードのパラ目0太は次のようにしています。

Text:”メモ:” (ここは最初から表示させたいテキストを書く)
Text type:Text Area (Text Inputのサイズ全てにテキスト入力できるようにします)
Font size:25px
Background Color:#FFFFFF (白)

記録ボタン

記録ボタンはGroupノードとTextノードで作成しています。
image.png

Groupノードがボタンの背景色と外枠を表示しています。Textノードはボタンに表示するテキストを書きます。

Groupノードの設定は次のようにしています。工夫している点としては、角の丸みをつけるためにBorder Radiusプロパティを設定しています。
image.png

Textノードの設定はシンプルで次のようにしています。
image.png
image.png

外部に送信

外部連携はhttp requestで行うので、「RESTノード」を使用します。RESTノードは何らかのイベントで指定したURLに対してフェッチを行うノードです。
image.png

RESTノードの設定は次のようにしています。
image.png

・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もくもく会

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
2
Help us understand the problem. What are the problem?