« Urban Ninja | DEEP KICK.com Blog | フリーランスのパートナー募集します »

2006年5月 7日

Flash Creative Technique - vol.49
XMLと連携したフォトギャラリー

このエントリーをはてなブックマークに追加

2006年6月号web creators 2006年6月号の「Flash Creative Technique」のテーマに「XMLと連携したフォトギャラリー」を取り上げてみた。

サンプルコンテンツできあがりのサンプルはこちらをクリック。

Mac OS Xに付属している「iPhoto」のようにアルバムごとにサムネイルが表示され、サムネイルを選択するとメインの画像が表示されるようなフォトギャラリーをFlashで制作してみた。アルバムと写真はFlash内部ではなく、外部のXMLドキュメントで管理されており、swfファイルはXMLドキュメントを読み込んで、アルバムの情報や画像のパスを取得して解析し、表示する仕組みとなっている。Flash単体ではなく、このように設計するメリットは、インターフェイスとコンテンツ管理を分離することにより、Flashを通さなくてもコンテンツの更新を可能にする点にある。XML以前によく使われていたのが、「変数A=値&変数B=値&変数C=値....」のように記述した外部テキストファイルから変数を読み込む手法だ。しかしこの方法で今回のサンプルのようなフォトギャラリーを制作しようとすると、できなくはないかもしれないが、かなり無理があることがわかる。XMLドキュメントを設計し、それを解析したほうがスマートなものが制作できるだろう。そのあたりについて今回の連載では解説しているので興味のある方は、そちらを読んでほしいわけだが、Flashに関する連載ということでXML自体に関する説明を紙面で十分にすることが難しかったので、ここでは今回設計したXMLドキュメントについて若干補足してみたい。

XMLドキュメントはご存知の方も多いと思うが、通常のテキストファイルで記述されており、さまざまな文字コードが使われるが、一般的にはUTF-8で記述されることが多い。サンプルでもUTF-8を使用している。 アルバム情報を定義している「アルバムタイトルxml」を見てみよう。

<?xml version="1.0" encoding="UTF-8"?>
<albums>
<albumData albumTitle="アルバムを選択してください" albumXml="xml/albums/default.xml" />
<albumData albumTitle="ニュージーランド北島 2005.8" albumXml="xml/albums/nz200508.xml" />
<albumData albumTitle="台湾 2005.3" albumXml="xml/albums/taiwan200503.xml" />
<albumData albumTitle="沖縄 2004.12" albumXml="xml/albums/okinawa200412.xml" />
<albumData albumTitle="ニュージーランド南島 2003.12" albumXml="xml/albums/nz200312.xml" />
</albums>

1行目にあるのはXML宣言。エンコードはUTF-8であることを明記。
全体を
<albums> ? </albums>
で囲んでおり、その中に
<albumData" /> タグ
が記述されており、属性に[albumTitle]と[albumData]を持つ構造となっている。
必ずしもこのように記述しなければならない理由はない。XMLドキュメントはルールを守っていれば、どのようにタグを設計してもかまわないので、サンプルを作成するにあたってたまたまこのように設計しただけである。

これが実際のフォトギャラリーでどのように生かされているかというと、サンプルの左上「アルバム選択コンボボックス」に反映されることになる。<albumData" /> タグ属性の[albumTitle]と[albumData]はセットになっており、コンボボックス内のアルバムの名称とアルバム別の情報が記述された「画像xml」のパスが呼び出される。逆に言えば、このように反映させたいから上記のXMLドキュメントを設計したと考えるべきだろう。

で、このXMLをどうやってswfに取り込むかだが、それについては雑誌のp90で解説しているので、そちらを参照してみよう。解説になってない?なかなか大変なんよ、解説するのって。

テクノラティ タグ検索:

投稿者 kaoru : 2006年5月 7日 13:07

このエントリーをはてなブックマークに追加

contents
about
contact
Photo Gallery
blog
iPhone/iPad アプリ
Kindle book
portfolio