LoginSignup
3

More than 3 years have passed since last update.

posted at

updated at

Noodl 2.0β版の機能デモをつくってみた(実装編1)

概要

NoodlのVer2.0β版を使って作成した機能デモとなります。
はじめて方がNoodlでどんなことができるかを把握すること。
それぞれの機能をどう実装するかの参考となることを目的としています。
今回はビジュアル・インタラクションの実装方法について説明します。

目次

機能紹介編
1. Noodl 2.0β版の機能デモをつくってみた

実装編
1. ビジュアル・インタラクション ←今回の記事
2. ビジュアル・インタラクション2
3. ナビゲーションとコンポーネント化
4. シングルページアプリケーション

サンプルデモ・サンプルデータの利用

・ GitHub上の[デモサイト](https://macole.github.io/Noodl2_LibDemo/index.html)

・ GitHub上のサンプルデータと構築手順

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

注意事項
・ このデモはVer2.0β版で作成しています。Ver1.3では動作しません。


1. ホーム画面の実装

まずはTextとGroupを使ったホーム画面を作ります。

図 ホーム画面
image01.png

1-1. 使用するノード

ノード 説明
Group ノードをグループ化するためのノード。ページやコンポーネント部品の親要素となる。
Text テキストを表すノード。Groupの子要素として配置することでタイトル「Noodl Library」となります。
Circle 円図形となります。作成した円をボタンとします。
States 状態を保持するノード。ここではボタンのOn/Offを保持しています。
ColorBlend 2つ以上の色をブレンドするノード。BlendValue1で色を選択します。

1-2. ノードの配置

図 ノード全体
image203.png
以下では説明用にノード番号を付けています。

背景の実装

図 Group(1)の設定

image301.png
Group(1)で背景を白にします。Style>BackgroundColor=#ffffff

図 Image(2)の設定
image302.png

Image(2)は画面下部に配置するため、Alignment>Position=Absolute(絶対)、AlignY=Bottomとします。

V2.0βでは変更した属性には左側に丸が表示されます。丸をクリックすることでデフォルトに戻すことができます。

タイトル部分の実装

親要素のGroup(4)でタイトルのBoxを作っています。
Group(4)のサイズはTextに合わせて可変されるようにします。Dimensions>SizeMode=ContentSize。色はStyle>BackgoundColor=#aa77ddで指定。
Group(4)の余白はMargin and paddingで設定します。

図 Group(4)の設定

imag204.png

Placementで要素の移動、回転、拡大縮小ができます。要素の角を丸くするにはStyle>BorderRadius=20を設定します。

図 Group(4)の設定2

image205.png

Text(6,7)はGroup(4)の子要素として配置することで、Group(4)の内側に文字が描かれます。

1-3. ノードの接続

クリックで色の変わるボタンを実装します。
まずは状態を表すStates(12)ノードの設定と、ColorBlend(11)の設定をします。States(12)ノードはボタンのON/Off状態を持ち、ON/OFFの状態に合わせて追加した変数Colorの値を変化させます。

図 States(12)の設定
image208.png

図 ColorBlend(11)の設定
image200.png

ノードを接続してインタラクションを実装する
この流れを日本語で表すと
ボタンが押されたら⇒状態:Stateを変化させる
状態:Stateによって⇒色を選択する
選択された色で⇒ボタンの色を変える

ノードの接続で表すと

Circle(8):Click⇒States(12):Toggle
States(12):color⇒ColorBlend(11):BlendValue
ColorBlend(11):Result⇒Circle(8):FillColor

そのままノードをつないでいきます

図 ノードの接続
image300.png

また、状態を可視化するためStatesの値を画面に出力しています。

States(12):Value⇒Text(3):Text
ColorBlend(11):Result⇒Text(3):Text


2. 画像移動の実装

マウスやタッチによる画像の移動機能を実装します。

図 画像移動
image05.png

2-1. 使用するノード

ノード 説明
Drag Dragの下位に配置されたノードにマウスやタッチによる移動機能を追加する。
Image 画像のノード。画像はNoodlフォルダから参照するほか、外部のURLを指定できる

Imageのサイズに関する属性

属性 説明
Explicit %やpixで幅と高さを設定する。
Content Width 描画するイメージ自体の幅になる。高さは明示的に設定される
Content Height 描画中のイメージと同じ高さになる。幅は明示的に設定される
Content Size 幅、高さ共にイメージのサイズに設定される

ノードは親要素からサイズを参照します。つまり100%で親要素と同じ大きさになります。

2-2. ノードの配置

図 ノード配置
img0001_result.png

Image(5)ノードで手の画像を表示し、Drag(4)ノードを親要素としています。これだけで画像を移動することが可能になります。
ノードの順序で画面Z方向の制御ができます。ノード順の上から描画され、一番下が最後(最前面)となります。
今回の場合、手を移動させるとDrag(4)の上にあるGroup(3)は後ろ。Group(6)は手前になります。

図 重なりの前後関係
image06.png


まとめ

実装編として今回はビジュアルとインタラクションについて解説しました。
ビジュアルプログラミングを文字で説明するのは難しいですね。
Noodlの爆速感を知ってもらうには動画のほうが合っている気がします。

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

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


参考文献

Noodl公式
Noodl ドキュメント
Qitta>Noodlで色の変わるOn/Offボタンを作る
Qitta>プロトタイピングツール「Noodl」でキャラクターの頭をなでて照れさせる


  1. BlendValueは整数以外も設定できるため、2つの色をブレンドすることができます。例えば0=赤#ff0000、1=青の場合#0000ff、0.5=紫#880088になります。 

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
3