こんにちは、初めまして、フロントエンドエンジニアの八木です。
普段、モノタロウのECサイト開発を行っています。
エンジニアだとシステム構成図やシーケンス図など、何かと図を作る機会が仕事柄たくさんあります。その多くは要件定義や詳細設計などのフェーズで、人に何かを伝えるために使われます。
最近では、テック系のイベントやセッション登壇などでも使われる機会が多く見られるようになってきましたね。
エンジニアが図を用いる理由
図を用いる理由は文字だけでは直感的に伝わりづらいなど様々ですが、共通して言えることはビジュアライズすることによって皆が同じ認識を持つことにあります。
しかし、人によって描き方が異なっていたり、描き方に正解はないことから個人の解釈にずれが発生することが多々あります。
例えば以下の例を考えてみます。
伝えたいことは次の通り。
- WebサーバーはNginxを使用
- Appサーバー上ではDockerコンテナを使ったアプリケーションのデプロイ
- DBはAppサーバー内に含める
- クライアントがアクセスした際に通過するネットワーク
これが人によっては
「青い立方体は何なのか意図がわからない」
「Appサーバーという括りで複数サーバーに分けているのか」
など図からは伝わらないことがあります。
図を雰囲気で理解しているシチュエーションが少なからず存在し、理解が合わないまま開発工程で手戻りが発生する要因になった経験がないでしょうか。
つまり、図から連想される情報量は多く、人によってはたくさん選択肢を持つことになります。読者は経験上、一番近しいものを選んで理解をするわけですが、これが作者の意図と必ずマッチするとは言い切れません。
そのため読者のもつ経験を知らないと理解を得る工夫が、逆に誤解を招くことへと繋がってしまいます。各読者はそれぞれ異なった経験を積んできているので、読者の数が増えるほど、また分野が広がるほど図への理解度は低くなります。
理解度を向上させるための動き
このような問題を緩和するために、一部の組織では共通したアイコンを利用するなどの施策を打ち出し、プリセットを準備しているところもあります。また、描き方にルールを作って定義しているところもあるでしょう。
このように使う図を共通化させる動きによって、読者がもつ認識の誤差をなるべく小さく収めることが可能になります。しかし、これには膨大な準備が必要ですし、ルールを定着させるために一から作ろうとすることは中々骨の折れる作業です。
では、どうするべきか
今回は、こういった背景を基にドローイングツールを使って組織的に理解度を向上に繋げる活用方法についてご紹介します。
ドローイングツールというとCacooやgliffyなどが挙げられますが、今回はdiagrams.net(旧draw.io)をベースに紹介していきます。
何故、diagrams.netなのか？
モノタロウではグループウェアにGoogle Workspace(旧:G Suite)を利用しており、Google Driveを中心にドキュメント管理をしています。Google Workspace MarketplaceにはGoogle Driveに対応したdiagrams.netのアプリが用意されており、作成した図をファイル形式で保存することができます。
この運用方法がモノタロウに合っていたという理由もあり、diagrams.netを選出しました。
Googleのマーケットプレイス経由でインストールできるので、手軽に導入が可能です。Google Workspace利用者でなくても、普通のGoogleアカウントを持っている人なら誰でも無料で試すことができます。
他ドローイングツールでも同じようなことができると思いますので、どのように活用するかを参考にしていただければと思います。
図のライブラリ機能と共有
冒頭でもお伝えした通り、使う図を共通化するためにプリセットを準備することが多いです。
ドローイングツールを使うと簡単に作成した図をライブラリ化したプリセットを共有することが可能です。また、共有がリアルタイムに反映されるツールが多く、少しずつ共通化を図ることが可能になります。
diagrams.netにはカスタムシェイプライブラリという名称でライブラリ機能が存在し、自分の作成した図などを保存することができます。
ライブラリ機能は「File＞New Library＞Google Drive（保存する場所）＞Filename＞Save」から使用して作成することができます。
ライブラリの共有を前提に作成する際は、ファイル名入力時の拡張子に注意して作成する必要があります。
| drawio形式（拡張子なしで保存） | Googleドライブで他メンバーにGoogle Workspace内（Shared Drive経由）で共有作業が可能な形式。 |
| XML形式（拡張子付きで保存） | Git管理に向いている。マイドライブ内ではインポート可能。 |
作成した図をオリジナルのライブラリにドラッグ、または＋ボタンから保存が可能です。
作成したオリジナルが集約されたライブラリは
からライブラリ形式でエクスポート保存が可能です。
※2021/02時点ではXML形式でのみエクスポート可能
共有されたテンプレートは「File＞Open Library From＞Google Drive」からインポート可能です。
■GoogleDriveで共有しているdiagrams.net上で作業して保存する上での注意点
最終更新者が保存した内容がファイル上には反映され、差分はマージされない仕様になっています。 差分をマージする場合は「File＞Synchronize」から最新データを取得したうえで保存することや、ファイル共有先のアクセス権限を絞って編集可能なユーザーを制限するなどの対策が必要になってきます。
レビューコメント
図は読者との理解に差異が生まれる前提があるならば、それに対する指摘もあって当然です。間違いを正すためのレビューコメントもドローイングツールをうまく使うと便利です。Google Workspace Marketplace appにおけるdiagrams.netには、Googleサービスを活かしたコメント機能があります。
GoogleDriveにて作成した図に対してリンクを発行する必要があります。 ここで作成したリンクをレビュアーに共有してあげる感じですね。
リンクを共有された Googleアカウントに編集権限があれば、レビュー指摘したい箇所をドラッグすることでコメントを追加することができます。
コメントしているユーザーはGoogleアカウントに紐づいているため、メンションを付けるとデフォルトではメール通知が届きます。 GoogleDriveの機能なのでSlackAppのGoogleDriveと連携するとSlackで通知が届いたりするので汎用性が高いです。
レビュー箇所＋通知設定をうまく活用することで聞きたい場所の指定や、修正箇所の取りこぼしを撲滅することができますね。
また、このレビューコメントは閲覧権限の場合でも見ることができるので、どういう理屈なのかなどの背景についても伝えられる材料になるかと思います。
レイヤーを活用した図の一元管理
図は作成した後、だいたい陳腐化しがちです。特に運用で使っている図が陳腐化していると失敗のもとになります。よくあるのが頻繁に利用されるフローは最新化されているが、滅多に使われないフローなどは現状と乖離があるパターンです。できれば、一元管理されていて最新化する際に一緒に直す箇所に気づける運用フローが望ましいですよね。
そこでドローイングツールの出番です。ドローイングツールにあるレイヤー機能を使うとWebサイトのように操作可能な図を作成することも出来るため、複数ある図を一つにまとめることなどが容易にできます。
diagrams.netにはレイヤー機能がついており、Adobe Illustratorのような使い方も可能です。
と言っても、ここではデザイナーのような絵を描く方ではなく、図の階層分けを応用して操作可能な図を作成するために使います。
レイヤー操作する画面は「View＞Layer」より出力することができ、以下の操作によってレイヤーを追加できます。
|
新規レイヤーの追加 |
|
現在、選択しているレイヤーをコピー追加 |
レイヤーを追加すると可視化範囲を選択可能な訳ですが、diagrams.netではこのレイヤー選択をリンクとして扱うカスタムリンク機能を使用できます。 使い方のサンプルは以下の通りです。
１． リンク押下時に表示したいレイヤーを選択し、Edit DataからIDを取得する。
２． カスタムリンクを以下のように作成します。
data:action/json,{"actions":[{"toggle":{"cells":["Edit Dataから取得したID"]}}]}
３．アクションを付け加えたいShapeに対してEdit Linkよりカスタムリンクを記録し、Applyする。 ※アクションボタンはレイヤーの使い方によっては隠れて押せない場合もあるので配慮要
このような設定をすることで、図に全ての開発フローをまとめるなど、恒久的な使い方ができるようになります。カスタムリンクのアクションとして今回はtoggleを利用しましたが、他にもたくさん種類が存在します。カスタムリンク自体を作成するツールは公式からも紹介されているので、ぜひ参考にしてみてください。
まとめ
今回はドローイングツールを使った理解度を向上するための活用法について紹介しました。
この活用方法を組織的に網羅することで次のようなことが実現できます。
- リアルタイムに共有することで、少しずつ図の共通化が進められる
- 適所に対してレビューコメントでき、他者に通知や連携ができる
- 一元管理することで依存関係に気づきやすく陳腐化しにくい図ができる
プリセットを準備する際、一度にたくさん準備されて配布というケースがあるが、覚える側としても大変だったりします。大きなルールには縛られず、少しずつ図の共通化が測れるのがドローイングツールの良いところなので、こうした機能を扱うことで徐々にルールを浸透できます。利便性を損ねてしまうことを嫌うエンジニアは多いので、こういったツールをうまく使って組織的な理解度の向上を目指したいですね。
いかがでしたでしょうか？
ドローイングツールの活用法やdiagrams.netを少しでも使ってみたいなと思っていただけたら嬉しいです。今回、紹介した内容は業務で使うドキュメント改善活動の一環であり、他にもITスキルを用いた様々な施策にエンジニア達が取り組んでいます。
モノタロウでは絶賛エンジニアを募集中です！興味を持った方はぜひ、モノタロウで一緒に働いてみませんか？あなたのご応募お待ちしております！
