質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Animate CC

Animate CC(旧Flash Professional)は、アドビシステムズ社のWebアニメーション制作ツールです。描いたグラフィックにタイムラインで動きを付け、スクリプトでインタラクティブな操作を実装。動画や映像作品、インタラクティブコンテンツ、データの可視化に利用できます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

2845閲覧

IE11でjavascriptが正常に動作しません。

miwmiw

総合スコア1

Animate CC

Animate CC(旧Flash Professional)は、アドビシステムズ社のWebアニメーション制作ツールです。描いたグラフィックにタイムラインで動きを付け、スクリプトでインタラクティブな操作を実装。動画や映像作品、インタラクティブコンテンツ、データの可視化に利用できます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/06/25 11:03

編集2020/06/26 05:02

はじめまして。色々と試しましたが解決しませんでしたのでこちらに書き込みさせていただきます。解決方法がわかる方がいらっしゃいましたら、ご教示の程よろしくお願いいたします。

前提・実現したいこと

・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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi_takatsuk

2020/06/25 11:23

Animateの方で自動的に吐き出されたライブラリ的なものの中に、 IEでは動かない構文があるかもしれません。 質問者さんのコードよりそちらを探した方が原因特定早いかもしれません。 なんにせよ、ピュアJSではない構文がちらほら見受けられるので、 Animateから吐き出しのライブラリを見ないとなんともいえません。
miwmiw

2020/06/25 11:40 編集

コメントいただきありがとうございます。 すみません、確かにそうですよね。 jsは10000字以内という制限があり、長すぎてアップできなかったのですが、同時に書き出されたhtmlをアップしてみました。 テストページからもご確認いただけるような気がします。
miyabi_takatsuk

2020/06/25 11:41

そんなような気がします。 あと、最新のAnimateは、IEのサポート切ってる、とかだと、こちらでらどうしようもないかと。 (Edgeでも動かないのはなぜかはわからないが)
miwmiw

2020/06/25 11:48

adobeを確認してきたのですが、出力は、HTML5 Canvas をサポートするすべてのデバイスやブラウザーで実行できます。とのことですので、IE11も含まれると思います。 私の環境ではEdgeで正常に動いております。
m.ts10806

2020/06/25 20:48

>NOTES 誰が書いたものですか?
miwmiw

2020/06/25 23:52

m.ts10806さん、NOTESの部分はAnimateが自動で書き出しています。
miyabi_takatsuk

2020/06/26 01:27 編集

回答に既出ですが、 Object.keysを使うなど、 Adobeがいくらcanvasブラウザサポートを謳っていたとしても、 IEをサポート、とは明言していないため、 サポート切っている可能性が高いです。 IEは、日本ではまだシェアが数%ありますが、 世界では、0.1%を切っており、 グラフに名前が載ってすらいない状態なので、 Adobe側も、Canvas使えるブラウザと言っても、 察してね?って意図があるような気がします。 (でなければ、IEのサポート外のメソッドを使うわけがない) Canvasで(ようは新しい技術)リッチコンテンツ作るなら、IEはサポート切る方が賢明です。 それができないなら、自作か、IE対応のライブラリを別で見つけるしかありません。 あと、一応、 IEは2025年には、完全にどのOSでもサポートが終わる予定です。 おそらくですが、Microsoftも早くIEは終わらせたいと思っているはずで、 強制アップデートなどをかけてIEを無くす気でいるような気がします。
miwmiw

2020/06/26 01:42

miyabi_takatsukさん、こちらにはIEのサポートを切るといえない事情がありまして、何とかIE11で動くようにできないかという質問をさせていただいております。 確かにAdobeはIEのサポートを明言しているわけではありませんので、サポートしていないのかもしれませんが、それでも解決法をご存じの方がいらっしゃったら、と思いました。
miyabi_takatsuk

2020/06/26 01:47

やはり、切れない事情があったのですね・・・。 うちの会社でもIEサポート切れないから、お気持ちお察ししますよ。 なんにせよ、一発で行かないと思うので、 虱潰しに、ライブラリ(Animate吐き出しの)においてのIEでは動かない構文を、IEでも動くように変えていくしかないかと・・・。 かもしくは、ライブラリJSの前に、ポリフィル系JSなどを読み込めば、割とさっくりいけるかもしれません。 ポリフィルとは、ES6以降の構文でも、ある程度下位互換をきかせられるというものです。 少なくともObject.keysは対応してたはず。
miwmiw

2020/06/26 01:52

ご理解ありがとうございます。私も正直なところ、IEはすぐさま滅べばいいのにと思います。 クライアント側でまだまだIEをご利用の方が多いのでマストなのだそうです。 ポリフィルについて調べてみます。ありがとうございます。
guest

回答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

etsuhisa

総合スコア416

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miwmiw

2020/06/25 12:31

ありがとうございます。 https://goma.pw/article/2016-02-21-0/ こちらを参考にkeys対策をしてみました。 コンソールには何も出なくなりましたが、挙動は変わらずです。 他に何か原因があるのかもしれませんね。
guest

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
sousuke

総合スコア3828

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miwmiw

2020/06/25 12:33

ありがとうございます。上のご回答と同じでkeys対策させていただきましたが、解決しておりません。何か方法があると良いのですが。
sousuke

2020/06/25 13:07

対策する場所下すぎじゃないですか?
miwmiw

2020/06/25 23:54

Animate内でjsを記載する場所がありましてそのトップに書くようにしています。 もっと上じゃないといけないのでしょうか?
miwmiw

2020/06/26 00:04

keysの対策をフレームのトップに記載していたのですが、グローバルの方にうつしてみました。挙動はそのままのようです。
sousuke

2020/06/26 00:26

追記しました。確認してみてください。
miwmiw

2020/06/26 00:53

ありがとうございます。 animateCCのグローバルという場所に入れるとhtmlに記載されるのですが、 そうではなくjavascriptの方に書くのでしょうか? var keys = Object.keys(this.soundStreamDuration); こちらの意味がよくわからないのですが、 どこに記入するのでしょうか?
sousuke

2020/06/26 01:11

animateCCとかいうのは私は全くわかりません。 65行目 --var keys = this.soundStreamDuration.keys(); var keys = Object.keys(this.soundStreamDuration); ↑の行の意味がわからないっていうことは https://goma.pw/article/2016-02-21-0/ このURLの内容を全く読んでいないということでしょうか?
miwmiw

2020/06/26 01:21

理解力がなく申し訳ありません。 読んでおりますが、そもそもプログラムに疎いもので、そのページを見ても何が原因で何が解決になっているのかが実のところよく理解できておりません。失礼しました。
sousuke

2020/06/26 04:30

javascriptのことよくわからずにie11で動作するコードに書き換えるってハードル高いっすね… ほかの人に任せるほうが現実的。
miwmiw

2020/06/26 04:58

私もそう思います。でも仕事なので・・・ご回答ありがとうございます。 おかげさまでなんとかなりそうです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問