Kamimai(紙舞)

markdown-pdfを自動実行し、pdfのプレビューを表示するボイラープレート

経緯

Markdownファイルを修正する度にmarkdown-pdfコマンドを実行するのが面倒なので、自動化できないかと考えました。

そこで、

• Markdownファイルを追加・修正した際にmarkdown-pdfコマンドを自動で実行
• 生成されたpdfファイルを表示確認
  • pdfファイルを直接開くと、markdown-pdfコマンドがコケるので「pdf埋め込みページを表示」という形で現象を回避

させることにしました。

Kamimaiの由来

Kamimai(紙舞)とは、昭和初期の民俗学者・藤沢衛彦の著書『妖怪画談全集 日本篇 上』に記述が見られる妖怪です。その特徴は、

• 神無月(10月)に現れる
• 紙がひとりでに1枚ずつ舞い飛ぶ

というものです。

紙がひとりでに舞うように、ドキュメントを自動的に生成するということでこの妖怪の名前を使用しました。

使い方

使用手順

1. git clone <REPOSITORY_TEMPLATE_URL.git>でリポジトリのクローンを作成
2. リポジトリ名でディレクトリが作成されるので、ディレクトリ名をプロジェクト名に変更
3. git cloneするとリモートリポジトリがテンプレート元のパスのままなので、変更する
   1. git remote rm origin <REPOSITORY_TEMPLATE_URL.git>で現在のリモートリポジトリを削除
   2. git remote add origin <REPOSITORY_PROJECT_URL.git>でプロジェクトのリモートリポジトリを追加
4. npm i -D(npm install --save-devのショートカット)で必要なプラグインを揃える
5. npm startで初期設定を行うと、gulpも実行されます。browser-syncにより、既定のブラウザでページを表示します
   • 生成されたディレクトリ・ファイルはnpm run budayuで削除できます

機能

1. markdown-pdfにより、下記config.ymlのparam.srcに記述されたパスにある全てのMarkdownファイルを同ファイルのparam.distにPDFとして出力します。
2. ejs, scss, jsをコンパイルしてdistディレクトリ以下にWebページを生成します。このWebページ内にPDFObjectでPDFを埋め込んで表示します。
3. MarkdownファイルやMarkdown用のscssファイルを修正すると、自動で再変換を行います。これにより、表示を確認しながらPDf資料を作成できます。
4. PDFが完成したら、gulpのdefaultタスクを終了し、gulp malletとして最終結果をresultsディレクトリ以下に生成します。

機能2

チェックリスト的なもの

src/md/scss/style.scssでem {float: right; }としているので、□を*□*というように囲ってあげると、チェックリストとして使用できます(munida.mdを参照)。

設定

• yamlファイル
  • config.yml
    • commons:
      • sitename: サイト名。タイトルタグやヘッダのブランドなどに使われます
      • description: 説明。タイトルタグの中で使います
      • year: 年数。フッタのコピーライトで使います
      • author: 作者名。フッタのコピーライトで使います
    • param:
      • src: 変換元のMarkdownファイルがあるパス
        • プロジェクトのルートディレクトリからの相対パスで記述
      • dist: 変換後のPDFファイルを出力するパス
        • プロジェクトのルートディレクトリからの相対パスで記述。
        • 初期状態では存在しないパスの場合、予めnpm scriptsなどで生成しておくこと

リリースノート

• 2020/9/13 ver0.14.2
  • npmパッケージをアップデート
  • gulp-notifyのnotify追加
  • gulp-watchを廃止してgulp.watchに切り替え
• 2019/10/29 ver0.14.1
  • npmパッケージをアップデート
• 2019/10/29 ver0.14.0
  • Gulpタスクを4.x系の書き方に修正
• 2019/7/8 ver0.13.1
  • Markdownに適用するScssを修正
• 2019/6/21 ver0.13.0
  • npmパッケージをアップデート
  • ファイルコピーのnpm scriptsをcopyfilesからcpxに変更
  • readm.emd修正
• 2019/2/8 ver0.12.0
  • npm scriptsを整理
  • gulpタスクを分割・整理
    • gulpタスクの記述をより新しい構文に変更
• 2018/12/12 ver0.11.1
  • gulpのバージョン指定方法を変更
• 2018/9/5 ver0.11.0
  • 諸々の設定パラメータの記述を、jsonファイルsrc/data/variables.jsonからyamlファイルsrc/config/config.ymlに変更。汎用データではなく、設定ファイルだけになったので格納ディレクトリ名も変更。
• 2018/9/5 ver0.10.0
  • mdファイルをsrc/data/pdfdata.jsonに列挙せずに、自動的にmdファイルを取得して処理するようにgulpfie.jsを修正
• 2018/8/20 ver0.9.5
  • gulpfie.js修正
    1. gulp mallet時のパスの誤り修正
    2. mdに使用している画像が変更された場合も自動リロードが発火するように修正
• 2018/8/15 ver0.9.4
  • scssを調整
• 2018/8/15 ver0.9.3
  • Markdown用のスタイルシートをcssからscssに変更
    • scssからcssを生成した後にMarkdownをPDF化するので、きちんとスタイルは反映されます
  • Yaku Han JPをインポートするように改修
• 2018/8/15 ver0.9.2
  • gulpのバージョンを4にアップデート
    • gulpfile.jsをいろいろ修正
  • チェックリスト用のcssがあることを追記。併せてサンプルmd内を整理
• 2018/8/15 ver0.9.1
  • 最終出力
    • コマンドをgulp malletに変更
    • gulpfile.jsのパスが間違えていたので修正
  • src/md/css/style.cssを書き換えたら自動リロードが走るようにgulpfile.jsを修正
  • サンプルmd内を少し整理
• 2018/8/1 ver0.9.0
  • 画像出力に対応(プロジェクトのルートディレクトリからの相対パスを書けば良い)
  • 諸々整理
• 2018/8/1 ver0.7.0
  • npm run budayuで生成結果を削除するコマンドを実装
• 2018/8/1 ver0.6.0
  • inouタスクも完成
• 2018/8/1 ver0.5.0
  • defaultタスクは完成
  • cssを読み込むようにオプションを追加
  • HTMLタグもパー啜るようにオプションを追加
• 2018/7/31 ver0.0.1
  • まだ途中