ie_and_adobeedgeanimate当サイトのトップページのバナーは2013/11/10 現在、Adobe Edge Animateの初期版(1.0)で製作されたHTML5アニメーションとなっているのですが、Internet Explorerを11にアップデートしたところ、このアニメーションが全く機能しなくなってしまいました。

 

が、調べてみるとAdobe社の方から対処法が公開されていました。ただ、元になった記事は英語ですので、ちょろっと日本語訳しつつご紹介してみようかなと思います。

 

 

動かない。まるでただのしかばねのようだ

Adobe Edge Animateは、簡単操作でHTML5アニメーションが作れる便利なソフトです。本来はAdobe Creative Cloudの一部として有償で販売されている(定額課金)のですが、初期版だけは無料でいつまでも使えるようになっています。

 

貧乏性な私もこれに飛びついて、これまでいくつかのHTML5アニメーションを製作してきたのですが、これがInternet Explorerを11にアップデートした途端に動かなくなってしまったのですね。

 

endless_loadingこの画像の中央部分のように、ロード中状態を示すバーがいつまでも表示されたままになってしまうような状態です。

 

で、いろいろ検索して回った結果、Adobe社のブログにたどりつき、修正のためのアップデートが公開されていることを知りました。

 

が! さっきも書いたように、Adobe Edge Animateが無料なのは初期版だけ! アップデートするとなるとお金を払わなくてはなりません……

 

しかし! 太っ腹なAdobeスタッフは、ソフトをアップデートせずに、完成後のファイルを手動で修正することによってIE11でも動けるようにする方法を書いておいてくれました! 良かった! 2013年8月7日の記事なので、きっとIE11のPreview版から知られていた問題だったんでしょうね。

 

内容を簡単にまとめると「yepnope」という、リソースをロードするのに使うライブラリをアップデートすればいい、ということのようです。いやはや、yepnopeなんて初めて知りましたよ私は。

 

ただ、記事には詳しい修正方法も書いてあるのですが、なにぶん英語なので……苦手な人は苦手なんじゃないかなあ、なんて。

 

そこで、次の章で、私が簡単に和訳してみようと思いますですはい。

 

というわけで、以下、Adobe Edge Animate Team Blogの該当記事の和訳になりますですはい。なお、画像も元記事から拝借しました。

 

 

Edge Animate CCがアップデート。IE11との互換性を解決します

ハロー、Edge Animate 愛好家の皆さん!

 

今日はInternet Explorer11との互換性を解決するアップデートをリリースします。全てのユーザーに推奨されるアップデートです。ダウンロードはこちらから

 

https://creative.adobe.com/products/animate

 

Edge Animateの全リリースノートはこちらから

 

 

このアップデートについて:

 

ウェブは日々進化しているため、時として新しいブラウザの登場により物事が上手く行かなくなることもあり、私たちはブラウザの進歩に追いついていくのに全力を尽くしています。

 

AnimateはあなたのANコンテンツをプリロードするのに「yepnope」という人気の高いライブラリを使用していますが、今回のパッチはこのライブラリをアップデートするものです。AnimateのCC以前(バージョン1.Xやプレビュー版)によって製作されたコンテンツも、IE11との互換性の問題が生じます。

 

アップデートには以下の二つの選択肢があります。

 

推奨される方法:Animate CC 2.0で製作したコンポジションをAnimate CC 2.0.1でロードし、保存し、もう一度パブリッシュしてください。これで完了です。

 

既存のコンテンツを再保存するなんて面倒? 問題ありません、手動で簡単に修正する方法があります。

 

ノート:以下に示す解決法は万能ではありません。手動修正済みのファイルを古いバージョンのAnimateで開くと、修正済みのプリローダーは保存されず元に戻ってしまいます。アップデート済みのAnimate CCでコンポジションを再保存できない場合や、完成済みのプロジェクトに対してのみ、以下の解決法を用いて下さい。

 

 

1)yepnopeの最新バージョン(現時点では1.5.4)をGithubからダウンロードし、コードエディターで開いて下さい。

 

adobe_edge_animate201_1


 

2)「プロジェクト名_Preload.js」というファイルを開いて下さい(真っ先に(「このファイルを編集しないで下さい(”Do not edit this file”)」と書いてあるでしょうが、心配無用です)

 

adobe_edge_animate201_2


 

3)yepnope.1.5.4-min.jsの内容をコピーしてpreloader.jsの

 

if(!AdobeEdge.yepnope) {
 

 

AdobeEdge.yepnope = window.yepnope;
}

 

の間にペースト(貼付け)しましょう。

 

adobe_edge_animate201_3


 

 

Animateをご使用いただきありがとうございます。ご質問がありましたら、Animate ユーザーフォーラムまでどうぞ。

 

Edge Animate チームより

 

 

yepnope最新版のダウンロードについて補足

英語記事の和訳部分は以上です。

 

というわけで(和訳の出来はともかくw)たいへん分かりやすい解説で基本的には問題ないかと思いますが、一点、yepnope最新版のダウンロードでつまずく人がいそうな気がするので補足しておきます。

 

github_yepnopeまずはGitHubのyepnopeページにアクセス。分かりにくいですが、右の方に「Download ZIP」というのがあるのでクリックしてZIP形式でダウンロード。

 

ZIPを解凍すると色々なファイルが入っていますが、必要なのは記事中でも触れられている「yepnope.1.5.4-min.js」だけです。

 

まとめ:とりあえず事なきを得たが……

fixed_animationそういうわけで、ファイルを修正すると、このように無事に元通り動くようになりました。

 

とまあ、今回は事なきを得たわけですが、このままだと新しくアニメーションを作る度に手動で修正する必要がありますよね……Adobe Edge Animate 1.0、つまりアップデートの提供されない初期版だけ無料、というのは、やっぱり無理があるみたいですね。

 

そうなると、次にアニメーションを作るときは別のツールを使うことを考えざるを得ないですね……最近、Googleが似たようなコンセプトっぽい無料ソフトの「Google Web Designer」というのを発表したらしいので、とりあえず、次はこれを試してみようかな、と思っていたりします。

 

ではでは。