はじめに
皆さんおはこんばんわ。
サイトマップ（画面遷移図）書いてますか？
サイトマップは、サイトの全体像をサクッと確認できる有能な資料ですが、初回作成やメンテナンスが割りと大変で重労働感が強いのが難点ですよね。
今回は、このサイトマップをExcelの画面一覧仕様書から自動生成するサンプルコードを作成しましたので紹介したいと思います。
つくったもの
以下、Excel 仕様書を読み込んで、サイトマップを出力するツールです。
- 画面一覧Excel
スクリーンショットはスプレッドシートですが、Excelです。
（サイトはツールのサンプルとして作成した、実在しない架空のECサイトです）
- サイトマップ
左側にサイトマップ、右側に現在選択中のページの情報が表示されます。
サンプルのサイトマップ作成方法
- 事前にnode をインストールしておく
node 16.19.0
※Windows だと Volta をインストールするのが簡単
-
リポジトリをクローンまたはダウンロード
https://github.com/kaku3/workbooks/ -
ディレクトリに移動
cd 04_インタラクティブサイトマップ/11_src/
- (初回のみ) npm install でモジュールインストール
npm install
- サイトマップ作成コマンドを実行
node create-sitemap.js --i {Excelファイルパス} --o {サイトマップ出力フォルダ}
# 例)
# node create-sitemap.js --i .\samples\画面設計_sample_ECサイト.xlsx --o out/ECサイト
解説的なもの
納品物として使えるように、サーバーなしで動作するhtml ファイル形式で出力としました。
変換ツール(create-sitemap.js)で、Excel のページ情報を json に変換し、その json を読み込んで、html 上でサイトマップを描くという薄い仕組みにしました。
ページの描画は、flexbox + div タグで、線分を結ぶところは svg として、改造しやすいようにできるだけ簡単な仕組みにしておきました。
images/ フォルダにパスに対応する png ファイルを置くと情報部にサムネが表示されるようにしてあります。（ここは手動）
変換ツールを修正すれば、案件で利用されている Excel を読み込むこともできるかもしれません。
templates/ フォルダ内の、html, css, js を修正すれば、よりよい見た目にすることもできるかもしれません。
おわりに
業務上Excelでサイトマップを作成することが多いのですが、なんとか楽ができないかなぁと作ってみました。
ページ一覧の作成は必須かと思うので、ページ一覧は作成してサイトマップが自動生成できれば、似て非なる仕様書を作成して二重メンテしなくてよくなるのではと考えました。
Draw.io Integration だと図の描画自体はもう少し簡単になるのですが、相手がVS Code を使っていないと図でしか渡せないのが悩ましいところです。
UI Flow も利用はしていたのですが、『思った通り』のサイトマップにするのが難しくて使わなくなってしまってました。
その他よりよいものがありましたら情報を頂けますと幸いです。
(2024/01/20 追記)
figma やサイトへのリンクやエビデンスビュワー機能を追加したところプロジェクトの初期から最後まで参照される仕様書として使えるようになりました。