• コーディング ファクトリーHOME
  • Coding Methodology
  • 第123回 VuePressで、ドキュメントをお手軽にWebサイト化してみよう!

コーディングメソドロジー

第123回 VuePressで、ドキュメントをお手軽にWebサイト化してみよう!

社内用のドキュメントやガイドライン指示書などに、GoogleドキュメントやWordが利用されているケースはよくありますが、資料を簡単に共有したり、更新性を高めるために「このドキュメントをそのままWebサイト化したい!」と思った事はないでしょうか。今回は、Googleドキュメント上で管理されていたドキュメントをVuePressを使用してWebサイト化する手順を紹介します。

VuePressとは?

Vue.jsをベースとした静的サイトジェネレーターで、markdown記法のドキュメント(.mdファイル)から、HTMLファイルを生成する事ができます。また、ドキュメント内にVueのコンポーネントを呼び出す事も可能です。VuePressの初期設定(インストール方法など)は、公式サイトをご参照下さい。

https://vuepress.vuejs.org/guide/getting-started.html#global-installation

以下、公式サイトのGlobal Installationを参考に作業フォルダを作成した後の手順を解説します。

1. 変換元のmarkdownファイルを用意する

次のアドオンを使用して、Googleドキュメントをmarkdownに変換します。

Docs to Markdown :
https://gsuite.google.com/marketplace/app/docs_to_markdown/700168918607

Googleドキュメント上部メニューから「アドオン → docs to markdown → Convert」【図1】 を押下すると、画面右側に変換用メニューが出てきます【図2】。
今回はmarkdownを選択して保存しますが、直接HTMLに変換する事もできます。
Googleドキュメント上の見出しレベルやリストが、そのままmarkdownやHTMLのh1~h6の見出しやulなどのリストになります。

図1:Googleドキュメント内アドオンメニュー

図2:変換用メニュー

2. VuePressの作成とmarkdownファイルの格納

作業フォルダ
├ /basicPolicy(ディレクトリ名)
│└ /index.md(markdownファイル)
├ /htmlRule(ディレクトリ名)
│└ /index.md(markdownファイル)
├ /cssRule(ディレクトリ名)
│└ /index.md(markdownファイル)
:
:(省略)
:
└ /index.md
 (トップページに表示するmarkdownファイル)

図3:ディレクトリ構成

ターミナルでvuepress devと入力し、実行すると開発サーバーがたちあがります。 今回は、【図3】のようなディレクトリ構成で、markdownファイルを格納します。
これはWebサイトで実際に表示するディレクトリ構成になります。

3. テーマ(スタイル)を整える

作業フォルダ
├ /.vuepress(vuepress)
│└ /config.js(設定ファイル)-①
├ /basicPolicy(ディレクトリ名)
│└ /index.md(markdownファイル)
├ /htmlRule(ディレクトリ名)
│└ /index.md(markdownファイル)
:
:(省略)
:
└ /index.md
 (トップページに表示するmarkdownファイル)

図4:config.jsの追加

デフォルトのテーマを変更する場合は、【図4】のように.vuepressフォルダを作成後に、【図4-①】のようにconfig.jsを作成して、以下のページを参考にテーマのカスタマイズを行います。

【参考ページ】
https://vuepress.vuejs.org/config/
https://vuepress.vuejs.org/default-theme-config/

4. ビルド(htmlを生成)する

作業フォルダ
├ /.vuepress(vuepress)
│├ /style.styl(cssファイル)
│├ /config.js(設定ファイル)
│└ /dist(ビルド後のディレクトリ)-①
│ ├ /assets
│ ├ /basicPolicy
│ │└ /index.html
│ :
│ :(省略)
│ :
│ ├ 404.html
│ └ index.html
│
├ /basicPolicy(ディレクトリ名)
│└ /index.md(markdownファイル)
:
:(省略)
:
└ /index.md
 (トップページに表示するmarkdownファイル)

図5:ビルド後のディレクトリ構成

ターミナルでvuepress buildと入力し、実行します。
.vuepressフォルダにdistフォルダが生成され、markdownファイルを配置した同じディレクトリ階層に、HTMLファイルが生成されます【図5-①】。
同時にassetsフォルダと、404.htmlファイルが生成されます。

5. 公開する

distフォルダの中身を公開したいサイトのサーバーにアップし、確認します。
Googleドキュメント21ページ分の弊社ガイドラインの場合、テーマ変更、スタイル調整を含めて、2~3時間程度でWebサイト化する事ができました。
また、VuePressなら少しのカスタマイズで色々なサイトを制作する事も可能です。もし、ドキュメントをWebサイト化する機会があれば、導入を検討してみてはいかかでしょうか。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム