Q&A
Animateの方で自動的に吐き出されたライブラリ的なものの中に、
IEでは動かない構文があるかもしれません。
質問者さんのコードよりそちらを探した方が原因特定早いかもしれません。
なんにせよ、ピュアJSではない構文がちらほら見受けられるので、
Animateから吐き出しのライブラリを見ないとなんともいえません。
はじめまして。色々と試しましたが解決しませんでしたのでこちらに書き込みさせていただきます。解決方法がわかる方がいらっしゃいましたら、ご教示の程よろしくお願いいたします。
前提・実現したいこと
・AnimateCCからパブリッシュしたHTML5canvasです。
・仕様としては、ページに複数のボタンがあり、マウスオーバーでバルーンの説明が出て、クリックするとページ遷移するというものです。
・タッチデバイスの場合は一度タッチしてバルーンが表示され、表示されている状態であれば遷移するという仕組みです。
発生している問題・エラーメッセージ
・IE11でjabascriptが正常に動作しません。
・IE11以外はほとんどのブラウザで動作に問題なし。（Windows-Edge、chrome、firefox／Mac-safari、iPadOS-safari）
・マウスオーバーで表示されるはずのものが初めから全て表示されていて、さらにリンクが効かないという状態です。
・マウスオーバーでポインターは指マークになるのでボタンとしての認識はしている様子です。
・IE11のコンソールエラーは特になし
該当のソースコード
javascript
1そのままでは長すぎてアップできませんでした。
html
1<!DOCTYPE html> 2<!-- 3 NOTES: 4 1. All tokens are represented by '$' sign in the template. 5 2. You can write your code only wherever mentioned. 6 3. All occurrences of existing tokens will be replaced by their appropriate values. 7 4. Blank lines will be removed automatically. 8 5. Remove unnecessary comments before creating your template. 9--> 10<html> 11<head> 12<meta charset="UTF-8"> 13<meta name="authoring-tool" content="Adobe_Animate_CC"> 14<title>test4</title> 15<!-- write your code here --> 16<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script> 17<script src="test4.js"></script> 18<script> 19var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation; 20function init() { 21 canvas = document.getElementById("canvas"); 22 anim_container = document.getElementById("animation_container"); 23 dom_overlay_container = document.getElementById("dom_overlay_container"); 24 var comp=AdobeAn.getComposition("5FDE7BC209A410479D9DAFAC7D0A4B75"); 25 var lib=comp.getLibrary(); 26 var loader = new createjs.LoadQueue(false); 27 loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)}); 28 loader.addEventListener("complete", function(evt){handleComplete(evt,comp)}); 29 var lib=comp.getLibrary(); 30 loader.loadManifest(lib.properties.manifest); 31} 32function handleFileLoad(evt, comp) { 33 var img=comp.getImages(); 34 if (evt && (evt.item.type == "image")) { img[evt.item.id] = evt.result; } 35} 36function handleComplete(evt,comp) { 37 //This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage. 38 var lib=comp.getLibrary(); 39 var ss=comp.getSpriteSheet(); 40 var queue = evt.target; 41 var ssMetadata = lib.ssMetadata; 42 for(i=0; i<ssMetadata.length; i++) { 43 ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} ) 44 } 45 exportRoot = new lib.test0625(); 46 stage = new lib.Stage(canvas); 47 stage.enableMouseOver(); 48 //Registers the "tick" event listener. 49 fnStartAnimation = function() { 50 stage.addChild(exportRoot); 51 createjs.Ticker.framerate = lib.properties.fps; 52 createjs.Ticker.addEventListener("tick", stage); 53 } 54 //Code to support hidpi screens and responsive scaling. 55 AdobeAn.makeResponsive(false,'both',false,1,[canvas,anim_container,dom_overlay_container]); 56 AdobeAn.compositionLoaded(lib.properties.id); 57 fnStartAnimation(); 58} 59</script> 60<!-- write your code here --> 61</head> 62<body onload="init();" style="margin:0px;"> 63 <div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:1024px; height:768px"> 64 <canvas id="canvas" width="1024" height="768" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas> 65 <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1024px; height:768px; position: absolute; left: 0px; top: 0px; display: block;"> 66 </div> 67 </div> 68</body> 69</html>
試したこと
・IE11がjavascript有効になっているかどうか
→デフォルトで有効になっている。
・「’」が「｀」になっていないかなどを確認 →特になし
・ユーザーエージェントでEdgeを指定 →同じ結果
・IE11がHtml5canvas対応ブラウザかどうか。→IE9より対応している
・IE11に対応していないjavascriptの仕様などを確認。
→手書き部分では使用していないのですが、Animateが自動的に書き出している部分で使用している可能性はあります。
https://teratail.com/questions/186126?link=qa_related_pc
こちらを参考にメタタグを入れてみましたが変化なしでした。
補足情報（FW/ツールのバージョンなど）
Windows10
問題の出ているInternet explorer11のバージョン
11.900.18362.0
Adobe Animate バージョン20.03
コメントいただきありがとうございます。
すみません、確かにそうですよね。
jsは10000字以内という制限があり、長すぎてアップできなかったのですが、同時に書き出されたhtmlをアップしてみました。
テストページからもご確認いただけるような気がします。
そんなような気がします。
あと、最新のAnimateは、IEのサポート切ってる、とかだと、こちらでらどうしようもないかと。
（Edgeでも動かないのはなぜかはわからないが）
adobeを確認してきたのですが、出力は、HTML5 Canvas をサポートするすべてのデバイスやブラウザーで実行できます。とのことですので、IE11も含まれると思います。
私の環境ではEdgeで正常に動いております。
>NOTES
誰が書いたものですか？
m.ts10806さん、NOTESの部分はAnimateが自動で書き出しています。
回答に既出ですが、
Object.keysを使うなど、
Adobeがいくらcanvasブラウザサポートを謳っていたとしても、
IEをサポート、とは明言していないため、
サポート切っている可能性が高いです。
IEは、日本ではまだシェアが数%ありますが、
世界では、0.1%を切っており、
グラフに名前が載ってすらいない状態なので、
Adobe側も、Canvas使えるブラウザと言っても、
察してね？って意図があるような気がします。
（でなければ、IEのサポート外のメソッドを使うわけがない）
Canvasで（ようは新しい技術）リッチコンテンツ作るなら、IEはサポート切る方が賢明です。
それができないなら、自作か、IE対応のライブラリを別で見つけるしかありません。
あと、一応、
IEは2025年には、完全にどのOSでもサポートが終わる予定です。
おそらくですが、Microsoftも早くIEは終わらせたいと思っているはずで、
強制アップデートなどをかけてIEを無くす気でいるような気がします。
miyabi_takatsukさん、こちらにはIEのサポートを切るといえない事情がありまして、何とかIE11で動くようにできないかという質問をさせていただいております。
確かにAdobeはIEのサポートを明言しているわけではありませんので、サポートしていないのかもしれませんが、それでも解決法をご存じの方がいらっしゃったら、と思いました。
やはり、切れない事情があったのですね・・・。
うちの会社でもIEサポート切れないから、お気持ちお察ししますよ。
なんにせよ、一発で行かないと思うので、
虱潰しに、ライブラリ（Animate吐き出しの）においてのIEでは動かない構文を、IEでも動くように変えていくしかないかと・・・。
かもしくは、ライブラリJSの前に、ポリフィル系JSなどを読み込めば、割とさっくりいけるかもしれません。
ポリフィルとは、ES6以降の構文でも、ある程度下位互換をきかせられるというものです。
少なくともObject.keysは対応してたはず。
ご理解ありがとうございます。私も正直なところ、IEはすぐさま滅べばいいのにと思います。
クライアント側でまだまだIEをご利用の方が多いのでマストなのだそうです。
ポリフィルについて調べてみます。ありがとうございます。
https://teratail.com/questions/171829
こちらの質問が参考になりそうですので試してみようかと思います。
回答2件
0
IE11でtest.htmlを開き、F12で開発者ツールを起動してから、test.htmlを再読み込みすると以下のメッセージが表示されることが確認できました。
HTML1300: ナビゲーションが発生しました。 test.html SCRIPT438: オブジェクトは 'keys' プロパティまたはメソッドをサポートしていません。 test.js (65,3)
以下の場所です。
JavaScript
1 this.clearAllSoundStreams = function(){ 2=> var keys = this.soundStreamDuration.keys(); 3 for(var i = 0;i<this.soundStreamDuration.size; i++){ 4
投稿2020/06/25 12:09
総合スコア416
ありがとうございます。
https://goma.pw/article/2016-02-21-0/
こちらを参考にkeys対策をしてみました。
コンソールには何も出なくなりましたが、挙動は変わらずです。
他に何か原因があるのかもしれませんね。
0
ベストアンサー
65行目
var keys = this.soundStreamDuration.keys();
オブジェクトは 'keys' プロパティまたはメソッドをサポートしていません。
が出ます。
追記
参考サイト見てみましたがこれ64行目くらいに
javascript
1if(!this.soundStreamDuration.keys){ 2 this.soundStreamDuration.keys = function(){ 3 var keys = []; 4 for(var i in this.soundStreamDuration){ 5 if(obj.hasOwnProperty(i)){ 6 keys.push(i); 7 } 8 } 9 return keys; 10 }; 11} 12var keys = this.soundStreamDuration.keys();
こんな感じで書かないとだめな気がする。
https://goma.pw/article/2016-02-21-0/
これはあくまでObject.keys({"test":0})ってやってkeyの配列を得るためだし使うなら
javascript
1var keys = Object.keys(this.soundStreamDuration);
こうじゃない？
これしてもそもそも「this.soundStreamDuration.keys()」が
「Object.Keys(this.soundStreamDuration)」と意味が同じかどうかがわからんけど…
投稿2020/06/25 12:09
編集2020/06/26 00:29
総合スコア3830
ありがとうございます。上のご回答と同じでkeys対策させていただきましたが、解決しておりません。何か方法があると良いのですが。
対策する場所下すぎじゃないですか？
Animate内でjsを記載する場所がありましてそのトップに書くようにしています。
もっと上じゃないといけないのでしょうか？
keysの対策をフレームのトップに記載していたのですが、グローバルの方にうつしてみました。挙動はそのままのようです。
追記しました。確認してみてください。
ありがとうございます。
animateCCのグローバルという場所に入れるとhtmlに記載されるのですが、
そうではなくjavascriptの方に書くのでしょうか？
var keys = Object.keys(this.soundStreamDuration);
こちらの意味がよくわからないのですが、
どこに記入するのでしょうか？
animateCCとかいうのは私は全くわかりません。
65行目
--var keys = this.soundStreamDuration.keys();
var keys = Object.keys(this.soundStreamDuration);
↑の行の意味がわからないっていうことは
https://goma.pw/article/2016-02-21-0/
このURLの内容を全く読んでいないということでしょうか？
理解力がなく申し訳ありません。
読んでおりますが、そもそもプログラムに疎いもので、そのページを見ても何が原因で何が解決になっているのかが実のところよく理解できておりません。失礼しました。
javascriptのことよくわからずにie11で動作するコードに書き換えるってハードル高いっすね…
ほかの人に任せるほうが現実的。
私もそう思います。でも仕事なので･･･ご回答ありがとうございます。
おかげさまでなんとかなりそうです。
あなたの回答
tips
プレビュー
