Noodl2.5.X版レビュー #Noodl

この記事は Noodl Advent Calendar 2021 の10日目の記事です。

概要

Noodl(ヌードル)はJavascript、Javascriptライブラリが使えるため各種IoT・センサーをつなぐUI/UXプロトタイピングツールとして活用できるビジュアルプログラミングツールです。
そんなNoodlですが今年のクリスマスにメジャーアップデートがアナウンスされていて。~~現在、希望者向けにプレリリース版のVer2.4.0が公開されていますので。早速試してレビューをしてみました。~~
先日、バージョン2.5.xがリリースされました。公式でリリースノートも公開されていますので、ぜひダウンロードして試してみてください。

バージョンアップの概要

すでにNoodlを使っている方向けに新機能まとめますので、今回の記事この部分だけでいいかもしれません。

2.4.xでの新機能

ノードを追加するときのパネルが整理されました。ノードの種類が増えてきて全てを表示することは難しくなったため、カテゴリ毎に詳細の表示非表示を変更できるようになりました。

新しくなったNode選択ウィンドウ

カテゴリごとにNodeを表示／非表示できるようになった

Nodeにカーソルを合わせると説明が表示されるようになりました

ノードのIn/Out設定のパネルが整理されました。これによりIn/Out側が明確になったこと。接続しようとしているプロパティの種類が明確になりました。
ドキュメント/コミュニティ/動画(Youtube)が再整理されました

ツールとして洗練されてきたので、大きな変更はなくなってきている印象です。ここ最近はGUI側の改善、基本的なUIの充実。永続データ処理部分の拡張が主な変更内容となっています。

2.3.1までの新機能

コラボレーション：クラウド上のProjectを共同で開発できるようになりました
バージョン管理との連携サイドバー（git）
ネイティブUIノード：ボタン、チェックボックス、オプション、ラジオボタン、ラジオボタングループ、ラベル、フォーム、範囲が新しいノードとして追加されました。詳細はこちらをチェック
日付入力モジュール：日付を選択するための新しいUIコントロールがモジュールとして追加
更新されたSDS：シンプルなデザインシステムであるSDS。
レイアウトコントロール：新しいコントロールの使用方法

はじめてのNoodl

ここからはNoodlを触ったことがない方向けに、インストールからアプリ作成までを新バージョンで一通り行ってみます。

サンプル「郵便番号から住所を検索するデモアプリ」

今回は郵便番号から住所を検索するデモアプリを作成し、デプロイまでしてみます。デプロイしたアプリはこちら。

###　作成するアプリの機能

郵便番号を入力する入力フィールド
郵便番号から住所を取得する機能(WebAPI利用)
画面の入力（郵便番号）をWebAPIに渡す方法
検索結果結果（住所）をWebAPIから受け取る方法
検索結果を表示するUI

について説明します。

1. Noodlのインストール

インストールについてはConnpass上の解説:Noodl 2.x 版に参加しよう！が参考になりますので、まずはこの手順に沿ってダウンロード・インストール・起動まで行ってください。

Noodl2.4.xの起動画面シンプルですね

Noodl2.4.xのスタート画面

右上にバージョンが表示されていてv2.4.0という文字が見えます。
FeaturedにはNoodl公式から公開されている最新トピックス・ドキュメント・動画へのリンクが表示されれています。
YourProjectsには自分で作成したプロジェクトのプレビューが表示されています。
今回ははじめからアプリを作成するので左下の「CreateProject」を選択してプロジェクト作成から始めます。

Create New Project画面

するとCreateNewProjectウィンドウが開くので、
Projectnameにアプリの名前を入力します。今回は「ZipCodeAPI」としました。名称はNoodlで管理するときに使うだけなので、YourProjectsの画面でいつでも修正できます。
CloudStrage /LocalStrage はプロジェクトの保存場所としてクラウドか自身のPCか選択できます。今回はデフォルトの「CloudStrage」としました。
SelectTemplateではProjectのテンプレートとするものを選びます。今回は一番シンプルな「HelloWorld」を選択しました。ほかにもページ遷移のある「Navigatieon example」、バックエンドを使ったTodoリストデモ「TaskList」、自作のUIを使ったデモ「CustomSurvey」、本格的な旅行サイトデモとして「TravelAPP」などがあります。
すべての設定が終わったら左下のCreateProjectを押すとProjectが生成されます。

HelloWorldテンプレート

HelloWorldテンプレートではページのルートとなるGroupと、HelloWorldのテキストだけが定義されています。

今回のアプリ完成後はこのようなNode構成となりました。

Nodeの配置

Nodeはタイトルや結果のテキストを表示するTextノード、インプットフィールドのTextInputノード、検索用のButtonノード、アイコンを表示するIconノード、WebAPIにアクセスするためのRESTノードで構成されています。
下記のようにそれぞれのNodeを配置しました。

Nodeの設定

それぞれ下記のように設定しました。

Textノードの設定：主に文字サイズやレイアウトについての設定です

TextInputノードの設定：主にレイアウトについての設定です

Iconノードの設定：表示するアイコンや色の設定です

Buttonノードの設定：ボタンの文字や色レイアウトについての設定です

RESTノードの設定：

RESTノードのResourceにはWebAPIのエンドポイントを設定しています「https://zipcloud.ibsnet.co.jp/api/search」

Nodeの構成と右の画面を比べると何となく意味が分かるかと思います

RESTノードの設定2

RESTノードではWebAPIにアクセスする部分をRequestとして、WebAPIからのレスポンスを受ける部分をResponseとしてJavascriptで記載します。ほとんどはデフォルトのコメント部分なので、実際に記載する部分は数行です。

Request

//Add custom code to setup the request object before the request
//is made.
//
//*Request.resource     contains the resource path of the request.
//*Request.method       contains the method, GET, POST, PUT or DELETE.
//*Request.headers      is a map where you can add additional headers.
//*Request.parameters   is a map the parameters that will be appended
//                      to the url.
//*Request.content      contains the content of the request as a javascript
//                      object.
//
//Request.header['some-important-header'] = Inputs.ImportantHeader
Request.parameters = {
    'zipcode': Inputs.SendMe,
}

Response

// Add custom code to convert the response content to outputs
//
//*Response.status    The status code of the response
//*Response.content   The content of the response as a javascript
//                    object.
//*Response.request   The request object that resulted in the response.
//
//*Inputs and *Outputs contain the inputs and outputs of the node.

  const obj = JSON.parse(Response.content);
  const adr1=obj.results[0].address1;
  const adr2=obj.results[0].address2;
  const adr3=obj.results[0].address3;
  // console.log(Response.content);
  // console.log(obj);
  Outputs.Address1 =adr1;
  Outputs.Address2 =adr2;
  Outputs.Address3 =adr3;

Nodeの接続

最後に、Nodo同士のデータのやり取りをNodeの接続として設定します。オレンジ色がデータの接続。水色がイベントの接続を表します。

すべてのノードにはinputとoutputがあります。2つのノードの接続は1つのノードをクリックし、接続を別のノードにドラッグして、どの出力をどの入力に接続するかを選択するします。ノードエディタで接続をクリックすると渡されているデータを視覚的に確認できます。

今回は下記のように接続しました

Input	Output	意味
TextInput:Text	REST:SendMe	インプットフィールドの内容をRESTノードに渡す
Button:Click	REST:Fetch	ボタンクリックされたらWebAPIの情報を取りに行く（Fetch）する
REST:Address1	Text:Text	WebAPIの出力結果をText1に表示する
REST:Address2	Text:Text	WebAPIの出力結果をText2に表示する
REST:Address2	Text:Text	WebAPIの出力結果をText3に表示する

デプロイ

完成したWebアプリはNoodl上でも動作家訓をすることができますが、ほかの人に使ってもらうためにはインターネット上に公開（デプロイ）する必要があります。画面右上のデプロイアイコンを押すとSandbox（試行）、Production（本番環境）、Other（その他）が選択できます。
今回はSandbox（試行）を選択してみます。

SandboxにデプロイするにはSubdomainとしてURLの一部となる名称。
Descriptionとしてアプリについての説明を設定し、Deployボタンを押します。
正常にデプロイできるとExistindSandboxDeploysとして作成されたアプリのURLが表示されます。
Chrome等のブラウザから確認してみてください。

まとめ

駆け足でしたがNoodl2.4レビューとして簡単なアプリを作成してみました
Noodl2.4まで進み、見た目はGUIでより直感的に操作できるようデザイン寄りの強化が図られた印象です
進化を続けるNoodlでIoT・プロトタピング、そして本格的なアプリ開発の世界を楽しみましょう！

Noodl2.5.X版レビュー

概要