LoginSignup
2

More than 3 years have passed since last update.

Noodl 2.0β版の機能デモをつくってみた(実装編3:ナビゲーションとコンポーネント化)

Last updated at Posted at 2020-02-28

概要

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. カードとコンポーネント化

Material UI Kitを使ったMuiCard、カード型コンテンツの実装方法を説明します。

image309.png

このCardは文字や画像表示のほか、右下のアイコンをクリックするとコンテンツを表示する機能を持ちます。

1-1. 使用するノード

ノード 説明
MuiCard Card型のコンポーネント
MuiCardHeader Card内でタイトル・サブタイトル
MuiCardMedia Card内でDiv要素、画像、Video
MuiCardContent Card内で文章
MuiTypography 文字の見ため・デザイン
Text テキストを表すノード
MuiCardActions Card内のUIコントロール
Group ノードをグループ化するためのノード
MuiIconButton アイコン型のボタン
MuiCollapse コンテンツを表示/非表示するためのノード
ComponentInput コンポーネントに入力をつけるためのノード。ComponentOutputが出力をつけるノードとして用意されている

1-2. ノードの配置・接続

図 Cardのノード設定
image300.png
Cardはヘッダーや、コンテンツ、UIコントロール部分を持つことができます。
それぞれコンテンツ部分、ボタン部分、Collaspe部分として使用するノードの機能と配置でイメージがわかるかと思います。
また、下部コンテンツは表示/非表示を切り替えるためにMuiCollaspeの子要素にMuiCardContentsを配置しています。

ノード接続のポイントはMuiIconButtonによるCollaspe部分の表示切替です。
MuiIconButtonのClickでStatesのOpen/Closeを切替え、OpenであればMuiCollaspeのinをtrueにしてCollaspe部分を表示しています。
細かな機能としてはStatesにrotation(回転)のPortを持たせて、コンテンツの表示/非表示に合わせてアイコンを90度回転させています。

1-3. カードのコンポーネント化(再利用)

また、「+Component」>12_MuiCard(任意の名称)としてコンポーネントを作成し、その中にノードを配置することでComponentとして登録し再利用できる部品を作ります。

図 コンポーネント化の方法
image323.png

図 コンポーネントの内容を外部から変更する:ComponentInput
image326.png
ComponentInputによて外部からコンポーネントの内容を変更することが可能となっていて、「+Port」で入力に使いたいポートを複数設定できます。これによりコンポーネントはより汎用的に利用することができます。
今回はカード内の文字(text)と画像(Src)を外部から入力可能とするために利用します。

2. Tab:タブ

MaterialUI Tabによるタブの実装。タブにより表示させるコンテンツを切替えます。

image16.png

2-1. 使用するノード

ノード 説明
Group ノードをグループ化するためのノード
Text テキストを表すノード
MuiTabs タブのまとまりを表すノード
MuiTab 1つのタブを表すノード

2-2. ノードの配置・接続

image324.png
MuiTabsを親に、MuiTabを子にすることでタブ機能を実現できます。
あとはどのTabが選択されたかをMuiTabs:TabIndexで取得でき、その内容で表示するコンテンツを切替えることができます。ここではTextにTabIndexの値を表示しています。

3. ナビゲーション

Material Button Navigationで画面上下に表示するナビゲーションボタンを実装します。
こちらはNoodl起動時に選択できるReactStarterのテンプレートを使っています。

image17.png

3-1. 使用するノード

ノード 説明
Group ノードをグループ化するためのノード
Text テキストを表すノード
MuiButtonNavigation ボタンのまとまりを表すノード
MuiButtonNavigationAction 1つのボタンを表すノード
MuiIcon アイコン表すノード

3-2. ノードの配置・接続

image325.png
MuiButtonNavigationを親に、MuiButtonNavigationActionを子にすることでナビゲーション部分を作っています。考え方はTabと同じ。どのボタンが選択されたかはMuiButtonNavigation:TabIndexから取得することができます。

4. Header

画面上部に表示させるページのタイトル部分です。
こちらもReactStarternoテンプレートを元にしています。
image350.png

4-1. 使用するノード

ノード 説明
MuiAppBar アプリバー
MuiToolbar ツールバーとしてまとめる
MuiIconButton アイコン型のボタン
MuiTypography 文字の見ため・デザイン
Text テキストを表すノード
03_Drawer 自作のメニューコンポーネント
ComponentInput コンポーネントに入力をつけるためのノード

4-2. ノードの配置・接続

image352.png
MuiIconButtonのClickで自作の03_Drawerコンポーネントを開くためにOpenに接続しています。

5. Drawer

Drawerは画面横からスッと現れるメニュー表現に使われます。

image02.png

5-1. 使用するノード

ノード 説明
MuiDrawer 横スライドするメニュー
Text テキストを表すノード
MuiDivider メニュー部分に区切り線を入れるノード
MuiList List用のノード
15_ItemList 自作したItem表示用コンポーネント
Switch 状態を保存するノード
ComponentInput コンポーネントに入力をつけるためのノード

5-2. ノードの配置・接続

img0008_result.png
MuiDrawerを親要素、コンテンツを子要素として設置します。
外部からComponentInputで信号を受取り、SwitchでOn/Off切替えてMuiDrawer:Openにより表示/非表示を行っています。
また、子要素のアイコン部分は15_ItemListとしてコンポーネント化しています。このようになるべくコンポーネント化していくほうが、アプリケーションの構造が理解しやすいです。

6. Badge

MuiBadgeを使って「ClickMe」と書かれたボタン右上にバッチを表現しています。

image003.png

6-1. 使用するノード

ノード 説明
MuiBadge バッチ機能のノード
MuiButton ボタン
Counter カウンター
Switch 状態を保存するノード

6-2. ノードの配置・接続

img0001_result_1.png
構造は簡単、MuiBadgeを親としバッチを付けたい対象MuiButtonを子要素としているだけです。
表示する数字の制御にはCounterを使い、表示/非表示にはSwitchを使っています。


まとめ

実装編として今回はページを構成する要素とコンポーネント化について解説しました。
NoodlはUI/UXを直感的に作れるだけでなくコンポーネント化によって使いまわせるところは非常にいいですね。
コミュニティーも活発1で、IoT関連のプロトタピイングツールとしてとても可能性を秘めていると思います。

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

参考文献


  1. Slackやコミュニティーによる技術書展への出展など楽しそうなことされています。 

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
2