リクルートWEBサービスで公開しているホットペッパーBeautyのAPIには、長さマスタとイメージマスタという、髪の長さから店名を選べたり、また「フェミニン」や「エレガンス」等のイメージから美容院が検索できちゃうマスタがあります。
今回は、このマスタを使って、長さ×イメージ検索を作れないかなと思い、簡単なサンプルを作成してみました。

「feeling search」
※要flashplayer9

上のグリッドが長さと雰囲気のマトリックスになっていて、そこをクリックすると、長さとイメージにあった美容院が下に表示されるという仕組みになっております。
う〜ん。自分で書いていてもマトリックスのUIがまだまだイケてないですね。。。

まずホットペッパーBeautyのAPIを利用してみる。

今回は、プルダウンメニューではなく、できればレーダーチャート的なモノから検索させたいのと、個人的にかなり出遅れているAS3.0の勉強もしてみたかったので、Flashで作ってみる事にしました。 開発環境は、FlexBuilderで開発しました。

AS3.0に関してはこのサンプルを作るまで触った事も無いに等しかったので、まだまだ試行錯誤で書いていますので、コード的におかしい部分はご了承下さい。

まず、ファイル自体は4つのファイルで構成されています。

Main.as(XMLのパースやらパーツとなる部分を統合するソース)

Circle.as(リクエストを呼び出すボタン＝トリガー)

Thumb.as(表示されるサムネル)

ThumbImage.as(サムネイルに格納される画像)

となっております。

このAPIを使う上で重要になる、Main.asでは、

package {
import flash.display.*;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.*;
import flash.system.Security;
import flash.system.SecurityPanel;
import caurina.transitions.Tweener;
import flash.events.EventDispatcher;
//クロスドメインの設定
Security.loadPolicyFile("http://webservice.recruit.co.jp/beauty/crossdomain.xml");

public class Main extends Sprite {

   public function Main() {

　stage.scaleMode = StageScaleMode.NO_SCALE;

　stage.align = StageAlign.TOP_LEFT;

　var BOX : Sprite = new Sprite();

　var gridbase01 : gridbase;

　var iconAry : Array = new Array(20);

　var xmlData : XML = new XML();

　var loader : URLLoader = new URLLoader();

　var param1 : String = "&hair_length=1";

　var param2 : String = "&hair_image=6";

　var a1b1:Circle;

　var base01:String = "http://webservice.recruit.co.jp/beauty/salon/v1/?key=APIキー&count=20&middle_area=AD&hair_length=";

　var base02:String = "&hair_image=";

　a1b1 = new Circle();

　a1b1.x = 54;

　a1b1.y = 34;

　a1b1.buttonMode = true;

　a1b1.useHandCursor = true;

　addChild(a1b1);

　a1b1.addEventListener(MouseEvent.CLICK,Fa1b1);

　function Fa1b1() : void{

　　var param1: Number = 1;

　　var param2: Number = 1;

　　paramLoader(base01+param1+base02+param2);

　}

　function paramLoader(url:String) :void{

　　BOX = new Sprite();

　　BOX.x = 0;

　　BOX.y = 100;

　　addChild(BOX);

　　loader.addEventListener(Event.COMPLETE, xmlCompfunc);

　　var request:URLRequest = new URLRequest(url);

　　trace(url);

　　loader.load(request);

　　}

　　function xmlCompfunc(event:Event):void {

　　　namespace ns = 'http://webservice.recruit.co.jp/beauty/';

　　　use namespace ns;

　　　var results:XML = new XML(loader.data);

　　　for (var i : int = 0; i < results.salon.length(); i++){

　　　　iconAry[i] = new　Thumb(results.salon[i].main.photo.l,results.salon[i].name,results.salon[i].urls.pc,i);

　　　　iconAry[i].x = i* 182;

　　　　iconAry[i].y = 0;

　　　　BOX.addChild(iconAry[i]);

　　　}

　　　addChild(BOX);

　　}

　}

}

}

というようになっております。

AS3ならではの注意点

ここで気を付けたいポイントが2点あります。
クロスドメインの回避と、XMLのネームスペースの問題です。
クロスドメインのに関しては、importした後に、

Security.loadPolicyFile("http://webservice.recruit.co.jp/beauty/crossdomain.xml");

として、クロスドメインの位置を指定してあげます。

次に、ネームスペースに関してですが、こちらは返ってくるXMLにネームスペースが含まれているとパースできなかったので、

function xmlCompfunc(event:Event):void {

namespace ns = 'http://webservice.recruit.co.jp/beauty/';

use namespace ns;

という形でXMLに含まれてているネームスペースを指定してあげる事で回避できます。

ただ、まだこれが本当に一番良い方法なのか自分でも試行錯誤しながらやっているので、もしもっと良い方法が見つかれば是非ともまたシェアさせて頂きたいと思っています。

ソースコード

こちらのサンプルには画像等色々不要なものも含まれているので、シンプル版を、

[ 利用規約に同意の上ソースコードをダウンロード ]

よりダウンロードできるようにしておきました。

※またサンプルでは別途tweenerという便利なアニメーションのライブラリを利用しているので、tweenerをこちらからダウンロードしてrootに配置して頂く必要があります。

今回のサンプルの作成にあたって

また、今回サンプルに関しては、cesare様が公開されていたソースをベースに作らせて頂きました。

非常に分かりやすいチュートリアルになっているので、APIを呼ぶ所以外では、cesare様のサンプルを見て頂くとより理解が深まると思います。

cesare様、有益なソース及びチュートリアルの公開、ありがとうございます！

このサンプルも、まだまだちゃんとユーザーの方々に使って頂けるようなサービスにできるように、現在進行形で進めておりますので、アドバイス等も頂けると助かります！