AtomでUMLをライブプレビューできる環境を構築する

イントロダクション

IoTアプリケーションの設計において、様々なアクターの間でどのようなやり取りが行われるのかを時系列で記述できるUMLのシーケンス図は有効です。次の図は、スマートフォンアプリケーションとデバイス、いくつかのウェブサービスにまたがるやり取りを表したものです。典型的なIoTアプリケーションはさらに複雑で、複数の人々が開発を担当することになります。シーケンス図を用いて、どこを誰が担当し、どのようにやり取りするのかを明確にしておくことにより齟齬の発生を防げます。

また、リサーチにおける分析においてもシーケンス図は有効です。往々にして、調査の対象となる現場には様々な登場人物が関わり、その間で複雑なやり取りが発生します。膨大に積み上がった断片的なデータを基にシーケンス図を作成することにより、コミュニケーションのギャップや、不必要なやり取りに時間が費やされているポイントなどを見つけることができるでしょう。

課題

シーケンス図はソフトウェア開発の分野で一般的に用いられているため、様々なツールで作成できます。例えば、OmniGraffleやIllustratorなどのツールでテンプレートを用いて作成することもできます。しかしながら、描くために時間がかかる、ツールを操作できる人が限られる、変更の履歴（どの部分をどのように変更したか）をGitのようなツールで管理しにくい、といった課題があります。

解決法

ここでは、テキストエディタ「Atom」にプラグイン「Markdown Preview Enhanced」をインストールし、テキストからUML図を生成するツール「PlantUML」の記法で描く方法を紹介します。これにより、リアルタイムでプレビューを確認しながらMarkdownでシーケンス図を描けるようになります。また、テキストで記述するためGitなどで差分を確認することが容易です。くわえて、プレビューをHTMLなどの形式で出力することも可能ですので、作成後の配布も簡単です。

なお、以下の説明はmacOS High Sierra v10.13.1、ATOM v1.22.1、Markdown Preview Enhanced v0.15.1、JDK 9.0.1の組み合わせで動作確認したものです。

Markdown Preview Enhancedのインストール

AtomのアプリケーションメニューからPreferences...＞Installと移動し、「Markdown Preview Enhanced」をパッケージ名として入力して検索すると、候補の中にMarkdown Preview Enhancedが表示されますのでInstallボタンを押してインストールします。

JDKのインストール

Markdown Preview Enhancedに含まれるPlantUMLを動作させるためにはJDK（Java SE Development Kit）が必要です。以下のページにアクセスして自分のプラットフォーム用のJDKをダウンロードしてインストールします。

Java SE Downloads

動作確認

インストールが終了したら、適当な名前でMarkdownファイルを作成し、PlantUMLのウェブサイトで紹介されているサンプルをコピー＆ペーストして記述します。

```plantuml
@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response

Alice -> Bob: Another authentication Request
Alice <-- Bob: another authentication Response
@enduml
```

記述できたら、PackagesメニューからMarkdown Preview Enhanced＞Toggle Previewを選択、もしくはcontrol＋shift+mでプレビューを非表示から表示に切り替えます。初回はJavaを起動するために数秒かかるかもしれませんが、一度起動するとそれ以降は表示と非表示を切り換えても瞬時に反映されるはずです。

この状態で、例えば以下のように変更を加えると、瞬時にプレビューにも反映されるのが確認できると思います。

```plantuml
@startuml
Alice -> Bob: Authentication Request
Bob --> Tom: Authentication Request
Tom --> Bob: Authentication Response
Bob --> Alice: Authentication Response

Alice -> Bob: Another authentication Request
Alice <-- Bob: another authentication Response
@enduml
```

PlantUMLの記法に関してはウェブサイトに詳しく説明がありますので、参考にしていろいろ試してみるとよいでしょう。