静的サイトジェネレータ (2024/07/10)

  • ドキュメント作成やランディングページの作成に、静的サイトジェネレータを使用することで、コスト軽減と品質向上が期待できます。
    • 静的サイトジェネレータを使用する事で、下記のメリット・デメリットがあると考えます。

【メリット】

  • git (Github/GilLabなども含む)でドキュメントを管理した場合、特殊な事をしなくても標準機能で変更差分を確認できる。
    • エクセルファイルでも確認できなくはないですが、Markdownほど手軽ではありません。
    • ファイル容量も「Markdown + SVG (+Yaml)」という構成により、エクセルファイルに比べてかなり軽量です。
  • 図形描画に「draw.io」 を利用することにより、高品質なベクター画像をSVG形式で手軽に作成・編集できます。
    • SVG ファイルの図形に説明文などを挿入している場合、それらの文字列もブラウザからの検索対象になります。
  • Swagger (OpenAPI)などのAPIドキュメントツールと連携することにより、 APIスタブ機能なども容易に作成可能。
    • Swagger (OpenAPI)はYaml形式を採用していますが、 Markdownと同じぐらい手軽に編集が可能です。
  • ドキュメントはHTMLとして出力されるため、 更新が発生した場合もで随時Webサーバーにアップロードして確認が可能。
    • 最終的にはPDFとして納品する必要がある場合も、ページ単位で手軽にPDF出力できて便利です。

【デメリット】

  • 業界全体で「仕様書はエクセルやパワポで作成する」「WEBサイトは動的なCMSで作成する」という考え方がいまだに根強く、会社のルールや現場の判断に対して折り合いをつける必要がある。
    • 今の現場はわりと先進的な部署が多く、会社全体として静的サイトジェネレータを積極的に活用しているため、チーム内でも批判的な意見は少なくなっています。 (そうなるまでにはそれなりの時間と労力が必要でしたが、 ドキュメント作成の品質やコストを改善できたと思っています。)
  • 自分が提案したやり方である以上、チームメンバーのリテラシー向上のために、作成時のフォローや導入資料の作成は必須になります。
    • Markdown でドキュメントを作成したことのある若手も増えてきましたので、今後はそれほど大変ではないかなと思っています。

PowerCMS (from MovableType)

概要

  • 「MovableType」は20年以上の歴史と実績を持つ静的サイトジェネレータで、Perlで作られているためセキュリティ的に信頼性が高く、今尚国内外の大学や官公庁のサイト構築で絶大な支持を受けています。
    • 「PowerCMS」は「MovableType」で機能的に不足している部分を補う形で誕生したパッケージですが、現在は一部機能が「MovableType」のコアパッケージにも取り込まれています。
    • 国内C向けのCMSとしては圧倒的なシェアを持つ「WordPress」や、最近台頭してきた「ConcreteCMS」など数多くのCMSパッケージが存在しますが、PHPで作られている時点でセキュリティ的な懸念が生じてしまうため、大学や官公庁などセキュリティを重視するサイトでは「PowerCMS」に分があります。

導入手順

  • かなり高額なパッケージを購入する必要があるため割愛します。

表示サンプル


VitePress (from Vue.js)

概要

  • 今フロントエンド開発のトレンドでデファクトスタンダードなビルドツールになりつつある「Vite(ヴィート)」を利用したドキュメント作成ツールになります。
    • この3年で現場のドキュメント作成も「Sphinx」⇒「MkDocs」⇒「VitePress」という変遷をたどっています。
    • これまでの静的サイトジェネレータのメリット「Markdownで迅速にドキュメント作成が可能」を継承しつつ、Vue.jsで「高度なSPAアプリケーション開発もできる」という、いいとこどりで無限の可能性を感じる静的サイトジェネレータです。

導入手順

表示サンプル


ReadTheDocs (from MkDocs/Sphinx)

概要

  • 「ReadTheDocs」はジェネレータ本体ではなくテーマという位置づけですが、「MkDocs/Sphinx」両対応という事もあってB2Bドキュメントでよく使われています。
    • 「MkDocs」は「Markdown」形式の静的サイトジェネレータです。
    • 「Sphinx」は「reStructuredText」形式の静的サイトジェネレータです。

導入手順

表示サンプル


Material (from MkDocs)

概要

  • 「Material」も「ReadTheDocs」同様テーマという位置づけですが、「ReadTheDocs」がどちらかというとドキュメント作成を意識しているのに対し「Material」は静的サイト作成を意識している印象です。
    • デザイン的に洗練されていて拡張性もわりと高いので、個人的には「ReadTheDocs」より「Material」の方が好きです。

導入手順

表示サンプル


その他

  • 最近は数多くのジェネレータが台頭してきていて、「Jekyll」「Hugo」「Next.js」などがわりと人気みたいです。