Markdown原稿 ひとり旅～デスクトッププレビューを道連れに

こんにちは！
翔泳社で「HRzine」という人事向けWebメディアの編集長をしてます、市古（いちご）です。モーリさん主催の「文を紡ぎ編む人たちの Advent Calendar 2022」の1本として、5年ぶりに書かせていただいています。

5年前にも「Markdownで原稿」をテーマに誰得な記事（下記）を書いたのですが、今年はその続編ということで、やはり誰得なことを書かせていただきます（すみません、他に披露できるようなネタもテクもなく……）。

以下、お役に立たないことをご承知の上でお読みください。

この子の七つのお祝いに

外部ライターさんなどには、原稿をWord文書あるいはGoogleドキュメントで書いていただいています。翔泳社WebメディアのCMSへ登録する際には、これをHTMLドキュメントに変換してやる必要があるのですが、私は原稿をいったんMarkdown形式のプレーンテキストに変換し、編集した後にHTMLドキュメントに変換しています。

とはいえ、翔泳社の標準記法はMarkdownではありません。全角記号や半角文字タグなどを使う独自記法が使われています（標準記法だとCMS上でHTMLに変換される）。それなのに、記事を電子書籍などへ展開することを視野に入れるとMarkdownのほうがよくね？ と勝手に原稿をMarkdownにしたのが7年前のこと。以来、私ひとりで原稿をMarkdownで扱っています。

ただ、Markdownで原稿を扱い始めた当初、Markdownにした原稿を、翔泳社WebメディアのCMSが受け付ける仕様のHTMLに変換できるツールがないことが問題になりました。これを克服するために始めたのが、「Kramdown」というRubyのライブラリを使った変換ツールの開発です。その経緯やKramdownの特徴などは、先ほどの5年前に書いた記事をご覧ください。

当時2歳だった変換ツールも、今年7歳になりました。本稿では、この5年間で成長した姿を紹介（自慢）したいと思います。

デスクトップでプレビュー可能！

Kramdownを使った変換ツールの強みの1つは、Markdown原稿の中に（HTMLの）属性も記述できる点です。つまり、Markdown原稿でありながら、style属性でレイアウトを細かく指定できます。すると、原稿の編集 ⇔ 表示の確認を何度も繰り返したくなります。

しかし、編集した記事の表示イメージを確認するには、原稿をCMSに登録しなければなりません。もしこれが、CMSにいちいちアップすることなく、デスクトップ上で表示イメージを確認できるようになれば、生産性はぐっと高まるでしょう。

ということでつくりました。変換ツールをローカルWebアプリケーション化し、Markdown原稿のファイルパスをURLとして指定してやると、HTMLにコンパイルしてブラウザに返す仕組みです。

例えば、「genko.txt」ファイルに次のように書いてプレビューすると、

<%-- page -->

次のように表示されます。

デスクトッププレビュー（ページの書き起こし記号を書いただけ）

さらに、コーナー名やタイトル、リード、本文見出し、本文と図版を書き込んだ次の原稿をプレビュー（ページをリロード）すると、

ペット自慢のコーナー

あるイヌの記

　11月になり、足下のホットカーペットにスイッチを入れるようになったら、わが家のイヌ「まーご」がこれはよいと寝るようになりました。

ogp.png

■記事ID■：1234

<%-- page -->

## まあ、見てやってください

　本人（本犬？）にはないしょで、上から寝姿を[激写]{:%color:red;}してやりました。

<<Fig_N>>
src: margo.jpg
cap: まーごの寝姿（上から）

<%-- page -->

## それからそれから？

次のように表示されます。

コーナー名やタイトル、本文などを書いてプレビューした結果

テキストエディタに、「http://localhost:ポート番号/原稿ファイルへのフルパス」をブラウザに渡して開くコマンドをキー登録しておけば、キー操作一発でプレビューできます。

プレビューでは同時に、CMSへ登録するためのHTMLドキュメントファイルも生成します。プレビューでOKになったら、そのファイルの内容であるHTMLをコピーし、CMSへペーストしてやります。

本文の記述性も高めてるぜ！

ちなみに、先ほどの原稿テキストでは、Markdownの仕様で見かけない ＆ Kramdownの仕様でも見かけない記号（<%-- page -->や<<Fig_N>>、%colorなど）を使っています。これらは改ページ指定やさまざまな図版の表示形式（lightboxとか）の指定、style属性の簡素化を実現するために拡張したものです。ほかには、インタビュイーのプロフィールを簡単に書けてきれいに表示するための拡張や、コラム、定義表（2列の表で1列目が項目名、2列目が内容）などもあります。

一方で、どうにもならんのは表（table）ですね。Markdownの仕様でも書きやすいとはいえないですし、「セルの中に箇条書き」といったちょっと複雑なレイアウトには対応できません。「セルの中に箇条書き」の場合、HTMLを直書き（<table>～</table>）しつつ、セルの中でKramdown記述（<td markdown="1">* 箇条書き … </td>）するといった合わせ技を使っています。

書くはよいよい、感想がこわい

今回もまったく誰得な記事で、本当にすみません。技術評論社のWeb編集部さん（gihyo.jp）が今年の8月に、編集部内で使っているMarkdown記法について公開し話題になりましたが、「自分もやってるぞう。7年もやってるぞう」と言ってみたかったところもあります（恥）。

なお、拡張Markdownの原稿をHTMLドキュメントに変換するツールは、GitHubでパブリックにしています（デスクトッププレビューのWebアプリは自分が書いたのではないコードを含むので非公開）。一部書けていないのですが、拡張した仕様はreadmeに書いてありますので、興味を持った方はご覧ください。それでは～。