JSまたはjQueryでモバイル判定し、デバイスによってリンク先を変更したい

Question

実現したいこと,試したこと

$(function () {
    var ua = navigator.userAgent;
    if ((ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0) && ua.indexOf('Mobile') > 0) {
        // スマートフォン用処理
	 var Id_01 = mobile/activity/xxxxx?event_id=01;
　　　var Id_02 = mobile/activity/xxxxx?event_id=02;
     } else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) {
	   // タブレット用の処理
	 var Id_01 = mobile/activity/xxxxx?event_id=01;
      var Id_02 = mobile/activity/xxxxx?event_id=02;
     } else {
　　　　// それ以外PC用
	 var Id_01 = schedule/xxxxx?event_id=01;
     var Id_02 = schedule/xxxxx?event_id=02;
					  }
				   });
				})

<a href="javascript:window.location.href='https://www.xxxxxx.com/'+Id_01;" target="_blank"></a>
<a href="javascript:window.location.href='https://www.xxxxxx.com/'+Id_02;" target="_blank"></a>

・モバイル&タブレット
https://www.xxxxxx.com/mobile/activity/xxxxx?event_id=01
https://www.xxxxxx.com/mobile/activity/xxxxx?event_id=02

・PCの時
https://www.xxxxxx.com/schedule/xxxxx?event_id=01
https://www.xxxxxx.com/schedule/xxxxx?event_id=02

上記のように、
①ページ読み込み時にモバイルかPCを判別し、②それぞれIDの付いたリンクを指定したいです。

一番上に書いたコードで試してみましたが、動きませんでした…。
このIDは「id=03」「id=04」...と増えていく予定です。

参考

https://teratail.com/questions/73341

上記を参考にいたしました。

何かもっと効率の良い方法がありましたらご教示ください。

よろしくお願いいたします。

###　実現方法

$(function(){
	var ua = navigator.userAgent;
	if ((ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0) && ua.indexOf('Mobile') > 0){
　　　　　　　　$('.id=01').attr('href','https://www.xxxxxx.com/mobile/activity/xxxxx?event_id=01');
　　　　　　　　$('.id=02').attr('href','https://www.xxxxxx.com/mobile/activity/xxxxx?event_id=02');
	} else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){
　　　　　　　　$('.id=01').attr('href','https://www.xxxxxx.com/mobile/activity/xxxxx?event_id=01');
　　　　　　　　$('.id=02').attr('href','https://www.xxxxxx.com/mobile/activity/xxxxx?event_id=02');
	} else {
　　　　　　　　$('.id=01').attr('href','https://www.xxxxxx.com/mobile/activity/xxxxx?event_id=01');
　　　　　　　　$('.id=02').attr('href','https://www.xxxxxx.com/mobile/activity/xxxxx?event_id=02');
	}
 });

この方法で思っていました動きは実現しました。
効率の良い方法、これから勉強したいと思います。

Comments

[m.ts10806]

コードがマークダウンで提示されている割には>のようにHTMLエスケープかかっています。
またどこにもHTMLに対して挿入しているような記述がありません。
本当にコードそのまま貼り付けましたか？

「動きません」とは何が起きたのでしょうか？
ブラウザのデベロッパーツールのコンソールにエラーが出力されていないかご確認ください。

[unee]

ご確認いただきありがとうございます。
コピペ時にHTMLエスケープがかかってしまったようでした。

参考に記載したURLを参考にして作成しており、何かもっと記述が必要ということでしょうか？

[m.ts10806]

コメントの後半に書きましたコンソール確認はどうでしたか？
提示の書き方だとそもそも変数に正しく文字列をセットできてないのでそこでエラーになると思いますが。
また既に書いたようにJavaScriptコード内にどこにもhtmlに挿入している箇所がないです。
html内に変数書いてもただのそういう文字列でしかないですよ。

[m.ts10806]

提示の質問の回答を参考にされた雰囲気が全くないコードになっています。
いずれの回答もJavaScriptのコードでhtmlを書き換える形式のはずです。

[m.ts10806]

答えを書くのは簡単ですが、変数の使い方や定義の仕方のところすらまだきちんと理解されていない状態でコピペコードを回答としても質問者さんのためにならないと思い、回答を躊躇っています。それでは本当の解決にならないからです。

[unee]

ありがとうございます、少し考えてみます。

[m.ts10806]

ヒントだけの回答にしておきますので、あとはがんばってみてください。

[m.ts10806]

解決されたようですね。よかったです。あとは変数の有効活用です。
同じような文字列は変数にするとか工夫されるとシンプルでメンテナンス性も高いコードになります。今後の参考にしてください。

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

Answer 1

ヒントのみの回答です。

まず。

コードのインデントが揃っていないと開始と終了の位置が見えなくなり、
バグの温床となります。
コードフォーマット機能のついているテキストエディタ（IDEなど）かフォーマットサービスを使いましょう。

ちなみに、基本的にコードの""や''中以外に全角スペースを含んではいけません。

※フォーマットサービスを利用した結果

$(function() {
var ua = navigator.userAgent;
if ((ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0) && ua.indexOf(
		'Mobile') > 0) {
	// スマートフォン用処理
	var Id_01 = mobile / activity / xxxxx ? event_id = 01;
	var Id_02 = mobile / activity / xxxxx ? event_id = 02;
} else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) {
	// タブレット用の処理
	var Id_01 = mobile / activity / xxxxx ? event_id = 01;
	var Id_02 = mobile / activity / xxxxx ? event_id = 02;
} else {
	// それ以外PC用
	var Id_01 = schedule / xxxxx ? event_id = 01;
	var Id_02 = schedule / xxxxx ? event_id = 02;
}
});
})

おかしい箇所が何箇所かありますね。
変数に文字列をおさめるところもそうですが、
カッコの開始と閉じがあってません。結構ベタッと左に寄ってしまっています。

この状態でブラウザデベロッパーツールのコンソールを確認するとこうなります。

※画像はGoogleChrome

ここからはデバッグです。

• ChromeのデベロッパーツールでJSをデバッグする方法(2018年版)

まずはエラーを直す必要がありますが、インデントがおかしいところはきちんとしなければなりません。

基本形から作り直すのが確実です。

まずは外枠から。

$(function() {

});

これは「ドキュメントを読み込み後に実行する」ですね。

• jQueryの基本 - $(document).ready

uaの宣言

$(function() {
    var ua = navigator.userAgent;
});

ifの分岐のところのみ

$(function() {
	var ua = navigator.userAgent;
	if ((ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0) && ua.indexOf(
			'Mobile') > 0) {
		// スマートフォン用処理
	} else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) {
		// タブレット用の処理
	} else {
		// それ以外PC用
	}
});

ここで画面を更新してデベロッパーツールのコンソールを確認すると、
エラーがなくなっているはずです。

ここから、ifの書く分岐の中身を戻していきます。

$(function() {
    var ua = navigator.userAgent;
    if ((ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0) && ua.indexOf('Mobile') > 0) {
    // スマートフォン用処理
        var Id_01 = mobile / activity / xxxxx ? event_id = 01;
        var Id_02 = mobile / activity / xxxxx ? event_id = 02;
    } else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) {
    // タブレット用の処理
        var Id_01 = mobile / activity / xxxxx ? event_id = 01;
        var Id_02 = mobile / activity / xxxxx ? event_id = 02;
    } else {
    // それ以外PC用
        var Id_01 = schedule / xxxxx ? event_id = 01;
        var Id_02 = schedule / xxxxx ? event_id = 02;
    }
});

ブラウザで読み込みなおしてコンソール確認

エラー出てますね。
aaa.html:20がコンソール上リンクになっているのでクリックしてみましょう。
※ちなみに20とはエラーが出ている行数なので、質問者さんとは違う数字が出ると思います。

var Id_01 = mobile / activity / xxxxx ? event_id = 01;です。
エラー内容は「Uncaught SyntaxError: Unexpected token ;」
「SyntaxError」はいわゆる「構文エラー」で、JavaScriptのコードの書き方のルールに沿っていないということになります。

エラーが出た場合、調べ方などは下記の記事が参考になります。

• エラーメッセージの読み方と対処, 検索や質問の原則

今回は結構基本的なミスですので先にここは答えを言ってしまいますが、
変数に情報をおさめるときのやり方が間違ってます。

文字列を代入したい場合、ダブルクォーテーション、またはシングルクォーテーションで括る必要があります。

• 文法とデータ型
• 変数と宣言
• JavaScriptのシングルクォーテーションとダブルクォーテーション

---

ちなみに、これだけでは動きません。
提示されたHTMLのaタグ　正しい書き方してますか？
<a href="リンク先URL">リンク文言</a>が基本の書き方です。

• <a> …… ハイパーリンクを指定する

---

ちなみに、これだけでも動きません。
URLを下記のように書いてますが、
mobile / activity / xxxxx ? event_id = 01
URLで「半角空白」は実はそれはそれで1つの文字列です。
おそらくこのままだと下記のようなURLに飛ばされます。
mobile%20/%20activity%20/%20xxxxx%20?%20event_id%20=%2001

詰めましょう。

---

ちなみに、これだけやっても動きません。
私は上のほうでチラッと「ドキュメントを読み込み後に実行する」としました。

これは「HTML全て読み込んだ後に」となります。
aタグにJavaScriptを埋め込んで変数を埋め込もうとしていますね。

ドキュメント読み込み後にユーザーエージェントの判断が行われるので、aタグに埋め込んだJavaScriptに指定した変数には何も入ってきません。

リンククリックしても
Uncaught ReferenceError: Id_01 is not definedのようなエラーがコンソールに出力されるはずです。

では、どうするか。

aタグのhrefをそれぞれ書き換えるが正解です。

質問者さんが参考にした回答は、この回答の2番目のコードかと思いますが、変数を定義しているのは「ドキュメント読み込み後」ではなく、「その場所を読み込んだとき」に定義しているため、変数に正しく情報が入ってきます。

おそらく今回のユーザーエージェントの判定についてもどこかから持ってきたものだから整合性がとれなくなってしまっているのだと思いますが、それなら、今使いたいコードに合ったやり方をやるべきと思います。

それがaタグのhrefをそれぞれ書き換えるです。

jQueryに「HTML属性を書き換える」ための機能であるattr()というのがあります。
これの2個目のattr(name,value)を使うと良いです。
nameに属性名（今回はhrefですね）、valueにその値（今回はURL）

ちなみに、jQueryで要素を扱う際、セレクターの使い方は必須です。覚えましょう。

• jQueryで要素を選択するセレクタの使い方【初心者向け】

aタグにidをつけるのが一番分かりやすいと思います。

---

ちなみに、コンソールにUncaught ReferenceError: $ is not definedのようなエラーが出ていたら、そもそもjQuery本体を読み込んでいません。

自身が書いている、または読み込ませているJavaScriptの記述より前に読み込ませてください。

Comments

[unee]

細かくご回答いただきありがとうございます…！
・<a>タグについて
こちら、この記事を書く際に抜けておりました…。実際に書いてあるコードにはございます。

・URLで「半角空白」
コピペした際になぜか入ってしまったようでした。記事としてあげる際、制作ツールの設定等見直したいと思います。

その他大変勉強になりました…。ありがとうございます。

Answer 2

【jQuery】スマートフォン（iPhone, Androidなど）とPCを判定するスクリプト