March 26, 2006

Flashのページから、次のページに飛んで、戻るボタンで戻ってくるときに、ちゃんとFlashを元の状態に復帰してあげないと気持ち悪いと思うのですが、できればこういうのは標準装備して欲しいのと、ひょっとしてアーキテクチャを考える人にFlashが戻るボタンに対応する仕組みって知られてないのかなぁとか思ってみたので、サンプルを作ってみました。

今回紹介する方法は、フォームのhiddenに一旦、Flashの変数を退避しておいて、戻ってきたときにFlashに戻してあげる処理をして、あとはFlash側で復帰処理をしてあげればオッケーというものです。

サンプルはこちら

具体的な流れは、
1.Flashから任意のタイミングでJavaScriptを呼び出し、値を渡す。
2.値を受け取ったJavaScriptは、フォームに値をコピーする。（今回はhidden）
3.ページ遷移するリンクをFormのsubmitで遷移させる。（IEがこれをやらないとフォームの値を忘れるみたいで）
4.次の画面から戻るボタンで戻ってくる。
5.戻るボタンで戻ってきたことをJavaScriptで捕捉しておいて、値をFlashに復帰してあげる。
6.Flashは、受け取った初期値を使って、元の状態に戻す

という流れになります。ブラウザのリロードにも対応しています。

サンプルのソースはこちら

現状のサンプルは、IE以外で日本語を考慮していないのと、保存する値が次の画面にGETで送られてるので、それが気持ち悪い場合は、何か考えてあげる必要があります。
（画面遷移はPOSTを使えば良いような気もするし、日本語はFlashの中でJSONを使えば勝手にうまくやってくれそうな気がします）

また、この方法以外にFlashのShared Objectというクッキーのような機能を使って値を復帰してあげる手もあります。Flash派はこちらの方が簡単というか王道でしょうが、JavaScriptをメインで制御する方が親しみやすいかなと思ったので、今回の方法で紹介してみました。