PR

外部API(Flickr)を試す!

2008年6月28日(土)
林 豊

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内で行います。

有限会社ムーニーワークス
有限会社ムーニーワークス 代表取締役。大学卒業後、医療系会社情報企画室にてCD-ROM、Web、ストリーミングなどのマルチメディアコンテンツの制作を担当。その後フリーランスのWebディレクター/デザイナーとして独立し、2001年(有)ムーニーワークス設立。デジタルハリウッドスクール講師、デジタルハリウッド大学院客員教授、明治大学院兼任講師。有限会社ムーニーワークス:http://www.moonyworks.com/

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています