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

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

ただいまの
回答率

89.10%

iOS9で動かしたい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 108

taruba.sod

score 1

前提・実現したいこと

JavaScriptでスマホでスライドをした時に画像が切り替わるようにしたいのですが、iOS10以降は無事動くのですが、9以前では動いてくれません。どこが問題なのかもわからないので、場所の指摘、よろしければ改善方法なども教えてください。

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

iOS9の端末では動作がしません。

該当のソースコード

function setSwipe(elem) {
    let t = document.querySelector(elem);
    let startX;        // タッチ開始 x座標
    let startY;        // タッチ開始 y座標
    let moveX;    // スワイプ中の x座標
    let moveY;    // スワイプ中の y座標
    let dist = 30; 

    t.addEventListener("touchstart", function(e) {
        e.preventDefault();
        startX = e.touches[0].pageX;
        startY = e.touches[0].pageY;
    });

    t.addEventListener("touchmove", function(e) {
        e.preventDefault();
        moveX = e.changedTouches[0].pageX;
        moveY = e.changedTouches[0].pageY;
    });

    t.addEventListener("touchend", function(e) {
        if (startX > moveX && startX > moveX + dist) {        // unからupにスワイプ
           var img = document.getElementById('ill');
           var src = img.getAttribute('src');
           var num = Number(img.className);
           var chang= ( '000' + (num+1) ).slice( -3 );
           var change= chang+".jpg";
           ill.setAttribute('src', change);
           ill.setAttribute('class', chang);
        }
        else if (startX < moveX && startX + dist < moveX) {    // upからunにスワイプ
           var img = document.getElementById('ill');
           var src = img.getAttribute('src');
           var num = Number(img.className);
            if((num-1)>0){
              var chang= ( '000' + (num-1) ).slice( -3 );
              var change= chang+".jpg";
              ill.setAttribute('src', change);
              ill.setAttribute('class', chang);
           }
        }
    });
};
 window.addEventListener("load", function(){
   setSwipe("#ill");
 });

試したこと

<img id="ill" class="001" src="001.jpg">
この画像をスライドすると
<img id="ill" class="002" src="002.jpg">
こう切り替え、表示する画像を2枚目にしたい。

補足情報(FW/ツールのバージョンなど)

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • miyabi_takatsuk

    2020/06/30 02:14

    た、対応しなくて良いのでは?
    ユーザー数もほぼ皆無ですし、
    iOS11でさえ、サポート切っているサイトやアプリがほとんどですし。

    iOS9に対応しなくてはならない強い理由があるのでしょうか?
    けっこうバグとか現代の仕様に着いていけないなど、対応はかなり地獄かと思いますよ。

    キャンセル

  • AkitoshiManabe

    2020/06/30 08:53

    javascript コードはコピペで貼り付けたものでしょうか?
    (コードブロックで囲んだほうが読みやすくなり、回答もつきやすいと思いますので編集してください)。

    キャンセル

  • taruba.sod

    2020/06/30 17:00

    使っているが古いiPhoneなのでそちらからも入れるといいなと思ったのですが、やはり難しそうですか……。

    キャンセル

  • taruba.sod

    2020/06/30 17:01

    コードブロックについての指摘ありがとうございます。
    修正しました。

    キャンセル

回答 2

check解決した方法

0

見ていただいてありがとうございました。
iOS9ではES6が対応していないためにletを使った変数宣言が出来ませんでしたので、letからvarに直したら無事動きました。
他に似たような人なんていないと思いますが、お気をつけください。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

実機確認できない状況ですので、解決に至らないかもしれませんが…。

ご質問のコードから感じたのは1点です。

  • 4箇所の ill.setAttribute() を img.setAttribute() に変更してみる

Google検索 window id属性 などで特徴を記したページがヒットしますが
id属性を持った要素に グローバル変数(ill)でアクセスしています。
これを、var img = document.getElementById('ill'); として取得した img に置き換えてみるというもの
(昔も一般的に使われていたコードにしてみるという答案になります)。

※touchイベント周辺の実装は iPhone3GS 時代から変わりないので問題ないと思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/06/30 19:49

    回答ありがとうございます。
    動きませんでしたが、touchイベントは大丈夫なんですね。
    他の部分をいろいろ試してみます。

    キャンセル

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

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

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