画像のサムネイルを作成して HTML 形式にする

夏休みに帰省して写真を撮ってきた人は多いと思いますが、最近のデジカメの解像度の向上で Web にアップロードするのもうんざりすることもありますが、サムネイル付きの index.html を作成しておくと便利かなと思い、作ってみました。

もちろん、Flash を使ったものが多くあるので、こうした古典的なものの需要がどれほどあるのかも最近では疑問に思えてきますが、ImageMagick を使ってサムネイルを作成し、写真の時間を取得しています。

あまり格好良くないのですが、あくまでサンプルとしての最小限だと思ってください。

#! /usr/local/bin/gawk -f
# mkindex.awk
# 画像フォルダの index.html を作成する
# usage: gawk -f mkindex.awk folder

BEGIN {
    photo_dir = ARGV[1];
    thumb_dir = photo_dir "/thumb";

    convert_cmd = "/usr/bin/convert";
    convert_opt = "-resize 200x200";
    identify_cmd = "/usr/bin/identify";
    identify_opt = "-verbose";
    ls_cmd = "/bin/ls";
    ls_opt = "-1";
    mkdir_cmd = "/bin/mkdir";
    mkdir_opt = "-p";

    ls_exec = ls_cmd " " ls_opt " " photo_dir;
    while ((ls_exec | getline) > 0) {
        if ($0 ~ /jpg/) {
            file_name = $0;
            i++;
            photo_file[i] = file_name;
            identify_exec = identify_cmd " " identify_opt " " photo_dir "/" $0;
            while ((identify_exec | getline) > 0) {
                if ($0 ~ /exif:DateTime:/) {
                    photo_date[i] = $2;
                    photo_time[i] = $3;
                }
            }
            close(identify_exec);
        }
    }
    close(ls_exec);

    mkdir_exec = mkdir_cmd " " mkdir_opt " " thumb_dir;
    system(mkdir_exec);

    for (i = 1; i <= length(photo_file); i++) {
        convert_exec =  convert_cmd " " photo_dir "/" photo_file[i] " " \
                        convert_opt " " thumb_dir "/" photo_file[i];
        system(convert_exec);
    }

    print "<html>";
    print "<header>";
    print "<title>";
    print title ? title : "noname";
    print "</title>";
    print "</header>";
    print "<body>";

    print "<table>";
    print "<tr align=center>";
    print "<th>Photo</th>";
    print "<th>Comment</th>";
    print "</tr>";

    for (i = 1; i <= length(photo_file); i++) {
        print "<tr>";
        print "<td>";
        print "<a href=\"" photo_file[i] "\"><img src=\"thumb/" photo_file[i] \
                "\"></a>";
        print "</td>";
        print "<td>";
        print "Date: " photo_date[i] "<br>";
        print "Time: " photo_time[i];
        print "</td>";
        print "</tr>";
    }

    print "</table>";

    print "</body>";
    print "</html>";
}

ここでは画像フォルダは実行する場所の下に img ディレクトリに格納されているものとします。

$ gawk -v title='津島ノ宮駅付近と津島神社' -f mkindex.awk img > img/index.html

こうして出来上がったものを適当なディレクトリにアップすれば完了です。 「津島ノ宮駅付近と津島神社」というタイトルでここにサンプルを置いておきますが、画像が大きいのと回線が細いので注意が必要です。

ちなみにこの津島神社というのは子供の神様を奉った神社で、その最寄り駅の津島ノ宮駅は 1 年に 1 日だけ乗降可能となる日本でも珍しいところです。

tag_gawk.pngtag_gawk.png