Adobe Edge Animateで作ったアニメーションがIE11とFirefoxで動かない

2012年〜2013年頃にAdobe Edge Animateで作ったアニメーションが動かなくなりました。正確に言うとローディング画面で止まってしまってアニメーションがロードされないという現象です。バージョンは不明ですが、Edge Animate CCになる前の無料で使えるものを使用して作ったものです。

もう開発も終了してしまって過去のコンテンツではありますが、なぜ今かというと、アニメーションが動かない事にある日突然気が付くからです。

まず最初は、IE11で動かない事に気が付きます。IE10からアップデートしたら動かなくなったという指摘がありました。原因はよくわかりませんが、こんなときはあれしかありません。

困った時のIE互換モード

HTML
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10">

<head>内にこの一行を追加します。IE11がIE10と同じように動作するようになります。これでアニメーションは無事再生されるようになり、事なきを得ました。ただこの方法は根本的な解決ではないし、IE11で動いていたものが逆に動かなくなる場合もあります。

これでしばらくは安心です。しかしその数年後、今度はFirefoxで動かない事に気が付きます。気が付いた日、2016年9月某日。

IEではないので当然以前のような小技は使えません。エラーの出ているファイルは「index_edgePreload.js」で12行目という事はわかっています。しかし、どこかの頭のいい人が作ったスクリプトをワーキングプアが修正できるはずもありません。

この部分は「yepnope」というJavascriptライブラリを利用している部分らしく、「yepnope」をアップデートすればいいらしいとの事。ただしこれは数年前の情報で、しかも「IE11」で動かない問題を解決するための方法です。期待は薄いですが、試してみるしかありません。

GitHubからダウンロードできるとの事で、最新版のv2.0.0を入手します。「yepnope-2.0.0.min.js」のソースをコピーして、「index_edgePreload.js」に貼り付けて、Firefoxをリロード。しかしローディングの画像は水車のように回り続けます。結果だめでした。

さらに期待薄ですが、数年前にリリースされたのv1.5系の最終バージョン、v1.5.4を入手して、同じように貼り付けます。やはり水車は回っています。しかしその数秒後アニメーションが再生されました!再生までに少し時間がかかるようです。ちょっと動きは怪しいですが、解決とします。

yepnope1.5.4」の場所は少しわかりにくいので直接のリンクを貼っておきます。
https://raw.githubusercontent.com/SlexAxton/yepnope.js/v1.5.4/yepnope.1.5.4-min.js
このコードを全てコピーして、「index_edgePreload.js」の以下の部分を置き換えます。

Javascript
window.AdobeEdge = window.AdobeEdge || {};
// Include yepnope
if(!AdobeEdge.yepnope) {

ここです

AdobeEdge.yepnope = window.yepnope;
}
// end yepnope

正直、次動かなくなったらどうなるかわかりません。早めに別のアプリケーションに乗り換えた方がいいかもしれません。jQueryを使って自力で作るのが一番いいのでしょうけど、複雑なアニメーションになるとどうしてもこういったアプリケーションに頼らざるをえないところが歯がゆいですね。

今回は新しいもの、流行ってないもの、ユーザーが少ないもの、自分の手に負えないものを実戦投入してはならないという教訓になりました。

最終更新日:2016/10/12