簡単な内容(今北産業)
- 文章体裁にはMarkdown記述が使えて、画像などではタグを使うハイブリッド記述
- HTMLにBase64エンコードで画像も放り込んで1ファイル化
- ファイル自体はテキストエディタを使って書く(Markdownエディタを使わない)
はじめに
この記事は何らかのソフトのマニュアルやREADMEにPDFを使ってて、更新のたびにPDFを作り直す羽目になってうんざりしている人向けの内容です。
PDFを作成するソフトは数多くありますが、一度作ったPDFを上書きするソフトはまずないので、作り直す場合はpdfをアウトプットする前の作業データを引っ張りだす必要がありました。
少し前からMarkdown -> HTML -> PDF という流れでドキュメントを作る事が多くなったので、必要でない限り、PDF出力の手間も省きたいと思っていました。
今回はテキストエディタ以外はほぼソフトレスでファイルを上書き更新ができる環境を目指しました。
HTML内の基本構成
marked.jsを使うのですが、いろいろなサンプルではjQueryありきで書かれたものが多かったので、この部分を無くし、JavascriptからDOMを直接操作するようにしました。
英語のマニュアルで使ってるので、lang="en"になってますが、日本語ならlang="jp"に直します。
jQueryを使わないのでwindow.onloadから呼び出すようにしています。
GitHubからmarked.min.jsをDLして、下記のコードの張り付け箇所にペーストすると動作するようになります。
base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- スタイルシート定義部 -->
<style>
/* preタグに折り返しをつける */
pre {
white-space: pre-wrap;
word-wrap: break-word;
overflow: auto;
}
</style>
<div id="container">
<div id="mdrender">
<noscript><!-- Javascriptが無い場合の内容 --></noscript>
<!-- ここにレンダリング後の内容が入る -->
</div>
<pre id="mdraw">
ここにMarkdownの記述で本文を書いていく
画像を使うときは<img>タグを使う
</pre>
</div>
<script>
/* marked.min.jsのコードをここに貼付 */
</script>
<script>
window.onload = function() {
//"mdraw"の内容を取得
var raw = document.getElementById("mdraw");
//"mdraw"の内容をパースして"mdrender"内に表示する
document.getElementById("mdrender").innerHTML=marked(raw.innerHTML);
//"mdraw"そのものを削除
raw.parentNode.removeChild(raw);
}
</script>
</body>
</html>
画像の入れ方
Base64でエンコードしたものを使います。
下は元画像とBase64エンコードした後のコードです。
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAeCAMAAABdem3zAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAxQTFRF/PwzJiUB//9Mg4QVvFpThAAAARBJREFUeNq0VIuOwzAIA/v///l4hMCqbL2ebpGiAo2xIbSCh0sgj9YfAVSlkG6544a5jEguC7IB5hmCKrCtqoHQMtym2xgAwEGEvwBs57GlQjXecjI4hZ3zB7BELAanDUcHwD16xLenypyeBaIHQAldL5mqozCkH7JGDSk5MGW5UEYuf1QHXhgQYSt6A5SZgKUoAWlryGWcFs1eywRca6A1ejUkb4GlO6lGDYeVKVfWvMebWQIw5uft8LHPH4IXwFYQ9fQg7RH5IIn7nla/3wHIzWEtbuoToNqy6TsvR3QwMFKVB3bauIaTJGw9EiOKmxrAeZ6871IT+LcE9gd6BjRBTSN/fQ///1/6MuDh+hFgAOSdBCCVGQFAAAAAAElFTkSuQmCC" />
使用例
実際にUnityのアセットで使用しているマニュアルを使用例として公開しています。
Dropboxへのリンク
今後の課題：CSSを使って印刷向け設定をする
いまのところ印刷物への配慮をしていないので、画像サイズが大きめになるので、この辺の処理をちゃんと書いていきたいです。