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

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

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

解決済

Javascriptでリダイレクトさせた際、URLのパラメータがリダイレクト後に消えてしまいます

yoshiko
yoshiko

総合スコア0

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1回答

0評価

0クリップ

4995閲覧

投稿2016/10/27 10:26

###前提・実現したいこと
UserAgentの判別によって、PC用とスマホ用の表示が切り替わるランディングページを作成しています。
急遽、アクセス解析の材料とするため、QRコードから流入してきた際にそれが計測できるよう、QRコードのURLに?を続けて、パラメータをつけることでQRコードからのアクセスをGoogleアナリティクスでカウントできるよう準備中です。

###発生している問題・エラーメッセージ
その際、下記のようなエラーが発生しています。
・QRコードにより、http://AAA\.com/\?test という内容を埋め込んだ上で、スマホからアクセスする
・UserAgentのjavascriptにより、http://AAA\.com/sp/index\.htmlにリダイレクトされる(←この時点で\?以降のパラメータが落ちてしまい、アナリティクスで計測できない)

現在、
・UserAgent判別用のjavascrpt
・パラメータ付き(QRコードからのアクセス)のアクセスの場合の遷移用の条件分岐Javascript
この2つのjavascriptをindex.htmlで読み込もうとしていますが、うまく動作せず、スマホ用の/sp/index.htmlにUserAgent判別することすらできない状態になってしまっています(パラメータ判別を除くと、PC or スマホ判別は動作します)

###該当のソースコード
userAgent.jsの記述内容

\(function\(\){ var ua = navigator\.userAgent\.toUpperCase\(\); var url = document\.location\.pathname; var spDir = '/sp/'; if \(ua\.indexOf\('IPHONE'\) != -1 && ua\.indexOf\('MOBILE'\) != -1\) { isSP\(\); } else if \(ua\.indexOf\('ANDROID'\) != -1 && ua\.indexOf\('MOBILE'\) != -1\) { isSP\(\); } else if \(ua\.indexOf\('IPAD'\) != -1 && ua\.indexOf\('MOBILE'\) != -1\) { isSP\(\); } else { isPC\(\); } // \(ua\.indexOf\('IPHONE'\) != -1 || \(ua\.indexOf\('ANDROID'\) != -1 && ua\.indexOf\('MOBILE'\) != -1\)\)\? // isSP\(\) : // isPC\(\); function isSP\(\){ if\(url\.match\(spDir\)\){ return false; }else{ location\.href = '\./sp/index\.html'; } } function isPC\(\){ if\(!url\.match\(spDir\)\){ return false; }else{ location\.href = '\./'; } } }\(\)\);

パラメータ付きリダイレクト用のファイルの記述内容(para.js)

\(function\(\) { // URLのパラメータを取得 var urlParam = location\.search\.substring\(1\); var ua = navigator\.userAgent\.toUpperCase\(\); var url = document\.location\.pathname; var spDir = '/sp/'; // URLにパラメータが存在する場合 if\(urlParam\) { // 「&」が含まれている場合は「&」で分割 var param = urlParam\.split\('&'\); // パラメータを格納する用の配列を用意 var paramArray = \[\]; // 用意した配列にパラメータを格納 // for \(i = 0; i < param\.length; i\+\+\) { // var paramItem = param\[i\]\.split\('='\); // paramArray\[paramItem\[0\]\] = paramItem\[1\]; // } console\.log\(urlParam\); if \(urlParam == 'test'\) { location\.href= '\./sp/index\.html\?test'; } else if \(urlParam == ''\) { return false; } }\)\(\);

index.htmlの抜粋

<!doctype html> <!--\[if lt IE 7\]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <!\[endif\]--> <!--\[if IE 7\]> <html class="no-js lt-ie9 lt-ie8"> <!\[endif\]--> <!--\[if IE 8\]> <html class="no-js lt-ie9"> <!\[endif\]--> <!--\[if gt IE 8\]> <html class="no-js"> <!\[endif\]--> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="\./css/style\.css" type="text/css"> <link rel="alternate" media="only screen and \(max-width: 640px\)" href="index\.html" > <link rel="stylesheet" href="\./bootstrap/css/bootstrap\.min\.css"> <script type="text/javascript" src="\./js/para\.js"></script> </head> <script type="text/javascript" src="\./js/userAgent\.js"></script> <script type="text/javascript" src="\./js/jquery-1\.10\.2\.min\.js"></script> <script>window\.jQuery || document\.write\('<script src="\./js/jquery-1\.10\.2\.min\.js"><\\/script>'\)</script> <script src="\./bootstrap/js/bootstrap\.min\.js"></script> <script> \$\(function\(\){ // #で始まるアンカーをクリックした場合に処理 \$\('a\[href\^=#\]'\)\.click\(function\(\) { // スクロールの速度 var speed = 600; // ミリ秒 // アンカーの値取得 var href= \$\(this\)\.attr\("href"\); // 移動先を取得 var target = \$\(href == "#" || href == "" \? 'html' : href\); // 移動先を数値で取得 var position = target\.offset\(\)\.top; // スムーススクロール \$\('body,html'\)\.animate\({scrollTop:position}, speed, 'swing'\); return false; }\); }\); </script> <script type="text/javascript"> \$\(function\(\) { var topBtn = \$\('#page-top'\); topBtn\.hide\(\); \$\(window\)\.scroll\(function \(\) { if \(\$\(this\)\.scrollTop\(\) > 100\) { topBtn\.fadeIn\(\); } else { topBtn\.fadeOut\(\); } }\); //スクロールしてトップ topBtn\.click\(function \(\) { \$\('body,html'\)\.animate\({ scrollTop: 0 }, 500\); return false; }\); }\); </script> <script> \$\(document\)\.ready\(function \(\) { \$\("\.navbar-nav li a"\)\.click\(function\(event\) { \$\("\.navbar-collapse"\)\.collapse\('hide'\); }\); }\); </script> </body> </html>

###試したこと
条件分岐を読み込ませる順番を変えるなどを試みました

###補足情報(言語/FW/ツール等のバージョンなど)
javascript、HTML、CSS、Bootstrapを利用しています

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

kei344
kei344

2016/10/27 18:18

例示用ドメインはご自身で所有されていない限りexample\.comを利用してください。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。