「ホットペッパーWebサービス」の「グルメサーチAPI」を利用して店舗情報を取得してきました。「グルメサーチAPI」では、URL"http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key=****************"の"key=****************"以降の部分で検索クエリの値を設定します。

これまでは、"large_area（大エリアコード）"を"Z011（東京）"、"count（1ページあたりの結果表示数）"を"12"とし、常に固定値でリクエストを行なっていました。

この後の手順で、「ユーザーがコンボボックスで選択した検索条件」で店舗情報を取得するようにして、幹事さん想いの（？）アプリケーションに仕上げていきたいと思います。

考え方としては、URLの"key=****************"以降の部分の検索クエリを「ユーザーがコンボボックスで選択した検索条件の値」とするため文字列連結を行い、店舗情報取得に必要なURL文字列を完成させてリクエストをする、ということを行ないます。検索条件は、「エリア情報」、「ジャンル」、「予算情報」の3つとします。まずは、それぞれの検索条件となる値をそれぞれ「大エリアマスタAPI」、「ジャンルマスタAPI」、「検索用予算マスタAPI」から取得して、コンボボックスに表示させる手順を行ないます。

（※）検索クエリなどの詳細は、「ホットペッパーWebサービス」の「APIリファレンス」をご参照ください。

Flash CS3 Professionalを起動します。
第３回で作成した「Hotpepper03.fla」を開きます。
別名で保存しなおします。ここでは、「Hotpepper04.fla」というファイル名にします。
以下のようにリクエスト先APIのURLを変更します。
「Script」レイヤーのフレーム1:

        var url:String = "http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key=****************&large_area=Z011&count=12";
    

を

        var url:String = "http://webservice.recruit.co.jp/hotpepper/large_area/v1/?key=****************";
    

に変更します。

「Script」レイヤーのフレーム1内の変数「url」を全て「area_url」に変更します。すると最終行が

loadXML(area_url);

となり、リクエスト先のURLが変更されます。

XMLの読み込みが完了した時に呼ばれる関数名を変更します。関数loadXML内のaddEventLitenerの第2引数のリスナー関数名を「xmlCompfunc」から「xmlCompfunc_area」に変更します。

        function loadXML(area_url:String) :void{
	loader.addEventListener(Event.COMPLETE, xmlCompfunc_area);
	loader.load(request);
}
    

（※）関数「xmlCompfunc_area」は、次の手順で作成します。

エリア情報を表示する

では、取得したエリア情報をコンボボックスに表示してみましょう。

ライブラリに[コンボボックス]コンポーネントを追加します。

コンボボックスの名前を宣言するActionScriptを追加します。
「Script」レイヤーのフレーム1:

var myCB_area:ComboBox;

XMLの読み込みが完了した時に呼ばれる関数「xmlCompfunc_area」を作成します。コンボボックス（インスタンス名：cb）のサイズ、データ、座標を設定します。以下のActionScriptになります。

        function xmlCompfunc_area(event:Event):void {
	namespace ns = 'http://webservice.recruit.co.jp/HotPepper/';
	use namespace ns;
	var results:XML = new XML(loader.data);
	var cb:ComboBox = new ComboBox();
	cb.setSize(100,24);
	cb.prompt = "エリア選択";
	var j:int;
	for(j=0; j < results.large_area.length(); j++){
	var itemObj:Object = new Object();
		var itm : Object = results.large_area[j];
		itemObj.label = String(results.large_area[j].name);
		itemObj.data = String(results.large_area[j].code);
		cb.addItem(itemObj);
	}
	addChild(cb);
	cb.y = 3;
	cb.x = 50;
	myCB_area = cb;
}
    

ここまでを実行してみましょう。
コンボボックスをクリックするとエリアが表示されました！

コンボボックスと背景の画像が重なってしまっていますね。ちょうどよい位置に調整してください。

また、コンボボックスをクリックし、リストを表示させた状態でドラッグしたり、コンボボックスのスクロールバーをドラッグすると、ウィンドウも動いてしまいますので修正しましょう。
「dish&Chopstick」レイヤーの上に新しく「window」レイヤーを作成します。
新規シンボル「window_mc」（ムービークリップ）を作成します。ムービークリップ内にコンテンツと同じサイズ（700×500）の矩形を描きます

「シーン１」に戻り、インスタンス名も「window_mc」とし、そのムービークリップのプロパティで、アルファを「1」に設定します。透明なムービークリップが作成されます。

ActionScript

stage.addEventListener(MouseEvent.MOUSE_DOWN, windowMove);

を

window_mc.addEventListener(MouseEvent.MOUSE_DOWN, windowMove);

に変更します。これで、リストを表示した状態でドラッグしても、ウィンドウ自体は動かなくなりました。

ジャンル・予算情報を取得・表示する

同じように、ジャンル・予算情報を取得・表示します。

URLLoaderクラスのインスタンスを作成します。
「Script」レイヤーのフレーム1:

        var loader_genre : URLLoader = new URLLoader();
var loader_budget : URLLoader = new URLLoader();
    

URLを追加します。

        var genre_url:String = "http://webservice.recruit.co.jp/hotpepper/genre/v1/?key=****************";
var budget_url:String = "http://webservice.recruit.co.jp/hotpepper/budget/v1/?key=****************";
    

URLRequestクラスのインスタンスを作成します。

        var request_genre:URLRequest = new URLRequest(genre_url);
var request_budget:URLRequest = new URLRequest(budget_url);
    

コンボボックスの名前を宣言します。

        var myCB_genre:ComboBox;
var myCB_budget:ComboBox;
    

先ほど作成した関数「xmlCompfunc_area」の最後に、次のジャンル情報を取得するためのActionScriptを追加します。

load_Genre_xml(genre_url);

これで、エリア情報の表示を設定した後に、ジャンル情報の読み込みを開始します。

以降の処理はエリア情報と同じです。
それぞれのXMLの読み込みを開始する時に呼ばれる関数名や、取得した情報を表示する処理を行う関数名、コンボボックスの設定は、下記を参照してください。

関数名

XMLの読み込み開始時に呼ばれる関数名情報を表示する関数名

ジャンル load_Genre_xml xmlCompfunc_genre

予算 load_Budget_xml xmlCompfunc_budget

コンボボックスの設定

prompt x y

ジャンルジャンル選択 170 3

予算予算選択 290 3

	XMLの読み込み開始時に呼ばれる関数名	情報を表示する関数名
ジャンル	load_Genre_xml	xmlCompfunc_genre
予算	load_Budget_xml	xmlCompfunc_budget

	prompt	x	y
ジャンル	ジャンル選択	170	3
予算	予算選択	290	3

【検索ボタンを作成する】

各コンボボックスの作成が終了しましたので、コンボボックスで選択したアイテムを条件に検索できるようにしてみましょう。まずは、「検索」ボタンを作成します。

「container」レイヤーの上に新しく「search_btn」レイヤーを作成します
[button]コンポーネントを「min_btn」の左側に配置します。インスタンス名を「button01」にします。

ActionScriptを追加します。
「Script」レイヤーのフレーム1:

        button01.label = "検索"
button01.setSize(80,24);
    

これで、「検索」ボタンが作成できました。

【検索を行う】

では、検索を行いましょう。

まずは、エリア・ジャンル・予算から、どれが選択されているか、変数に設定します。以下のActionScriptを追加します。
「Script」レイヤーのフレーム1:
エリア用ActionScript

        function get area01():String {
	if( myCB_area.selectedItem ){
		return myCB_area.selectedItem.data;
	}
	return "";
}
    

ジャンル用ActionScript

        function get genre01():String {
	if (myCB_genre.selectedIndex > 0){
		return myCB_genre.selectedItem.data;
	} else {
		return "";
	}
}
    

予算用ActionScript

        function get budget01():String {
	if (myCB_budget.selectedIndex > 0){
		return myCB_budget.selectedItem.data;
	} else {
		return "";
	}
}
    

「検索」ボタンがクリックされた時の処理を作成しましょう。以下のActionScriptを追加します。

        var url2 : String;
button01.addEventListener(MouseEvent.CLICK,clickk);
function clickk(e:Event):void{
	url2 = "http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key=****************&count=12	&large_area=" + area01 + "&genre=" + genre01 + "&budget=" + budget01;
	loadXML2(url2);
}
		  
    

選択されたエリア、ジャンル、予算をURLに文字列連結して、リクエストを行ないます。

URLLoaderクラスのインスタンスを作成します。

var loader_result : URLLoader = new URLLoader();

XMLの読み込みが完了した後の処理を追加します。

        function loadXML2(url2:String) :void{
	loader_result.addEventListener(Event.COMPLETE, xmlCompfunc2);
	var request2:URLRequest = new URLRequest(url2);
	loader_result.load(request2);
}
    

関数「xmlCompfunc2」は次の手順で作成します。

【検索結果を表示する】

それでは、検索結果を表示してみましょう。

関数「xmlCompfunc」の名前を「xmlCompfunc2」に変更します。
続いて、ActionScript

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

を

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

に変更します。

実行してみましょう。
各コンボボックスから選択し、「検索」ボタンをクリックします。
サムネイルが表示されました！

サムネイルのロールオーバーを設定する

アプリケーションらしく、サムネイルをロールオーバーしたら色が変わるようにしてみましょう。

ライブラリから「Thumb」ムービークリップを開きます。
「shop_image」レイヤーの上に「label」レイヤーを、「bg」レイヤーの下に「script」レイヤーを追加します。
フレームを3フレーム目まで増やします。

「label」レイヤーの1フレーム目のフレームラベルを「_up」、2フレーム目にキーフレームを挿入し、フレームラベルを「_over」、3フレーム目も同様にフレームラベルを「_out」に設定します。

「bg」レイヤーの2フレーム目、3フレーム目にキーフレームを挿入します。
2フレーム目の矩形の色を変更します。

「script」レイヤーにActionScriptを追加します。

stop();

「Thumb.as」にマウスのロールオーバー、ロールアウトの処理を追加します。

        shop_thumb.addEventListener(MouseEvent.MOUSE_OVER,onmouseover);
shop_thumb.addEventListener(MouseEvent.MOUSE_OUT,onmouseout);
function onmouseover(event:MouseEvent):void{
	gotoAndStop("_over");
}
function onmouseout(event:MouseEvent):void{
	gotoAndPlay("_out");
}
    

「Thumb.as」ファイルは以下のようになります。

        package {
//必要なパッケージのインストール
	import flash.display.*
	import flash.events.*;
	import fl.containers.UILoader;

	public class Thumb extends MovieClip {
		//ネームスペースの回避
		namespace ns = 'http://webservice.recruit.co.jp/HotPepper/';
		use namespace ns;
          
		public function Thumb( itm :XML) {
		//shop_thumbというインスタンス名のUILoaderにXMLから取得した画像を配置
			shop_thumb.scaleContent = true;
			shop_thumb.source = itm.photo.pc.m;
			shop_thumb.load();
			shop_thumb.buttonMode = true;
          
			shop_thumb.addEventListener(MouseEvent.MOUSE_OVER,onmouseover);
			shop_thumb.addEventListener(MouseEvent.MOUSE_OUT,onmouseout);
          
			function onmouseover(event:MouseEvent):void{
				gotoAndStop("_over");
			}
          
			function onmouseout(event:MouseEvent):void{
				gotoAndPlay("_out");
			}
		}
	}
}
    

表示効果をつける

最後に表示効果をつけましょう。

まずは、サムネイルに表示効果を付けます。パッケージを設定します。
シーン1の「script」レイヤー1フレーム目

        import fl.transitions.Tween;
import fl.transitions.easing.Bounce;
import fl.transitions.*;
import fl.transitions.easing.*;
    

関数「make_shop_thumb」に以下の表示効果のActionScriptを追加します。

        var myTransitionManager:TransitionManager = new TransitionManager(thumbnail); myTransitionManager.startTransition({type:Iris, direction:Transition.IN, duration:1, easing:Bounce.easeOut, shape:Iris.CIRCLE});
		
    

次にウィンドウに表示効果を追加します。関数「makeWindow」に以下の表示効果のActionScriptを追加します。

        var myTransitionManager:TransitionManager = new TransitionManager(shopview); myTransitionManager.startTransition({type:Fade, direction:Transition.IN, duration:1, easing:Bounce.easeOut});
    

最終的なスクリプトは以下になります。

        //まず必要なパッケージをインポートします
import flash.display.*;
import flash.events.*;
import flash.net.*;
import flash.system.Security;
import flash.system.SecurityPanel;
import fl.controls.*;
import fl.transitions.Tween;
import fl.transitions.easing.Bounce;
import fl.transitions.*;
import fl.transitions.easing.*;
//必要なインスタンスを生成しておきます。
var loader : URLLoader = new URLLoader();
var loader_genre : URLLoader = new URLLoader();
var loader_budget : URLLoader = new URLLoader();
var loader_result : URLLoader = new URLLoader();
var area_url:String = "http://webservice.recruit.co.jp/hotpepper/large_area/v1/?key=****************";
var genre_url:String = "http://webservice.recruit.co.jp/hotpepper/genre/v1/?key=****************";
var budget_url:String = "http://webservice.recruit.co.jp/hotpepper/budget/v1/?key=****************";
var request:URLRequest = new URLRequest(area_url);
var col:int = 1;
var row:int = 1;
var w:int = 110;
var h:int = 110;
var wrap_at:int = 5;
var request_genre:URLRequest = new URLRequest(genre_url);
var request_budget:URLRequest = new URLRequest(budget_url);

var myCB_area:ComboBox;
var myCB_genre:ComboBox;
var myCB_budget:ComboBox;
var current_shop_view:ShopView;

	window_mc.addEventListener(MouseEvent.MOUSE_DOWN, windowMove);
	/*window_mc上でマウスが押下されてる間、windowMove関数を実行する。*/

	function windowMove(event:MouseEvent):void {
		stage.nativeWindow.startMove();
	}
	min_btn.addEventListener(MouseEvent.MOUSE_DOWN,windowMin);
	function windowMin(event:MouseEvent):void{
	stage.nativeWindow.minimize();
	}

	close_btn.addEventListener(MouseEvent.MOUSE_DOWN, windowClose);
	function windowClose(event:MouseEvent):void{
	stage.nativeWindow.close();
	}

//XMLをリクエストするファンクション。XMLのリクエストに成功し、XMLが取得できたらxmlCompfuncを実行するようになっています。
function loadXML(area_url:String) :void{
	loader.addEventListener(Event.COMPLETE, xmlCompfunc_area);
	loader.load(request);
}

function xmlCompfunc_area(event:Event):void {
	namespace ns = 'http://webservice.recruit.co.jp/HotPepper/';
	use namespace ns;
	var results:XML = new XML(loader.data);
	var cb:ComboBox = new ComboBox();
	cb.setSize(100,24);
	cb.prompt = "エリア選択";
	var j:int;
	for(j=0; j < results.large_area.length(); j++){
		var itemObj:Object = new Object();
		var itm : Object = results.large_area[j];
		itemObj.label = String(results.large_area[j].name);
		itemObj.data = String(results.large_area[j].code);
		cb.addItem(itemObj);
	}
	addChild(cb);
	cb.y = 3;
	cb.x = 50;
	myCB_area = cb;
	load_Genre_xml(genre_url);
}

function get area01():String {
	if( myCB_area.selectedItem ){
		return myCB_area.selectedItem.data;
	}
	return "";
}

function load_Genre_xml(genre_url:String) :void{
	loader_genre.addEventListener(Event.COMPLETE, xmlCompfunc_genre);
	loader_genre.load(request_genre);
}

function xmlCompfunc_genre(event:Event):void {
	namespace ns = 'http://webservice.recruit.co.jp/HotPepper/';
	use namespace ns;
	var results:XML = new XML(loader_genre.data);
    
	var cb:ComboBox = new ComboBox();
	cb.setSize(100,24);
	cb.prompt = "ジャンル選択";
	var j:int;
	for(j=0; j < results.genre.length(); j++){
		var itemObj:Object = new Object();
		var itm : Object = results.genre[j];
		itemObj.label = String(results.genre[j].name);
		itemObj.data = String(results.genre[j].code);
		cb.addItem(itemObj);
	}
	addChild(cb);
	cb.y = 3;
	cb.x = 170;
	myCB_genre = cb;
	load_Budget_xml(budget_url);
}

function get genre01():String {
	if (myCB_genre.selectedIndex > 0){
		return myCB_genre.selectedItem.data;
	} else {
		return "";
	}
}

function load_Budget_xml(budget_url:String) :void{
	loader_budget.addEventListener(Event.COMPLETE, xmlCompfunc_budget);
	loader_budget.load(request_budget);
}

function xmlCompfunc_budget(event:Event):void {
	namespace ns = 'http://webservice.recruit.co.jp/HotPepper/';
	use namespace ns;
	var results:XML = new XML(loader_budget.data);
	var cb:ComboBox = new ComboBox();
	cb.setSize(100,24);
	cb.prompt = "予算選択";
	var j:int;
	for(j=0; j < results.budget.length(); j++){
		var itemObj:Object = new Object();
		var itm : Object = results.budget[j];
		itemObj.label = String(results.budget[j].name);
		itemObj.data = String(results.budget[j].code);
		cb.addItem(itemObj);
	}
	addChild(cb);
	cb.y = 3;
	cb.x = 290;
	myCB_budget = cb;
    
}

function get budget01():String {
	if (myCB_budget.selectedIndex > 0){
		return myCB_budget.selectedItem.data;
	} else {
		return "";
	}
}

var url2 : String;

button01.addEventListener(MouseEvent.CLICK,clickk);
button01.label = "検索"
button01.setSize(80,24);
function clickk(e:Event):void{
	url2 = "http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key=****************&count=12 &large_area=" + area01 + "&genre=" + genre01 + "&budget=" + budget01;
	loadXML2(url2);
}

function loadXML2(url2:String) :void{
	loader_result.addEventListener(Event.COMPLETE, xmlCompfunc2);
	var request2:URLRequest = new URLRequest(url2);
	loader_result.load(request2);
}

//ロードしたXMLからサムネイルを生成するファンクション(各サムネイルのx座標、y座標を決定します)
function xmlCompfunc2(event:Event):void {
	//XMLにあるネームスペースを回避します
	namespace ns = 'http://webservice.recruit.co.jp/HotPepper/';
	use namespace ns;
	//取得できたXMLをfor eachで回します。
	var results:XML = new XML(loader_result.data);
	var itm:XML;
	for each( itm in results.shop ){
		var thumbnail_x:int = w * (col - 1) + 10;
		var thumbnail_y:int = h * (row - 1) - 10;
		var thumb:Thumb = make_shop_thumb( itm, thumbnail_x, thumbnail_y );
		Cont.addChild( thumb );
		col++;
		if( col == wrap_at ){
				row++;
				col = 1;
		} 
	}
}

//各サムネイルに対して必要な情報を当て込みます
function make_shop_thumb (itm:XML, thumbnail_x:int, thumbnail_y:int ):Thumb {
	//XMLにあるネームスペースの回避
	namespace ns = 'http://webservice.recruit.co.jp/HotPepper/';
	use namespace ns;
	//ThumbというムービークリップにXMLの要素を当て込みます
	var thumbnail:Thumb = new Thumb(itm);
	thumbnail.x = thumbnail_x;
	thumbnail.y = thumbnail_y;
    
	//サムネイルがクリックされた場合、その詳細画面が表示されるようにします。
	thumbnail.addEventListener(MouseEvent.CLICK, thumbnail_click);
	function thumbnail_click (event:Event):void {
		//make_shop_view( itm );
		var window0:NativeWindow;
		window0=makeWindow(true,NativeWindowSystemChrome.NONE,itm);
		window0.stage.addEventListener(MouseEvent.MOUSE_DOWN, windowMove2);
		function windowMove2(event:MouseEvent):void {
			window0.startMove();
		}
		var shop_close_btn:shop_close = new shop_close();
		window0.stage.addChild(shop_close_btn);
		shop_close_btn.addEventListener(MouseEvent.MOUSE_DOWN, windowClose2);
		function windowClose2(event:MouseEvent):void{
			window0.close();
		}
	}
	var myTransitionManager:TransitionManager = new TransitionManager(thumbnail);
	myTransitionManager.startTransition({type:Iris, direction:Transition.IN, duration:1,
	easing:Bounce.easeOut, shape:Iris.CIRCLE});
    
	return thumbnail;
    
}

function makeWindow(
	transparent:Boolean,systemChrome:String,itm:XML):NativeWindow {
	//ウィンドウ初期化オプション
	var options:NativeWindowInitOptions = new NativeWindowInitOptions();
	options.type=NativeWindowType.NORMAL;
	options.transparent =transparent;
	options.systemChrome=systemChrome;
    
	//ウィンドウの生成
	var window:NativeWindow=new NativeWindow(options);
	window.title            ="新規ウィンドウ";
	window.stage.align      =StageAlign.TOP_LEFT;
	window.stage.scaleMode  =StageScaleMode.NO_SCALE; 
	window.stage.stageWidth =320;
	window.stage.stageHeight=550;
	window.visible          =true;
    
	var shopview:ShopView = new ShopView( itm );
	window.stage.addChild( shopview );
    
	var myTransitionManager:TransitionManager = new TransitionManager(shopview);
	myTransitionManager.startTransition({type:Fade, direction:Transition.IN,duration:1, easing:Bounce.easeOut});
    
	return window;
}

loadXML(area_url);
    

プレビューしてみましょう。
検索機能と表示効果のついたアプリケーションができあがりました！

もっと学ぶには

Flashの基本しっかりとおさえたい方にオススメのトレーニングコースです。
基本となる制作方法や、環境設定、アニーション、ユーザーインターフェース、画像の挿入、テキスト、ナビゲーション、サウンド、ビデオなど、Flashコンテンツの制作に欠かせない要素を多数ご説明します。

このコースでは、操作方法の習得だけでなく、Flash制作における概念知識もしっかりとマスターすることができ、実務の活用にも結びつけることができます。

Flash CS3：Fundamentals

Flashの基礎はマスターされた方で、ActionScriptを初歩から習得したい方はこちらのトレーニングコースがおすすめです。
ActionScriptの用語の説明や書き方などの基礎的な部分から、実践で使えるスクリプトまで、ハンズオン形式で習得します。

文系のためのActionScript入門講座

さらに上級のActionScriptを習得されたい方におすすめのトレーニングコースはこちらです。
Flashコンテンツの制作をおこなう上で必須となる知識を、総合的に学習できます。ActionScript 2.0の基本的な概念をより深く理解することにより、表現の幅はぐっと広がり、さまざまなFlashコンテンツを作れるようになります。

Flash CS3: ActionScript NextStep

ご購入方法

ダウンロード

会社情報

国・地域および言語の選択

利用条件 | プライバシーポリシーとCookie （更新）

AIRチュートリアル Flash 第４回アプリケーションを完成させよう！～コンポーネントやライブラリを利用する～

著者ガジェット王子氏

著者鈴木拓生氏

Content

作成日

ページツール

タグ

必要条件

ユーザーレベル

必要な製品

サンプルファイル

はじめに

作成フロー

【エリア情報を取得する】

エリア情報を表示する

ジャンル・予算情報を取得・表示する

【検索ボタンを作成する】

【検索を行う】

【検索結果を表示する】

サムネイルのロールオーバーを設定する

表示効果をつける

もっと学ぶには

製品

ソリューション

業種別ソリューション

サポート

ラーニング

ご購入方法

ダウンロード

会社情報

AIRチュートリアル Flash 第４回 アプリケーションを完成させよう！ ～コンポーネントやライブラリを利用する～

著者 ガジェット王子氏

著者 鈴木 拓生氏

Content

作成日

ページ ツール

タグ

必要条件

ユーザーレベル

必要な製品

サンプルファイル

はじめに

作成フロー

【エリア情報を取得する】

エリア情報を表示する

ジャンル・予算情報を取得・表示する

【検索ボタンを作成する】

【検索を行う】

【検索結果を表示する】

サムネイルのロールオーバーを設定する

表示効果をつける

もっと学ぶには

製品

ソリューション

業種別ソリューション

サポート

ラーニング

ご購入方法

ダウンロード

会社情報

AIRチュートリアル Flash 第４回アプリケーションを完成させよう！～コンポーネントやライブラリを利用する～

著者ガジェット王子氏

著者鈴木拓生氏

ページツール