要約:左に画像、右にテキストのパターン。テキストも外部ファイルで、HTML編集が最小限で済むようにしました。とりあえずFirefoxのみで動作。
最近PostgreSQLやRについて書いてないけど
ブログの主題を変えた訳ではないです。PostgreSQLやRのデータを見るor活用するプラットフォームとして、ローカルのHTML(+CSS、JavaScript、SVG)が結構使えそうでいろいろ試し中。データ処理・分析の「出口側」の環境整備というか。 今日の「画像+説明テキスト」の目的は、PostGISやRで地図orグラフを作った後、人に説明したりレジュメ化するのをなるべく簡単に、かつ後で活用しやすくすること。
実行環境とファイル一式
Windows7 32bit + Firefox38で動作確認。Chromium43とOpera28では、JavaScriptの一部が動かず使えませんでした(詳細は次項の最後の方)。 template_img_and_txt.zip(6.79KB)が一式で、中身は下記7ファイル。うちplot■.xxxはテスト用の画像とテキスト(.R)の組が二つ。テキストの拡張子は何でもいいです。 HTML、CSS、JavaScriptの中身は次のとおり。
使い方と動作
ローカルHTMLのBODY部分は下のとおり単純に、「画像のIMGタグ+説明文テキストのOBJECTタグ」の組を自由に並べるだけ。
<body>
    <img src="画像 1">
    <object data="説明文テキスト 1"></object>

    <img src="画像 2">
    <object data="説明文テキスト 2"></object>

    ...
    ...(以下同様)
    ...
</body>
↓ HTMLをFirefoxで読み込んだところ。画像を原寸で表示し、右側に説明文テキストを配置。テキストの横幅はブラウザと画像に合わせて自動調整され、はみ出る場合はフレーム内スクロールバーが出ます。「画像+テキスト」のセット間は点線で区切り。 ↓ 一つ目の説明文テキストの中身。今回はRスクリプトですが、テキストファイルなら何でもよく、HTMLタグがあればその通り解釈されます。
setwd('R:/TMP') # <span style="color:crimson">replace this with your folder</span>

png('plot1.png', width=250, height=300)
par(las=1, plt=c(17, 95, 15, 95)/100)
num = 25
cex = 5 + runif(num) * 5
col = adjustcolor(topo.colors(num), 0.5)
plot(runif(num), cex=cex, bg=col, col='gray', pch=21,
    xlab='', ylab='')
graphics.off()

<!-- コメント部分 HTMLには表示されない -->
テキスト中のHTMLタグを処理するため、JavaScriptで、OBJECT要素のテキストをPRE要素の中にセットし直し。ここでcontentWindow.documentを使ったところ、ChromiumとOperaで動きませんでした。contentDocumentにすれば良かったかも。 JavaScriptの最後で、一昨日昨日紹介したFirefoxアドオンAuto Reload向けのSCRIPTタグを動的に追加してます。これにより、画像・テキストのどれかが上書き保存されたらHTMLが自動リロード。ただし画像・テキストを無理矢理SCRIPTタグのソースに突っ込む方法なので、テキストファイル中にJavaScriptがあると何が起こるか分かりません。