要約:左に画像、右にテキストのパターン。テキストも外部ファイルで、HTML編集が最小限で済むようにしました。とりあえずFirefoxのみで動作。
Contents


最近PostgreSQLRについて書いてないけど
ブログの主題を変えた訳ではないです。PostgreSQLRのデータを見るor活用するプラットフォームとして、ローカルのHTML(+CSS、JavaScript、SVG)が結構使えそうでいろいろ試し中。データ処理・分析の「出口側」の環境整備というか。

今日の「画像+説明テキスト」の目的は、PostGISRで地図orグラフを作った後、人に説明したりレジュメ化するのをなるべく簡単に、かつ後で活用しやすくすること。


実行環境とファイル一式
Windows7 32bit + Firefox38で動作確認。Chromium43Opera28では、JavaScriptの一部が動かず使えませんでした(詳細は次項の最後の方)。

template_img_and_txt.zip(6.79KB)が一式で、中身は下記7ファイル。うちplot■.xxxはテスト用の画像とテキスト(.R)の組が二つ。テキストの拡張子は何でもいいです。


HTML、CSS、JavaScriptの中身は次のとおり。
template_img_and_txt.htmlSelectRawtextBitbucket
<!DOCTYPE HTML><html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="template_img_and_txt.css">
    <script src="template_img_and_txt.js"></script>
</head>
<body>
    <img src="plot1.png">
    <object data="plot1.R"></object>

    <img src="plot2.png">
    <object data="plot2.R"></object>

    <!-- insert new sets similar to above -->
</body>
</html>
template_img_and_txt.cssSelectRawtextBitbucket
body {
    margin: 0;
    padding: 0;
}

img {
    border-bottom: 1px dotted black;
    float: left;
    margin: 0;
}

object {
    display: none;
}

pre {
    border-bottom: 1px dotted black;
    margin: 0;
    overflow: auto;
}
template_img_and_txt.jsSelectRawtextBitbucket
window.addEventListener('load', function() {
    var imgs = document.getElementsByTagName('img'),
        objs = document.getElementsByTagName('object'),
        pre = document.createElement('pre'),
        scr = document.createElement('script');

    for (var i = 0; i < imgs.length; i++) {

        // add pre tag from object data
        var m = imgs[i],
            o = objs[i],
            p = pre.cloneNode();
        m.parentNode.insertBefore(p, m.nextSibling);
        p.innerHTML = o.contentWindow.document.body.textContent;

        // set appearnce of pre tag
        var g = getComputedStyle(m),
            s = p.style;
        s.lineHeight = 1.5;
        s.padding = '1em';
        s.height = 'calc(' + g.height + ' - 2em)';
        s.width = 'calc(100% - ' + g.width + ' - 2em)';
        
        // add dummy script for Auto Reload
        var ary = Array(m.src, o.data),
            b = document.body;
        for (var j = 0; j < ary.length; j++) {
            var c = scr.cloneNode();
            c.src = ary[j];
            b.appendChild(c);
        }
    }
});


使い方と動作
ローカルHTMLBODY部分は下のとおり単純に、「画像のIMGタグ+説明文テキストのOBJECTタグ」の組を自由に並べるだけ。
<body>
    <img src="画像 1">
    <object data="説明文テキスト 1"></object>

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

    ...
    ...(以下同様)
    ...
</body>


HTMLFirefoxで読み込んだところ。画像を原寸で表示し、右側に説明文テキストを配置。テキストの横幅はブラウザと画像に合わせて自動調整され、はみ出る場合はフレーム内スクロールバーが出ます。「画像+テキスト」のセット間は点線で区切り。


↓ 一つ目の説明文テキストの中身。今回は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を使ったところ、ChromiumOperaで動きませんでした。contentDocumentにすれば良かったかも。

JavaScriptの最後で、
一昨日昨日紹介したFirefoxアドオンAuto Reload向けのSCRIPTタグを動的に追加してます。これにより、画像・テキストのどれかが上書き保存されたらHTMLが自動リロード。ただし画像・テキストを無理矢理SCRIPTタグのソースに突っ込む方法なので、テキストファイル中にJavaScriptがあると何が起こるか分かりません。