i-mode
Album Maker Page
ホームMacintoshOpenGLThinkPadJavaダイビング水中デジカメ


インデックス
Java
電子アルバム
初心者編
詳細編
Exif
ダウンロード
iアプリ
iアプリ開発
よくある質問

電子アルバム（詳細編）

水中デジカメを初めてから早１ヶ月、２度の旅行を経て写真の方も結構な枚数になり、そろそろこれらの写真の管理方法を考えなくてはならない時期に来てしま いました。また、一緒に旅行した人たちから「写真を欲しい」と言われ、デジタル写真の配布という問題にも直面してしまいました。確かにデジタル写真は普通 の写真と違い、焼き増しして送るわけにはいきません。そこで今回、デジタル写真の管理方法を写真の配布まで見据えた形で考えてみました。

補足(1999/04/12)
デジタル写真プリントサービスをやってみました。１００万画素でもそれなりに奇麗にでるものです。でもやっぱり高くつくのでどうしてもパソコンの使えない人にあげる時だけにしようと思います。

目次

アルバムソフトはどうか

一般的なデジタル写真の管理方法として、市販のアルバムソフトを使うという方法があります。サムネイル画像を見ながら画像を分類したり見返したり出来るのが主な機能です。しかし私は以下のような理由でアルバムソフトは採用しませんし、お勧めもしません。

私は Windovvs のアルバムソフトを持っていますし、OS/2 では PMView という優れたシェアウェアがあるのも知っていますが、以上の理由からそれらを使って画像管理をすることをためらっていました。そして「自分の思い出を預け るに足るものは何か」つまり長期的に安心して保管できるアルバムの形は何かを考えました。そして私はそれはＨＴＭＬ形式だと考えました。アルバムを見るた めにブラウザを起動する必要がありますが、フリーのブラウザなら縛られている気もしないでしょう。プラットフォーム依存の問題も、配布の問題もこれで解決 できます。

電子アルバムをどう作るか

ＨＴＭＬ形式で電子アルバムを作ることにしたわけですが、ではそのＨＴＭＬページはどうやって作ればいいのでしょうか。そこでまた、ホームページ作 成ソフトを使ってしまっては元のもくあみです。しかもいちいち手でＨＴＭＬを書いていたのでは長続きする訳がありません。ここでの課題は以下の通りです。

そこで私が考えたのは以下のような管理方針でした。

そして実際に Java でプログラムを作成しました。

AlbumMaker.class の使い方（ダウンロード）

アルバム作成プログラムは Java で書かれています。実行には JDK 1.1.4 以降の実行環境が必要です。

ダウンロードした圧縮ファイル（album.zip）を適当なディレクトリで解凍すると、Album、Share、Exifという3つのディレクトリがで きます。それぞれのディレクトリの中にはクラスファイルが入っています。クラスファイルの実行は解凍を行ったディレクトリから行います。また、tools というディレクトリにはリソースファイル（album.rc）とフォーマットファイル（*.fmt）のサンプルが入っています。

自動生成されるＨＴＭＬのページは以下のようになります。

こちらにアルバムのサンプルがあります。

Java アプリケーションによるデジタル画像管理の流れは次のようになります。

注意：アルバムを作成する前に必ず画像のバックアップもしくはコピーを行なって下さい。

  1. 画像をディレクトリに分けておく
    アルバムに載せたい画像を適当なディレクトリ（このディレクトリを ルートディレクトリと呼びます）の下に保存します。この時、画像をルートディレクトリの下のサブディレクトリに分類して保存することも可能です（例えば年 別のディレクトリを作りその下に月別のサブディレクトリを作る）。またアルバムページが正しく並ぶためには、ディレクトリの名前を順番（アルファベット 順、数字順）になるようにします。
  2. 設定ファイルを置く
    これはなくてもよいのですが、ダウンロードするとサンプルがついてくる（解凍したAlbumディレクトリの中にあります）のでそれをルートディレクトリにコピーすればよいでしょう。
  3. ＨＴＭＬの部品を置く
    アルバムに用いられる設定や部品は以下の通りです。ファイルの置かれているべき場所によって３種類に分類されます。
    ルートディレクトリ
    ルートディレクトリにある場合のみ参照されるファイル
    • index.fmt : 画像一覧ページのフォーマット
    • image.fmt : 画像表示ページのフォーマット
    • tnail.fmt : 画像一覧表のフォーマット
    • property.fmt : 画像の属性表示のフォーマット
    これらのファイルはダウンロードした圧縮ファイルの中にサンプルがあるのでまずはそれをコピーすればよいでしょう（解凍したAlbumディレクトリの中にあります）。
    それぞれのサブディレクトリ
    画像が置かれているそれぞれのディレクトリにある場合のみ参照されるファイル
    • title.txt : タイトルテキストが書かれているテキストファイル
    • title.gif : タイトル画像（タイトルテキストより優先される）
    • comment.txt : ページに付ける文書
    • <image name>.jpg : 画像本体
    • <image name>.gif : サムネイル画像
    • <image.name>.txt : 画像につけるコメント
    • <image.name>.ttx : 画像のタイトル
    どちらでもよい
    それぞれのディレクトリもしくはその親ディレクトリにさかのぼって存在していれば参照されるファイル。
    • head.txt : ヘッダ情報 HTMLヘッダに書きたい内容
    • foot.txt : フッタ文書 ページの終わりに書きたい内容
    • color.txt : 文字の色の設定 HTMLの<BODY>タグで設定する色情報
      例：bgcolor="#ffffff" text="#000000" link="#0000ff"
      設定できる色
      • bgcolor : 背景色
      • text : 文字色
      • link : リンクの色
      • vlink : すでに訪れたリンクの色
      • alink : 選択中のリンクの色
      色は"#RRGGBB"と表し、RR、GG、BBにはそれぞれ赤、緑、青の３原色成分を２桁の１６進数で書きます。
      色をキーワード（white,black,yellow,red,,,）で設定する事もできますが、どんなキーワードがあるかはHTMLの解説を読んで調べて下さい。
    • backdrop.gif : 背景画像
    • return.gif : 親ディレクトリに戻るリンクに用いる画像
    • top.gif : トップディレクトリに戻るリンクに用いる画像
    • folder.gif : サブディレクトリへのリンクに用いる画像
    • line.gif : 区切り線の画像
    • slide.gif : スライドショー開始のリンクに用いる画像
    これらのファイルがなくてもページは作成されますが、それなりの内容になります。
    注意：アルバム作成プログラムが使用するために予約されている名前（line, backdrop, title, folder, return, prev, stop, next, slide）が写真画像のファイル名と重ならないように注意してください。
    AlbumMaker.class を実行する
    album.zipを展開した（Album,Shareという名前のサブディレクトリができている）ディレクトリでコマンドプロンプトから

    java Album.AlbumMaker.class [<root directory>] [<resource filename>]

    として実行します。<root directory>は画像ファイルのあるディレクトリです。これで指定したディレクトリとその全てのサブディレクトリに対して、ＨＴＭＬファイルの作成・リンクが行われます。
    <resource file name>は設定ファイルの名前で、アルバムのルートディレクトリに置きます。ページ作成の設定をこのファイルに記述します（指定しなければ初期設定で実行されます）。

これで手軽に電子アルバムを作成できます。また、配布用に少し凝った造りのページを作る事もできますし、もちろん生成されたページを自分で編集する事も可能です。

設定ファイルの書き方

AlbumMaker.class を実行する時に設定ファイルのファイル名を指定すると、その中に記述されている設定が読み込まれてアルバム作成に反映されます。書式は

リソース名 = 値

で、設定ファイル内部では空の行と"#"（シャープ記号）で始まる行（コメント行）は無視されます。認識されるリソース名と値を以下に示します。

ファイル処理関係
album over write (true/false)
すでにあるＨＴＭＬファイルを上書きするか。
confirm processing (true/false)
それぞれのサブディレクトリについて処理を行なうかどうかの確認をするか。
check updated contents (true/false)
更新されたファイルや足りないファイルがあるディレクトリだけを処理するようにするか。
これらの処理関係の設定は、深いディレクトリ構造に大量の画像があって、処理を何回かに分けて行ないたい場合に役立ちます。
画像一覧ページ（画像一覧表のあるページ）関係
table column number（整数）
表の行数
table border（ピクセル数）
表の枠幅
table space（ピクセル数）
表のセルの余白
thumbnail border（ピクセル数）
サムネイル画像の枠幅
icon border（ピクセル数）
アイコン画像の枠幅
show parent title (true/false)
サブディレクトリにおいて、親ディレクトリへの「戻る」リンクに親ディレクトリのタイトルを表示するか。
slide interval（秒）
スライドショーの表示間隔。
画像表示ページ関係（画像本体を表示するページの設定）
image border（ピクセル数）
画像の枠幅
image space（ピクセル数）
画像の周囲の余白
show neighbors (true/false)
前後の画像へのリンク（もしくはサムネイル画像）を画像と同時に表示するか。
image align (horizontal/vertical)
画像と前後の画像へのリンクを縦横どちらに並べるか。
コメント関係
add comments (true/false)
アルバム作成中に画像を見ながらコメントをつけていく処理を行なうか。
modify comments (true/false)
すでにあるコメントの内容を編集するか。
comment view thumbnail (true/false)
コメント編集ウインドウに実際の画像ではなくサムネイル画像を表示するか（縮小画像を見ながらコメントを付ければ、少しは処理を軽くできます）。
画像のサイズ関係
image size optimized (true/false)
画像の表示サイズを特定のスクリーンサイズに収まるように最適化するか。
screen width（ピクセル数）
最適化するスクリーンの幅。
screen height（ピクセル数）
最適化するスクリーンの高さ。
image width（ピクセル数）
画像を表示する時の幅。ブラウザの表示域に対する割合（パーセント）での指定も可能。
image height（ピクセル数）
画像を表示する時の高さ。ブラウザの表示域に対する割合（パーセント）での指定も可能。
Exifファイル関係
Exif full dump (true/false)
Exif属性（撮影条件などのデータ）を全て画像表示ページに表示するか。
make thumbnail (true/false)
Exifファイルに含まれるサムネイルデータを抽出して用いるか。
ファイル名関係
case sensitive (true/false)
ファイル名は大文字、小文字を区別するか。
image suffix（文字列）
画像ファイルの拡張子。カンマで区切って複数指定できる。
file suffix（文字列）
その他のファイル（動画等）の拡張子。カンマで区切って複数指定できる。
thumbnail suffix（文字列）
サムネイル画像の拡張子。
thumbnail directory（文字列）
Exifファイルに含まれるサムネイル画像を抽出して用いる場合のサムネイル保管ディレクトリの名前。
text suffix（文字列）
コメント等を含むテキストファイルの拡張子。
html suffix（文字列）
ＨＴＭＬファイルの拡張子。
注意：実際に書き込みが行なわれるファイルなので他の拡張子と重ならないように設定します。
title suffix（文字列）
画像のタイトルを含むテキストファイルの拡張子。
タグ関係（日本語可能）
return tag（文字列）
親ディレクトリに戻るリンクのタグ。
top tag（文字列）
トップディレクトリに戻るリンクのタグ。
previous tag（文字列）
画像ページで前の画像に戻るリンクのタグ。
next tag（文字列）
次の画像に進むリンクのタグ。
stop tag（文字列）
画像一覧ページに戻るリンクのタグ。
slide tag（文字列）
スライドショーを実行するリンクのタグ。
download tag（文字列）
画像一覧に表示する画像そのものへのリンクのタグ。
フォーマットファイル関係
index format file（文字列）
画像一覧ページのフォーマットを記述したファイルの名前。
image format file（文字列）
画像ページのフォーマットを記述したファイルの名前。
thumbnail format file（文字列）
画像一覧表のフォーマットを記述したファイルの名前。
image property format file（文字列）
画像ページ、画像一覧表に表示する画像の属性値のフォーマットを記述したファイルの名前。
exif format file
Exif属性（撮影条件などのデータ）テーブルのフォーマットを記述したファイルの名前。

ページフォーマットの記述方法

アルバムのルートディレクトリにページフォーマットを記述したテキストファイル（index.fmt）を置くとそれを読み込んでページを作ります。ページフォーマットは以下の例のように記述します。 

Line |Title |Line |ImageTable|LinkList|ReturnLink|Comment|Line
LEFT |LEFT  |LEFT |CENTER    |LEFT    |LEFT      |LEFT   |LEFT

このフォーマットでページに配置するコンポーネントの順番と位置揃えを指定します。各コンポーネントは縦棒"|"で区切ります。１行目にはコンポーネントの順序、２行目にはコンポーネントの位置揃えを記述します。コンポーネントの意味は以下の通りです。

Line
線、"line.gif"という名前の画像があればそれを使い、無ければ<HR>タグを使う。
Title
ページタイトル"title.txt"というテキストファイルがあればその内容を使う。無ければディレクトリ名を使う。
ImageTable
画像の名前もしくはサムネイル画像を並べた表。
LinkList
子ディレクトリへのリンクを並べたリスト。画像"folder.gif"や子ディレクトリのタイトルをリンクに使う。
ReturnLink
親ディレクトリへのリンク。画像"return.gif"や親ディレクトリのタイトルをリンクに使う。
TopLink
トップディレクトリへのリンク。画像"top.gif"やトップディレクトリのタイトルをリンクに使う。
Comment
そのページに対するコメント文章。"comment.txt"というテキストファイルの内容がそのまま入る。
Clear
改行。"<BR clear=all>"タグを出力。

以上のコンポーネントと"Left""Center""Right"の位置揃えによって自由度の高いページ作成が可能です。

画像表示ページのフォーマット

画像を表示するページのフォーマットもフォーマットファイルで記述できます（image.fmt）。ここで使えるコンポーネントは以下の通りです。

Image
画像そのもの。
Title
画像に付けたタイトル。
Comment
画像に付けたコメント。
NavigationButtons
前後の画像とインデックスへのリンク（ボタン）。
Property
画像の属性値（幅、高さ、ファイルサイズ等）。
ExifProperty
Exif属性を並べたテーブル。
Line
線（画像もしくは<HR>タグ）。
Clear
改行。"<BR clear=all>"タグを出力。

また画像一覧ページと同様に位置揃えを２行目に記述できます。

画像一覧表のフォーマット

画像一覧表は画像ページへのリンクを並べますが、その表に並べる内容もフォーマットファイルで記述できます（tnail.fmt）。コンポーネントは以下の通りです。

Thumbnail
サムネイル画像（もしくはファイル名）。
Title
画像のタイトル。
Download
画像本体へのリンク。
Comment
画像に付けたコメント。
Property
画像の属性値。
Clear
改行。"<BR clear=all>"タグを出力。

また画像一覧ページと同様に位置揃えを２行目に記述できます。

画像属性のフォーマット

画像には様々な属性値（幅、高さ、ファイルサイズ等）があります。それを抽出して画像ページや画像一覧表に表示する時のフォーマットをファイルに記述します（property.fmt）。以下の例のように縦棒で区切られた文字列で表記します。 

$width | x | $height

"$"が先頭についている文字列は属性の名前として扱われます。よって実際の表示は以下のようになります。 

800x600

属性のフォーマットには以下の名前が使用できます。

Exif属性のフォーマット

ExifファイルはJPEGもしくはTIFF形式の画像に撮影条件等のデータを添付するためのファイルフォーマットです。Exifに対応していないビュー ワではただの画像ファイルとして表示されますが、Exif独自のフォーマットを認識してやればそこからデータを取り出すことができます。

Exif属性を画像表示ページに書き出すことができます。どの属性をどの順で書き出すかをExif属性フォーマットファイルに記述しま す。Albumディレクトリに"exif.fmt"という名前のサンプルがあり、これを用いると必要と思われる全ての属性が書き出されます。またそれぞれ の属性の名前が何を意味するかはExifディレクトリにある"*TagBundle_ja.java"という名前のソースファイルを見れば何となく分かる と思います。

こちらに使用できるExifタグのページもあります。

サムネイルの置き方

サムネイルを作成するには２つの方法があります。

  1. 自力で作る
    この場合、サムネイルは画像と同じディレクトリに置きます。ファイル名の拡張子以外を本画像と同じにして、拡張子だけを変えてください。
    一般的には画像が"*.jpg"ファイルなので、サムネイルは"*.gif"ファイルにすればいいと思います。
    画像を一括して変換できるツールを持っているならそれを用いればいいでしょう。
  2. Exifファイルに含まれるサムネイルを抽出する
    Exifファイルのほとんどにはサムネイル画像が含まれています。設定ファイルで"make thumbnail = true"とすればそのサムネイルを抽出して用いることができます。
    この場合、本画像もサムネイルも両方JPEGファイル"*.jpg"になる場合が多いので、"thumbnail directory"で設定したサブディレクトリにサムネイルを保存するようになっています。
    サムネイルがTIFFファイル"*.tiff"になってしまうようなデジカメもありますが、ブラウザにTIFFファイルを表示する能力がないなら、この方法はあきらめるしかありません。

配布はどうするか

このようにして生成されたＨＴＭＬ電子アルバムをどうやって配布すればいいのでしょうか。私はとりあえず CD-R で保存・配布することにしました。ここの部分だけが Windovvs に依存していて悔しい所ですが、一度焼いてしまえば後はどこでも見られるわけですから、なんとか我慢できます。

補足：ThumbnailMaker.class

AlbumMaker.class と同じパッケージにこのクラスも含まれていますが、これは私が OS/2 上で画像のサムネイル作成用に作ったクラスで、画像の変換（JPEG -> GIF）は OS/2 用の外部プログラム（GBM）に頼っています。つまり他のプラットフォーム上では動きません。自分のプラットフォーム用に書替えるのは一向に構いませんが、元の画像を消してしまわないように注意して下さい。

コンテンツ： [ホーム] [Macintosh] [OpenGL] [ThinkPad] [Java] [ダイビング] [水中デジカメ]

このページについてのご質問はこちらへどうぞ。
このページに用いられている3Dのロゴやボタンは全てGLlogoによってレンダリングされたものです。
このページはリンクフリーです。
著作権等についてはこちらをどうぞ。