Cntlog > スキルアップ・ノウハウ > JavaScript・jQuery > 【JavaScript】PCサイトかスマートフォンサイトを選択させるスクリプト

【JavaScript】PCサイトかスマートフォンサイトを選択させるスクリプト

PC向けサイトにアクセスした際にスマートフォン向けサイトを表示するか選択してもらうスクリプトを書きました。
今回はJavaScriptで作っています。

    //iPhone、iPad、AndroidのURLをリダイレクト(選択)させる
      $(function(){
        //ユーザーエージェントを取得
        var ua = navigator.userAgent;
        //スマートフォンの条件の設定
        var sp_flag = (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 )
        //スマートフォンでしか表示しないボタンを非表示
        if(!sp_flag){
          $('.sp_btn').remove();
        }

        //ポップアップウインドウを出す設定
        if (sessionStorage
          && !sessionStorage.getItem("sp_flag_set")
          && sp_flag) {
          if(confirm('スマートフォン用サイトを表示しますか?')) {
            location.href ='http://example.com/sp/';//スマートフォンサイトのURLに書き換えてください。
            sessionStorage.setItem("sp_flag_set",false);
          }else{
            sessionStorage.setItem("sp_flag_set",true);
          }
        }

      });

こんな動作です

01

仕様としてはPCサイトのみに今回のスクリプトを設置します。

  1. スマートフォン(タブレットも含む)でPCサイトにアクセスをした場合のみウインドウが出てスマートフォンサイトがある事を伝えて、どちらのサイトに行くかユーザーに選んでもらいます。
  2. 一度選択した場合はブラウザを閉じるまで再度どちらのサイトにアクセスするか聞かれません。
  3. PCサイトではClass(.sp_btn)の付いたコンテンツはスマートフォンでしか表示されないようにしています。
    (あとでスマートフォンサイトに移動したくなった時用のボタンを設置するのに使う想定です)

動作サンプル

今回のスクリプトを作るにあたってこちらのスクリプトを参考にさせてもらいました。
PCサイトへのアクセスをスマートフォンサイトに転送するJavaScript(寄稿)
Web Storageは始めて使ったのですが便利ですね。

関連記事

VueやNuxt.jsでよく利用しているライブラリ... Nuxt.jsめちゃくちゃ便利なのですが、使うならNuxtやVueに特化して作られたもののほうが、トラブルも少なくて積極的にそっち系のライブラリを選んで利用しています。 この記事で私がよく使っているライブラリを紹介します。 UIライブラリ buefy buefyはbulmaを...
簡単にスクロールアニメーションが設定できるAOS(jQuery不要)... 最近のWebサイトを見ているとメインビジュアルのアニメーション以外にもスクロール時にコンテンツの一部がアニメーションしてるページが増えてきました。 一つ一つJSで操作を管理すると結構手間になりますがライブラリを使えば、簡単に出来るものもあります。 今回はJSをほぼ書かずに簡単にスクロール...
npmで書くときの簡単な書き方 package.jsonを作る この書き方だと何も聞かれずにいい感じのpackage.jsonが作られる。 npm init -y packageのインストール方法 npm install ––save-devの省略系です。 書き方が短くなって便利。 npm i ...
Nuxt.jsでSCSSの変数をvueファイルでも使えるようにする... Nuxt.jsを使ってみるとSCSSで設定した変数やMixinがVueファイルで使えなかったのでVueファイルでも使える用に設定する方法を紹介します。 インストール まずはnpmで下記をインストールします。 npm add --dev node-sass sass-loader ...
初めてjQueryプラグインを作ってみた(RSS取得)... 最近社内でJSを書く機会が増えてきたので、他の人にも扱いやすいようにと思ってjQueryプラグインにする事を思いつきました。 作ったプラグインの内容はRSSを取得・表示させるためのjqueryプラグインです。 「WordPressならそんなのデフォルトで入ってるやん…」って思ったくら...
jQuery不要のスクロール時の起動で使えそうなJSライブラリ... 最近Vue.jsを使う機会が増えたのもあってjQuery依存しないライブラリを探していました。 いろいろ調べてみると、delighters.jsが良さそうでした。 実際に使ってみた感想・使い方は後日かければなーと思います。 他にも気になってたライブラリ CSSで記載す...