原稿とMarkdownと私

こちら、「編集とライティングにまつわるアレコレ Advent Calendar 2017」の12月10日分の記事です。うわー、もう16時回ってる……遅刻だ〜

Word嫌いがよくないとは思いますが

　ということで、こんにちは。翔泳社で「EnterpriseZine」の編集と、「IT人材ラボ」のラボ長（＝編集長）をしております、市古（いちご）と申します。珍名さんなので、読み仮名を振りました。

　EnterpriseZineもIT人材ラボも、ともにWebメディアです。HTMLドキュメントとして記事を完成させてアップするわけですが、もちろん、手作業でのタグ打ちはできればしたくありません。間違いが混入しがちですしね。

　原稿はWord文書で届くことが多いので、Wordのスタイルを標準化し、マクロでHTML出力するのも有力な手段です。ただ、正規表現での検索／置換機能がないので、「インタビュー記事の話者名はぜんぶ太字！」とかやりづらい。また、過去の原稿を串刺し検索することも無理です（何かしらの手段はあるでしょうけど標準では知りません）。変更履歴やコメント、校正機能は便利ですけどね。

　なので、Word文書で原稿が届いても、基本的にはプレーンテキストに出し、テキストエディタで編集・校正作業を進めています。

　そこで、Markdownです。メリットは2つ。1つは、プレーンテキストベースのフォーマットとして、ITエンジニアを中心に広く知られていること。原稿をプレーンテキストで書きたいという方にフォーマットを示すのが簡単です。

　そしてもう1つが、HTMLとの相性が良いことです。MarkdownドキュメントをHTMLドキュメントに変換してくれるツール／ライブラリもたくさんあります。

　しかしっ！ Markdownは、あくまでプレーンテキストでメモを取ったりするために定義されたもの。表現力はまったく貧弱です。「色を付ける」とか「この段落は全体的に1字下げ」とか「この写真は幅600pxで表示」とか、指定する方法がありません。Markdown→HTML変換ツール／ライブラリの表現力も、必然的にMarkdownの表現力に制限されます。HTMLで記事を完成させる必要のある者としては、まったく困ってしまうわけです。

そこでkramdownです

　同じことを考える人はいるもので、見つけたのが「kramdown」というRubyのライブラリでした。例えば、「この段落は全体的に1字下げ」は、Markdown原稿の中で、次のように指定できます。

同じことを考える人は世界を見渡せばいるもので、見つけたのが「kramdown」というRubyのライブラリでした。
{:style="padding-left: 1em;}

　「この写真は幅600pxで表示」は次のように。#photo01はid属性、.portfolioはclass属性の指定です。

{:#photo01 .portfolio style="width: 600px;"}

　これらをkramdownでHTMLに変換すると、それぞれ次のように出力されます。

<p style="padding-left: 1em;>同じことを考える人は世界を見渡せばいるもので、見つけたのが「kramdown」というRubyのライブラリでした。</p>

<p><img src="/images/photo.jpg" alt="写真のalt属性" id="photo01" class="portfolio" style="width: 600px;" /></p>

　当たり前ですが、段落を表す<p>タグやイメージを表す<img>タグなどは、わざわざ指定しなくてもkramdownが入れてくれます。

　なお、Kramdownを利用している著名（かな？）なプロダクトには、静的サイトジェネレータ「Jekyll」があります。JekyllはGitHub Pagesで利用されているといいますから、kramdownは機能だけでなく、実績もあるライブラリなのです。

まだ貧弱ゥ

　Markdownにさまざまな指定を付記できるツール／ライブラリとして、おそらく最もリッチな部類に入るkramdownですが、出力されるHTMLは、EnterpriseZineやIT人材ラボ（ほか翔泳社のWebメディア）で使用されているHTMLと、一部仕様が異なります。例えば、先ほど見た画像表示です。EnterpriseZineやIT人材ラボでは、次のようなHTML要素を使っています。

<figure>
  <img src="/static/images/article/1234/photo.jpg" alt="写真のキャプション">
  <figcaption>写真のキャプション</figcaption>
</figure>

　これはkramdownを拡張する形で対応するしかありません。そうして2年の月日が流れ去り、今朝、GitHubリポジトリにアップしたライブラリ「darkmouun」（ダークムーンと読みます）ができあがりました。正確には、GitHubにアップしたもう1つのプロジェクト「sehtml」が2年かけて作り上げた成果物です（こんなのに2年？ ^^;）。sehtmlがMarkdown原稿から翔泳社のWebメディア向けHTMLを出力するプログラムで、darkmouun自体はkdamdownによる変換処理に、変換前のプリプロセス、変換後のポストプロセスを実行する枠組みを加えたものにすぎません。今後は、もう1つのプリプロセスとして、テンプレートエンジン「Mustache」による変換処理を加える予定です。

■テンプレート
<figure>
  <img src="{{img}}" alt="{{caption}}>
  <figcaption>{{caption}}</figcaption>
</figure>

■データ
img: /static/images/article/1234/photo.jpg
caption: 写真のキャプション

　上記2つをMustacheで処理すると、先のfigure要素のように出力されます。kramdownを拡張するより、Mustacheを使ったほうが変換ルールの実装が簡単です。

でも結局Wordか?!

　すみません <(_ _)>。

　誰得な記事になってしまいましたが、「こんなの作ったんだよ」とちょっと言ってみたかったので、モーリさんがくださったこの機会を利用させていただきました。ご容赦ください……。

　Markdownで原稿を管理すると、紙・電子の各書籍にも展開しやすいですし（一昨日にkmutoさんが「md2review」を紹介されていましたね）、プレーンテキストですから、Gitなどのソフトウェア開発ツールを利用したドキュメント制作も導入しやすいです。

　一方で、プレーンテキストゆえの課題もあります。

　　・見やすい変更履歴
　　・見やすいコメント付け

　変更履歴を追うだけならGitでもできますが、編集作業上、見やすくはありません。プレーンテキスト同士の差分比較なら、文字単位で違いを示してくれる「difff」（デュフフ）というサービスがとてもお勧めです。BacklogなどのGitリポジトリ画面に組み込んでほしい！ 見やすいコメントはいかんともしがたく。この辺りはWordなどワープロソフトに軍配ですね。

　そのほか、記号を使った文書のマークアップは、一般には受け入れがたいようで、アレルギー反応を示されるケースが少なくありません。Word文書のようなWYSIWYGが基本となるのは、仕方ないことかも……。

　ただ、Word文書には変換したHTMLに対し個別にスタイルを指定する手段がないので、やっぱりkramdownの勝利です！

　というわけで、Wordに負けそうになったけど最後に逆転した現場からお伝えしました。マイクを次のRyoko Morishimaさんへお渡しします！