• ITに強い編集プロダクション・リブロワークスのWebサイト

    パッケージ化によって導入しやすくなった新しいMDBP

    リブロワークスでは、2016年頃からプログラミング関連書籍を中心に、Markdownプレビューツールを中心として執筆・編集を行い、InDesignで仕上げるワークフローで書籍を制作してきました。初期段階から仕上がりイメージが確認できると関係各位の好評を経て、すでに数十冊の書籍を市場に送り出した実績があります。

    そのMarkdownプレビューツールが、テキストエディタAtomのパッケージ(プラグイン)として生まれ変わりました。インストールも実行も非常にシンプルになり、導入の敷居が大幅に下がりました。

    インストール方法は一般的なAtomパッケージと同じです。パッケージのインストール画面を表示して「MDBP」でパッケージ検索してインストールしてください。MDBP-markdown-book-previewが本体で、language-mdbpは支援用のシンタックスです。両方インストールすることをおすすめします。

    (2021年6月17日追記)最新版ではいろいろと仕様が変わっています。詳しくはパッケージのページを参照してください。

    https://atom.io/packages/mdbp-markdown-book-preview

    MDBP(Markdown Book Preview)の機能

    Atomには標準のMarkdownプレビュー機能もありますが、MDBPでは書籍編集を目的として次のような機能を盛り込んでいます。

    • _template.htmlを編集して任意のCSSを読み込めます。作業フォルダ(Markdownファイルが保存されているフォルダ)に_template.htmlを配置するので、プロジェクトごとにCSSの切り替えが可能です。
    • VivlioStyle Viewerを利用した書籍プレビューが可能です。書籍デザインに合わせてCSSを作り込めば、高精度で書籍イメージを再現しながら、Markdownファイルを編集できます。倍率は画像原寸に対するパーセンテージ、幅、高さ、シフト量はmm数です。
    • 中間ファイルとして作業フォルダ内にHTMLファイルを生成するので、HTML記事の作成ツールとしても使用できます。
    • Markdownファイルの上書き保存を検出してプレビューを更新するので、別のテキストエディタを利用していてもプレビューワーとして利用できます。
    • 標準のMarkdownには見出し、本文、表などしかないため、書籍の体裁を再現しきれません。とはいえ、Markdown内にHTMLタグを書き込むと、HTMLへの変換がうまくいかなくなる恐れがあります。そこでMDBPでは置換リストを利用して、@div:クラス名~@divendで囲んだ部分に、任意のクラス名を持つdiv要素を生成します。
    [
      {
        "f": "@div:([a-z|0-9|_ ]+)",
        "r": "<div class=\"$1\">"
      },
      {
        "f": "@divend",
        "r": "<\/div>"
      },
      {
        "f": "<hr>",
        "r": "<hr class=\"pagebreak\">"
      },
    • 置換リスト(_postReplaceList.json)は単純な正規表現置換のリストなので、見出しの行頭に記号を加えたり、連番を振ったり、表記ゆれを直したりといった応用的な置換処理も可能です。
    • 置換リスト、CSSの作成は取っつきにくい面があるので、サンプルのテンプレートファイルをダウンロードする機能を追加しました。
    • IT書に欠かせないスクリーンショットの拡大縮小、トリミングを行うためにMarkdownの画像配置指定を拡張しています。実際の画像を加工することなく調整できます。倍率は画像原寸に対するパーセンテージ、幅・高さ・シフト量はmm単位です。
    • InDesign向けのXMLファイルを書き出す機能があります。XMLタグと段落・文字スタイルをマッピングすれば、半自動組版ツールとしても活躍します。

    現在のところMDBPの機能は従来のスタンドアロン版MDプレビューと大きく変わりませんが、テキストエディタと一体化したおかげで、執筆・編集を補助する機能も追加可能になりました。執筆中に面倒になるスクリーンショット調整や作図機能の強化などを検討しています。

    書籍制作におけるMarkdownプレビューツールの活用については以下の記事もお読みください。

    Markdownプレビューツールを使った新しい編集・制作フローのご提案

    MDBPの使い方

    MDBPの機能は、Atomのエディタ画面を右クリックするか、[パッケージ]メニューから呼び出すことができます。どちらから呼び出しても使い方は同じです。

    Open HTML preview

    VivlioStyleを使用しないHTMLのみのプレビューを表示します。ページの区切りがわからない代わりに表示が高速なので、初期段階で大まかに原稿を執筆・編集したいときに役立ちます。

    Open VivlioStyle Preview

    VivlioStyleを使用して書籍風のプレビューを表示します。VivlioStyle Viewerが必要となるため、作業フォルダ内に見つからない場合はエラーメッセージを表示します。vivliostyle-js-xxxxx.zipをダウンロードして解凍し、その中のviewerフォルダを作業フォルダ内に配置してください。

    Print PDF

    Webブラウザの機能を利用してPDFを書き出すために、WebブラウザのウィンドウでVivlioStyleプレビューを表示します。推奨ブラウザはChromeです。仕上がりサイズに近い用紙サイズを選び、余白をゼロにしてPDFを書き出します。

    Export InDesign XML

    InDesign向けのXMLファイルを書き出します。詳細はMarkdownプレビューツールを使った新しい編集・制作フローのご提案 の使用ガイドにある「InDesign流し込みの手引き」を参照してください。

    Download Template

    MDBPはMarkdownファイルだけでは動作しません。初めて使う方のために、サンプル用の_template.html、_postReplaceList.json、css/booksample.cssの3つのファイルをインターネットからダウンロードする機能を用意しました(作業フォルダ内に同名のファイルがある場合は上書きを避けるためにダウンロードしません)。

    _postReplaceList.jsonとcss/booksample.cssを編集すれば、任意の紙面デザインに合わせることができます。

    booksample.cssには、ページサイズ、ページテンプレート(InDesignのマスターページに相当)、本文の行末揃え、強制改ページ指定といった最低限の要素のみを記述しています。ページテンプレートの指定以外は標準CSSと変わらないので、CSSの基本的な知識があれば自在に編集可能です(本テンプレートは単位指定をmmで想定しています)。

    A5テンプレートダウンロード機能を追加しました。

    制限事項

    MDBPは内部でWebサーバー(ポート8085)を起動しています。そのため、複数のプレビューを開くことができません。1ウィンドウ内では1つしか開かないように制限していますが、Atomのウィンドウを複数開いている場合は複数表示できてしまうため、エラーが発生します。エラーが発生した場合はMDBPのパネルをすべて閉じてから再度お試しください。それでもエラーが出る場合は、[Ctrl]+[Shift]+[F5]キーを押してAtomのリロードを実行してから試してください。

    MDBP向けLanguageパッケージ

    MDBP向けにシンタックスを公開しています。標準の「GitHub Markdown」シンタックスだと太字(アスタリスク2個)の前後に半角スペースを入れないと色分けが正しくならない点を変更し、日本語の原稿が書きやすいよう調整しました。その他に独自拡張の@div~
    @divendを強調表示するようにし、スニペットをいくつか追加しました。

    https://github.com/lwohtsu/language-mdbp

    その他の新機能

    原稿ファイルをフォルダ分けしたいときに使う「グループモード」、HTMLを加工する「postManipulate(後操作)機能」などを追加しています。詳細はGitHub上のReadMeでご確認ください。

    https://github.com/lwohtsu/atom-markdown-book-preview