外部API(Flickr)を試す!
ActionScript3.0とAPI
2年前辺りから、APIを使ったサイトがたくさん出現しました。「マッシュアップ」なんて言葉も流行り、APIはWeb業界にとって身近な存在となりました。よく知られるものとして、Google、Yahoo!、Amazon、そして今回使用するFlickrなどがあります。
そもそも、ActionScript3.0で大きく変わったところは2つあります。
1つ目は、機能の整理整頓です。わかりやすいところで言うと、今までMovieClipに集約されていた機能が分担、整頓されてすっきりしました。これによりメモリまわりの負担が減り、速度向上に貢献しています。
2つ目は、XMLまわりの機能強化です。ECMAScript for XML(E4X)を実装しています。今までのXMLの解析では、XPathを使わない限りはわかりづらいプロパティやメソッドを使っていましたが、ActionScript3.0では、オブジェクトの階層をたどる様に直感的に操作できます。ほとんどのAPIはXMLの解析と操作が主なので、これは大変楽になりました。
そんなFlashサイトの大幅な速度向上が見込まれる中で、実験的に制作した弊社の特設サイト(http://www.moonyworks.com/2008)を例に、ActionScript2.0まででは困難だった表現などを取り入れつつ、FlickrAPIのみに重点というよりも、FlickrAPIを使ったActionScript3.0式サイト構築という視点で解説していきます。
クラス設計をする
ActionScript3.0ではクラスを使ってサイトを構築することで本当の威力を発揮します。オブジェクトを機能ごと(asファイルごと)に区切ることで更新、管理のしやすさ、後のロジックの再利用まで簡単になります。
まず、大まかですが機能とデータの流れを洗い出します。
1.各種設定データ、画像などのロード
2.FlickrAPIにつなげて必要な画像、情報を検索
3.Flash内で適切に成型して格納・保持
4.必要画像データをロード
5.仮想3D空間を実装
6.各種展開アニメーション
洗い出した結果、今回の特設サイトの大まかなクラス図はこんな感じです。
まず、パッケージの分け方ですがJavaなどによく使われるMVCモデルの概念を参考に、controller(サーバ通信・ViewとModelを制御)、model(データの成型と格納)、view(表示関連)、util(各種機能ツール)という感じに役割を切り分けて実装していきます。
実験サイトではFlickrのほかにも画像参照にxmlを使ったデータベースを利用しているので、指揮の役割、つなぐ役割、保持する役割をそれぞれ分担しています。
FlickrAPIに関連するところはcontroller、model、utilが絡みます。仮想3D空間やアニメーションロジックはutilを用いてview内で行います。