最終更新: 2020-01-07 10:28
越川 直人
Ship It!
Updated by ppworks 2020-01-07 10:28:09 +0900

今回のリリース内容

Signal v. Noise で紹介されている UI flows図 をMarkdown風な記法で描写できる uiflow 記法に対応しました。

UI flows図 とは、「ユーザーが見るもの」とその結果「ユーザーがすること」を繋げる、以下のような画面遷移図です。

UI Flow

この図を uiflow記法では、以下のようにコードブロックに uiflow を指定して記述します。


```uiflow
[page1]
ユーザーが見るもの
---
ユーザーがすること

[page2]
ユーザーが見るもの
---
ユーザーがすること
==> page3
ユーザーがすること
==> page4

[page3]
ユーザーが見るもの

[page4]
ユーザーが見るもの
```

詳しい記法は「hirokidaichi/uiflow: uiflow - the simplest way to write down your ui-flow diagram like markdown 」を参考にしてみてください。

所感

🎍 あけましておめでとうございます 🎍

今年もユーザーの皆様にとって便利な機能を作って行きたいと思います 🔧
2020年もよろしくお願いいたします :esa2:


[ProTip] Webhookでdocs.esa.ioの更新通知を受け取れるようになりました!

Enjoy "(\( ⁰⊖⁰)/)"
https://esa.io

# 今回のリリース内容

[Signal v\. Noise](https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows) で紹介されている __UI flows図__ をMarkdown風な記法で描写できる __[uiflow](https://github.com/hirokidaichi/uiflow)__ 記法に対応しました。

__UI flows図__ とは、「ユーザーが見るもの」とその結果「ユーザーがすること」を繋げる、以下のような画面遷移図です。


```uiflow
[page1]
ユーザーが見るもの
---
ユーザーがすること

[page2]
ユーザーが見るもの
---
ユーザーがすること
==> page3
ユーザーがすること
==> page4

[page3]
ユーザーが見るもの

[page4]
ユーザーが見るもの
```

この図を uiflow記法では、以下のようにコードブロックに __uiflow__ を指定して記述します。

<pre class="highlight plaintext"><code>
```uiflow
[page1]
ユーザーが見るもの
---
ユーザーがすること

[page2]
ユーザーが見るもの
---
ユーザーがすること
==> page3
ユーザーがすること
==> page4

[page3]
ユーザーが見るもの

[page4]
ユーザーが見るもの
```
</code></pre>

詳しい記法は「[hirokidaichi/uiflow: uiflow \- the simplest way to write down your ui\-flow diagram like markdown](https://github.com/hirokidaichi/uiflow) 」を参考にしてみてください。

# 所感

:bamboo: あけましておめでとうございます :bamboo: 

今年もユーザーの皆様にとって便利な機能を作って行きたいと思います :wrench: 
2020年もよろしくお願いいたします :esa2: 

---
[ProTip] [Webhookでdocs.esa.ioの更新通知を受け取れるようになりました!](/posts/73) 

Enjoy "(\\( ⁰⊖⁰)/)"
https://esa.io

今回のリリース内容

Signal v. Noise で紹介されている UI flows図 をMarkdown風な記法で描写できる uiflow 記法に対応しました。

UI flows図 とは、「ユーザーが見るもの」とその結果「ユーザーがすること」を繋げる、以下のような画面遷移図です。

UI Flow

この図を uiflow記法では、以下のようにコードブロックに uiflow を指定して記述します。


```uiflow
[page1]
ユーザーが見るもの
---
ユーザーがすること

[page2]
ユーザーが見るもの
---
ユーザーがすること
==> page3
ユーザーがすること
==> page4

[page3]
ユーザーが見るもの

[page4]
ユーザーが見るもの
```

詳しい記法は「hirokidaichi/uiflow: uiflow - the simplest way to write down your ui-flow diagram like markdown 」を参考にしてみてください。

所感

🎍 あけましておめでとうございます 🎍

今年もユーザーの皆様にとって便利な機能を作って行きたいと思います 🔧
2020年もよろしくお願いいたします :esa2:


[ProTip] Webhookでdocs.esa.ioの更新通知を受け取れるようになりました!

Enjoy "(\( ⁰⊖⁰)/)"
https://esa.io