ラック
Home > ブログ > 記事 > 2018年9月 > mdファイルを監視してmarkdown-pdfを自動実行し、Web上でプレビューするツール「Kamimai」

mdファイルを監視してmarkdown-pdfを自動実行し、Web上でプレビューするツール「Kamimai」

カテゴリ: 開発環境,Web自作

私情で恐縮ですが、ここ最近何かと資料を作成する機会が多いです。資料の多くは誰かに見せ、説明するためであって、その相手が紙もしくはそれに準じる形式で求めることも多いため、専らPDFを量産することになりました。

これもまた個人的な事情ですが、私はあまりMicrosoft Office製品に慣れていません。ドキュメントを作るならばMarkdownで良いですし、スライドも派手なアニメーションは不要だったのでreveal.jsで事足ります。何ともならないのは表計算くらいなので、そのときだけExcelを使います。

と、そんな感じなので「普段から開発に使っているエディタでMarkdown書いてそれをPDF化すれば良いじゃないか」というノリでmarkdown-pdfを使い続けています。

このブログにもmarkdown-pdf関連の記事として、

といったTipsなどの記事をアップしたり、つい先日は

などというトリッキーなこともしました。

しかし、markdown-pdfにはいくつか欠点があります。それは、

  • ライブプレビューができない
  • プレビューとしてAdobe Acrobat Reader DCなどでPDFを開くとファイルロックがかかってしまうため、PDFを開いた状態でmarkdown-pdfコマンドを実行できない(エラーになる)

といった点です。そこで、

  • mdファイルを監視して、更新された時点で自動的にmarkdown-pdfが実行される
  • PDFリーダで開くとファイルロックになってしまうので、Webページ上でPDFObjectを使用してプレビューする
  • Webページでプレビューするならば、ejsテンプレートを使って、普通のWebサイトと同様にgulpを使って諸々のタスクを実行する

ということができれば良いのではないかと考え、それを実現するためにこしらえました。

そうしてできたのが、Kamimaiになります。

gulpを使っているのでnode.jsがPCにインストールされていることが前提です。

  1. ソースコード一式をローカルにダウンロードし、解凍する
  2. 適当なディレクトリに解凍したソース一式を移動
  3. コマンドライン(コマンドプロンプト)で2.のディレクトリまで移動
  4. npm i -Dで必要なライブラリをインストール
    npm i -Dでインストールを実行
  5. npm run sanmotoで初期設定(ファイルの再配置など)を行う
    npm run sanmotoで初期設定
  6. gulpでタスクを実行
    gulp実行
  7. ブラウザで新しくタブが開いて、PDFをプレビューするWebページが表示される
    Webページ上のPDFプレビュー
  8. gulp実行後はmdファイル(src/md/内)を編集する度にWebページが自動的にリロードされ、PDFの編集内容も反映される

といった形で、ライブプレビューしながらmdファイルを編集、PDFファイルを逐一生成できます。

もし「これで最終形態だ!」と思ったら、gulp malletと実行することでライブプレビューのためのディレクトリdist/pdf/内ではなく、results/という最終結果用のディレクトリに改めてPDFを生成することができます。

逆に、dist/以下など、自動的に生成されたファイル一式を削除して、ソースだけのまっさらな状態に戻したい場合はnpm run budayuとすれば削除できます。

生成物一式を削除するnpm run budayu


以上のような使い方のツールになります。markdonからPDFを生成するので、紙がひとりでに舞う怪異の名前を拝借して「Kamimai」としました。

紙舞の元ネタは『稲生物怪録絵巻』の一場面とされます。そのため、Kamimaiを起動するための下準備のコマンドには怪異を起こした大元締めからsanmoto、逆に生成物を削除するには怪異を目の当たりにしても動じなかったbudayu、最終結果は怪異を起こした張本人の力を借りることができる小槌からmallet(小槌)です。

タグ: gulp,Markdown,Node.js

 



関連する記事一覧