本格的な開発に入る前に完成イメージを作って、関係者で内容や方針を決めるため、プロトタイピングツールというものがあります。
個人的には、ARやVRのアプリケーション開発にはプロトタイピングが重要だと思っていますが、よい手段を見つけられていないのが現状です。
今回紹介するNoodl(ヌードル)は、画面だけでなくネットワークアクセス、別デバイスとの連携までができるプロトタイピングツールです。まだ、調べ始めたばかりですがやれることの範囲が広いので、色々と活用できるのではと思っています。
調べたところ、javascriptを読み込んで、Babylon.jsの画面を出すところまでできました。ただ、Noodl自体の情報が少なく、私のようにノードベースのツールに慣れていないとわかりづらいかもと思いました。
そこで、今回はプロトタイピングツールやNoodlの概要、基本的な使い方をまとめました。
使用した環境です。
・MacOSX 10.15
・Noodl v1.3.1
- 1. プロトタイピングツール
- 2. Noodlとは？
- 3. Noodlを使ってみる
- 3.1 ダウンロードとインストール
- 3.2 チュートリアルを実行する
- 3.3 基本的な使い方を確認する
- 3.3.1 画面は主に３つに分かれている
- 3.3.2 右クリックで新しいノードを作る
- 3.3.3 ノード同士を繋ぐときは、ノードの枠線を左ドラッグする
- 3.3.4 作成過程は自動で保存され、Documents/Noodl以下にファイルが生成される (Macの場合)
- 3.3.5 PCだけでなく、スマートフォンでも動作確認できる
- 3.3.6 ノード同士をつないだら、"Component View("Properties")"の箇所で、どの要素を接続するかを指定する
- 3.3.7 HTMLやjavascriptの追加、編集もできる
- 3.3.8 画像やjavascriptなどのファイルを追加したい場合、Editor部分にドラッグする
- 3.3.9 現在開いているプロジェクトを終了するには、Noodlアイコンを選択して、Exit EditorでYesを選択する
- 4. おわりに
1. プロトタイピングツール
1.1 プロトタイピングとは何か？
この言葉で調べると多数の記事が出てきますが、例えば以下のように定義されています。
プロトタイピング（Prototyping）は「試作」の意味。ソフトウェア開発の初期段階に試作モデルを作り、機能や操作性を確認し、ユーザーの要求や評価を本番のシステムに反映して完成させる開発手法を指す。試作モデルは「プロトタイプ」と呼ばれる。
プロトタイピングの利点は、開発途中で処理内容や使い勝手を確認・修正できるため、利用者が望むシステムとのズレや不具合を早期に発見できることである。
感覚的に判断が必要なアプリケーションほど、いきなり開発に入ると後で手戻りが発生するので、事前の共有は大切です。プロトタイピングツールでは、完全な動きはできませんが、イメージを掴むための見た目、動きを再現することができます。
1.2 有名なプロトタイピングツールの例
・Adobe XD
エックスディーと読みます。画面別に部品を組み合わせ、画面遷移条件をマウスドラッグと簡単なGUI操作で定義することで、画面デザインや遷移のプロトタイピングができます。
以下の動画(約1分)で、画面デザインを作る例を紹介しています。
また、スマートフォン(iOS、Android)にデプロイして動作をみることもできます。何度か使ったのですが、完成イメージを簡単に作れるので便利だと思いました。
・Figma
フィグマと読みます。( 公式のYouTubeチャンネルで発音確認しました）
使ったことはないのでいくつかの記事を参考にした記述ですが、基本機能はXDとほぼ同一です。同時編集ができるのが大きな特徴のようです。
Figmaが他のツールと大きく違うのは、OSやアプリケーションに依存せず共有できること、そして共同で同時に編集作業ができることです。
Googleスプレッドシートや、Dropbox Paperのような感覚でデザインを複数人で同時に作成することができます。
さらに、デザインファイルに直接コメントできる機能、バージョン管理、CSSなどを表示するコードモードなどを備えており、チームでの横断的な使用を前提とした機能を多数用意しています。
引用元：1-1. Figmaの概要 | UI/UXデザインツール『Figma』入門 - chot.design -
他にも色々あるようですが、「プロトタイピングツール」などで調べると多数の情報が出てくるので割愛します。
2. Noodlとは？
スウェーデンのデザインファームTOPPという会社によるプロトタイピングツールです。画面、画面遷移、機能を実現するための要素(ノード)をつないでいくことで様々なことができます。このような画面で作業を進めます。
XDやFigmaと異なり、MQTTプロトコルに対応した機器同士の通信、ネットワークアクセスもプロトタイピングできます。
■冷蔵庫の開閉をセンサで検知し、センサの値に応じて画面を変えるプロトタイピング
(1:14付近からみると、センサ連携した例を確認できます)
■別手段で生成されたTwitterの画像情報をネットワーク経由で受け取り、デジタルフォトフレームにするプロトタイピング qiita.com
Noodleの"Receive Message"ノードを使うことで実現しています。
MQTTとは機器同士を通信するプロトコルです。たとえば以下にわかりやすい説明があるのでご参考ください。
日本では、株式会社tensorXという会社が日本でのローカルパートナーを担当されているようです。
Noodlは、エンジニア/プログラマではなくてもIoTやアプリなどのUI/UXプロトタイピングが簡単にできるツールです。
ビジュアルデザイン、ダイナミックデータ、IoT・センサーなどを同一プラットフォーム上で連携できるため、デザイナー・エンジニア・クライアントの間にできる視点や知識の違いによるコミュニケーションの壁を壊し、アジャイルな開発プロセスをより加速します。
引用元：北欧発のノンプログラミングIoT・API連携プロトタイピングツール「Noodl」が日本初上陸 ｜株式会社tensorXのプレスリリース
ライセンスについてですが、個人利用の場合は無料、Noodleで作ったアプリを配布するのはNGです。
1.1 Subject to your compliance with this EULA, Licensor grants to you a non-sublicensable, non-transferable, and non-exclusive license to install and use the App on any single mobile or personal computing device on which the App is intended to run, for your personal use.
Any other copying or any distribution of the App or its functionality is forbidden.
引用元：EULA of Noodl
蛇足ですが、ノードのように要素をつないでプロトタイピングを可能にするツールとして、他にはFacebookが公開しているOrigami Studioがあります。
3. Noodlを使ってみる
3.1 ダウンロードとインストール
こちらに書かれている通り、インストールしてからアプリケーションを開くとアカウント登録が求められます。
10/22現在、トップページはearly access募集になっていて、"Click to get documentation and resources for previously released versions of Noodl." をクリックするとv1.3.1のダウンロード可能なページにいけるのは変わっていません。
3.2 チュートリアルを実行する
XDやFigmaでは部品を並べて画面を作りますが、Noodlの場合、画面の定義は全てノードで定義します。独特の使い方があるので、まずはチュートリアルをいくつか実行して、使い方を理解するのが良いと思います。
チュートリアルは、Noodlを開いたときの左側にあります。
全て英語ですが、細かいステップに分かれていて、各ステップに書かれた通りのことを実行すると"Complete all Tasks"ボタンが"Next"に変わり、次のステップに進めるようになっています。
この画像の場合、見本に示されているようにノードを並べ、"Card"というノードが"Background"ノードの下に配置されるようにドラッグすると、次のステップに進めます。
新しいツールを使う時、書かれていることと画面の手順が違ってわからなくなることがありますが、これならば大丈夫ですね。
チュートリアルには、タッチイベント操作、アニメーション、レイアウト作成、メッセージ受信など、色々とあります。一通りやりきると理解が深まりそうです。
3.3 基本的な使い方を確認する
私自身ノードベースのツールはほとんど使ったことがないので、わからないことが多かったです。そこで、一般的な話も入っているかもしれませんが、Noodlの基本的な考え方、使い方をまとめました。
3.3.1 画面は主に３つに分かれている
Viewの名前はわからないので、仮で付けました。PreviewはGUIで操作することはできず、ノードの編集で変化します。
ノードを左クリックすると、"Component View"が"Properties"に変わり、選択したノードの詳細情報を編集できます。
3.3.2 右クリックで新しいノードを作る
右クリックすると出てくるviewでノード名称を入力するか、スクロールして選ぶことで新しいノードをEditorに追加できます。
3.3.3 ノード同士を繋ぐときは、ノードの枠線を左ドラッグする
ノードを選択すると、白い枠線でハイライトされます。別のノードに繋ぐ時は、白い枠線にマウスを当ててから接続したいノードにドラッグすると、矢印が出ます。
この画像では、"Vechile Data"ノードの白い枠線を選択し、"Engine Status"というノードに向かってドラッグしています。
なお、枠線以外をドラッグすると、ノードの位置を変更することになります。
3.3.4 作成過程は自動で保存され、Documents/Noodl以下にファイルが生成される (Macの場合)
Noodlには保存ボタンがなく、作成過程は自動で保存されます。
3.3.5 PCだけでなく、スマートフォンでも動作確認できる
Noodlで出来上がったものは随時Webブラウザで確認できます。なので、PCとネットワーク接続可能にしていれば、スマートフォンでもすぐに動作を確認できます。
もちろんタブレットでも確認はできますが、チュートリアルの画面はスマートフォン向けの固定サイズでした。
まだうまく使えていませんが、設定で調整すれば、レスポンシブもできると思います。
また、結果を出力すると、html、javascriptが生成されます。なので、Github Pagesや、Expressなどでサイトを作っても確認ができます。
3.3.6 ノード同士をつないだら、"Component View("Properties")"の箇所で、どの要素を接続するかを指定する
ノードを接続すると、"Component View("Properties")"の箇所に、Source、Targetという列ができます(画像の左)。
ここには、それぞれ接続元、接続先のノードが持っている要素が表示されます。
この中から接続したい要素を左クリックすると、ノード同士が接続されます(画像の右)。この例では、Engine StatusとCurrent Stateという要素が接続されています。
3.3.7 HTMLやjavascriptの追加、編集もできる
"Script Downloader"、"javascript"、"HTML Content"というノードを組み合わせることで、コーディングによるプロトタイピングも可能です。
この画像では、３つのノードを組み合わせてBabylon.jsでSphereを表現しています。この作り方は別の記事で解説します。
3.3.8 画像やjavascriptなどのファイルを追加したい場合、Editor部分にドラッグする
必要な外部ファイルはドラッグすると、後で使うことができます。
3.3.9 現在開いているプロジェクトを終了するには、Noodlアイコンを選択して、Exit EditorでYesを選択する
特に説明がなかったのですが、こうすると終了できます。
4. おわりに
少し固い話ですが、アクセンチュアはDARQという概念を提唱しており、"R"としてExtended Reality (XR)が上がっています。
技術が発達すると、どうやって使うか(見せるか)が重要になります。個人的にはXRはこの辺りに寄与すると思っています。そのためにもどうやって見えるかを表現するプロトタイピングは重要です。
私がNoodlを知ったのはたまたまですが、せっかくなのでXRと絡めてどう使えるかを調べていきたいと思います。
とりあえず、次回はjavascriptを読める例として、Babylon.jsを使うための手順を解説予定です。
