TONPOOBLOG » SWFObject

IEでブラウザの「戻る」ボタンでページに戻ってきた際に、stageWidthとstageHeightの値が取得できない

tonpoo — Fri, 03 Sep 2010 10:35:42 +0000

ああ・・・。IEよ、またお前なのね。コトのきっかけになったのはクライアントからの

swfを埋め込んだhtmlページについて、サーバにアップしてIEでアクセスする分には問題ないが、ローカル環境でIEで開くとオブジェクトの位置が大幅にずれる。

・・・というご指摘。調べてみると確かにそうなっていることを確認。さらに調べてみると、サーバにアップしたものについても

IEでswfの埋めこんであるhtmlページ（A）を表示。
そのまま別のURLに遷移。
ブラウザの「戻る」ボタンで（A）に戻る。
するとswf内のオブジェクトの位置が大幅にずれる。

・・・という現象を発見（汗）。「ななな、なんじゃこりゃあああああ！」と思ってさらにさらに調べてみると、下記の記事を発見。

・・・みなさん、苦労されてきたんですね。とりあえず、上記のみなさんの記事と今回の実際のファイルから、自分なりに発生条件や不具合の内容から解決方法までまとめてみました。

発生条件

SWFObjectを使っていること（「フリーで活躍するWeb屋のメモ帳」さんの記事では、SWFObjectを使っていなくても同じ現象に遭遇してるようなので、SWFObject非使用でも発生するのかもしれません）。
動的パブリッシュ（Dynamic Publishing）を使っている。
IEで表示（Katapad Designさんの記事では、Mac版のFirefoxでも発生するという記述があります）。
同一swfファイルの2回目以降の読み込み時に不具合が発生（私がローカル環境で検証した際には、初回の読み込み時から発生していました）。

発生する不具合

コンテンツの開始時にstage.stageWidthとstage.stageHeightの値がゼロになる。

この不具合が発生する原因そのものについてはよくわかりません。IEそのものかIE版FlashPlayerなどの潜在的なバグではないかと思いますが、それはMicrosoftなりAdobeなりが対応してくれるのを待つしか無い。

ポイントとしては、ドキュメントクラスのEvent.ADDED_TO_STAGEイベントが発生したタイミングでも、stageWidthとstageHeightの値がゼロだということ。さらに、Event.RESIZEで監視しても、初回のイベント発生時にはやはりstageWidthとstageHeightの値がゼロになりました。

対処法

「HAYASAKA修行ブログ」さんで述べられているように、解決策はいろいろあります。自分としては、「Event.ADDED_TO_STAGEの発生時にstageWidthとstageHeightの値がゼロだった場合、Event.ENTER_FRAMEでstageWidthとstageHeightの値を監視し、両方の値がゼロではなくなったら処理を継続する」という方法を採用し、汎用のユーティリティクラスメソッド（Utils.stageSizeWaiter）としてまとめてみました。

Utils.as

package {
	import flash.display.Stage;
	import flash.events.Event;

	public class Utils {
		private static var _nextFunction:Function;	//ステージサイズ取得後に実行する継続処理
		private static var _targetStage:Stage;	//ステージへの参照
		public static function stageSizeWaiter(targetStage:Stage, nextFunction:Function):void {
			if ((targetStage.stageWidth * targetStage.stageHeight) == 0) {
				//stageWidthとstageHeightの値がゼロの場合はENTER_FRAMEで監視
				_nextFunction = nextFunction;
				_targetStage = targetStage;
				targetStage.addEventListener(Event.RESIZE, stageSizeListener, false, 0, true);
			}else {
				//stageWidthとstageHeightの値が取得済みの場合はそのまま継続処理を続行
				nextFunction();
			}
		}
		private static function stageSizeListener(e:Event = null):void {
			if ((_targetStage.stageWidth * _targetStage.stageHeight) != 0) {
				_nextFunction();	//継続処理を実行
				_targetStage.removeEventListener(Event.RESIZE, stageSizeListener);	//不要になったイベントリスナを削除
				_nextFunction = null;	//不要な参照を破棄
				_targetStage = null;	//不要な参照を破棄
			}
		}
	}
}

実際に利用する場合には、ドキュメントクラスで以下のように使います。

Main.as

package  {
	import flash.events.Event;
	import Utils;

	public final class Main extends Sprite{
		public function Main() {
			this.addEventListener(Event.ADDED_TO_STAGE, onAddedToStage, false, 0, true);
		}
		private function onAddedToStage(e:Event):void {
			this.removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
			/*
			* ADDED_TO_STAGEイベントが発生したら、ステージへの参照と
			* ステージサイズ確定後に実行するファンクションを引数に
			* して、Utils.stageSizeWaiterを実行。
			*/
			Utils.stageSizeWaiter(this.stage, onStageSizeObtained);
		}
		private function onStageSizeObtained():void {
			/*
			* このファンクションの実行時には確実にstageWidthと
			* stageHeightの値が確定している。
			*/
			sw = this.stage.stageWidth;
			sh = this.stage.stageHeight;
		}
	}
}

Katapad DesignさんのようにEventDispatcherにしたほうがスマートかなと思ったりもしてますが、こういう方法もあるってことで・・・。

ああ、疲れました（汗）。

Error calling method on NPObject

tonpoo — Fri, 02 Jul 2010 02:37:05 +0000

製作中のとあるフルFlashサイト。ブラウザで普通に確認してる分には問題なく動作していたため全く気がつかなかったが、Firefoxのエラーコンソールを開いてみると「Error calling method on NPObject」というJavaScriptエラーが頻発！「なんじゃこりゃ」ということで早速調べてみたところ、原因がわかりました。

まず、今回のサイトは以下のような条件が揃っていました。

SWFファイルのドメインと、そのSWFファイルを埋め込んで表示するHTMLファイルのドメインが異なっている（SWFは http://www.hogehoge.home/movie.swf にあり、HTMLファイルは http://user.hogehoge.home/index.html にある、というような感じ）
マウスホイール対応のためにSWFWheelを使用
SWFファイルの埋め込みにSWFObjectを使用

そしてSWFWheelのサイトを見ていたところ、以下のような注意書きが：

その他

外部ドメインからの読み込み

SWFWheelを使ったswfファイルを、外部ドメインから読み込む場合、HTML側とActionScript側の両方でExternalInterfaceの動作を明示的に許可する必要があります。

HTML側にて、paramタグ及びembedタグでallowScriptAccessの値にalwaysを指定する。

ActionScript側にて、Security.allowDomain等で許可するドメインを指定する。

ビンゴですね。1.の方は対応済みだったんですが、2.の方が未対応でした。ところで今回のサイト、サブドメインの数が一定でなく、運用後に随時追加される可能性があります。ので、ワイルドカードを使って以下のようなコードを追加。

Security.allowDomain("*.hogehoge.home");

結果は・・・？ダメでした。まだエラーが出ます。うーん、もしかしてワイルドカードでサブドメインを指定するのは無理なのか？ということで、今度は以下のコードで実験。

Security.allowDomain("*");

成功！エラーがでなくなりました。全ドメインを対象にしてしまうのは危険といえば危険ですが、現時点ではこれが最善の策でしょうか。

FlashからExternalInterfaceクラスを使ってLightboxを呼び出す

tonpoo — Tue, 22 Dec 2009 13:55:06 +0000

「Flash（swf）からLightboxを呼び出す」というニーズがこれまでに何回かあり、またついさっきもあって、その都度ちょっと面倒だったりしたのでメモ。なお、ウチの会社ではswfファイルの埋め込みには通常swfobject2を使ってるので、以下は「Lightbox2.04 + swfobject2 + ActionScript（ExternalInterfaceクラス）」という組み合わせが前提となっています。

Lightboxを入手

まず使用するLightboxのバージョンは2.04。Lokesh Dhakar氏によるLightbox 2の公式サイトで入手。

ベースHTMLの作成

次にベースとなるHTMLを作成。今回はとりあえずSWFObject 2 HTML and JavaScript ジェネレーターを使ってサクっと作りました。ポイントとしては、「SWFの定義」のオプションを一部変更すること。

まず、Lightboxを表示した際に、swfコンテンツが上に来てしまうのを避けるため、wmodeをtransparentに設定。また、ExternalInterfaceクラスを使うので、allowscriptaccessをalwaysに設定。できあがったHTMLは下記の通り：

Lightbox用のライブラリを組み込み

上記のベースHTMLのheadセクションに、Lightbox動作のためのjsファイルとcssファイルを組み込む下記の記述を追加。

Lightboxを起動させるJavaScriptメソッドを追加

Lightboxを直接起動させるJavaScriptのメソッドがないので、下記ページを参考にそのためのメソッドを追加。

Execute Lightbox Scripts From Flash at Codefidelity
（情報元：Flash から Lightbox を起動する方法 – minorio のプログラミング・メモ）

具体的に追加する内容は下記の通り。

最終的にできあがったhtmlは下記の通り。

ExternalInterfaceで呼び出し

次はFlash側の用意。sample.flaというファイル（ActionScript3）を用意、ステージ上にボタン用のMovieClipインスタンスを３つ配置し、それぞれbtn0, btn1, btn2という名前を付ける。sample.flaのドキュメントクラスとしてSampleクラスを指定。Sample.asの内容は下記の通り。

package {
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import flash.external.ExternalInterface;

	public class Sample extends MovieClip{
		public function Sample() {
			//Lightbox用の設定
			lightboxArray = new Array();
			lightboxArray[0] = {
				src:"images/photo0.jpg",
				caption:"写真その0"
			};
			lightboxArray[1] = {
				src:"images/photo1.jpg",
				caption:"写真その1"
			};
			lightboxArray[2] = {
				src:"images/photo2.jpg",
				caption:"写真その2"
			};
			//ボタンの設定
			for (var i:uint = 0; i < 3; i++) {
				var btn:MovieClip = this["btn" + i];
				btn.id = i;
				btn.buttonMode = true;
				btn.addEventListener(MouseEvent.CLICK, onBtnClick, false, 0, true);
			}
		}

		public var lightboxArray:Array;
		public var btn0:MovieClip;
		public var btn1:MovieClip;
		public var btn2:MovieClip;

		//ボタン用メソッド
		public function onBtnClick(e:MouseEvent):void {
			var btn:MovieClip = e.target as MovieClip;
			var id:uint = btn.id;
			var src:String = lightboxArray[id].src;
			var caption:String = lightboxArray[id].caption;
			//LightboxDelegateメソッドを呼び出し
			ExternalInterface.call("LightboxDelegate",src,caption );
		}
	}
}

これで完成！

オマケ：IE7～8でのLightboxの表示バグフィックス

Lightboxを使った縦に長いページをIEで閲覧した場合、ページをスクロールしてからLightboxを起動すると、Lightboxの背景（黒い透過）部分が途中で切れてしまう。これを回避するためにとりあえずやったのがlightbox.cssの改造。具体的には#overlayのpositionをabsoluteからfixに変更（+IE6ではおかしくなってしまうので、スターハックを使ってabsoluteのまま）部分を下記のようにしました。

#overlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
}
* html #overlay {
	position: absolute;
}

以上、備忘録もかねて参考までに。

SWFObject 2 HTML and JavaScript ジェネレーター v1.2

tonpoo — Tue, 18 Aug 2009 11:08:14 +0000

swfobjectのプロジェクトサイトで提供されている「SWFObject 2 HTML and JavaScript generator v1.2」を、日本語環境で（というかTonpoo個人にとって）使いやすいよう一部カスタマイズした上で日本語化してみました！

【SWFObject 2 HTML and JavaScript ジェネレーター v1.2】

（特に開発者サイドの許可をとってないんですが、MITライセンスで、コピーライト表記をソースコード中にそのまま残しているので、これで大丈夫なんでしょうか・・・。ちょっと不安。）

ちなみに、オリジナル版からのカスタマイズ点は下記の通り。

文字コードの指定にShift_JISを追加。
文字コードのデフォルト値をutf-8に変更。
パブリッシュ方法のデフォルト値を「動的パブリッシュ」に設定。
HTMLテンプレートのデフォルト値を「XHTML 1.0 Transitional」に設定。
出力されるHTMLコードの言語系の属性の値をenからjaに変更。
出力されるHTMLコードのmeta要素などの出現順序を変更。
出力されるHTMLコードの中に、ドキュメント内でJavaScriptを使用していることを示すためのmeta要素を追加。
出力されるHTMLコードの中に記述される、FlashPlayerのダウンロードリンクのリンク先を、Adobeの日本語サイトに変更。

追記：当サイトでの公開について念のため確認し、了承をいただきました。に加えて、公式サイト内のWikiページからリンクを張って頂きました！