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

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

ただいまの
回答率

87.61%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 960

score 1

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

前提・実現したいこと

・AnimateCCからパブリッシュしたHTML5canvasです。
・仕様としては、ページに複数のボタンがあり、マウスオーバーでバルーンの説明が出て、クリックするとページ遷移するというものです。
・タッチデバイスの場合は一度タッチしてバルーンが表示され、表示されている状態であれば遷移するという仕組みです。

発生している問題・エラーメッセージ

・IE11でjabascriptが正常に動作しません。
・IE11以外はほとんどのブラウザで動作に問題なし。(Windows-Edge、chrome、firefox/Mac-safari、iPadOS-safari)
・マウスオーバーで表示されるはずのものが初めから全て表示されていて、さらにリンクが効かないという状態です。
・マウスオーバーでポインターは指マークになるのでボタンとしての認識はしている様子です。
・IE11のコンソールエラーは特になし

該当のソースコード

そのままでは長すぎてアップできませんでした。
<!DOCTYPE html>
<!--
    NOTES:
    1. All tokens are represented by '$' sign in the template.
    2. You can write your code only wherever mentioned.
    3. All occurrences of existing tokens will be replaced by their appropriate values.
    4. Blank lines will be removed automatically.
    5. Remove unnecessary comments before creating your template.
-->
<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<title>test4</title>
<!-- write your code here -->
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="test4.js"></script>
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init() {
    canvas = document.getElementById("canvas");
    anim_container = document.getElementById("animation_container");
    dom_overlay_container = document.getElementById("dom_overlay_container");
    var comp=AdobeAn.getComposition("5FDE7BC209A410479D9DAFAC7D0A4B75");
    var lib=comp.getLibrary();
    var loader = new createjs.LoadQueue(false);
    loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)});
    loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});
    var lib=comp.getLibrary();
    loader.loadManifest(lib.properties.manifest);
}
function handleFileLoad(evt, comp) {
    var img=comp.getImages();    
    if (evt && (evt.item.type == "image")) { img[evt.item.id] = evt.result; }    
}
function handleComplete(evt,comp) {
    //This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
    var lib=comp.getLibrary();
    var ss=comp.getSpriteSheet();
    var queue = evt.target;
    var ssMetadata = lib.ssMetadata;
    for(i=0; i<ssMetadata.length; i++) {
        ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )
    }
    exportRoot = new lib.test0625();
    stage = new lib.Stage(canvas);
    stage.enableMouseOver();    
    //Registers the "tick" event listener.
    fnStartAnimation = function() {
        stage.addChild(exportRoot);
        createjs.Ticker.framerate = lib.properties.fps;
        createjs.Ticker.addEventListener("tick", stage);
    }        
    //Code to support hidpi screens and responsive scaling.
    AdobeAn.makeResponsive(false,'both',false,1,[canvas,anim_container,dom_overlay_container]);    
    AdobeAn.compositionLoaded(lib.properties.id);
    fnStartAnimation();
}
</script>
<!-- write your code here -->
</head>
<body onload="init();" style="margin:0px;">
    <div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:1024px; height:768px">
        <canvas id="canvas" width="1024" height="768" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
        <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1024px; height:768px; position: absolute; left: 0px; top: 0px; display: block;">
        </div>
    </div>
</body>
</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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • miyabi_takatsuk

    2020/06/26 10:47

    やはり、切れない事情があったのですね・・・。
    うちの会社でもIEサポート切れないから、お気持ちお察ししますよ。

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

    キャンセル

  • miwmiw

    2020/06/26 10:52

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

    キャンセル

  • miwmiw

    2020/06/26 11:03

    https://teratail.com/questions/171829
    こちらの質問が参考になりそうですので試してみようかと思います。

    キャンセル

回答 2

checkベストアンサー

0

65行目

var keys = this.soundStreamDuration.keys();

オブジェクトは 'keys' プロパティまたはメソッドをサポートしていません。
が出ます。

追記

参考サイト見てみましたがこれ64行目くらいに

if(!this.soundStreamDuration.keys){
    this.soundStreamDuration.keys = function(){
        var keys = [];
        for(var i in this.soundStreamDuration){
            if(obj.hasOwnProperty(i)){
                keys.push(i);
            }
        }
        return keys;
    };
}
var keys = this.soundStreamDuration.keys(); 

こんな感じで書かないとだめな気がする。
https://goma.pw/article/2016-02-21-0/
これはあくまでObject.keys({"test":0})ってやってkeyの配列を得るためだし使うなら

var keys = Object.keys(this.soundStreamDuration); 


こうじゃない?
これしてもそもそも「this.soundStreamDuration.keys()」が
「Object.Keys(this.soundStreamDuration)」と意味が同じかどうかがわからんけど…

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/06/26 10:21

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

    キャンセル

  • 2020/06/26 13:30

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

    キャンセル

  • 2020/06/26 13:58

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

    キャンセル

0

IE11でtest.htmlを開き、F12で開発者ツールを起動してから、test.htmlを再読み込みすると以下のメッセージが表示されることが確認できました。

HTML1300: ナビゲーションが発生しました。
test.html
SCRIPT438: オブジェクトは 'keys' プロパティまたはメソッドをサポートしていません。
test.js (65,3)

以下の場所です。

    this.clearAllSoundStreams = function(){
=>        var keys = this.soundStreamDuration.keys();
        for(var i = 0;i<this.soundStreamDuration.size; i++){

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/06/25 21:31

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

    キャンセル

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

  • ただいまの回答率 87.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る