静止したものは全部忘れよう。すべて仕事を動きあるものに 向けよう -- Richard Buckminster Fuller
Unixにテキスト処理は欠かせない。文字列検索や置換などのテキス ト処理は、Unix で効率的に作業する上で必須の技術である。
テキスト処理の欠点は、それが地味だということだ。たとえば、第 2回で紹介した Migemo というソフトウェアであるが、これを「ロー マ字のまま日本語でインクリメンタル検索できて便利なんです」と 熱く説明したところで、マニア以外の人からは「ふーん」という反 応しか返ってこない。Emacsの上でカーソルがちょこちょこ動いて いるだけでは、デモを見せられてもおもしろくないのは確かである。
一方、グラフィックやサウンドを効果的に用いたソフトウェアは誰 にでもわかりやすく、受けがいい。そこで、今回はテキスト処理か ら離れて、もっとわかりやすい路線を狙ったソフトウェア zphoto を紹介する。
zphoto とは?
zphoto *2 はデジタル カメラなどで撮影した写真からオンラインアルバムを生成するため のソフトウェアである。ここでいうオンラインアルバムとは Web 上に公開する写真集のことを指している。
zphotoのWebサイト
Web上に写真を公開したい、という需要は大きく、現在では Yahoo! フォト*3 などのオンラインア ルバムサービスが盛んになってきている。これらのサービスでは、 単にオンラインアルバムを作るだけでなく、アルバムに登録した写 真を高画質でプリントするための有料サービスも行っている。
そんな便利なサービスがあるならそれを使えばいいじゃん、という 気もするが、Unix好きの私としては、コマンドライン一発でオンラ インアルバムを自動生成したいという切実な要求がある。
zphoto の特徴
zphoto を開発する以前は、簡単なシェルスクリプトで HTML を自 動生成していた。しかし、こうして作成したオンラインアルバムには
- 見た目が地味でさみしい
- サムネイル (縮小画像) をいちいちクリックして写真を拡大するのが面倒
という欠点があり、不満を感じていた。そこで、
- 見た目がかっこいい
- サムネイルにカーソルをあわせるだけで写真がなめらかに拡大 (ズーミング) する
という条件を満たすツールが欲しいと考えた。zphoto が生成する オンラインアルバムは次のようなものである。
zphotoが生成するオンラインアルバム
一見、ただサムネイルを升目状に並べただけのように見えるが、気 になる写真の上にカーソルをあわせると、その写真がなめらかにズー ミングする。このとき、写真の右下には撮影日時が表示される。
ズーミング表示
この状態でクリックすると新しいウィンドウが開いてフルサイズの 写真が表示される。
フルサイズの写真を表示
zphoto はズーミングを実現するために Flash *4 の技術を採 用している。Flash とは、アニメーションや音声を用いたマルチメ ディアコンテンツを作成する、Macromedia社のソフトウェアである。 また、Flash で作成したコンテンツのことも Flash と呼ばれる。 zphoto は Macromedia の製品を利用する代わりに、 Ming という フリーソフトウェアを用いて Flash のコンテンツを生成している。 Mingについては後ほど詳しく紹介する。
Macromedia Flash のWebサイト
zphoto のズーミングを楽しむためには Webブラウザに Flash のプ ラグインがインストールされている必要がある。zphoto は Flash を利用できないブラウザのために、Flash を使わないズーミングな しのアルバムも生成する。こちらはいたって普通の HTML で作られ ている。
Flashを使わない版のアルバム
zphoto のインストール
zphoto を利用するには次のソフトウェアをインストールする。
Ming
Ming*5 は Flash の SWF ファ イルを生成するためのライブラリである。
MingのWebサイト
インストールは次のように行う (原稿執筆時点での最新版は 0.2a)。
% gzip -dc ming-0.2a.tgz | tar xvf - % cd ming-0.2a % make % su Password: (rootのパスワードを入力) # make install
普通に make install するとライブラリとヘッダファイルが /usr にインストールされる。/usr/local にインストールしたい場合は 次のように実行すればいい。
# make PREFIX=/usr/local install
SWF のフォーマットは以前は非公開であったが、1998 年 4月に Macromedia から公開されたため、現在は Ming を始めとする各種 ソフトウェアの開発が盛んに行われている。SWFフォーマットに関 する情報は OpenSWF.org*6 に詳し い。
Imlib2
Imlib2 *7 は画像ファ イルを扱うためのライブラリである。インストールは次のように行う (原稿執筆時点での最新版は 1.0.6)。
% gzip -dc imlib2-1.0.6.tar.gz | tar xvf - % cd imlib2-1.0.6 % ./configure % make % su Password: (rootのパスワードを入力) # make install
手元の Red Hat Linux 7.2 の環境では、make の後半で次のような エラーが起きた。
gcc -shared loader_jpeg.lo -L/usr/X11R6/lib -L../src -ljpeg -lImlib2 -lc -Wl,-soname -Wl,jpeg.so -o .libs/jpeg.so /usr/bin/ld: cannot open -lImlib2: No such file or directory collect2: ld returned 1 exit status
この問題は、次のように実行すれば解決する。libImlib2が見つか らないといってリンカーがエラーメッセージを出力しているので、 隠しディレクトリ .libs にあるlibImlib2.so.* をリンカーから見 える場所に強引にコピーしている。
% cd src % cp .libs/libImlib2.so* . % cd .. % make
画像を扱うライブラリとしては他にも ImageMagick*8 や gdk-pixbuf*9、 GD*10 などがあるが、 Imlib2 は
- 画像ファイルの読み書きを手軽に行える
- 画像のサイズ変更の仕上がりが美しい
- ガンマ補正などの画像処理を行える
- 処理が高速
- APIがこなれている
といった利点を兼ね備えている。
popt
popt*11 は コマンドラインオプションを解析するためのライブラリである。 インストールは次のように行う (原稿執筆時点での最新版は 1.6.4)。
% gzip -dc popt-1.6.4.tar.gz | tar xvf - % cd popt-1.6.4 % ./configure % make % su Password: (rootのパスワードを入力) # make install
コマンドラインオプションの解析には getopt 関数が広く用いられ ているが、popt は getopt と比べて
- グローバル変数を一切使わない
- GNU getopt_long と同様に --help などの長いオプションを扱える
- --help と --usage のメッセージを自動生成する
といった利点を持つ。
zphoto
zphoto のインストールは Ming, Imlib2, popt のインストールが 完了した後に行う。インストールは次のように行う (原稿執筆時点で の最新版は 0.3)。
% gzip -dc zphoto-0.3.tar.gz | tar xvf - % cd zphoto-0.3 % ./configure % make % su Password: (rootのパスワードを入力) # make install
make 実行時に Flash 用のフォントをインターネット経由で取 得する。フォントの取得には wget*12 を用 いている。
zphoto の使い方
zphoto はコマンドラインから利用する。zphoto を実行する前に、 アルバムの生成に用いる Webページの雛形と、Flash用のフォントに関す る設定を環境変数で行っておく。
追記: 現在のバージョンではそれぞれコマンドラインオプション --template-dir (-t) と --flash-font (-f) で指定できます。 (2004-03-12)
- ZPHOTO_TEMPLATE_DIR: Webページの雛形のあるディレクトリを指定する
- ZPHOTO_FONT: Flash の作成に用いるフォントを指定する (.fdbファイル)
sh系: % ZPHOTO_TEMPLATE_DIR=/usr/local/share/zphoto/templates/ja % ZPHOTO_FONT=/usr/local/share/zphoto/fonts/Techno.fdb % export ZPHOTO_TEMPLATE_DIR ZPHOTO_FONT csh系: % setenv ZPHOTO_TEMPLATE_DIR /usr/local/share/zphoto/templates/ja % setenv ZPHOTO_FONT /usr/local/share/zphoto/fonts/Techno.fdb
zphoto を使うにはコマンドラインから次のように実行する。
% zphoto -o album *.jpg
この例では、ワイルドカード *.jpg で指定した画像ファイルを読 み込み、album ディレクトリにアルバムを出力する。album ディレ クトリには次のファイルが生成される。
- zphoto.swf: ズーミングするアルバムの Flash
- index.html: ズーミングするアルバムの HTML
- noflash.html: Flashを使わないアルバムの HTML
- zphoto.css: アルバムの Webページ用のスタイルシート
- *.jpg: 公開用の画像ファイル
- tn-*.jpg: サムネイルの画像ファイル
Webにオンラインアルバムを公開するにはこの album ディレクトリ を丸ごと Webサーバにコピーすればいい。
zphoto.swf は内部にすべてのサムネイルを含むため、ファイルは 読み込んだ画像ファイルの数に比例して大きくなる。たとえば、標 準のサムネイルのサイズで、100 枚の写真を元にアルバムを作成し た場合、 zphoto.swf は 1.4 MBになった。
Webブラウザでオンラインアルバムにアクセスすると、 zphoto.swf の読み込みが進むにつれて、段階的にサムネイルが表示される。
サムネイルの段階的な表示
開発当初は zphoto.swf 全体の読み込みが終わるまで何も表示され ないという仕様であったため、待たされる間、ずいぶんイライラし た。段階的に表示するようにしてからはそのイライラは解消した。
この他にも zphoto には、ガンマ補正 *13 の適用や、公開用の画像ファ イルの大きさを変更するといった機能がある。zphotoのコマンドラ インオプションを以下に示す。
Usage: zphoto [OPTION...] FILE... -o, --output-dir=DIR 出力先のディレクトリを DIR に指定する -t, --template-dir=DIR Webページの雛形のディレクトリを DIR に指定する --title=TITLE Webページの <title> を TITLE に設定する -w, --photo-width=WIDTH 写真の横幅を WIDTH でコピーする --flash-width=WIDTH Flash を横幅 WIDTH で作成する --flash-height=HEIGHT Flash を縦 HEIGHTで作成する -f, --flash-font=FONT Flash の作成に用いるフォント FONT を指定する --thumbnail-width=WIDTH サムネイルを横幅 WIDTH で作成する -g, --gamma=GAMMA 写真にガンマ補正を適用する --art アートもどきの出力を行う (アーチョモード) -v, --version バージョン情報を表示する Help options: -?, --help このヘルプを表示する --usage 使い方を簡潔に表示する
Webページの雛形
zphoto を標準的にインストールすると、 /usr/local/share/zphoto/templates ディレクトリ以下に、オンラ インアルバム用の HTML とスタイルシートの雛形が用意される。こ れらのファイルを編集すれば、zphotoが生成する Webページの見た 目を自分の好みに変更できる。
アルバム全体のズーミング
アルバム全体をズーミングするには、 アルバムの表示領域で右ク リックして表示されるメニューの中から「拡大」あるいは「Zoom In」を選べばいい。
アルバム全体をズーミング
アルバム全体のズーミングは Flash プラグインの機能を利用して 実現している。右クリックしてメニューを表示する、という操作は わかりにくいため、ページのフッタ部分には次のような説明を加え ている。
通常のフッター
このフッタ部分の説明は JavaScript で生成している。JavaScript でブラウザの種類を判別して、Windows の Internet Explorer の 場合は、次のようなフッタを生成する。
Internet Explorer 用のフッタ
Windows の Internet Explorer ではこの「拡大」のリンクをクリッ クしてアルバム全体をなめらかにズーミングできる。残念ながら、 他のプラットフォームとブラウザの組み合わせでは難しいようだ。
アーチョモード
アーチョとは、アートのようでいてアートではない、アートもどき のことを指す言葉である。--art オプションを指定すると、なんと なくアートっぽい Flash が生成される。
アーチョモード
マウスの動きに従って、水面の波紋のように、半透明の写真が広がっ ていく。半透明の写真は Flash のアルファチャンネルを使って表 現している。「単にアルファチャンネルが使いたかっただけではな いの?」と言われそうだが、事実その通りである。見た目は美しい が、写真を閲覧するという実用にはまったく向かない。こういった 辺りがアーチョたる所以といえる。
「そこに機能があるから」という理由で機能を闇雲に使ってしまう というこの衝動は、「そこに山があるから」という理由でエベレス トに登った登山家の George Leigh Mallory氏にちなんで「マロリー 病」と呼ばれている。
Ming プログラミング
zphoto の開発は C言語で行っている。これは Ming のパッケージ に含まれている Ruby *14 用のバインディング *15が動かなかったための仕方な しの選択であって、好き好んで Cで書いているわけではない。そう いった事情で、「MingのRubyバインディングが動かないよー」と IRC のRuby のチャンネル %Ruby*16 で騒いでいると、 池上大介氏が Rubyバインディングを作り直してくれた。
Ming／RubyのWebサイト
ここでは、Ming/Ruby *17 を使っ て Ruby で Mingプログラミングする方法を紹介する。
JaMing
Ming/Ruby は、オリジナルの Ming ではなく、goto氏による拡張が 施された JaMing*18 を利 用する。JaMing では、日本語対応および、PCM・ADPCMの効果音を 扱う機能の追加が行われている。JaMingのインストールは Ming と 同様に行う。
jamingのWebサイト
Ming/Ruby のインストール
Ming/Ruby のインストール方法は次のように行う。 (現行執筆時点での最新版は 0.1.0)。
% gzip -dc ming-ruby-0.1.0.tar.gz | tar xvf - % cd ming-ruby % ruby install.rb config % ruby install.rb setup % su Password: (rootのパスワードを入力) # ruby install.rb install
サンプルプログラム
紹介するサンプルプログラムは、
- ビットマップ画像 migemo.jpg を貼りつけたボタンを表示して
- マウスカーソルがボタンの上にくると画像を点滅させ
- ボタンをクリックするとブラウザの新しいウィンドウを開いて http://namazu.org/ のページを表示する
という Flash を生成して sample.swf というファイルに書き出す ものである。コマンドラインから
% ruby ming-sample.rb
と実行すると sample.swf が生成される。Flash を再生するにはブ ラウザで sample.swf を開けばいい。
require 'ming/ming'
include Ming
class SampleFlashCreator
def initialize (image_filename, flash_filename, url)
@bitmap = SWFBitmap.new(image_filename)
@width = @bitmap.get_width
@height = @bitmap.get_height
@flash_filename = flash_filename
@url = url
end
# ビットマップ画像で塗り潰した四角形を作成する
def create_image
shape = SWFShape.new
shape.set_right_fill(shape.add_fill(@bitmap))
shape.draw_line(@width, 0)
shape.draw_line(0, @height)
shape.draw_line(-@width, 0)
shape.draw_line(0, -@height)
return shape
end
# 点滅するアニメーションを作成する
def create_anim
image = create_image
sprite = SWFSprite.new
item = sprite.add(image)
nframes = 5 # 点滅の半周期のフレーム数
make_frame = lambda {|i|
# 透明度を変化させて点滅を表現する
item.mult_color(1.0, 1.0, 1.0, i.to_f / nframes)
sprite.next_frame
}
1.upto(nframes) {|i| make_frame.call(i) } # だんだん濃く
nframes.downto(1) {|i| make_frame.call(i) } # だんだん薄く
return sprite
end
def create
image = create_image
anim = create_anim
button = SWFButton.new
# ボタンの領域を定義
button.add_shape(image, SWFBUTTON_HIT)
# マウスカーソルがボタンの外にあるときは静止画を表示
button.add_shape(image, SWFBUTTON_UP)
# マウスカーソルがボタンの上にあるときは点滅する動画を表示
button.add_shape(anim, SWFBUTTON_OVER)
# ボタンをクリックされたときは @url を新しいウィンドウで開く
button.add_action(SWFAction.new("getURL('#{@url}', '_blank');"),
SWFBUTTON_MOUSEUP)
movie = SWFMovie.new
movie.set_dimension(@width, @height) # Flashのサイズ
movie.set_rate(30.0) # 毎秒30フレームに設定
movie.add(button)
movie.save(@flash_filename)
end
end
creator = SampleFlashCreator.new('migemo.jpg',
'sample.swf',
'http://namazu.org/')
creator.create
Mingプログラミングの基本
Ming プログラミングの基本は大ざっぱに次のようにまとめられる。
- アニメーションを作成する
- SWFShape や SWFText で図形やテキストの部品を作成し
- SWFSprite に部品を貼りつけてアニメーションを作る
- ボタンを作成する
- SWFAction で ActionScript のコードを作成し
- SWFButton に ActionScript のコードを貼りつけてボタンを作る
- SWFMovie にアニメーションとボタンを貼りつけて Flash を生成する
マウスカーソルの動きに従ってアニメーションを変化させたり、ボ タンをクリックしたときにブラウザの新しいウィンドウを開くといっ た対話的な処理は ActionScript*19 のコードを Flash に埋め込んで実現する。 ActionScript を活用すれば、Ming を使ってブロック崩しのような ゲームを作ることもできる。
とはいうものの、ゲーム開発のような用途では、Ming を使うより も製品版の Macromedia Flash を利用した方が開発効率が高い。 Ming が真価を発揮するのは、Macromedia Flash ではやりづらい、 入力データを読み込んで Flash を自動生成するという用途である。 Ming/Ruby の作者の池上氏は、簡単なテキストファイルからプレゼ ン用の Flash を自動生成するソフトウェア Ming/Slide *20 の開発を行っている。
Ming／Slide
Flashで作成したプレゼン資料は、そのまま Web 上に公開するだけ で、大抵のプラットフォームで閲覧できるという点が優れている。
boblay: Ming 以前
Ming の存在を知る以前に boblay *21 というツールを触っ ていたとがある。boblay は、 PostScript からアニメーション GIF を生成する、大和正武氏によって開発されたツールである。 Flashほどの自由度はないが、PostScript の表現力を活かした高品 質のアニメーションを生成できる。私はこれを「貧乏人のための Flash (poor man's Flash)」と呼んで、しばらく使っていた。
PostScriptマニアであるとともに Lispマニアでもある大和氏は、 Lispの括弧の多さをネタにしたアニメーションを作成し、Lisp愛好 家の間で好評を博した。私もこれに対抗していくつかアニメーショ ンを作ってみたものの、Ming が使えるようになった現在では、私 も大和氏も boblay を使う理由はなくなってしまった。
boblay
boblay
boblay
boblay
boblay
boblay
boblay
boblay
boblay
boblay
boblay
boblay
boblay
boblay
boblay
boblay
zphoto の誕生
zphoto を作ろうと最初に思い立ったとき、JavaScript を使えばな んとかなるだろう、と考えた。JavaScript でプログラムを書いた ことはそれまでに一度もなかったが、Web上に転がっているサンプ ルに手を加えれば、ズーミングするオンラインアルバムくらいすぐ に作れるだろうと甘く見ていたのである。
手始めに、画像をスムーズに拡大する JavaScript のサンプルを入 手して、これに手を加えることにした。カーソルを合わせると画像 が拡大するという処理は簡単に書けることがわかったので、今度は 画像をたくさん並べるにはどうすればいいかを考えた。
HTML で画像を並べるには、table タグを用いて、表として画像を 配置にすればいい。しかし、表に画像を並べた状態でひとつの画像 を拡大すると、表のレイアウトが崩れて周囲の画像が一斉に動くた め、気が散ってしまって写真の閲覧などとてもできないことがわかっ た。
元の状態
拡大すると周りも動く
拡大すると周りも動く
とはいうもののの、ひとつの画像を拡大するとつられて周りも一斉 に動くという挙動は、見ている分にはおもしろい。そこで、「なま ず君」という私が描いたキャラクタを、ポップアーティストの Andy Warhol風にカラフルに並べて、「ズーミングなまず君」とい うページ *22 を作っ た。
ズーミングなまず君
ズーミングなまず君 その2
カラフルななまず君は ImageMagick の convert コマンドを使った シェルスクリプト warhol で自動生成した。-modulate オプション を使って画像ごとに色相をずらしている。
% warhol namazu.png
warhol:
#! /bin/sh convert -modulate '100,100,20' $1 `basename $1 .png`-1.png convert -modulate '100,100,40' $1 `basename $1 .png`-2.png convert -modulate '100,100,60' $1 `basename $1 .png`-3.png convert -modulate '100,100,80' $1 `basename $1 .png`-4.png convert -modulate '100,100,100' $1 `basename $1 .png`-5.png convert -modulate '100,100,120' $1 `basename $1 .png`-6.png convert -modulate '100,100,140' $1 `basename $1 .png`-7.png convert -modulate '100,100,160' $1 `basename $1 .png`-8.png convert -modulate '100,100,180' $1 `basename $1 .png`-9.png
マウスをぐりぐりと動かすと、カラフルななまず君が拡大縮小しな がらうねうね動くというだけのたわいもないページだが、一発ネタ としてはなかなか好評だった。普通の人に見せると「ちょーウケ るー」などという反応が返ってくるのに対し、プログラマに見せる と「どうやってるの? どうやってるの?」としか訊かれなかったの が印象に残っている。
ズーミングなまず君を作る過程では JavaScript の互換性にうんざ りさせられた。事実、私が書いた JavaScript のコードは Mozilla 1.0 または Netscape 7.0 でしか動かない。そういった理由で、 zphoto を JavaScript で実現するという方針を早々にあきらめ、 Ming を使って Flash を生成することに決めた。
おわりに
今回は、ズーミングするオンラインアルバムを作るツール zphoto を取り上げ、Ming を使って Flash を生成する方法を紹介した。
Flashが流行り始めた当初は、派手な Flash を無駄に使った Webサ イトをよく目にしたが、最近では効果的に Flash を使っている Web サイトが増えてきている。そういった背景から、「Flash 99% 有害説」 *23 を 主張していた Webユーザビリティ専門家の Jacob Nielsen氏も Macromedia と契約を交して Flash 陣営に加わったそうだ。みなさ んも Ming を使って効果的な Flash を作成していただきたい。
なお、本連載で作成したプログラムのソースコードは筆者 のページ*24 から入手可 能である。