LoginSignup
6

More than 1 year has passed since last update.

Noodl 2.0β版の機能デモをつくってみた

Last updated at Posted at 2020-02-16

Noodl 2 Library Demo

昨年末より使い始めたNoodlのVer2.0β版を使って作成した機能デモとなります。
現在はUI/UXデザイン、ノンコーディングの機能のみ用いて実装しています。
はじめて方がNoodlでどんなことができるかを把握すること。
それぞれの機能をどう実装するかの参考となることを目的としています。
GitHub上のデモサイトで、完成イメージを確認してください

注意事項
・ このデモはVer2.0β版で作成しています。Ver1.3では動作しません。
・ MaterialUI Navigation機能はプレビューでは動作しているのですが、なぜかデプロイすると表示されません。ほかのコンテンツの後ろに隠れてしまっているようです。不恰好ですが上部に配置して表示させています。
・ 各機能の実装方法についても記事にしていきます。

実装については下記で説明しています。

  1. ビジュアル・インタラクション
  2. ビジュアル・インタラクション2
  3. ナビゲーションとコンポーネント化
  4. シングルページアプリケーション

使用方法

  1. Githubから/Noodl2_libDemo以下を対象PCにCloneしてください。
  2. Noodl2を起動しProjects>Import exsisting projectからNoodl2_libDemoを選択してください。
  3. LibraryからMaterial UI KitをAddしてください。

機能説明

ホーム画面

TextとGroupのデモです。Groupは個々に背景を指定することでボタンやカードとして使用できます。
中央右の丸はCircleを使ったボタンのデモです。クリックで色が変化します。

image01.png

画像移動

Dragのデモです。Dragの下位に配置すると、画像を移動することができます。

image05.png
ノードの順序で画面Z方向の制御ができます。
手を移動させると、オレンジ色のBOXよりも前、赤色のBOXよりも後ろに隠れます。
image06.png

カードコンテンツとスクロール

Material UI Kitを使ったMuiCardの例です。Card右下のアイコンをクリックすると、
コンテンツが現れます。MuiCollapseの機能です。

image07.png

ボタン

GroupやCircleを使ったボタンのデモです。色変化、トグルスイッチ、スイッチ(表示/非表示)機能です。

image10.png

Counter:カウンター

Counterのデモです。ボタンを押すと下部の数字が増加・減少します。

image12.png

タイマー

Timerを2つ組合わせた無限ループの実装です。1秒毎に出力をCounterに入力し
100までカウントします。

image13.png

Video:動画

ボタンによる動画の操作のデモです。動画の素材はNoodlのフォルダから読込むほか、外部URLを指定することで外部の動画を読込むことも可能です。

image14.png

アイコン

MaterialUI Iconのデモです。アイコンセレクタのボタンを押すことで、アイコンを変更します。StringSelectorで表示するボタンを押した回数から表示するアイコンを選択しています。

image15.png

Tab:タブ

MaterialUI Tabのデモです。タブを切替えると下のテキストが変化します。

image16.png

ナビゲーション

Material Button Navigationのデモです。画面下部に表示されているナビゲーションボタンも同様の機能で実装しています。

image17.png

アニメーション

Animationのデモです。ボタンを押すと中心の円を開閉することができます。

image00.png

Drawer

Drawerのデモです。横からスッと現れるメニューなどの表現に使われます。
また、MuiBadgeを使って「ClickMe」と書かれたボタン右上にバッチを表現しています。

image02.png

まとめ

NoodlはIoTプロダクトのUI/UX作成ツールとしてさっと使えるところがいいですね。
Ver2も発表されこれから盛り上がっていって欲しいです。
この記事で少しでも興味を持っていただけると嬉しいです。

使用素材

image表示のサンプルとして、ユメヒコさんがフリー素材化された清水さんを使用させていただきました。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
6