写真のインデックスをつくる

たくさん撮った写真のサムネイルをHTMLで作ります。特定の画像管理ソフトを使わないので、自由にレイアウトして説明を加えることができます。

ImageMagickをインストール

Windows Subsystem for Linux (WSL)をインストール
Bash on Ubuntu on Windowsを起動
sudo apt-get install imagemagic としてImageMagickをインストール
convert -version としてVersion: ImageMagick 6.8.9-9… などと表示されればOK

サムネイルを作成

ImageMagickの画像を加工するコマンドにはconvertとmogrifyがあります。convertは元の画像を加工して新しいファイルをつくります。mogrifyは元の画像を加工後の画像に置き換えます。研究で撮った写真は必ず元のファイルを保存しておかないといけないので、convertを使います。

$ identify original.tiff    # 画像の情報を調べる
original.tif[0] TIFF 1600x900 1600x900+0+0 16-bit Grayscale Gray 3.149MB 0.000u 0:00.000    # 画像の大きさ(1600x900)がわかる。
$ convert -thumbnail 160x90 original.tiff thumbnail.jpg  # TIFF画像から160x90 pxの大きさのJPEG画像をつくる

フォルダ内の全ての画像からインデックスをつくる

シェルスクリプトをつくって、index.htmlを作成します。

#!/bin/bash
EXT=.JPG
OUT_DIR=thumbnail
if [ ! -d $OUT_DIR ] ; then
	mkdir -p $OUT_DIR
fi

cat <<-HEADER
<html>
<head><style type='text/css'><!--
.frame {
  floag:left;
}
--></style>
</head>
<body>
HEADER

ls *$EXT | while read F ; do
	OUT=$OUT_DIR/$(basename $F)
	if [ ! -f "$OUT" ] ; then
		convert -thumbnail 160x90 $F $OUT
	fi
	echo "<div class='frame'><h4>"$(basename $F $EXT)"</h4><img src='$OUT'></div>"
done
cat <<-FOOTER
</body>
</html>
FOOTER

以下のように実行します。

$ cd working_dir    # 写真のあるディレクトリへ移動
$ ./thumbnail.sh >index.html

index.htmlを編集して好みのインデックスに仕上げる。私の好みはfieldsetで写真をグループにして、legendでその名前をいれる方法です。その際.frameのスタイルを削除して、fieldsetにdisplay: flex;をいれるとよいです。

オリジナルのファイルを消してしまわないように、最初はどこかにコピーをつくって試すといいです。

2021年11月2日