briccolog » Chrome + Gmailで今度は改行が増えるようになりました…

[2012.01.23 追記]

GoogleグループのChromeフォーラムで、以下のアナウンスがありました。

チームがすでに問題を把握しているようです。
ご協力をお願いさせていただければと思います。

Chrome 17のリリース版の公開と共に解消されることを祈りましょう。

ご迷惑をおかけしております。
現在は問題の修正は完了しており、Google Chrome 17 から問題がなくなる予定です。

Issue 104620: loss of \n after paste in gmail

・・・というわけで、既に開発側では問題の修正を完了していて、Chrome17から解消される模様です。よかったよかった。

それにしても、暫定版の対応を発見する過程でChromeの拡張機能の作り方もわかったので、そういう点では非常に勉強になったんですが、それを大々的にブログ記事にまでしてしまった直後このアナウンスメント。バグの解消は喜ばしいことですが、ちょっと恥ずかしいような・・・（汗）。

[2012.01.10 追記]

Google Chrome 17の登場を待たずして、改行が消える不具合は解消（？）されましたが、代わりに改行が増える不具合が出てきました…。

briccolog » Chrome + Gmailで今度は改行が増えるようになりました…

クリップボードからのペースト後、本文領域全体をカット＆ペーストする

・・・が有効っぽい。詳しくは下記リンク先の記事をご覧ください。

briccolog » Chrome+Gmailでテキストをペーストした際の不具合解消法（暫定版）

[2012.01.10 追記]

Google Chrome 17の登場を待たずして、改行が消える不具合は解消（？）されましたが、代わりに改行が増える不具合が出てきました…。

briccolog » Chrome + Gmailで今度は改行が増えるようになりました…

briccolog » FancyBox1.3.4 + IE7でインラインコンテンツを表示する場合のバグ

briccolog » facebookの「いいね」ボタンに「承認」が必要となるケースについて

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

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

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

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

• stageWidth is zero in IE | Blog | Jodie O’Rourke
• IEでstage.stageWidthとstageHeightの値が０になる – フリーで活動するWeb屋のメモ帳
• SWFObjectのDynamic Publishingを使うとIEとかでStage.stageWidthとheightが一瞬ゼロになるという都市伝説は実在した！ | Katapad Design
• IEでstage.stageWidth及びstage.stageHeightが取得できない？

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

発生条件

• 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にしたほうがスマートかなと思ったりもしてますが、こういう方法もあるってことで・・・。

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

処理の流れとしては、

（1）main.swfからSSLサーバのcrossdomain.xmlを読み込み。
（2）main.swfからdata_output.phpにアクセスし、読み込む画像のURL一覧を記載したXMLデータを取得。
（3）（2）で取得したXMLデータをもとに、個別の画像を読み込み。

・・・という、割とよくあると言えばよくある構成です。ポイントはやっぱりSSL領域とのクロスドメイン通信があること。ドメイン名が同じでも、非SSLのサーバとSSLサーバとでは別ドメインと判断されるんですよね。

で、一通り作ってサーバにアップしたところ、FirefoxやChromeやSafariでは動くのになぜかIEだけ画像が表示されない！crossdomain.xmlはきちんと記述できてるし、XMLデータを非SSL側のサーバに設置すればIEでも動くので、どこで止まってるんだろうと調べたところ、（2）のXMLデータ取得のところでポシャってることが判明。で、Google先生に尋ねて出てきたのが以下の記事：

• クロスドメインポリシーファイル(crossdomain.xml)設定について | さわいじり
• Internet Explorer が SSL 経由によるファイルのダウンロードで “No-Cache” ヘッダーを処理できない
• FLASH + SSL +WinIE（FLASH-JP.COM – フォーラム）
• tyoro.exe: no-cacheとSSLとIEとファイルダウンロード

つまりこれはIEに起因する問題で、非SSL領域のSWF（に限らず、Ajax通信などでも同じでしょう）からSSL領域のデータをリクエストした際、サーバからのレスポンスヘッダにPragma: no-cacheが含まれているとIE側で正しく処理ができないんだそうです。なんとご無体な・・・。

FirefoxでHttpFox使ってdata_output.phpのレスポンスヘッダを調べてみたところ、あったあったありましたよPragma:no-cacheが。ということで、php側に対応を依頼しました。

しかしこれ随分と前から存在する問題のようですけど、IE側では修正（変更？）する予定は無いんでしょうか・・・。

製作中のとあるフル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の動作を明示的に許可する必要があります。

1. HTML側にて、paramタグ及びembedタグでallowScriptAccessの値にalwaysを指定する。
2. ActionScript側にて、Security.allowDomain等で許可するドメインを指定する。

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

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

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

Security.allowDomain("*");

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

ええ、仰るとおり、まさに"very easy to crash"でしたよ（涙）。上記のスクリーンショットのように、Undocumented Trace Log Settings欄のチェックを全て外したら、クラッシュせずに動くようになりました。

で、原因究明の過程でFirebugのオフィシャルページ（Flashbug – An extension for Firebug | Course Vector）の文章について簡単に翻訳してみた（してしまった）ので、備忘録をかねて参考までにアップしておきます。

更新情報

• SharedObjectを発見するバグの修正
• Mac OSXのmm.cfgファイルの場所についてのバグの修正。今回は本当に直ってるはず。

説明

このプラグインは、Firefoxの中または外で稼働中のあらゆる.swfファイルのtrace内容を表示します。全てのtraceはFirebugのFlash Consoleに表示されます。Firebugの検索ボックスを使って文字列を検索すると、マッチする語がハイライト表示されます。他に追加された機能はエラー、警告、情報のtraceに対してのハイライトとアイコン表示です。最後に、trace内容に表示されるあらゆるURLについて、右クリックして新規のタブで開く事が出来るようになりました。

FlashTraceと同様、Flash Player Debuggerがインストールされていないとtrace内容は表示されません。Flashbugはお使いのPCに入っているFlashPlayerのバージョンを検知して表示します。Debug版のPlayerが入っていない時には、ダウンロード用のリンクが表示されます。

FlashTraceと異なり、flashlog.txtやmm.cfgファイルを設定する必要はありません。こういう作業はFlashbugがバックグラウンドで行いますから、皆さんはすぐに機能を利用することができます。

trace内容またはポリシーログのどちらかをFlashbugから直接開く事もできます。これで、traceされた生の内容をそのままエクスポートしたりコピーすることもできます。

他の新機能はShared Objectインスペクタです。これは表示されているページにロードされているswf全てを監視します。そして、ドメインに基づいてPCに保存されているShared Objectをチェックし、該当するものがあればパネルにリストアップします。

見つかったShared Objectは各行に表示され、階層を開く事でそこに含まれるデータを閲覧することができます。エディターがインストールされているならば、右クリックして直接ファイルを開く事もできます。パスをファイルにコピーしたり、保存されているフォルダーを開く事も出来ます。

最後ですが、FirebugのNetパネルに、AMFでコーディングが追加されました。この機能はFirebug1.4以上のみで有効です。データ転送をリモーティングに依存しているサイトを訪れると、サーバーに送信されるAMFリクエストの内容を見る事ができます。具体的には、Netパネルの中からAMFリクエストの行を発見し、その行を広げてみてください。すると、AMFタブが表示され、これをクリックする事でAMFメッセージが表示されます。

特徴

• Firebugのビルトイン検索機能の利用- ログ内容を検索すると、リアルタイムにハイライト表示されます。
• traceログの表示- 全てのブラウザで実行されているFlashインスタンスから送出される全てのtrace内容を表示します。
• ポリシーログの表示- FlashPlayerから送出される全てのポリシーログ出力を表示します。クロスドメインポリシーを使っていたり、異なるドメインからファイルなどを読み込む場合などにこの出力が発生します。
• デバッグプレイヤーのログ保存場所自動設定- FlashTracerではログファイルの場所などをマニュアルで設定する必要がありました。これらの設定はFlashbug側で自動的に行います。
• デバッグプレイヤーの設定編集- FlashPlayer自体が、traceする内容を変更することができるようになっています。FirebugのPreferencesウィンドウでこのオプションを設定できます。
• traceフィルタ- trace内容を様々なフォーマットで表示するためのビルトインフィルタが少しだけ用意されています。エラーについては赤字でエラーアイコン付きで表示するとか、XMLについては色つきの可読性の高いフォーマットで表示するなどです。現在Flashbugに含まれているのは下記のキーワードのみですが、将来的にはユーザー側でカスタマイズできるようにするつもりです。
  • @@XML@@ :XML形式で色つきで表示。
  • @@HTML@@ :XMLの場合と同じ。
  • @@INFO@@ :左側に青い情報アイコンを表示。
  • @@WARNING@@ :背景色が暗くなり、左側に警告アイコンを表示。
  • @@ERROR@@ :背景色が赤くなり、左側にエラーアイコンを表示。
• ビルトインリンク- trace内容に含まれるURLには下線が表示され、右クリックすることで別タブで開いたりクリップボードにコピーすることができます。
• Shared Object読み込み- 表示中のページに関連するあらゆるShared Objectを読み込む事が出来、Firebugのobjectと同じように閲覧することができます。
• （Firebug 1.4以上）AMF / リモーティングリクエスト / レスポンスデータの読み込み- ページとサーバーとの間で送受信されるAMFデータを閲覧することができます。

むむ、これ以前もあったなと思って、以下の方法で再設定して解決しました。

1. ブラウザのアドレス欄にabout:configと入力してEnter。下記のように表示されたら「細心の注意を払って使用する」をクリック。
   
2. 「フィルタ」欄にbrowser.tabs.closeWindowWithLastTabと入力。
   
3. 下部に表示された行をダブルクリックする。値がtrueとなり、行全体が太字で表示されたらブラウザを閉じる。
   

これでOK！元の挙動に戻りました。