酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

JavascriptでiPhone/Androidを判定してスマホ用ページにリダイレクトする

Railsでページキャッシュを使うとrails内の処理をスキップして、htmlを直接表示します。ということで、PC用のページとスマホ用のページでURLを分けている場合にスマホ用のページにjavascriptを使ってリダイレクトする方法を書きます。


javascriptを使ったリダイレクト

Javascript内でブラウザの種類を判別して、iPhoneかAndroidスマホだった場合に、スマホ用のページにリダイレクトするためのサンプルソースです。coffeescriptで書いています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# ブラウザのエージェントを取得
agent = navigator.userAgent

# 現在のURLを取得
url = location.href

# スマホ用のページの場合
if url.search(/\/sp\//) isnt -1
  current_device = "sp"
  redirect_url = url.replace("/sp/", "/pc/")
# パソコン用のページの場合
else
  current_device = "pc"
  redirect_url = url.replace("/pc/", "/sp/")

# パソコンの用のページにiPhoneでアクセスした場合はスマホ用のページにリダイレクト
if current_device == "pc" and agent.search(/(iPhone|iPod)/) isnt -1
  location.href = redirect_url

# パソコンの用のページにAndroidでアクセスした場合はスマホ用のページにリダイレクト
if current_device == "pc" and (agent.search(/Android/) isnt -1 and agent.search(/Mobile/) isnt -1 and agent.search(/(SC-01C|A1_07)/) is -1)
  location.href = redirect_url

# スマホ用のページにパソコンでアクセスした場合にパソコン用のページにリダイレクト
if current_device == "sp" and agent.search(/(iPhone|iPod|Android|Mobile)/) is -1
  location.href = redirect_url

スマホとタブレットを判定する基準はこちらからを参考にさせて頂きました。

Androidでモバイルとタブレット(+iPhone/iPad)を振り分ける方法 | BlackFlag

2012年3月の記事なので、もしかしたらAndorid Mobileとなっているタブレットが他にもあるかもしれません。

Speical Thanks

jQuery(JavaScript)でiPhone、iPad、Androidなどデバイスを判別してURLをリダイレクトする方法 | BlackFlag

JavaScript 文字列の置き換え - replace/replaceAll - JavaScript入門

現在のページのURLを取得する

おすすめの書籍