Flashには外部WebサービスのAPIに接続する機能や、あらかじめ用意されたコンポーネントを利用することで、簡単にWebサービスを活用できます。
本チュートリアルでは、WebサービスとしてリクルートWebサービスの「ホットペッパーWebサービス」が提供するAPIを利用し、飲食店の店舗情報を取得、表示するAIRアプリケーションを作成します。

作成フロー

Webサービスを利用するためのAPIキーの取得
Flashドキュメントの準備
サムネイル表示領域用ムービークリップの作成と配置
サムネイル表示用ムービークリップの作成
Webサービスからのデータの取得とサムネイルの表示
店舗情報表示用ムービークリップの作成
サムネイルクリック時の動作の作成
プレビューによる動作の確認

Webサービスを利用するためのAPIキーの取得

以下のサイトより、画面の手順に従ってAPIキーを取得します。

【リクルートWEBサービス・ホットペッパーWebサービス】

※利用規約等をお読みいただき、画面の手順に従ってご登録ください。

Flashドキュメントの準備

Flash CS3 Professionalを起動します。
スプラッシュウィンドウの[新規作成]から[Flash ファイル(Adobe AIR)]を選択します。

*「Adobe AIRのオーサリングについて」ダイアログボックスが表示された場合には、[OK]ボタンで閉じます。

新規にflaファイルが作成されますので、ここでは「「Hotpepper001.fla」」という名前で保存します。
画面下部プロパティインスペクタの[プロパティ]タブで、以下の値を入力します。
- サイズ: 幅を700px、高さを500px
- 背景色: 黒(#000000)
- フレームレート: 30fps

画面上部のタイムラインで上から順に「Title」、「container」、「Script」という名前のレイヤーを作ります。

「Title」レイヤーに静止テキストで「HotPepper API_AIR_vol1」という文字列をステージ上部に配置します。

サムネイル表示領域用ムービークリップの作成

[挿入]メニューの[新規シンボル…]から新規シンボルを作成します。

「新規シンボルの作成」ダイアログボックスに以下の値を入力します。
- 名前: cont
- タイプ: ムービークリップ
- クラス: cont
- 基本クラス: flash.display.MovieClip
  　（※次の「リンケージ：」で［ActionScriptに書き出し］にチェックを入れると自動的に入力されます）
- リンケージ:[ActionScriptに書き出し]チェックボックスにチェックする。
  　　　　　　 [最初のフレームに書き出し]チェックボックスにチェックする。

[OK]ボタンをクリックします。
*[ActionScriptクラスに関する]ダイアログが表示される場合には[OK]ボタンで閉じます。

「レイヤー１」レイヤーにムービークリップの位置を示すための小さな正方形をシンボルの中央位置から見て左上周辺に描画します。正方形は、［矩形ツール］で「線のカラー」をなし、「塗りのカラー」を黒（#000000）、幅1.0、高さ1.0とします
※小さな正方形は、背景色と同じであるため配置されている状態がわかりにくいので、「レイヤー１」のアウトライン表示をオンにすると配置状態を確認しやすくなります。

シンボルの編集モードを終了し、「シーン１」に戻ります。次に、作成したシンボル「cont」を「Hotpepper001.fla」「container」レイヤーのx座標0.0、y座標60.0の位置に配置し、インスタンス名を「Cont」と設定します。

サムネイル表示用ムービークリップの作成

[挿入]メニューの[新規シンボル…]から新規シンボルを作成します。
「新規シンボルの作成」ダイアログボックスに以下の値を入力します。
- 名前: Thumb
- タイプ: ムービークリップ
- クラス: Thumb
- 基本クラス: flash.display.MovieClip
- リンケージ:[ActionScriptに書き出し]チェックボックスにチェックする。
  　　　　　　[最初のフレームに書き出し]チェックボックスにチェックする。

[OK]ボタンをクリックします。
*「ActionScriptクラスに関する」ダイアログボックスが表示される場合には、[OK]ボタンをクリックし閉じます。
画面上部のタイムラインで上から順に「shop_image」、「bg」という名前でレイヤーを作ります。

「bg」レイヤーにサムネイルの背景となる矩形を描画します。　［矩形ツール］で、［線のカラー］をなし、［塗りのカラー］を黒（#222222）、幅を100.0、高さを100.0とし、x座標0.0、y座標 0.0の位置に配置します。

「コンポーネント」パネルが表示されていない場合、[ウィンドウ]メニューから[コンポーネント]を選択し、「コンポーネント」パネルを表示します。

「shop_image」レイヤーに、「コンポーネント」パネルから「User Interface」下の「UILoader」コンポーネントを配置し、インスタンス名を｢shop_thumb｣とします。配置した「UILoader」コンポーネントは、「bg」レイヤーに配置した矩形よりも小さめになるように、幅を90.0、高さを90.0とし、x座標5.0、y 座標5.0の位置に配置します。

以上が終了したら、シンボルの編集モードを終了し、「シーン1」に戻ります。

サムネイル表示用ムービークリップに、画像の表示および、ボタンとしての機能を持たせるために、新規ActionScript(AS)ファイルを作成し、「Hotpepper001.fla」を保存した階層と同じフォルダにファイル名を「Thumb.as」として保存します。
Thumb.asに以下のActionScriptを記述します。

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;
		}
	}
	
}

    

Thumb()コンストラクタの引数itmにWebサービスから取得したXMLオブジェクトが渡されます。以降の行で「UILoader」コンポーネント(インスタンス名: shop_thumb)にXMLオブジェクト内の画像のURLを設定し、その読み込みを実行しています。

コンストラクタの最後の行では「UILoader」コンポーネントがボタンとして機能するように設定しています。
XMLオブジェクトからの値の取得にはActionScript 3.0から新しく加わった機能のE4X（ECMAScript for XML）をしています。
E4Xでは、読み込むXMLにネームスペースが指定されている場合には、Flashにこのネームスペースを指定しないとアクセスできないので、ネームスペースを指定しています。

Webサービスからのデータの取得とサムネイルの表示

１．Webサービスからデータを取得し、サムネイルを表示するために、「Hotpepper001.fla」「シーン１」の「Script」レイヤーに以下のActionScriptを記述します。

「Script」レイヤーのフレーム1:

        //まず必要なパッケージをインポートします
import flash.display.*;
import flash.events.*;
import flash.net.*;
import flash.system.Security;
import flash.system.SecurityPanel;
import fl.controls.*;
//必要なインスタンスを生成しておきます。 
var loader : URLLoader = new URLLoader();
var url:String = "http://webservice.recruit.co.jp/hotpepper/gourmet/v1/

?key=****************&large_area=Z011&count=16";
var request:URLRequest = new URLRequest(url);
var col:int = 1;
var row:int = 1;
var w:int = 110;
var h:int = 110;
var wrap_at:int = 5;

//XMLをリクエストするファンクション。XMLのリクエストに成功し、XMLが取得できたらxmlCompfuncを実行するようになっています。
function loadXML(url:String) :void{     
		   loader.addEventListener(Event.COMPLETE, xmlCompfunc);
		   loader.load(request);
}
//ロードしたXMLからサムネイルを生成するファンクション(各サムネイルのx座標、y座標を決定します)

function xmlCompfunc(event:Event):void {
		   //XMLにあるネームスペースを回避します 
		   namespace ns = 'http://webservice.recruit.co.jp/HotPepper/';
		   use namespace ns;
		   //取得できたXMLをfor eachで回します。 
		   var results:XML = new XML(loader.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;
		   
		   return thumbnail;
}
loadXML(url);

    

var url:String = "http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?
key=****************&large_area=Z011&count=16";の部分でリクエスト先のURLおよびパラメータとしてWebサービスから取得したAPIキー、エリアコード、取得するデータ数を設定しています。サンプルではAPIキーを” ****************”と記述していますが(key=****************)、実際には本チュートリアルの最初で取得したホットペッパーWebサービスからメールから送信されるAPIキーを設定します。WebサービスからのXML呼び出しに成功するとxmlCompfunc関数が実行され、xmlCompfunc関数内でデータの件数分のサムネイルの生成と配置を行っています。

２．[制御]メニューの[ムービープレビュー]を選択し、ここまでの動作を確認します。

この段階では、まだサムネイルをクリックしても店舗情報は表示されません。
以降の手順で、店舗表示機能を追加していきます。

店舗情報表示用ムービークリップの作成

[挿入]メニューの[新規シンボル…]から新規シンボルを作成します。
[新規シンボルの作成]ダイアログボックスに以下の値を入力します。
- 名前: ShopView
- タイプ: ムービークリップ
- クラス: ShopView
- 基本クラス: flash.display.MovieClip
- リンケージ: [ActionScriptに書き出し]チェックボックスにチェックする。
  　　　　　　[最初のフレームに書き出し]チェックボックスにチェックする。

上から順に「Address」、「budget_name」、「food_name」、「genre_name」、「shopname」、「shop_image」、「url_button」、「bg」という名前でレイヤーを作ります。

「bg」レイヤーに背景となる矩形を描画します。［矩形ツール］で、［線のカラー］をなし、［塗りのカラー］を黒（#222222）、幅を245.0、高さを430.0、そしてx座標0.0、y座標0.0の位置に配置します。

「url_button」レイヤーに、「コンポーネント」パネルから「Button」コンポーネントをx座標135.0、y座標400.0として配置し、インスタンス名を｢url_button｣とします。

「Address」、「budget_name」、「food_name」、「genre_name」、「shopname」の各レイヤーにそれぞれ以下のインスタンス名でダイナミックテキストを配置します。

レイヤー	インスタンス名	サイズ		配置する座標位置
レイヤー	インスタンス名	幅	高さ	x	y
Address	address_name	225.0	34.0	10.0	334.0
budget_name	budget_name	225.0	18.0	10.0	308.0
food_name	food_name	225.0	18.0	10.0	283.0
genre_name	genre_name	225.0	18.0	10.0	256.0
shopname	shop_name	225.0	18.0	10.0	11.0

「shop_image」レイヤーに、「コンポーネント」パネルから「UILoader」コンポーネントを配置し、インスタンス名を｢shop_image｣とします。そして、幅を225.0、高さを195.0、ｘ座標を10.0、y座標を40.0として配置します。

店舗情報表示用ムービークリップに店舗情報の表示機能を持たせるため、新規ActionScript(AS)ファイルを作成し、「Hotpepper001.fla」と同じ階層に、ファイル名を「ShopView.as」として保存します。
ShopView.asに以下のActionScriptを記述します。

ShopView.as:

        package {
		   //必要なパッケージをインストールします。 
		   import flash.display.*
		   import flash.events.*;
		   import flash.text.*;
		   import flash.net.*;
		   import flash.geom.*;
		   import fl.containers.UILoader;
		 
		   public class ShopView extends MovieClip {
		         //ネームスペースの回避
		         namespace ns = 'http://webservice.recruit.co.jp/HotPepper/';
		         use namespace ns;
		         //shopViewクラス内に表示する要素を決定
		         public function ShopView( itm :XML) {
		         //UILoaderを利用して各店舗写真を取得
		         shop_image.scaleContent = true;
		         shop_image.source = itm.photo.pc.l;
		         shop_image.load();
		         //itm.nameで各店舗名を取得し、それをshop_nameというダイナミックテキストフィールドで取得します
		         shop_name.text = itm.name;
		        //同じ要領で、ジャンル名や料理名などXMLデータから表示したい要素をダイナミックテキストフィールドで取得します。
		         genre_name.text = itm.genre.name;
		         food_name.text = itm.food.name;
		         budget_name.text = itm.budget.name;
		         address_name.text = itm.address;
		         //ホットペッパー本体へ飛ぶボタンのリンクの設定
		         url_button.addEventListener(MouseEvent.CLICK,url_jump);
		         url_button.label = "詳細"
		         url_button.setSize(90,20);
		         function url_jump(e:Event):void{
		               var detail_url:URLRequest = new URLRequest(itm.urls.pc);
		               navigateToURL( detail_url );
		         }
		   }
		}
  
}
    

ShopView（）コンストラクタの引数itmにWebサービスから取得したXMLオブジェクトが渡され、以降の行で店舗写真の読み込みや、店舗情報の表示をしています。
また、[詳細]ボタンをクリックしたときに、開くURLの設定もしています。

サムネイルクリック時の動作の作成

サムネイルをクリックしたときに、店舗情報を表示するために、「Hotpepper001.fla」の「Script」レイヤーのActionScriptに以下のスクリプト追加します

        var current_shop_view:ShopView;

//サムネイルがクリックされたあと、shopviewというクラスが表示されるファンクション。
function make_shop_view ( itm:XML ):Boolean {
		   if( current_shop_view ){
		   	   removeChild( current_shop_view );
		   }
		   var shopview:ShopView = new ShopView( itm );
		   addChild( shopview );
		   shopview.x = 450;
		   shopview.y = 50;
		   current_shop_view = shopview;
		   return true;
}
		   
    

make_shop_view関数の引数itmに店舗情報のXMLが渡され、店舗情報を表示するShopViewクラスのインスタンスを生成しています。

「Hotpepper001.fla」の「Script」レイヤーのActionScriptの関数make_shop_thumb内に以下のスクリプト追加します

        //サムネイルがクリックされた場合、その詳細画面が表示されるようにします。thumbnail.addEventListener(MouseEvent.CLICK, thumbnail_click);
function thumbnail_click (event:Event):void {
	make_shop_view( itm );
}
    

サムネイルがクリックされたときに、thumbnail_click関数が呼び出されるようにしています。

スクリプト追加後の「Hotpepper001.fla」の「Script」レイヤーのActionScriptは以下のようになります。

        //まず必要なパッケージをインポートします
import flash.display.*;
import flash.events.*;
import flash.net.*;
import flash.system.Security;
import flash.system.SecurityPanel;
import fl.controls.*;
//必要なインスタンスを生成しておきます。
var loader : URLLoader = new URLLoader();
var url:String = "http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key=****************&large_area=Z011&count=16";
var request:URLRequest = new URLRequest(url);
var col:int = 1;
var row:int = 1;
var w:int = 110;
var h:int = 110;
var wrap_at:int = 5;
var current_shop_view:ShopView;
		 //XMLをリクエストするファンクション。XMLのリクエストに成功し、XMLが取得できたらxmlCompfuncを実行するようになっています。
		   function loadXML(url:String) :void{ 
		   		loader.addEventListener(Event.COMPLETE, xmlCompfunc);
		   		loader.load(request);
		 }
		 //ロードしたXMLからサムネイルを生成するファンクション(各サムネイルのx座標、y座標を決定します)
		   function xmlCompfunc(event:Event):void {
		   		//XMLにあるネームスペースを回避します
		   		namespace ns = 'http://webservice.recruit.co.jp/HotPepper/';
		   		use namespace ns;
		   		//取得できたXMLをfor eachで回します。
		   		var results:XML = new XML(loader.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 );
		   		  }
		   return thumbnail;
		   }
		 //サムネイルがクリックされたあと、shopviewというクラスが表示されるファンクション。
		   function make_shop_view ( itm:XML ):Boolean {
		   		  if( current_shop_view ){
		   		  		  removeChild( current_shop_view );
		   		  }
		   		  var shopview:ShopView = new ShopView( itm );
		   		  addChild( shopview );
		   		  shopview.x = 450;
		   		  shopview.y = 50;
		   		  current_shop_view = shopview; 
		   		  return true;
		   }
		   loadXML(url);
		   
    

プレビューして動作を確認

[制御]メニューの[ムービープレビュー]を選択し、動作を確認します。
サムネイルをクリックすると、右側に店舗情報が表示され、店舗情報下の詳細をクリックすると該当のページが開きます。

もっと学ぶには

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

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

Flash CS3：Fundamentals

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

文系のためのActionScript入門講座

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

Flash CS3: ActionScript NextStep

ご購入方法

ダウンロード

会社情報

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

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

AIRチュートリアル・Flash 第２回　インターネット上の情報を使ってみよう！～ホットペッパーAPIを利用する～

著者ガジェット王子氏

著者鈴木拓生氏

Content

作成日

ページツール

タグ

必要条件

ユーザーレベル

必要な製品

サンプルファイル

その他の要件

リクルートWebサービスへの登録(APIキーを取得する必要があるため)

はじめに

作成フロー

Webサービスを利用するためのAPIキーの取得

Flashドキュメントの準備

サムネイル表示領域用ムービークリップの作成

サムネイル表示用ムービークリップの作成

Webサービスからのデータの取得とサムネイルの表示

店舗情報表示用ムービークリップの作成

サムネイルクリック時の動作の作成

プレビューして動作を確認

もっと学ぶには

製品

ソリューション

業種別ソリューション

サポート

ラーニング

ご購入方法

ダウンロード

会社情報

AIRチュートリアル・Flash 第２回 インターネット上の情報を使ってみよう！～ホットペッパーAPIを利用する～

著者 ガジェット王子氏

著者 鈴木 拓生氏

Content

作成日

ページ ツール

タグ

必要条件

ユーザーレベル

必要な製品

サンプルファイル

その他の要件

リクルートWebサービスへの登録(APIキーを取得する必要があるため)

はじめに

作成フロー

Webサービスを利用するためのAPIキーの取得

Flashドキュメントの準備

サムネイル表示領域用ムービークリップの作成

サムネイル表示用ムービークリップの作成

Webサービスからのデータの取得とサムネイルの表示

店舗情報表示用ムービークリップの作成

サムネイルクリック時の動作の作成

プレビューして動作を確認

もっと学ぶには

製品

ソリューション

業種別ソリューション

サポート

ラーニング

ご購入方法

ダウンロード

会社情報

AIRチュートリアル・Flash 第２回　インターネット上の情報を使ってみよう！～ホットペッパーAPIを利用する～

著者ガジェット王子氏

著者鈴木拓生氏

ページツール