InDesign向けのXML書き出し機能を追加
しばらく作っていたMarkdownプレビューツールも、InDesign向けのXML書き出しを追加したので、ひとまず完成です。
［File］→［export InDesignXML］を選択すると、Markdownファイルと同じフォルダ内にXMLファイルが書き出されます。
昔作ったGrunt向けのXML変換タスクに比べると、次のような点でパワーアップしました。
- p要素やh1〜h6要素は親要素のクラスに合わせてタグ名を自動変更する（本文のp要素とコラム内のp要素を区別できる）
- ちゃんとDOMを操作してXML化しているので、XMLエラーが起きない（前は検索置換で強引にHTMLをXMLにしていたので……）
- 画像の倍率やトリミング幅も属性として持ち込める（ただしそれを反映するInDesign側のスクリプトを新規作成する必要あり）
このXMLファイルは何に使うのかというと、InDesignの「XMLを読み込み」機能で読み込んで、 XMLタグを「タグをスタイルにマップ」機能を使ってInDesignのスタイルに割り当ててやります。
レイアウト情報は無理ですが、見出しや太字などのスタイルを自動設定できるわけですね。
すでに実案件でちょっとずつ使い始めているのですが、マニュアル作りとかInDesign向けのスクリプト作成とか色々やらないといけません。
cheerioが凄かった
今回のMarkdownプレビューの中の話なのですが、HTMLをXMLにうまく変換するためのいいものがないかと探した結果、 cheerioという、うってつけなパッケージが見つかりました。
これはDOM操作のAPIを持たないNode.js向けにDOM操作APIを提供し、さらにjQuery互換メソッドで操作できてしまうという便利なものです。 HTMLだけでなくXMLの操作もできます。
個人的には「Node.jsは標準だとDOM操作できない」というあたりで妙に感心してしまいました。 そうかサーバサイドだからウィンドウもないしDOMもないのか……と。
続きを読むインラインSVGを利用してInDesignと同じように画像を配置する の続き
前回付けたSVG機能が実際に使ってみると全然ダメで、全面的に作り直しました。
Markdownの画像ファイル名の後に「?svgimg=」の形で倍率やトリム幅を指定すると、自動的にSVGに変換する仕様にしました。
 
?svgimg=の後に倍率、トリム幅、トリム高さ、シフトX、シフトYの順にカンマ区切りの数値を指定することで、拡大縮小とトリミングを行います。 倍率以外の数値は省略可能です。
<svg width="65.786mm" height="58.97mm" viewBox="0 0 65.786 58.97"> <image width="234.95" height="210.608" xlink:href="img/s4-fig1.png" transform="translate(0,0) scale(0.28)"> </svg> <svg width="67.169mm" height="40mm" viewBox="0 0 67.169 40"> <image width="239.889" height="192.969" xlink:href="img/s4-fig3.png" transform="translate(0,0) scale(0.28)"> </svg>
それと前回translateとscaleの順番を間違えていることに気が付きました。拡大縮小してから移動が正しいようです。
置換処理は使い回しできたので、いくらかはラッキーでした。
Markdownをちょっといじるだけで直ちに画像サイズが変更できるので、調整がだいぶ楽になりました。複数の画像にまとめて設定するような機能はありませんが、必要ならテキストエディタの機能で「.png」のあとにまとめて追加してやればいいはずです。
インラインSVGを利用してInDesignと同じように画像を配置する
Webで画像を配置する場合、ピクセル数そのままか、全部サイズを揃えるかのどっちかが多い気がします。 ただ、IT書の組みで同じように配置してしまうと、画像ごとにショットのボタンや文字サイズがマチマチになってしまい、紙の書籍のレイアウト参考になりません。
CSSのwidth: 100%で貼ったもの。サイズが違うダイアログボックスなので倍率がマチマチに。
InDesignでスクリーンショットを貼る場合は、「原寸の40%」という感じに倍率を固定して文字やボタンが同じサイズに見えるよう配置するのが普通なので（例外もありますが）、インラインSVGの力を借りてInDesign風に貼り付ける機能を加えてみました。
すべて同倍率で貼り付け
この機能を使うと、Markdown原稿の中にSVGタグが入ってちょっと取っつきにくい感じになります。 生のSVGでいいのかだいぶ迷ったのですが、まぁ必要なときに必要な人だけが使えばいいことにしました。
【20150520追記】
実際に使ってみるとMarkdownの中にSVGが混じるのは予想以上にキツく、常用は無理そうです（作った本人がこれほど厳しく感じるのでは、まず他の人が使うのは無理でしょう）。
それと倍率が一律に変更されるのも意外と融通が利かなくて困ったものです。
Markdownのまま、画像ごとにこれは40%、これは25%のように指定できるようにしたいです。SVGの使い方はイキとして、指定方法を考えないといけません……。
置換リストとCSSについて
Electron製Markdownツールを実案件で使い始めつつブラッシュアップを図っているのですが、 置換リストやCSSの書き方にそれなりに工夫が必要なことがわかってきました。
置換リスト（_postReplaceList.json）は、Markdownにはできない範囲指定——つまりレイアウト指定を行うために、
原稿に入れた特定の文字をHTMLタグに置き換える仕組みです。
たとえば、次のようにMarkdown原稿を書いて、
┏セクションヘッダー━━━━━━━━━━━━━━━━━━━━━━━━━━┓
## インラインとグリッドを理解する
本文や画像のパーツをバラバラのフレームにしていると、
後からの修正対応が大変になります。
┗━━━━━━━━━━━━━━━━━━━━━━━━━━セクションヘッダー┛
置換リストを次のように書くと、
{ "f": "┏セクションヘッダー━━━━━━━━━━━━━━━━━━━━━━━━━━┓", "r": "<div class=\"secheader\">" }, { "f": "┗━━━━━━━━━━━━━━━━━━━━━━━━━━セクションヘッダー┛", "r": "<\/div>" },
こういうHTMLになります。
<div class="secheader"> <h2 id="-">インラインとグリッドを理解する</h2> <p>本文や画像のパーツをバラバラのフレームにしていると、 後からの修正対応が大変になります。</p> </div>続きを読む
Electron製Markdownプレビュー＆コンバートツール制作中の続き
前回に引き続きツール制作を進め、何とか必要最低限の作業はできるようにしました。 後は実戦でテストしながら仕上げていくつもりです。
ざっくりとした使い方
- GitHubリポジトリ内のpackagesディレクトリの中から対応するバージョンのzipファイルをダウンロードします（Mac版はdarwin）。
- zipを解凍して、Winならmdpreview.exe、Macならmdpreview.appをダブルクリックして起動します。他のファイルも必須なので、実行ファイルの場所は移動せず、ショートカットなどを適宜作成してください。
- vivliostyle.jsをダウンロードして解凍し、中のviewerフォルダを、プレビューしたいMarkdownファイルと同じ場所に配置してください。
- template.htmlやpostReplaceList.json、_template.htmlで読み込むCSSファイルなどを配置します。配置構成についてはtestディレクトリを参考にしてください。
- [File] -> [Open]を選択してMarkdownファイルを開きます。
- 後はMarkdownファイルの内容を変更して上書き保存すれば自動的にプレビューが更新されます。
※（2016/5/9）パッケージングが失敗していて再アップしました。package.jsonにnode-staticをsaveし忘れていて、まとめてくれなかったようです。
続きを読むElectron製Markdownプレビュー＆コンバートツール制作中
ここ数年grunt-markdownを使った原稿整理をやっているわけですが、Grunt自体のハードルが高くて正直なところ社内ですらまったく広まってない、という事情があったりします。
そんなところへ、Electronというのを使えばインストーラー付きのWinMac兼用のツールが作れるらしい、これなら誰でも使えるじゃないか！と知って、挑戦してみているわけです。
ひとまずMarkdownファイルを開いてHTMLファイルに変換して書き出し、それを読み込んで表示する、元ファイルが更新されたら自動的にHTMLも更新するという、最低限必要なところまでできました。
Electronを使ったMarkdownビューワーというのはすでに結構存在していて、それと比べると見た目も機能もだいぶアレなのですが、そこはもうスッパリ諦めて、用が足せればいいとわりきってやっております……。
特徴は、今のところ「プレビューを表示するだけでなく、勝手にHTMLファイルを書き出す」の一点です。
最終目標がVivliostyleでの書籍形式のプレビューと、InDesign向けのXML書き出しなので、HTML出力は外せないのです。
続きを読む非力なAtom機でAtomでMarkdown向けチューニング
MBPをクリーンインストールしている間、せめてMarkdown原稿の整理だけでもできるようDynapadで環境を整えてみました。
普段はSublime Textとgrunt-markdownを組み合わせて使っているんですが、Win版のSublimeは日本語関係が弱い上に、gruntはAtom機だとすっごい重かったのでAtomエディタで環境整えることに。
基本のセッティングはこちらの記事に書いてあるとおりでいいのですが、Atom機は非力なので多少チューニングが必要でした。
Markdownプレビューを保存時のみに
markdown-preview-plusをインストールして、
設定画面でLive Updateをオフにします。
最後に標準のmarkdown-previewを無効にすれば、保存時だけMarkdownプレビューが更新されるようになります。
これでだいぶマシになります。
ちょっとした不具合？の調整
日本語に下線が表示されるので何だろうと思ったらスペルチェックなんですね。無効に。
それとMarkdownの編集中の画面はシンタックスの働きで簡易的に書式がつくのですが、「*」による太字（strong）がうまくいったりいかなかったりします。アスタリスクの前後にスペースを入れると必ずうまくいくのですが、それだと原稿にもスペースが入ってしまうのでDTPの邪魔になります。しかも標準のlanguage-gfmだと太字部分が赤くなるので原稿が読みにくい。なので無効にします。
代わりにlanguage-markdownというパッケージをインストールしておきます。これでも同じ不具合がありますが、赤字にはならないのであまり気になりません。
