HTML 出力への写真埋め込み (mixi 日記アーカイブ)

mixi 日記アーカイブ

ナビゲーション

HTML 出力への写真埋め込み

このアーカイブは同期化されません。 mixi の日記が更新されても、このアーカイブには反映されません。

現在は、保存した日記に写真が関連付けられていない。
HTML で出力する際は、やはり写真を埋め込んで表示したい。

ただ、その HTML 用のテンプレートは少し厄介だ。
写真は、0 ～ 3 個と数が可変なので、
ちゃんとしたマクロの設計は少し困難である。

まぁ、今のところ試行錯誤の段階なので、
$html_photo_links とでもしておき、
自動的に写真用の HTML に展開するようにしよう。
このあたり、ちゃんとした設計が必要なら後でやればいい。

========== default.html ==========
<html>
<head>
<title>$date の日記: $title</title>
</head>
<body>
<h1>$title</h1>
<p>$date</p>
<hr>
<div>
$html_photo_links
</div>
<p>$body</p>
</body>
</html>
========== end of default.html ==========

そして、マクロを展開する際に、
サムネイルを img タグで埋め込み、
さらに画像へのリンクを張るという形になる。

こんな感じかな。属性やスタイルなどの指定がないが、
スタイルシートを使って対応すればそこそこいける。
まあ必要なら、出力後に HTML を書き換えれば済むしね。

では、_export 関数の中にある、マクロ置換用の
クロージャに html_photo_links を追加しよう。

// item と escaper を参照するマクロ置換クロージャ
var func = function (match, name) {
switch (name) {
case "$":
return "$";
case "title":
return escaper(item.getTitle());
case "body":
return escaper(item.getContent());
case "date":
{
var date = item.getDate();
var basename = date.getFullYear().formatLeadingZeroes(4)
+ "-" + (date.getMonth() + 1).formatLeadingZeroes(2)
+ "-" + date.getDate().formatLeadingZeroes(2)
+ "-" + date.getHours().formatLeadingZeroes(2)
+ "-" + date.getMinutes().formatLeadingZeroes(2);
var html = "";
var images = item.getImages();
for (var i = 0; i < images.length; ++i) {
html += '<a href="images/' + basename + "-" + i + '.jpg">'
+ '<img src="thumbnails/' + basename + "-" + i + '.jpg" alt="[写真]" />'
+ "</a>\n";
}
return html;
}
default:
return "";
}
};

うーむ。_export 関数がごちゃごちゃしてきたな。
それに、Main.js はルール違反ばっかりしてるしなぁ。
もっと整理してもいいような気もするが、まあいいか。

今日の日記には写真を載せてみた、
成功すれば、これがダウンロードされ、
ダウンロード先にリンクが設定されるはずだ。

よし、大丈夫のようだ。
出力した日記のショットを載せておく。

mixi 日記アーカイブ

ナビゲーション