はじめに
リモートワークを始めて9年、100%フルリモートになってから5年が経ちました。以前はオフィスのホワイトボードにAWSアイコンのマグネットを貼ってアーキテクチャについて議論していましたが、オンラインではそれが難しくなりました。
既存のツールは多機能すぎたりAWSに特化していなかったりと、気軽な議論には向きませんでした。
そこで、ホワイトボードの感覚で直感的にAWSアーキテクチャ図を作成・共有できるWebアプリケーション「otak-aws」を開発しました。ブラウザ上で簡単にドラッグ＆ドロップ操作ができます。
作ったもの
otak-aws - AWSアーキテクチャボード
実際の動作はこちらで確認できます。
主な機能
「otak-aws」では左サイドバーからAWSのサービスやコンテナをキャンバスにドラッグ＆ドロップで配置できます。サービス間の関係やデータの流れもクリックだけで簡単に表現可能です。またVPCやサブネットなどのリソースの階層構造をコンテナのネスト機能で直感的に整理できます。図の詳細や全体像を確認したい場合はズーム機能が役立ちます。
長時間作業でも快適なダークモードも備えています。
作成した図はEraser.io形式やMermaid flowchart形式でエクスポート可能で、再利用が簡単です。インポート機能も充実しており、既存データの編集も容易です。URL共有機能ではLZ-String圧縮アルゴリズムを利用し、手軽にチーム内で共有できます。ただし、大きな図はブラウザのURL長制限を考慮する必要があります。
Undo機能やグリッドスナップ機能で操作性を向上させ、高度な設計にはAdvanced Modeを用意して多様なAWSサービスに対応しています。
技術構成と工夫点
フロントエンドにはReact・TypeScript・Viteを採用し、UIの整備にはTailwind CSSを用いました。アイコン統一のためにLucide Reactを使用し、データ圧縮はLZ-Stringを採用しました。テストにはVitestを使い品質を保ち、GitHub Pagesで公開しています。
URLの長さ制限問題に対してはデータ圧縮技術を活用しました。ドラッグ＆ドロップ時の座標計算はズームやスクロール位置に対応した統一的な関数で精度を向上しました。多数のアイコン表示時の動作が重くならないようReact.memoやuseMemoで最適化を図りました。
今後の展開
AWSサービスアイコンの拡充や、カスタマイズ可能なテーマ機能、テンプレート機能を導入予定です。PNG・SVG形式での画像エクスポート機能も計画しています。