uiflow
マークダウン風のテキストからUI Flowsのグラフを生成するコンパイラ
UI Flowsとは？
Webサイトやスマホアプリなどのユーザーインタフェースを設計する際に、より簡単な表現で全体の流れを記述する次のような図のことです。
具体的なUI設計に触れず、
- ユーザーが見るもの
- ユーザーがする行動
に注目することでシンプルにUIの必要条件、あるいは骨子を記述することができます。
uiflowコンパイラは、次のような簡潔な表現でこのような図を作図することができます。
[最初に]
ユーザーが見るものを書きます。
--
ユーザーがする行動を書きます。
[次に]
ユーザーが見るもの
--
ユーザーがすること１
==> その結果１
ユーザーがすること２
==> その結果２
[その結果１]
結果
[その結果２]
結果コマンドの使い方
シンプルな使い方
uiflow -i myapp.txt -o myapp.dot -f dot
myapp.txtをdot形式で、myapp.dotに変換する。
uiflow形式の文法
基本ブロック
[ページ名]
表示要素1
表示要素2
表示要素3
--
行動要素1
===> 遷移先ページ1名
行動要素2
===> 遷移先ページ2名
基本ブロックをつなげる
[ページ名]
表示要素1
--
行動要素1
[ページ名2]
表示要素
--
行動要素
[ページ名3]
表示要素
--
行動要素
行動要素の==>を省略すると次の基本ブロックに自動的につながります。
遷移に名前をつける
=={hogehoge}=>と表記して、遷移に名前をつけることができます。
[最初に]
ユーザーが見るものを書きます。
--
ユーザーがする行動を書きます。
[次に]
ユーザーが見るもの
--
ユーザーがすること１
=={遷移アクション名}=> その結果１
ユーザーがすること２
=={API名など}=> その結果２
[その結果１]
結果
[その結果２]
結果
少し複雑な例
[初回通知]
通知の確認ダイアログ
--
OK
[国選択]
リージョンの選択
デフォルトで日本
OKボタン
--
OK
[はじめよう]
ヒント情報
はじめるボタン
--
ヒントをスワイプ
==> はじめよう
LINEQを始める
[非ログインメイン画面]
ログインすると全ての機能を使えますアラート
フィード
通知アイコン
検索アイコン
ホーム
分野
Qボタン
ランキング
マイページ(N)
------
アラートをタップ
==> 利用規約
分野をタップ
==> 分野
Qボタンをタップ
==> ログイン確認
ランキングをタップ
==> ランキング
[利用規約]
利用規約の表示
[分野]
分野詳細
[ランキング]
ランキング詳細
uiflowをライブラリとして使う
次のように使うことができます。
const uiflow = require("@kexi/uiflow");