Flashで別ドメイン(クロスドメイン)にある画像の表示方法(AS3.0)

  • hatena bookmark
  • Twitter
  • Delicious
  • Blogger Post
  • Evernote
  • Google Bookmarks
  • Share/Bookmark

Flashでは別ドメインにある画像を取得し反映するには制約があります。今回、この回避方法を以下の場合分けをして書いていきたいと思います。ローカル上では動作を確認できたのにサーバへアップしたら反映を確認できない場合は、2か3の方法を試してみると良いかもしれません。

  1. 取得した画像をそのまま表示する場合
  2. 取得した画像を加工する場合 – 画像のサーバへポリシーファイルの配置が可能な場合
  3. 取得した画像を加工する場合 – 画像のサーバへポリシーファイルの配置が不可能な場合


1.取得した画像をそのまま表示する場合

URLRequestでそのまま表示することができます。

package{

	import flash.display.*;
	import flash.net.*;

	public class main extends MovieClip {

		public function main():void {

			var image:String = "画像のURL";

			var loader:Loader = new Loader();
			loader.load( new URLRequest( image ) );

			addChild( loader );

		}

	}

}
2.取得した画像を加工する場合 – 画像のサーバへポリシーファイルの配置が可能な場合

ポリシーファイル(crossdomain.xml)を用意し、対象となるドメインのルートディレクトリ(例:http://www.example.com/crossdomain.xml)へアップすることで、1のような記述で画像の加工が可能となります。(ポリシーの設定によっては動作しない場合があります。下段を参考にしてください)

ルートディレクトリへポリシーファイルをアップできない場合は、任意のディレクトリへアップしFlash側で以下の指定をすることで対応ができます。

System.security.loadPolicyFile("crossdomain.xmlのパス");

ポリシーファイルcrossdomain.xmlの内容と設定方法:

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
	<site-control permitted-cross-domain-policies="メタポリシーの設定" />
	<allow-access-from domain="読み込み側のドメイン" />
</cross-domain-policy>

メタポリシーの設定の記述について:

記述方法 説明
all すべてのポリシーファイルを許可する
master-only マスターポリシーファイルのみ許可する
by-content-type Content-Typeがtext/x-cross-domain-policyのすべてのポリシーファイルを許可する
by-ftp-filename FTPサーバのみ使用可能にする
none-this-response HTTP応答ヘッダのみ許可する
none 許可をしない

読み込み側ドメインの記述について:

指定方法
完全なドメイン名 www.example.co.jp
IP アドレス 127.0.0.1
ワイルドカードを使用したドメイン名 *.example.co.jp(サブドメインなど)
完全なワイルドカード * (アスタリスク)。すべてのドメイン、IP アドレスからのアクセスを許可

crossdomain.xmlに関して、以下のポストが参考になります
http://yoshiweb.net/blog/?itemid=162

3.取得した画像を加工する場合 – 画像のサーバへポリシーファイルの配置が不可能な場合

読み込み先にポリシーファイル(crossdomain.xml)の設置が不可能な場合、サーバサイドスクリプトを経由して画像の取得を行います。

下記のスクリプトを任意の場所へアップします。”file”の部分はFlash側からのクエリのキー値になります。

サーバサイドスクリプト(php)のソース:

<?php
if( $_GET[ "file" ] ) {
	header( "Content-Type:image/jpeg;" );
	readfile( $_GET[ "file" ] );
}
?>

ただ、php部分のmimeTypeが”jpeg”と決め打ちとなってしまっているのが気になるので、どこかで対応したいと思います。
[追記] mimeTypeの判別付きスクリプトはこちらに記述しました。

次にポリシーファイルをアップします。ポリシーファイルのアップ先などについては、2の項目を参照してください。

次にFlash側です。画像URLの指定を以下を参考にphpのURLの後、クエリとして読み込みたい画像のURLを記述します。その他の部分は1のような記述で画像の加工が可能となります。

http://www.example.com/hoge.php?file=画像のURL
  • hatena bookmark
  • Twitter
  • Delicious
  • Blogger Post
  • Evernote
  • Google Bookmarks
  • Share/Bookmark
関連する記事:
  1. FlashでPerlを介した別ドメインのデータ取得方法(mimeType判別付き) +PHP版
  2. Perl/PHPでファイルのデータ内容の比較を行う方法
  3. Papervision3D – ポリゴンにSWFファイルを貼り付ける方法 (AS3.0)
  4. jQpie – javascriptからphpの関数(function)を呼び出すjQueryを使用したライブラリ
コメント 停止中