Flashが使えるようになってきたら

Flashを自在に扱えるようになってくると、何か自分でオリジナルのものを作ってみたくなる。魅力的なインタフェース、小粋な動きをするボタンなど、アイディアを形にしたくなる。様々なシュチュエーションが浮ぶが、"何"を題材にFlashを使うのか、表現したいものはあるけれど、ネタに困るというのは良くある話だ。そんな時もうワンステップ、アイディアと表現の幅を広げてくれるのがAPIだ。

APIって何?

APIとは、"Application Program Interface"の略で、明確な概念や定義はWikipediaなどにまかせる。ざっくりと説明してしまうと、それは既に誰かが組みあげたプログラムの切れ端だ。例えば、有名な写真共有サービスFlickrのAPIなら、

・人気写真取得

・写真ごとの緯度経度管理

・自分のお気に入り写真の取得

など、Flickrのサービスの一端を、APIにアクセスすることで取得することができる。Flickrは独立したWebサービスだが、APIを使えば上記のような機能や写真を自分のホームページやBlogに導入することできる。もちろん、Flashでも利用可能だ(Flashから直接APIを利用できないサービスもある)。

APIは難しい?

「サービス名 ＋ API」というキーワードで検索してみると、たくさんの検索結果が出てくるだろう。様々な人たちがBlogやコラムなどで解説をしているが、たとえば 「http://flickr.com/services/auth/?api_key=API_KEY&perm=write&api_sig=SIGNATURE」などという表記や、「ユーザ」は「サービス」にトークンを発行し、そのトークンを使って…というような文言を見ると難しく感じてしまうかもしれない。

しかも、自分の思い通りに使えるようにちょっとしたコツを掴むのも骨が折れる作業だ。「Flickrで東京の猫写真をどんどん表示するFlashが作りたい!」と思っても、APIの認証方法を調べ→"猫"の検索結果を取得し→東京の近くで撮られた写真をフィルタリングして…というようになかなか根気のいる作業が待ってる。

ここまで来ると、Flashが組めるだけでなく、ちょっとしたプログラマーにならないといけないと思う方もいて、ますます敷居は高くなるように感じるかもしれない。

もしかすると、ココまでの話しなら、既にトライした方もいるかもしれない。この"ちょっと敷居が高くて、しかも時間がかかりそうな作業"をサクっと簡単に作れてしまうサービスがある。それが、Yahoo!Pipesだ。

Yahoo!Pipesとは

Yahoo!Pipes(以下Pipes)は、米Yahoo!で提供されているサービスで、複数のRDFフィードを統合して出力したり、フィルタリング(○○を省く等)が出来るようになっている。似たような物にPlaggerというPerlのフレームワークがあるが、Pipesではフィードの入力・取得、フィルタリング、出力・通知系の機能があらかじめ用意されている。一切のプログラミングを必要としないGUIも魅力の一つだ。特定の機能を持ったモジュールをドラッグ&ドロップで配置し、パイプで繋げるというGUIベースで自分好みの新しいフィードを簡単に作成できる。たとえば、下記は最もシンプルな例で、RSSを読込み、最新5件を変更して出力するフィードだ。

例ではクーピーのBlogサイトから最新5件のエントリーを表示。リンクはこちら 。ただし米yahooのIDが必要。RSSはこちら

Pipesで出力したRSSをFlashで読み込む

Pipesで作ったMyPipesは公開することで、parmlinkで簡単にアクセスできるようになる。このアドレスをFlashのXMLクラスでロードし、アイディアに沿ったビューを作っていく流れとなる。

var url = "http://pipes.yahoo.com/pipes/pipe.run?_id=NgNjubj_2xGTDDZbzKky6g&_render=rss";
var _xml:XML = new XML();
_xml.ignoreWhite = true;
_xml.load(url);

XML読込みのコードはこれだけだ。これで、pipesからのデータをFlashに読み込む事ができる。

Pipesにはデフォルトで以下の5つのソースがある。

・Yahoo! Search　米ヤフーの検索結果

・Yahoo! Local　米ヤフーの地域情報

・Fetch　指定したRSSやAtomなどのRDFフィード

・Google Base　Google Baseの検索結果

・Flickr　指定した条件で検索されたFlickrの画像

この他に、URL Builderモジュール・TextInputモジュール・Queryモジュールを組み合わせてアクセスし、結果をFetchモジュールで読み込む事で、様々なサービスのAPIを読み込んでくる事ができる。

上記のモジュールを組み合わせ、ソーシャルブックマークサービスdel.cio.usからアイテムを読み込むPipes。リンクはこちら

ちなみに、DUMP2は他のユーザーが作ったPipesで公開されているものだ。パブリックに共有されているPipesは、そのまま使う事もできるし、コピーしてMyPipesとして編集しなおす事も可能だ。自分のアイディアだけでなく、人のアイディアをさらに書き足していくのも楽しみの一つだろう。

実際に作ってみる

【アイディア】 上の例で上げた、「Flickrで東京の猫写真をどんどん表示するFlashが作りたい!」をアイディアにしてみよう。

【Pipes】 Flickrをソースに選択し、"cat"で検索。locationにtokyoを入力し、結果データ20件を取得する。

あんまり東京のネコが出ないが…リンクはこちら。 RSSはこちら

これをベースに、子猫画像をどんどん読み込んで表示する簡単な写真スライドショーを作成した。

ソース一式をこちらに置いておくので、参考にしてほしい。tokyoCat.swfをクリックして再生できない場合、アラートが出たら設定をクリック、[グローバルセキュリティ設定] パネルのプルダウンメニューから「追加」を選び ダウンロードしたフォルダを指定すると再生可能になる。

内容は、非常にシンプルで、XMLをロードし、ロードした各ノードの画像を順番に表示していくもの。最後までいったら最初に戻る、永久ループで子猫を眺めるだけのFlashだ。

上記で上げたサンプルは、Pipesで出力されたFlickrの結果データなら共通で動作するように作られている。サンプルのXML読込み先URL(Pipesの結果データ)を変えるだけで、新たなPhotoViewerに変化する。

Flickrだけでも様々なアイディアがあると思うので、皆さんには是非遊んでみていただきたい。

提供:マイナビ派遣

会員登録はこちら

「Flashの技術を活かせる仕事に就きたい」「Webサイトの企画から携わりたい」 「あの人気サイトの仕事がしたい」「もっと収入を増やしたい」 「正社員になることを視野に入れて働きたい」・・・ そんなあなたに…どこよりも詳しく新鮮な派遣情報サイト「マイナビ派遣」! 「サクッと検索」をはじめとした充実した検索機能と1日5回の更新で、 あなたのスキルや希望する働き方に合ったお仕事情報がきっと見つかります! 無料の適性診断テストも大好評実施中です!

毎日コミュニケーションズはプライバシーマークを取得しています。