WEBアルバムソフト:JAlbum

WEBアルバムを作成するためにソフトを探していました。 EXIF情報を表示できると便利です。 何種類か試した中で一番融通が利く JAlbumをしばらく使ってみることにしました。 スキンファイルを作成することで画面デザインを自由に作ることができます。 あらかじめ数多くのスキンが用意されているのですぐに使うこともできます。

外国のソフトなのでEXIF情報などが英語になってしまいます。 しかたないので日本語のスキンを作ることにしました。 融通が利くという事は設定が面倒くさいということです。 忘れないようにここにメモっておきます。

EXIF情報を表示するスキンは何種類かあるが、 "Camera Geek"と"ExhibitPlus"が使えそうです。 "BluPlusPlus"の表示が整理されていていいな。

アルバムの例は 散歩の風景をご覧ください。

インストール

インストールで気おつける事はJava VMのインストールが必要な点です。 何の事かわからない人はソフトをダウンロードする時に "includes Java VM"版をダウンロードします。 しかし、これだとShift-JISが選べないかも。UTF-8を使えば日本語もOKですが。 これがいやな場合は日本語版のJavaVMを入れる必要があります。 "Java2"でググってインストールしてください。

多言語対応

"ExhibitPlus"では作成するページの言語を変えることができます。 これを参考に日本語用ページを作成できそうです。 仕組みは文字列の置き換えのようです。

"ExhibitPlus"のフォルダから"texts.properties"をコピーします。 これは英語用です。意味なし? そしてもうひとつコピーしてファイル名を"texts_ja.properties"とします。 これが日本語用のファイルとなります。 テキストエディタで見ると変数の代入のように "キーワード1キーワード2"となっているのがわかります。 キーワード2を日本語にすれば良さそうです。

そしてページ上での置き換えは次の関数を呼ぶとキーワード2が返ってきます。

texts.getString(キーワード1)

このプロパティファイルは複数の言語を用意することができます。 どの言語を使うかは変数名"language"を定義します。 ちなみに日本語は"ja"です。

EXIFタグ

JAlbumではどのようなEXIFタグ情報を得る事ができるのでしょうか。 ヘルプを見るとFile metadataの変数がいくつか用意されているようです。 これは御手軽に利用できます。でも、少し物足りない。 "ExhibitPlus"でページを作るともっと多くの情報が表示されています。 どうなっているのだろう。

どうやらmetaオブジェクトというのがあるようです。 変数のヘルプページの下の方にも書いてあります。 "slide.htt"に次の文を追加してやるとすべてのタグが表示されます。

<ja:if exists="meta">
	<pre><%= meta %></pre>
</ja:if>
			

EXIF情報を表示させるソフトを探しまわっていたのですが、 なんだあっさり一覧で表示できてしまいました。 英語だけど。DMC-FZ10の例を テキストファイルに載せておきます。

Exhibitplusスキン

たくさんあるスキンの中でもいろんなコメントを付けられる "Exhibitplus"を主に使って行く事にしました。 全部のページをこれで作ってもいいかなと思わせます。 どんなのかは、 散歩の風景をご覧ください。

とりあえず"Exhibitplus"スキンのフォルダをコピーして "My Exhibitplus"というフォルダを作ります。 ここでいろいろいじっていきます。

スキンを使う準備

"My Exhibitplus"フォルダ内の"texts.properties"をコピーして "texts_ja.properties"というファイルを作ります。 これを日本語に変更していけば大体良さそうです。 これと、"Optional files to be copied to image source directory" フォルダにあるファイルをすべて素となる写真のあるフォルダへコピーします。 この中のファイルを変更すると写真フォルダ毎にコメントやタイトルを付ける事ができます。

ページコメントとページタイトルの指定

"Optional files to be copied to image source directory" からコピーした"meta.properties" ファイルを編集すると写真フォルダのタイトルやコメントを設定できます。 メモ帳で開けばいいです。ここにフィールド名と文字列を書いていきます。

descript = ページの先頭にコメントを入れられる
folderIcon = フォルダアイコンに写真を指定できる
title = ページタイトル
				

最初はtitleは無いので追加します。 descriptは1行で書かなくてはなりません。 長い文でも改行しないようにします。じゃぁ、複数行のコメントが書けないのでしょうか。 そんなことはまりません。ここの文字列はXHTML文として扱われるのでタグをそのまま書けます。 もちろんリンクも埋め込めます。とにかく改行したいところで <br /> と書けばよいです。

最初のうち、titleは変数だからと思い込み"variables.inc" に指定していたのだが、 本当にtitleタグにしか反映されませんでした。 フォルダのタイトルはフォルダ名のまま。 おかしいなぁとちゃんと Exhibitplus のページでリファレンスを読むと"meta.properties" のフィールド名として書いてありました。 他のフィールドもあるようだが使わないのでとりあえず放っておきます。

スキンのプログラムを修正してみる

写真のコメントにタグを埋めた時にインデックスページに正しく表示できるようにする

JAlbumでは写真にコメントを記入できます。 このコメントはスライドページで表示することができます。 コメントにはXHTMLのタグを書くことができるのでリンクを作る事もできます。

このスキンの作者は"index.htt"において インデックスページでコメントの改行タグより前を 表示させたいような記述をしています。 具体的には"<"が現れる前の文字列だけを切り取っています。

しかしこれでは改行前にリンクを埋め込む事ができません。 コメントの最初にリンクを埋め込んだらインデックスページにコメントが まったく表示されなくなってしまいます。 そのうちスキンがバージョンアップして修正されるかも知れませんが、 とりあえず私の好きなように直そうと思います。

やりたいことはコメントの1行目だけを切り出す事です。 そして、このコメントはimgタグのalt属性にも代入されますので、 余計なタグを削除することです。 タグを認識させるのが面倒な感じがします。

スキンはJavaによりプログラムされています。 Javaの文字列の関数なんて知らないのでちょっと調べてみたら、 どうやらJava2 Ver.1.4では正規表現を使って文字列操作ができるようです。 これなら簡単にタグを抜くことができそうです。

"index.htt"の432行目あたりに次に示すコメントを修正する文があります。

<% if ((comment != void) && (comment.indexOf("<") != -1))
comment = comment.substring(0,comment.indexOf("<")); %>

これはcommentがあり、かつタグを含む場合、 "<"を探してその前の文字列をcommentにするものです。 これを次のように変更しました。

<%
	if ((comment != void) && (comment.indexOf("<") != -1)) {
		import java.util.regex.*;
		Pattern pattern = Pattern.compile("<br />");
		String[] commentLines = pattern.split(comment, 2);

		comment = commentLines[0];
		Pattern pattern = Pattern.compile("<.*?>");
		Matcher matcher = pattern.matcher(comment);
		String result = matcher.replaceAll("");
		commentNoTags = result;
		//comment = comment.substring(0,comment.indexOf("<"));
	} else { commentNoTags = comment; }
%>

最初にコメントの1行目を抽出し、その後タグを消しています。 1行目とは<br />が現れるまでとしています。 よって<p></p>タグ等は無視しています。 タグを消したコメントはcommentNoTagsに入ります。 これをimgタグのalt属性に使います。432行目から数行がコメントに関する表示部分です。 結構長くてごちゃごちゃな文が続くので例を示しませんが、 alt属性のcommentcommentNoTagsに変更します。 プログラム経験がある人でも慣れてなければ何がなんだか分からない所だと思います。 表示とロジックが渾然一体となってます。

スライドのタイトルをコメントの1行目にしてみる

JAlbumではスライド表示のタイトルは写真のLabelになります。 Labelは写真のファイル名です。 これでは日本語を使う上で不便です。 スライドのタイトルを日本語にするには写真のファイル名を日本語にしなければなりません。 しかし日本語ファイル名をWEBで使うわけにはいきません。

それでは写真のコメントをタイトルにすることにしましょう。

スライドのタイトルは"slide.htt"の246行目で決められています。その行は次のようになっています。

<title>$label</title>

さっきと違って単純です。 labelの代わりにcommentNoTagsを使えばいいでしょう。 ということで、次のように変更しました。

<title><%= comment!=void ? commentNoTags + " ":"" %>$label</title>

さて、commentNoTagsをまだ作っていません。 219行目から228行目にcommentを設定する部分があります。 ここでcommentNoTagsを作れば良さそうです。 "}"の前、 227行目あたりにインデックスページと同じタグを抜くコードを入れましょう。

スライドのEXIF情報を増やしてみる

そのままでもEXIFの情報は表示されますが FZ10のタグで表示されないものもあるので少し変えてみます。 変更するファイルは"slide.htt"です。このファイルの603行目付近に
String[] metaArray = ・・・
という行があります。 ここで表示するタグを指定できます。

配列 metaArray にEXIFタグの名称を書き込んで置くとそのタグが表示されます。 配列はタグ名と表示名の2つの要素をセットにして指定します。 奇数番の要素はEXIFタグ名で偶数番目の要素は表示名です。 ここで表示名はファイル"texts.properties"で指定された文字列に 置き換えるための変数名のようなものです。追加したタグに適当な名称を付けて "texts.properties"にも対応する訳文を記入します。

散歩の風景では次のようにしてみました。うちのカメラにないタグは削っても良いのですが 残してあります。

String[] metaArray = {"Exposure Time", "exposureTime", "Aperture Value", "aperture", "Metering Mode", "meteringMode", "Exposure Mode", "exposureMode",  "Exposure Program","exposureProgram",  "White Balance Mode", "whiteBalanceMode", "Exposure Bias Value","exposureBiasValue", "ISO Speed Ratings","ISOSetting",  "Gain Control","gainControl", "Subject Distance Range","subjectDistanceRange", "Scene Capture Type","sceneCaptureType", "Artist", "artist", "Flash", "flash",  "Exif Version","exifVersion", "Canon Makernote.Iso", "ISOSetting", "Iptc.Headline", "iptc.headline", "Iptc.Keywords", "iptc.keywords", "Iptc.By-line", "iptc.authorName", "Iptc.By-line Title", "iptc.authorTitle", "Iptc.Object Name", "iptc.objectName", "Iptc.Special Instructions", "iptc.specialInstructions", "Iptc.Category", "iptc.category", "Iptc.Urgency", "iptc.urgency", "Iptc.Supplemental Category(s)", "iptc.subCategories", "Iptc.City", "iptc.city", "Iptc.Province/State", "iptc.province", "Iptc.Country/Primary Location", "iptc.country", "Iptc.Original Transmission Reference", "iptc.reference", "Iptc.Credit", "iptc.credit", "Iptc.Source", "iptc.source", "Iptc.Copyright Notice", "iptc.copyright", "Iptc.Writer", "iptc.writer"};
タグの並べる順番を変えれば表示する順番も変わります。

metaArrayにはカメラメーカや撮影日時のタグが記されていません。 これはこの行よりも前に処理されています。そんな変更がいるようなタグでも無いでしょうから ここには記しません。

しかし、一つだけ気になるものがあります。それは35mm換算の焦点距離を表示する部分です。 これは後からEXIFに追加されたタグでもあり、 DMC-FZ10にはこのタグがありますがFinepix 4500にはありません。 FZ10のタグの内容を見るとカタログ表記からの換算値と若干違う値が書かたりしています。 "slide.htt"ではこのタグが無い場合、解像度のタグ情報から計算するように 記述がありますが、Finepix 4500ではとんでもない焦点距離を表示しています。 正しそうな値を表示させる手っ取り早い方法はadjustedFocalLengthという変数を 指定することです。しかし、何台もカメラがあると単純に変数設定では対応できません。 いちいち機種判断するプログラムを記述してもいいんですが、そのうち忘れそうでいやです。

まぁ大きな問題ではないので気が向いたときに考えることにします。 そうそう、このページも私の覚書きのつもりですから…。 ほんとうは"BluPlusPlus"スキンのEXIF情報表示を持ってきたいです。 そのうち…そのうち…。