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