Robit blog

株式会社ロビットの公式ブログです

シーケンス図をマークダウン風の何かで書くエディタを作ってみた


http://blog.robit.co.jp/entry/20170905

こんにちは。CTOの新井です。今回も前回同様、システムを設計する上で便利な手法とツールをご紹介したいと思います。
典型的なスマート家電やIoT系のプロダクトを開発する際には、必ず複数のデバイスやシステムと連携する必要があります。例えばmornin’であればmornin’本体とアプリ、そしてサーバーがそれぞれ連携する必要がありますし、産業系のIoTシステムであれば、機械、センサー類、ゲートウェイ、サーバー、情報表示端末等々、様々なものが連携して初めて一つのプロダクトとして機能します。
こういった複雑なシステムを一人で頭の中だけで、爆速で商業レベルに出来るフルスタックエンジニアはおそらく世の中に数えるほどしかいないので、現実的には複数人が連携しながら開発することになるかと思います。
しかしながら、複数のシステムがどうやって連携していくかを複数人で正確に共有し、明文化しておくことは意外と難しかったり工数がかかる作業だったりします。

そこで今回はこういった場合に便利なシーケンス図と、それをテキストベースで描画出来るソフトをご紹介致します。

シーケンス図とは複数のオブジェクトが情報をやり取りする際に、時系列順にその流れを表現したものです。詳しい説明は例によってWikiに譲るとして、今回はmornin’のように単独でネットワークにつながらないデバイスファームウェアを別のネットワークに接続することの出来るデバイスからアップデートする例を考えてみたいと思います。

ここでは、ネットワークに繋がるデバイスがサーバーにファームウェアの最新バージョンを問い合わせ、対象のデバイスファームウェアバージョンが最新のバージョンでない場合に最新のファームウェアをダウンロードし、ファームウェアのバージョンをアップデートする、といったような例を考えてみましょう。

ファームウェアを更新する場合のシーケンス図

こういった図を用意しておけば、各システムがどういった要求を投げ、どういった結果を期待するのか、またどういった例外を想定すればいいのかすごくイメージしやすくなりますよね。
このくらいの図であればExcel等を使って気合で表現するのも、絵に書いて画像で保存するのも全然難しくはないと思いますが、
何か変更があった際にデザインが崩れたり、微調整するのが非常にめんどくさかったりします。
前回ご紹介したguiflow然り、テキストで記述すると自動的に図が生成されるとこういった煩わしさから開放されるので、そういったものがあると非常に便利なのですが、Wiki用のプラグインだったり、Webサービスだったりと、ローカル環境で手軽に使えるものがあまりなかったので、Electronで作ってみました。

とりあえずなんとかMac上で動く程度にしか作ってないので色々ひどいですが、GitHub上に公開しておきましたので、興味があるかたは御覧ください。中身はどうでもいいから使ってみたいという方はこちらにあるzipファイルをどうぞ。

JS Sequence Diagramsという素敵ライブラリが存在するので、ほとんどこれを埋め込んだだけの代物ではありますが、組み込み屋とアプリ屋が仕様を決める際のちょっとした確認にも便利かと思います。
先程のサンプルのシーケンス図は下記のように表現出来ます。

たったこれだけでシーケンス図が書けてしまうので、自分がロジックを考えるときなんかにも紙に書く代わりにこれを使って頭の中を整理したりするのにも使ったりしてます。

仕様のドキュメント化は複数人で開発をする上では大事ですが、気合いれすぎてドキュメント化を進めると開発するエネルギーと時間が無くなって最終的には管理されなくなるみたいなのはあるあるだと思うので、無理しない程度に省エネでサクッと出来るといいかと思います。

以上、シーケンス図と描画ツールのご紹介でした。Electron便利ですね。

オフィスから見た花火大会。自分だけ見て無い。
来年こそは見れたらいいなぁ(by 高橋)

購入(amazon)はこちら
> ロビットのWebサイトへ
> 採用情報はこちら