スマホで見ているかどうかによってHTMLを変化させたいです。

Question

###実現したいこと

Webサイトの特定のページ内のリンクを、ブラウザの別タブで開くかどうかを閲覧するデバイスによって指定したいです。
特定のページ内でも別タブで開く箇所とそうでないリンクがあるため、同じページ内で個別に別タブで開くかどうかを設定できる必要があります。

###関連するコード

【PC、タブレット、スマフォを判断して別タブで開くかどうかを指定するコード】
※問題のページのphtmlファイルの一番最後に以下のコードを読み込んでいます

<script>
var sp = false; //スマフォフラグ
 jQuery(function () {
    var ua = navigator.userAgent;
    if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) {
        sp = true;
    } else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) {
        sp = true;
    } else {
        sp = false;
    }
})
 jQuery('a').click(function(){
    target = jQuery(this).data("target");
    link = jQuery(this).data("link");
    if(!sp && target == "blank"){
        window.open(link, '_blank'); // 別タブ
    }else{
        window.location.href = link; // 通常の遷移

    }
});

</script>

【別タブで開くかどうかを設定する<a>タグの部分】

<a href="#!"  target="_blank" data-target="blank" data-link="URL"  class="product-image">
     <img src="#">
</a>

以上、お手数ですが助言をいただけると幸いです。よろしくお願いします。

Answer 1

PCかスマフォかはnavigator.userAgentで判定できます。
個別の設定はdataメソッドでできそうです（これが最適かどうかは分かりませんが・・）

jQueryが使える前提ですが、下記のようなソースはいかがでしょうか。
※スマフォでの確認はできていません。PCブラウザでは確認済み
※とりあえず実現できるレベルのコードで長たらしくなってしまってますので、
最適コード書ける方のご指導いただきたく・・・

#サンプルソース

<a href="#!" data-target="blank" data-link="1.html">1</a>
<a href="#!" data-target="move" data-link="2.html">2</a>
<script>
var sp = false; //スマフォフラグ
$(function () {
    var ua = navigator.userAgent;
    if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) {
        sp = true;
    } else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) {
        sp = true;
    } else {
        sp = false;
    }
})
$('a').on('click',function(){
    target = $(this).data("target");
    link = $(this).data("link");
    if(!sp && target == "blank"){
        window.open(link, '_blank'); // 別タブによる遷移
    }else{
        window.location.href = link; // 同一タブによる通常の遷移
    }
});
</script>

data-XXXのXXXは任意なので好みと用途にあわせた名称にしてください。
PCかつblankであれば別タブ表示、そうでなければ同タブ遷移としています。

##コメントからの追記：
提示のコード（HTML/PHP）を書き換える場合

<a href="#!" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image" data-target="blank" data-link="<?php echo $_product->getProductUrl() ?>">テキストリンク</a>

##対応の手順方法
0. hrefの値を「#!」にする（別タブ遷移対象だけでOK）
0. data-link="XXX"を追加します（別タブ遷移対象だけでOK）
※data-link="XXX"のXXXは遷移先URLに置き換えてください。
0. data-target="XXX"を追加します（別タブ遷移対象だけでOK）
※data-target="XXX"は同一タブで遷移したいか、別タブで遷移したいか
別タブならXXXに「blank」を設定しています

※hrefにリンク先が設定されている場合はどうやっても同一タブに遷移するので別タブ遷移を設定したい先だけでも実現可能です。

##補足
dataメソッドについては作る方が自由に設定できますし、設定値も作りによって作り手の自由です。
CSSやJavaScriptフレームワークなどが使っている場合があるので、重複しないように気をつけてください。
※動的に追加したり消したり更新したりしている場合があるのでデベロッパーツールなどで確認すると良いでしょう。

Comments

[m.ts10806]

もちろん、全てのaタグにdata-を入れるのは非効率な対応になるかもしれません。
別タブ開くaタグだけに埋め込んでclassを指定して$('a.クラス名').on('click',function()のようにした方が効率的かもしれません。
その際は別タブ開かないaタグのhrefは普通に遷移先URLを設定します。

[h-o]

回答をいただき誠にありがとうございます。
コードの理解に時間がかかるためまた返信させていただきます。

[m.ts10806]

文章やコードの書き方などは分かりづらい部分もあったかもしれませんので、また聞いてください。
１つ１つはそんなに難しいことをやっているわけではありませんので、１つ１つ理解していきましょう。

[h-o]

ありがとうございます。

勉強不足で大変申し訳ないのですが、<a>タグ内のどこを残してどこを書き換えるのかがわかりません。
data-link="1.html"の箇所にはどういった値を書けばよいでしょうか？

該当のリンクのコードは以下のとおりです。
<a href="<?php echo $_product->getProductUrl() ?>" target="_blank" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image">テキストリンク</a>

[m.ts10806]

ん。急にPHPがでてきましたね。作りによってはもっと楽に出来そうですが話が広くなりそうなのでご提示のコードにだけ回答します。僕のやり方は遷移先URLすらも設定に入れ込んでしまうやり方なのであまり正攻法ではないということをご理解いただいた上で使ってもらえればと思います。
コメントに追記しておきます。

[m.ts10806]

追記ですが　hrefに設定している「#!」はaの画面遷移機能を無効にしています。

[h-o]

回答の追記ありがとうございます。

リンクの部分を以下のように書き、<script>XXX</script>の部分をページの最後に読み込みましたが、PC、スマホとも別タブで開きませんでした。
<a href="#!" data-target="blank" data-link="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image"><img></a>

また問題のページで以下のエラーがでていました。
beauty-diet.html:1213 Uncaught TypeError: Cannot read property 'on' of null

どこに問題があるのでしょうか？

[m.ts10806]

あー・・もしかしたらjQueryのバージョンが古くてonが使えないかな？
下記のように変更してみてください。

$('a').on('click',function(){　
↓
$('a').click(function(){

[m.ts10806]

あと、$('a').～～のままだとaタグ全てのクリックに対して動くので、今回の「スマフォかどうか判断が必要」「同一タブか別タブか判断が必要」なaタグのみに対応できるように
$('a.クラス名').click(function(){　とした方がいいですね。
例えば対象のaタグにproduct-imageが指定されているなら
$('a.product-image').click(function(){ とか。

※個人的にはここまでくるとmasaya_46nekoさんのコードが分かりやすくて修正もしやすいかな・・・とか思ってます・・

[h-o]

$('a').click(function(){ に書き換えて見ましたが機能しませんでした。

機能しないのはこのページで以下のコードを読んでいるからかもしれません。
<script>
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery('.bxslider').bxSlider({
auto: true,

pause: 9000, /*停止時間*/
speed: 2000

});
});
</script>

[m.ts10806]

なるほど分かりました。jQuery.noConflict();がきいてるんですね。
https://www.halawata.net/2011/10/jquery-noconflict/

僕が提示したコードの $ を jQuery に変更するといいですね。

[h-o]

$ を jQueryに変更しましたが、スマホで見たときも別タブで開いてしまうようです。

[m.ts10806]

ひとまず動くようにはなったっぽいですね。
スマフォアクセスかどうかを判断するのに「sp」という変数を定義していますが、
PCアクセス時、スマフォアクセス時、それぞれどうなっているかを確認してください。
もしかしたら最初のユーザエージェントのところで判断できていないかもしれないので「ua」も

あとは正常にdataメソッドの結果がとれていて想定の値になっているか、ですね。
取得結果を「target」 、「link」とそれぞれ変数に入れています。
alertかconsoleかを変数の内容が確定したあとに入れてデバッグしてみてください。

[m.ts10806]

ひとまず、今回やりたいことが多いので整理して段階をおってやっていきましょう。

１．スマートフォンアクセス、PCアクセスの切り分けを行う
２．PCアクセス時に設定により同一タブ、別タブを切り分ける
３．スマフォアクセス時に別タブ設定があっても全て同一タブで遷移させる

1から順番にOKであれば次の実装をしていきましょう。
そうすることでどこに問題があるのかの切り分けが明確になります。
1さえ出来てしまえば同一タブ別タブのやり方は僕のやり方にこだわる必要はありませんし。

[h-o]

はい。ありがとうございます。

やりたいことは１〜３で間違いないです。
Chromeのデベロッパーツールで $('a').on('click',function(){ の行にブレイクポイントを設定し、watchでsp,uaを入力しそれぞれの値を見てみると以下のとおりでした。
スマフォ sp : false ua : <not available>
PC sp : false ua : <not available>

[m.ts10806]

あ、uaは$('a').on('click',function()の中では使えませんよ。
最初の$(function (){～})内で定義しているのでその中のみです。
var ua = navigator.userAgent;　直後にブレイクポイントを貼ってください。

[h-o]

失礼しました‥

uaの値はスマフォでは、
Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1
PCでは、
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36
と表示されました。

[m.ts10806]

んー・・・「iPhone」が含まれているので最初のsp = true;を通りそうですけどね・・。
ua取得後にsp に判断結果を代入しているのですが、PC,スマフォそれぞれどこを通っているかブレイクポイントを貼って確認できますか？
spにtrueが入ればスマフォと判断できているはずなので。

[m.ts10806]

あと、だいぶコードも改修されたでしょうから、現状のコードを質問内容に追記していただけると助かります。ページ全部のコードだと解読作業が果てしなくなるので改修した部分、追加した部分だけで結構です。
コード部分は</>を使ってコード記法にしてくださいね。

[h-o]

大変お世話になっております。どうぞよろしくお願いします。

> ua取得後にsp に判断結果を代入しているのですが、PC,スマフォそれぞれどこを通っているかブレイクポイントを貼って確認できますか？
ua判別コードの上から順に sp = true; , sp = true; , sp = false; の行にブレイクポイントを設定し、spの値を見ると上から、false , <not available> , <not available> の値を取得していました。

[m.ts10806]

その結果だとiPhoneに掛かり、想定どおりspにはtrueが入りそうです。
ブレイクポイント貼った時点では変数に代入されてないので、if文の最後の方ですとかに貼るとspにはtrueが入っているはず。

[m.ts10806]

コード編集ありがとうございます。
僕が提示したやり方はJavaScriptの機能で遷移させるので「target="_blank" 」は不要ですね。
（コメントからの追記に提示したコードでも除いていたはず）
これがあることで別タブに開きたい場合は2つ開きそうな気がします。

[h-o]

> if文の最後の方ですとかに貼るとspにはtrueが入っているはず。
$('a').on('click',function(){ の上の行で sp=true を確認できました。

変更を加えたコードを質問に追記しました。不足があればまた追記させていただきます。

[m.ts10806]

コメントのタイミングが重なってしまいましたが↑に書いたとおり「target="_blank" 」を除けば行けそうですね。

[h-o]

該当箇所のtarget="_blank"を削除しましたが、PC、スマフォどちらも別タブで開きませんでした。
PCでみたときのuaの判別のspの値はif文の上から<not available> , <not available> ,falseでした。

[m.ts10806]

spのところは問題なさそうですね。
こちらで同様のソースでdata-linkの部分だけ適当なリンク先に書き換えたプログラムでは動作しました（IE11,Chrome58）
あとはtarget,linkが正しく取れているかの確認ですね。
targetが”blank”でなければ同タブ遷移となるようにしているのでtargetが正しくとれていればOKです。

[m.ts10806]

面倒かもしれませんが、コードを修正した場合はこちらの質問のコードも反映していただけると助かります。よろしくお願いします。

[m.ts10806]

もしかしてご提示のページは既に直接修正されていっているのでしょうか？提示したコードが埋め込まれているようなので・・・
だとするとblankで遷移させたいリンク先がhrefに設定されいてdata-linkがそもそも設定されていないので
linkがおそらくnullになるため下記が動作しません。
window.open(link, '_blank'); // 別タブ
hrefにリンク先が入っているため同タブ遷移となるはずです。

[h-o]

> もしかしてご提示のページは既に直接修正されていっているのでしょうか？
直接修正しています。簡易のテスト環境として運用しているページです。

[m.ts10806]

「対応の手順方法」としてまとめました。
自身が書いたコードでそれぞれ反映出来ているかチェックしてください。
あと、テスト環境を誰にでも見れる場所にURLを置くのはセキュリティの観点からあまり好ましくありません。ご注意ください。

[h-o]

おかげさまで、本当におかげさまで、うまくいきました。
一人であれば、わからなくて投げ出していたかと思いますが、見ず知らずのmatsu1006様が丁寧に教えてくださるので私も諦めるわけにはいかないと思えました。
ありがとうございました。感謝します。

ちなみに、機能しなかった理由は$をjQueryに書き変えで、漏れていたものがあったからでした。私の不注意で申し訳ありません。
質問に書いたコードの関係部分は修正しています。

[m.ts10806]

回答者も結構勉強になってるんですよ。自分が知っていることを人にうまく伝えられるか、本当に知っているのか、わかっているつもりになっていないか、実は調べなきゃわからないことだったり。
自身も色々悩んで間違ってきて色んな人に助けてもらうことで乗り越えてきたことを、ちょっとでも他の方の役に立ったらと思っています（これは先人の受け売りですが）
h-oさんも自分が知っていることで誰かが悩んでいたら助けてあげてくださいね。

※あと、masaya_46nekoさんのやり方の方がシンプルですっきりしていますしメンテナンス性も高いです。ぜひ導入をご検討ください。

[h-o]

そう言っていただけるとありがたいです。
私も他の人に還元するという先人の考えを受け売って（失礼しました）いければと思います。

Answer 2

スマホかどうかの判別はmatsu1006様の方法を参考にしていただければと思いますが、個別の対応はsetAttributeを使用する方法が最適かと思います。

サンプルを載せておきますが、このサンプルではclassをtransitionに設定してあるaタグのtarget属性を""に変更するというものです。
matsu1006様のコードのスマートフォンかどうかを判別する部分と組み合わせてお使いください。

var elements=document.getElementsByClassName("transition");
for(i=0;i<elements.length;i++) {
elements[i].setAttribute("target","");
}

Comments

[m.ts10806]

おお、シンプルでわかりやすいコード！勉強になりますｍｍ

[Diawel]

ありがとうございます。
matsu1006様の回答はコメントが付けられていて初心者さんからするととてもわかりやすいんだろうなと思いました！
自分はあまりそういうの気にしないで書いてしまうんですよね。
コメントありがとうございました！

[h-o]

回答をいただき誠にありがとうございます。
コードの理解に時間がかかるためまた返信させていただきます。

[Diawel]

わかりました。
追記部分を見るとaタグにproduct-imageというclassが指定されているようなので、1行目のtransitionの部分をproduct-imageと書き換えていただければそのまま今の状態でご使用いただけると思います。

[m.ts10806]

僕もコメントの途中に書いてますがこちらの方が分かりやすく導入も容易だと思います・・・

[h-o]

> masaya_46neko 様
端的なコードをありがとうございます。
まだまだ勉強不足なためいただいたコードでも実装してみようと思います。

[h-o]

> masaya_46neko 様, matsu1006 様
masaya_46neko 様に書いていただいたコードでも以下用にしてうまく機能しました。
大変お世話になりました。ありがとうございました。

PCで別タブで開き、SPで別タブで開かなくしたいaタグに以下の値を設定
class="new-tab" target="_blank"

<script>
var sp = false; //スマフォフラグ
jQuery(function () {
var ua = navigator.userAgent;
if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) {
sp = true;
} else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) {
sp = true;
} else {
sp = false;
}
if(sp){
var elements=document.getElementsByClassName("new-tab");
for(i=0;i<elements.length;i++) {
elements[i].setAttribute("target","");
}
}
})

</script>

[m.ts10806]

ちょっと横レスになってしまうかもしれませんが、
masaya_46nekoさんご提示の「targetを無効化する」処理をそこに書く場合はスマフォフラグspは要らなくなるので、定義する必要もtrue,falseを代入する必要もなくなります。
ただiPad || Android（iPadまたはAndroidタブレット）の部分にも同様に「targetを無効化する」を指定する場合は同じ処理を二度書かないようにspフラグを活用すると良いでしょう。

sp判定のif文が終わった後に下記を追加。
if(sp){
var elements=document.getElementsByClassName("new-tab");
for(i=0;i<elements.length;i++) {
elements[i].setAttribute("target","");
}
}

[h-o]

> matsu1006 様
失礼しました。ご指摘ありがとうございます。
修正させていただきます。