図生成アプリの始め方と動作環境
ここから図生成アプリを紹介します。図生成アプリはHTML形式のファイルなので、アプリのインストールは不要です。また、Webサーバーも必要ありません。GitHubからソースをダウンロードし、図生成アプリ（AWS-Diagram_02フォルダ配下のAwsDiagram_02.html）をChromeブラウザで開くと使用できます。
Windows10上のChromeブラウザで動作することを確認します。Microsoft Edgeブラウザでも動作しましたが、Firefoxブラウザには対応していません。外部通信がないためオフライン環境でも動作します。
図生成アプリの使い方
基本操作
図生成アプリは、Diagram as Code（図をコードで管理する）という概念をベースにしています。そのため、図に必要な情報は以下のようにJSON形式のテキストファイルに記載します。
図生成アプリを起動し、作成したJSON形式のファイルを読み込むと作図が完成します。
接続線の表示／非表示
ネットワークの通信経路などアイコン同士のつながりの表示／非表示が可能です。作図の左側にある通信経路の種類をクリックすると表示／非表示が切り替わります。
図の拡大／縮小
マウスホイールで拡大／縮小します。
図の移動
マウスドラッグで図を移動します。
JSONの記載方法など詳細については、GitHubのreadme.mdをご覧ください。
図生成アプリによる課題対策
先ほど紹介した以下2つの課題（バランス調整が大変、余白がない時の調整が大変）に対し、図生成アプリによりどのように対策をとるのかを紹介します。
「課題1 バランス調整が大変」への対応
配置するアイコンの位置やサイズは数値情報としてJSONファイルに記載しています。そのため、図生成アプリでのバランス調整はJSONファイルの情報を変更するだけです。
「課題2 余白がない時の調整が大変」への対応
図生成アプリはシートサイズが無限なので余白がなくなることはありません。また、図を拡大／縮小する際は、フォントサイズも同時に拡大／縮小するためバランスが崩れることはありません。
図生成アプリで作成した図を紹介します
図生成アプリで作成したAWS構成図を紹介します。予想以上に楽に作図できたのでいろいろかいてみました。紹介する図は全てGitHubに格納しています。
信頼性の高いWebサーバーの構成図
AWSで信頼性の高いWebサーバーの構成図です。サーバーやデータベースを地理的に離れたデータセンターに配置することで信頼性を高めています。余談ですが、EC2（仮想サーバー）をサーバーレスにするなど、より信頼性を高くする工夫もできます。
LINE BotのAWS構成図
LINE BotのAWS構成図です。第3回で作成したシステムの構成図をかきました。
VPCピア接続のAWS構成図
VPCピア接続のAWS構成図です。通信経路ごとに線の色を変えました。
最初に紹介した信頼性の高いWebサーバーの構成図を更新し、ログ収集や開発環境、コード管理の仕組みを追記しました。個人的な感想ですが、このような追記をPowerPointで行うよりも少ない時間でできたので、とても便利です。
まとめ
- 今回は作図時間を短縮するためAWSシステム構成図生成アプリ（図生成アプリ）を作りました。
- 図生成アプリは、インストールもWebサーバーも不要で手軽に使用できます。
- 図生成アプリにより作図での課題が対策できたので、作図作業が楽になりました。
より詳細な情報を表示したり、画像出力の機能を追加したりと、改良するかもしれません。また、HTMLとJavaScriptだけでアプリが作れることがわかったので、これからはどんどん便利ツールを作っていきたいと思います。
