jQuery少し前に「jQuery(JavaScript)でiPhone、iPad、Androidなどデバイスを判別してURLをリダイレクトする方法」と題して、スマホ系のデバイスを判別してURLをリダイレクトさせる方法を紹介しましたが、ユニクロさんやほぼ日さんのサイトではスマホ系デバイスでアクセスするとアラートでスマホ向けのサイトがあることをメッセージで促し、どっちのサイトへアクセスするかユーザーに選択させる方式をとっておりこのUIがおもしろかったので試しにjQueryを使って同じ動作を作ってみました。-PC向けサイトのURLにiPhone、iPad、Android(アンドロイド)でアクセスした際に「スマートフォン向けサイトに移動しますか?」というメッセージをアラート表示させ「OK」を押すとスマートフォン向けのサイトにリダイレクトさせます。この動作を実行させるスクリプトは以下のようになります。"sp/index.html";}}</script>UserAgentを判別してiPhone、iPad、Android(アンドロイド)の場合はメッセージ付きの確認用アラートを表示して「OK」を押すとスマートフォン向けのURLへ遷移させています。Touch用に「iPod」のUserAgentも入れてあります。動作サンプルについては以下のリンクからサンプルページを開いてください。※iPhone、iPad、Androidでアクセスしてください。(PCでアクセスしてもアラートは表示されません。)≫アラートリダイレクトサンプルこのままだとPCサイトにアクセスする度にアラートが表示されることになります。それが煩わしい場合はCookieを使ってアクセス制御することも可能です。以前の記事「jQueryで「jquery.cookie.js」を使ってページの初回アクセスのみ処理を変える方法」と併せる事で、サイトへ初回アクセスのみにアラートを表示することもできます。初回アクセスのみの制限を付けたスクリプトは以下のようになります。"sp/index.html";}}</script>「jquery.cookie.js」を使ってクッキー処理をしています。こっちの動作サンプルについては以下のリンクからサンプルページを開いてください。※iPhone、iPad、Androidでアクセスしてください。(PCでアクセスしてもアラートは表示されません。)≫アラートリダイレクトサンプル(初回アクセスのみアラートが表示されます)PC向けとスマートフォン向けにリダイレクトさせる方法はさまざまですがこの様にアラート表示にてユーザーにどちらにアクセスするか選択させる方法も良いかと思います。※コメントにHTMLタグを直接入力しないでください。※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。Webサイト構築に関する技術やWebサービスを紹介するブログです。jQueryをはじめとしたWebサイトを彩る技術のほか、HTML(HTML5)、CSS(CSS3)、iPhoneやTwitterを使った実験などなど、Webサイト制作に役立つであろうと思われる情報を備忘録として掲載しています。