TOPシステム開発【現場で使える!Flash】5分でわかる!Flash最新TIPS> 第4回:外部API(Flickr)を試す! (1/3)




【現場で使える!Flash】5分でわかる!Flash最新TIPS

【現場で使える!Flash】
5分でわかる!Flash最新TIPS

第4回:外部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サイトの大幅な速度向上が見込まれる中で、実験的に制作した弊社の特設サイトを例に、ActionScript2.0まででは困難だった表現などを取り入れつつ、FlickrAPIのみに重点というよりも、FlickrAPIを使ったActionScript3.0式サイト構築という視点で解説していきます。
図1:特設サイトのクラス図
(画像をクリックすると別ウィンドウに拡大図を表示します)

クラス設計をする
 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/

この記事の評価をお聞かせください
ボタンをクリックしますとウインドウが開きます。
ご意見、ご要望にお応えします! インプレスIT INSIDE

INDEX
第4回:外部API(Flickr)を試す!
-> ActionScript3.0とAPI
  FlickrAPIにつなげてみる
  クロスドメインポリシーファイル
【現場で使える!Flash】5分でわかる!Flash最新TIPS
第1回 物理エンジンライブラリ「APE」を試す!
第2回 「Box2DFlashAS3」を試す!
第3回 「Papervision3D」を試す!
第4回 外部API(Flickr)を試す!
関連記事
現場で使える!Flash
これならわかる!JavaScript/Ajax
即実践!HTML+CSS
Webデザイナは知っていた

Think IT 過去人気記事

注目おすすめ情報

Think IT人気ライター BEST 5