guiflowとuiflowでUiFlows試してみた

    あるいは Kanazawa.rb meetup #66 に参加してきました。

    UiFlowsとは

    自分が知ったきっかけは誰かのツイート経由で

    画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール | UXデザイン会社Standardのブログ

    だったのですが、37 Signals ( Basecamp ) で

    A shorthand for designing UI flows – Signal v. Noise

    採用されている（今もなのかな？）シンプルに

    • 表示内容
    • 操作内容
    • リンク先

    を記述する言語です。

    「ツール」と紹介されることが多いみたいだけど、具体的なツールというよりは「記法」と表現した方がまだ近いかも。元のブログでは普通に手描きのものが紹介されています。（ただ、そもそも UI Flows って「名前」は存在しないような気がしませんか？）

    元のブログは英語ですが、画像だけ拾ってみても十分に雰囲気は分かります。だいたい以下のような感じになります。

    ユーザーの目にするもの
----------------------
ユーザーの操作するもの  --->  ユーザーの目にするもの
                              -----------------------
                              ユーザーの操作するもの

    guiflowとuiflow

    自分がこの言語に興味を持ったのは、グラフィックツールがなくても GitHub でメンテしやすい遷移図を描けないか？だったので欲しいのは言語そのものだけではなく、それを実際に遷移図に起こしてくれるツールだった。そこで出てきたのがこの二つ。

    この二つは同じ作者の手によるもので、 UI Flows 言語（仮にこう呼ぶ）を解釈し、ビジュアライズする実装。guiflow は Electron 製、uiflow は Node.js 製。

    guiflowよさげなんだけど…

    すぐに始められてグラフが見れるというのはすごくいいんだけど、ちょっと以下が気になった。

    試したのは v 0.1.1

    1. 日本語が Unicode Escapesequence になってしまう
    2. DnD でファイルを開いてくれない

    特に 1 が致命的で、一度このツールで保存しちゃうと、もうこのツールを使って読むか、変換済みの画像でなければ人間が共有するのは難しくなってしまう。（Unicode Escapesequence をそのまま読み下せる人は身近にはいませんので）

    うーーーーん。これはちょっと期待していたものと違うなぁ。

    uiflowは大丈夫なんだけど

    同じ作者の uiflow では、普通にエディタで作成した UTF-8 のデータを変換することができた。

    中を軽く読んでみたんだけど、どうも変換の処理ではなく、ACE というエディタでテキストデータを扱うと Unicode Escapesequnce になっちゃうのかな？

    Ace - The High Performance Code Editor for the Web

    uiflow を叩くのは我々コマンドラインに慣れている人間にはよいけど、遷移を考える人はそういう人ばかりではないので、これを普段使いにするかというと、ちょっと微妙な気がします。自動化の際には活躍すると思いますが。

    さーてこれはどうしよう、というところまでたどり着いて今回は力つきてしまいましたとさ。

    まとめ

    • UIの流れを記述するシンプルな言語がある
    • 2016年くらいから実装が増えてて試しやすくなってる
    • ただし元ネタは2009年のブログであり、今も使っているのかはよく分からなかった
    • guiflow は手軽に始められるけどテキストデータとしてはちょっと管理しにくいので課題はある

    More