ActionScriptでXMLのキャッシュ対策

Flashコンテンツを更新する際、XMLなど外部ファイルにデータを持たせて、それを更新するようなパターンがあります。メリットとしては、Flashアプリケーションを触らなくても更新でき、CMSとの連携もとれたりして非常に便利ではありますが、ActionScriptが複雑になり、Flashコンテンツの制作時間が長くなってしまうデメリットもあります。

XMLを更新したはずなのに、Flashの中身が変更されていない。という時がありました。ほとんどの場合ブラウザがキャッシュしているXMLが残ったまま、更新されたXMLを読みに行かないというのが原因です。のです。確認するときにブラウザのキャッシュを消せばいいのですが、お客さまにわざわざキャッシュを消させるわけにはいきません。^-^;

そこで今回は、ActionScriptでXMLのキャッシュを残さない方法を紹介します。残さないというより、FlashがXMLをロードする時に常に違うファイルとしてブラウザに認識させる方法。という言い方のほうが正しいです。

var myXML:XML = new XML();
myXML.load("hoge.xml"+"?noCache="+new Date().getTime());

XMLファイルにアクセスするパスに、?引数で現在の時間を付け足しています。サーバーへのアクセスは、[hoge.xml?noCache=1254463831798]こんな感じになり、ブラウザは1秒前とは違うファイルと認識して新たにXMLを取得、キャッシュを見に行くことはなくなるということです。特にXMLファイルの中身を書き消したりすることはありませんのでご安心を。
コンテンツが更新されない!とパニックを起こされる前に事前に対策しておいたほうがいいですねー!

ウェブアルバムdfGalleryをインストールしてみました

090927_06
dfGalleryとはFlickrによく似た機能が無料でつかえるツールです。CMSの管理画面があり、Ajaxで画像ファイルをアップロード。アルバム単位でタグが生成されホームページやブログへ簡単に貼付ける事ができます。コンテンツはFlashでスライドショーやフルスクリーン機能などがあります。php5以上とSQLが必要なので、設置するサーバーの環境を確認しましょう。

DEMO:Cotapon Photo Gallery | こたぽんが撮った写真

 ※別ウィンドウで開きます。
で、実際にどうやってインストールするか。いろいろ調べてみましたが、なかなか成功した!という記事が見当たりませんでした。唯一、参考にさせていただいたページが見つかりましたので紹介します。

Flickrのウェブアルバムと同等の機能を持つdfGallery 2.0をさくらインターネットの共用サーバーに設置する -KUMA TYPE-
http://blog.kumacchi.com/2009/03/flickrdfgallery_20.html#comments

どうもさくらレンタルサーバーではそーとー苦労するみたいですね。。。ただ、dfGallery自体がバージョンアップしてて解消されているかもしれません。ボクはロリポップを借りてるんですが、KUMA TYPEさんが苦労されている現象は全く起きませんでしたので、ある程度のインストール手順を書き留めておきます。

設置するまでの環境

・パソコン:Power Book G4 OS10.4
・レンタルサーバー:ロリポップ php5以上 MySQL可
・FTPクライアント:Cyberduck
パソコンの環境はあんまり関係ないと思いますけど一応^ー^;

手順その1:必要ファイルの準備

090927_01
まず、dfGallery 2.0をダウンロードしてください。
>>http://www.dezinerfolio.com/dfgallery-2/free-flash-gallery
「dfgallery_v2.005.zip」というzipファイルを解凍して、出てきたフォルダーに対して「dfg」という名前を付けました。最終的にこの名前が管理画面へのアドレスになるので、好きな名前を付けてください。

手順その2:FTPでアップロードしてからパーミッション設定

090927_02
名前を変えたこのフォルダーの中には、不可視ファイルでアクセス権限設定用の「.htaccess」が含まれていますので、フォルダーをまるごとFTPでアップしてください。ボクは「photo」というディレクトリにアップしました。これで、一応「http://hoge.com/photo/dfg/」にアクセスすれば管理画面にいけるんですが、ここで一回つまずきました。Cyberduckで、ディレクトリ「dfg」を右クリックして「情報」を選んでください。
090927_03
アクセス権、パーミッションの設定チェックボックスがあると思います。「グループ」と「その他」に対して【読み】と【実行】にそれぞれチェックを入れてください。
090927_04
これで、アクセスできなかった管理画面へアクセスできるようになりました。

ロリポップの場合、MySQLの設定

090927_05
上から順番に、
・hostname:ロリポップのサーバーアドレス。例えばmysql00.lolipop.jpこんなん。
・Database Type:MySQLのまま。
・username:ロリポップのデータベース名。
・password:データベースのパスワード。
・database:ロリポップのデータベース名と一緒かな・・??
・database prefix:ロリポップのデータベース名の末尾に「_」をつける??
KUMA TYPEさんを参考にさせていただきました。^ー^;
これでインストール完了。ログイン名とパスワードが「admin」のままになってたので変更しました。後は、KUMA TYPEさんの使い方がとても参考になりましたので、ブログランキングボタンをボチッ!っと押させて頂きました。m( _ _ )m

Let’s Enjoy!

さっそく数枚アップしてみましたので、よかったら観ていってくださいー!^-^
Cotapon Photo Gallery | こたぽんが撮った写真

※別ウィンドウで開きます。

外部画像ファイルにsetMask();すると「セキュリティ Sandbox 違反」というアラート

どういうときに起きたか

外部にある、jpgやgifファイルをFlashが読み込んで表示させるコンテンツはよくあります。例えば、その時画像が、画像専用のサーバーにあって、swfファイルとは別のドメインにあるとします。普通に画像を読み込むだけでは問題ないのですが、その読み込んだ画像に対してsetMaskメソッドを使うと、下記のようなアラートが出ました。

*** セキュリティ Sandbox 違反 ***
SecurityDomain 'http://image.www.hoge.co.jp/hoge.gif' が互換性のないコンテキスト 'file:///C/hoge.swf' にアクセスを試みました。

おそらく原因は、

setMask();メソッドが、外部画像を読み込んだMovieClipに対してマスクをかけるのではなく、なにか見えない力で外部画像がマスクをとりにいっている。そういうイメージなのかもしれません。つまりクロスドメインなんでしょうね。

解決方法

ActionScriptで下記を追加すると一発で直りました。

System.security.allowDomain("*");

いやぁ~いろいろ難しいですねーw ^-^;

ページ内リンクからブラウザの戻るボタンで、Flash Playerが正しく再生されない

つまりどういうことかというと

1.新規ウィンドウ、または新規タブでFlashが載っているページを開く。
2.ページ内リンク、a nameタグで移動する。
※このとき、ブラウザの戻るボタンが押せるようになっているはず。
3.ブラウザの戻るボタンを押す。
4.Flashが正しく表示されてない。

というバグ?を聞いたことがあります。いろいろ調べてみると、どうやらFirefoxやSafariは大丈夫で、IE6と7で確認しました。そのFlashコンテンツは、外部XMLファイルを読み込んで、その中に書かれている画像パスから外部外部画像データをすべて読み込んでから再生する。という仕組みになってて、再生するタイミングで、ステージの最前面に白いシェイプをおいて、そいつに対してdanndannアルファを0%に、フェードアウトして演出していました。

どうやら、戻るボタンを押したときに、なぜかタイムラインが1フレーム目に戻っているようにみられ、最初のフレームにXMLの読み込みや画像の読み込みのAction Scriptは実行済みの状態でした。Flash Playerのキャッシュかブラウザのキャッシュか。。そして、最終的に考えられる条件というのが、「シーン」で再生しているということです。

解決方法

090923_01

このように、「シーン」のタイムライン上で1フレーム目にいろいろAction Script、諸々の条件で再生。5フレーム目に移動していますね。今回の問題点は、ページ内リンクからブラウザの戻るを押すと、同じページ内に戻ってくるわけですが、Flashは5フレーム目に再生しきっている状態で戻ってしまうわけです。

090923_02

回避方法は、シーンに1フレームだけにMovieClipをおいて、その中にAction Scriptやコンテンツを置いたら解消されました。ただ、これでは同じページ内に戻ってきているにも関わらず、またXMLを読みにいったり画像をロードしたりすることになってしまいます。ユーザビリティが悪い場合は、「シーン」の1フレーム目に書かれたAction Scriptですべてお完結させれば事済みますが、既に作ってしまっているFlashを修正する場合は、新規シンボルで空のMovieClipを「シーン」1フレーム目に置いて、「シーン」あったAction Scriptやコンテンツは、すべてさっき作った空のMovieClipの中にペーストしてしまいましょう。そして「シーン」には1フレーム目にペーストしたMovieClipがあるだけ。一応これで、ページ内リンクからブラウザの戻るボタンを押したときに挙動がおかしくなるのは避けれると思います。