2
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

仕様"書"はやめて、VuePressで仕様サイトを作ろう

Last updated at Posted at 2020-09-06
  1. 2021/01/09 追記
    1. ドキュメントサイトにREST APIのサンプルを追加
      1. https://flatring.github.io/document-site-using-vuepress/internal/api/users.html
      2. 参考元: GitHub Docs - https://docs.github.com/ja/free-pro-team@latest/rest/reference/users

先に結論

  1. GitHub ActionsでpagesにdeployしたVuePress
    1. https://flatring.github.io/document-site-using-vuepress/
  2. GitHub
    1. https://github.com/flatring/document-site-using-vuepress/
  3. スクリーンショット
    screenshot_home.png

注意: 実際のプロジェクトでは公開してはダメなはずなので、actions(github workflow)は使わないように。

VuePressを使っていなかった時の難点

Excelの場合

  1. セルを方眼紙状態にして仕様変更するたびに整形してゲンナリ
    1. 段落番号も入力していると、挿入行以降を全部編集するハメに
  2. バージョン管理やルールが徹底していないと、どれが最新かあやふやに
    1. 複数人が同時に編集してしまうとmergeが大変。
  3. 印刷レイアウトまで考えると見切れるなんてことがよくある。
  4. こんな感じで"仕様"とは違うことで労力がかかってしまう。

google spreadsheetの場合

  1. 複数人で編集できるのはいいけど、承認プロセスが曖昧になって決定なのか推敲なのかがわかりづらい。

補足

誤解のないように書いておくとExcelは素晴らしいツールだと思っています。
ピボットテーブルによる解析やスクリーンショットを交えたbug報告とか
ただ、「"仕様書"としては他の方法がいいでしょ?」という提案です。

本題

  1. ということでVuePress。
  2. 他にも静的サイト作成するものはありますが、使いやすさや導入のしやすさという点でVuePressを選びました。
  3. VuePressが何かは他に素晴らしい記事があるのでココでは触れません。
  4. VuePressを仕様サイトとして使うという点だけ絞って書きます。

メリット

  1. markdownで書けるものならなんでも書き残せる。
  2. 構成図のようにイメージなら 「draw.io
    1. ただし、普通に扱うとsvg形式なので差分を見るのは難しいかも
      1. これはどのイメージ編集も避けられないと思いますが。
  3. UMLなら「PlantUML」で書ける
    1. 基本設計としてのユースケース、状態を把握するためのシーケンス図など慣れるとドローツールで書くより楽だったりします。
  4. gitで管理できる = 差分で変更箇所が見やすい。
    1. ソースと同じリポジトリで管理できる。
    2. GitHub等のDevOpsを使えばpull requestでレビューできる。
    3. ソースと乖離があるかなどチェックリスト化しておくとチェック漏れも防げる♪
  5. ここまでのことが Visual Studio Code 1つでできる♪
  6. markdownなのでGitHubやGitLabでも見れる。

デメリット

  1. どんなものでもやっぱり銀の弾丸はない...
  2. GitHubやGitLabのSaaSでpagesを使うと一般に公開されてしまうので使えない。
    1. 対策としては
      1. オンプレ環境にdeployする
      2. 自分のPC(ローカル)でdeployする
      3. など
    2. 自分のPCでdeployする場合、branchによって表示結果が違うので、運用上の注意が必要。
  3. 既にswaggerなど別のサイトを使っていたりするといっしょにするのが難しい。
    1. この場合はVuePressの仕様サイトをポータルにして目次にしてしまうのがよろしいかと。
  4. 仕様の納品をPDF等で約束されていた時
    1. ページ(A4とか)の概念が入ってくるので改ページ箇所とか考えると辛い。
    2. やったことはないですが、Windowsならヘルプファイルにするとか。
    3. ここは最初から「HTMLで納品します」と言えたら一番の解決策かも。

まとめ

すでにshpinxとか使っていれば差し替えるほどではないと思っています。
けど、「今までExcelを使っていた」とか「Redmineのチケットにしか仕様が残ってないからまとめたい」なんて場合にはおすすめな方法です。

今後

プロジェクトによって仕様として残したいものは違うことケースが多々あると思いますが、
ほとんどプロジェクトで「これは必要」みたいなことをテンプレとしてサンプルサイトに追加していきたいと思っています。

  1. GitHub
    1. https://github.com/flatring/document-site-using-vuepress/
2
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?