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

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

ただいまの
回答率

90.49%

  • JavaScript

    20851questions

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

JavascriptによるスマホサイトとPCサイトの切り替え

解決済

回答 2

投稿

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

m-iwai

score 6

前提・実現したいこと

JavascriptでPCサイトとスマホサイト(SPサイト)の振り分けをしています。
URLの例は
PC= https://hogehoge.co.jp/hoge/index.html
SP= https://hogehoge.co.jp/sp/hoge/index.html
となっており、階層構造はほぼ同一です。

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

JavascriptPCサイトからSPサイトに飛ばした後、SPサイトからPCサイトへのリンク飛ぶ際に再度SPサイトに飛ばされてしまう。スマートフォンからPCサイトへリンクを飛んだ際はSPサイトに飛ばさないようにしたい。

該当のソースコード

        <script type="text/javascript">
        var ua = navigator.userAgent;
        if (ua.indexOf('iPhone') > 0
        || (ua.indexOf('Android') > 0) && (ua.indexOf('Mobile') > 0)
        || ua.indexOf('Windows Phone') > 0) {
        location.href = './sp/';
        }
        </script>

試したこと

.htaccessも試したのですが、.htaccessですとスマートフォンでPCサイトを見る際、全てのリンク先でSPサイトに飛んでしまい、うまく行きませんでした。

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

HTML5 CSS3

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

+2

クッキーを使うのであれば、以下の処理を実装すれば、いいと思われます。
・初回訪問かどうかクッキーより判定する
・初回訪問の場合は、クッキーに登録し、ユーザーエージェントより遷移先を判定する
・初回訪問でなければ、そのまま表示させる

例)

        <script type="text/javascript">
          var cookieKey = 'visit'

          // クッキーから初回訪問かどうか判定する関数
          var isFirstVisit = function(){
            // クッキーの文字列を取得する。
            // 各クッキーはkey=valueの形式でセミコロン区切りで一つの文字列で保持されている
            var cookieString = document.cookie;
            // セミコロンで分割
            var cookies = cookieString.split(';');
            for(var i = 0; i< cookies.length; i++){
              // keyとvalueを分割
              // キーが同じものが存在すればfalse(初回訪問ではない)
              var key = cookies[i].split('=');
              if(key === cookieKey){
                return false;
              }
            }
            // クッキーにキーが存在しなければtrue(初回訪問)
            return true;
          };

          // 初回訪問かどうかチェックし、初回訪問であれば、
          // クッキーに登録して、ユーザーエージェントより遷移先を判断
          if(isFirstVisit()){
            // クッキーに登録(有効期限等を指定していないのでブラウザを閉じたら消える)
            document.cookie = cookieKey + '=true;';
            var ua = navigator.userAgent;
              if ( ua.indexOf('iPhone') > 0
                || (ua.indexOf('Android') > 0) && (ua.indexOf('Mobile') > 0)
                || ua.indexOf('Windows Phone') > 0) {
                location.href = './sp/';
              }
            }
        </script>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/01/17 16:00

    丁寧に解説していただきありがとうございます!
    こちらのコードで試して見たのですが、スマートフォンでSPサイトからPCサイトへのリンクをたどると、やはりSPサイトの方に飛んでしまいました。クッキーがうまく読み込めていないのでしょうか? ブラウザの再起動なども試したのですが。。

    キャンセル

  • 2018/01/17 16:11

    console.log(document.cookie);を仕込んで、クッキーの保存ができているか確認お願いします。
    また、空白等の余計な文字が含まれているかもしれないので、その場合は、判定処理を
    cookieString.includes(cookieKey );
    に変えてみてください

    キャンセル

  • 2018/01/19 10:19

    ご回答いただきありがとうございます。
    大変申し訳ないのですが、クッキーやJavascriptに明るくなく苦労してしまい、他の方法(.htaccess)も試しているうちに自己解決してしまいました。
    ご教授いただいた方法も大変参考になりました。ありがとうございました。

    キャンセル

+1

やり方は色々ありそうですが、cookieやlocalstorageを使って、どちらのサイトを見ようとしたいのかを保存しておいて、その判定をしてから、飛ばせば良いのでは?

https://so-zou.jp/web-app/tech/programming/javascript/cookie/
cookieの使い方は、こちらがわかりやすいかと思います。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/01/17 11:05

    ご回答いただきありがとうございます。cookieにlocalstorageと色々やり方があるのですね。その辺りが無知なので勉強していきたいと思います。
    できれば今回はどのようにすべきかご教授願えないでしょうか?

    キャンセル

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

  • JavaScript

    20851questions

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