org-modeでHTMLのレンダリングをするob-browser

org-modeの文書に書かれたHTMLソースを、Webブラウザのレンダリング結果を画像ファイルとして貼り付けてくれるパッケージ ob-browser (https://github.com/krisajenkins/ob-browser)を紹介します。

ob-brwoserとは？

このパッケージのメインの機能は、 PhantomJS (http://phantomjs.org) という外部のコマンドラインで実現しています。PhantomJSとは仮想ウェブブラウザみたいなもので、JavaScriptで書いたシナリオにしたがって自動でWebサイトにアクセスするツールです。そのときにHTMLをレンダリングしてその結果を画面キャプチャとして保存する機能もあります。

今回の ob-browser はその画面キャプチャの機能をorg-modeから実行しています。レンダリングの品質は PhantomJS が使っているQtWebKitに依存します。

インストール

まずは PhantomJS をインストールします。

MacPortsを使う場合

sudo port install phantomjs

Homebrewを使う場合

brew install phantomjs

次に ob-browser をインストールします。Emacsでパッケージ管理機能を使います。

M-x package-install

以上で完了です。

使用例

それでは実際に使ってみます。

orgファイルの中に次のようなコードを書きます。


<html>
<head>
  <link rel="stylesheet" href="file:///Users/foobar/style.css">
  <script src="file:///Users/foobar/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $("h1").css("background", "#39F");
  $("h2").css("background", "#09A");
});
</script>
</head>
<body>
<h1 id="ok">タイトル</h1>
<h2>サブタイトル1</h2>
<p>本文</p>
<h2>サブタイトル2</h2>
<p>本文</p>
</body>
</html>

これをExportすると、HTMLソースがレンダリングされた結果が画像ファイルとして保存されて貼り付けられます。

細かな挙動でわからない点もあるのですが、上記のソースでもわかるようにCSSやJQueryも使えています。 (CSSファイルとJQueryのライブラリはorgファイルと同じディレクトリに置いて動作確認しました)

実際のところ、この機能を使いたい状況があったわけではないのですが、Emacsとorgファイルの基本機能と外部のコマンドを連携することでこういうことが実現できる点がおもしろいですね。

実際、この記事は上記のソースを書いたorgファイルから org2blog/wp-mode を使ってWordPressにポストしています。

ob-brwoserとは？

インストール

使用例

関連の記事