WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

jQuery(JavaScript)でiPhone、iPad、Android向けにアラートを表示してURLをリダイレクト(選択)させる方法

少し前に「jQuery(JavaScript)でiPhone、iPad、Androidなどデバイスを判別して
URLをリダイレクトする方法
」と題して、
スマホ系のデバイスを判別してURLをリダイレクトさせる方法を紹介しましたが、
ユニクロさんやほぼ日さんのサイトではスマホ系デバイスでアクセスすると
アラートでスマホ向けのサイトがあることをメッセージで促し、
どっちのサイトへアクセスするかユーザーに選択させる方式をとっており
このUIがおもしろかったので試しにjQueryを使って同じ動作を作ってみました。

jQuery(JavaScript)でiPhone、iPad、Android向けにアラートを表示してURLをリダイレクト(選択)させる方法

例として、サイト構成が以下の様なURLとします。

——————————————————-
【PC向けサイト】
http://black-flag.net/sample/

【スマートフォン向けサイト】
http://black-flag.net/sample/sp/
——————————————————-

PC向けサイトのURLにiPhone、iPad、Android(アンドロイド)でアクセスした際に
「スマートフォン向けサイトに移動しますか?」というメッセージをアラート表示させ
「OK」を押すとスマートフォン向けのサイトにリダイレクトさせます。

この動作を実行させるスクリプトは以下のようになります。

[javascript]
◆SCRIPT


[/javascript]

UserAgentを判別してiPhone、iPad、Android(アンドロイド)の場合は
メッセージ付きの確認用アラートを表示して「OK」を押すと
スマートフォン向けのURLへ遷移させています。
※念の為iPod Touch用に「iPod」のUserAgentも入れてあります。

動作サンプルについては以下のリンクからサンプルページを開いてください。
※iPhone、iPad、Androidでアクセスしてください。
(PCでアクセスしてもアラートは表示されません。)

アラートリダイレクトサンプル

このままだとPCサイトにアクセスする度にアラートが表示されることになります。
それが煩わしい場合はCookieを使ってアクセス制御することも可能です。
以前の記事「jQueryで「jquery.cookie.js」を使ってページの初回アクセスのみ処理を変える方法」と
併せる事で、サイトへ初回アクセスのみにアラートを表示することもできます。

初回アクセスのみの制限を付けたスクリプトは以下のようになります。

[javascript]
◆SCRIPT



[/javascript]

「jquery.cookie.js」を使ってクッキー処理をしています。

こっちの動作サンプルについては以下のリンクからサンプルページを開いてください。
※iPhone、iPad、Androidでアクセスしてください。
(PCでアクセスしてもアラートは表示されません。)

アラートリダイレクトサンプル(初回アクセスのみアラートが表示されます)

PC向けとスマートフォン向けにリダイレクトさせる方法はさまざまですが
この様にアラート表示にてユーザーにどちらにアクセスするか選択させる方法も良いかと思います。

ご参考までに。。。

サンプルファイルをダウンロードしたい方はこちらから

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です