記事一覧

スマホを判別して特定のURLにリダイレクトする方法 | asp.net


今回は asp.net のWebアプリケーションにおいてアクセスしてきた端末がスマホの場合、スマホサイトに誘導したいという要望があると思いますが、その対処法についてご紹介したいと思います。
本来であればスマホサイトもPCサイトも同じソースで作成し、CSSだけを振り分けるように設定するのがセオリーですが、まだまだそのようなサイトは少なく、リダイレクトが必要なケースもあると思います。


前提条件
・Windows 7 Professional 以降 / Windows Server 2008 R2 以降
・Visual Studio 2008 Professional 以降
・VB.NET
・.Net Framework 3.5 以降


aspnet_mobile_redirect_03.png



1.リダイレクト方法について

asp.net でリダイレクトを行うには大きく分けて以下の3種類の方法があると思います。

(1)IIS Rewrite Module 2.0 でリダイレクトする

(2)コードビハインドでサーバーサイドの Response.Redirect を実装する

(3)Javascriptでリダイレクトする



2.長所短所

(1)IIS Rewrite Module
 apache の .htaccess と同じで301リダイレクトに相当し、恒久的な転送として認識されてしまいます。
 具体的にはブラウザの履歴にキャッシュを持ち、IIS Rewrite Module の機能を停止したとしても同じようにブラウザ側でリダイレクトがかかるようになります。(ブラウザの履歴を削除すればリダイレクトが解除されます。)

(2)Response.Redirect
 302リダイレクトとして一時的な転送と認識されます。
 複雑な条件にも対応が可能です。
 他にも転送する為の条件をデータベース等を用いて紐づけすることが容易な為、お勧めします。

(3)Javascript
 302リダイレクトとして一時的な転送と認識されます。
 アラートを表示して転送するかしないかをユーザー側に選択させることが簡単ですが、当然Javascriptを有効にしていないブラウザには効きません。



3.IIS Rewrite Module の実装方法

まずは IIS Rewrite Module 2.0 をダウンロードします。IIS7 以降全ての IIS でインストール可能です。
https://www.microsoft.com/ja-jp/download/details.aspx?id=7435

次に IIS10 以降の場合は、レジストリを編集して IIS9 と認識させる必要があります。
以下のコマンドを管理者権限で実行しインストールします。
reg add HKLM\SOFTWARE\Microsoft\InetStp /v MajorVersion /t REG_DWORD /d 0x09 /f /reg:64
%userprofile%\download\rewrite_x64_ja-JP.msi
reg add HKLM\SOFTWARE\Microsoft\InetStp /v MajorVersion /t REG_DWORD /d 0x0a /f /reg:64

 aspnet_mobile_redirect_04.png

インストールが完了したら、IISExpress を終了し IIS を再起動します。

そしてWeb.Configに以下のブロックを追記すれば完了です。
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="MobileRedirect" stopProcessing="true">
          <match url="^(.*)$" ignoreCase="false" />
          <conditions logicalGrouping="MatchAll">
            <add input="{HTTP_USER_AGENT}" pattern="(^DoCoMo|^KDDI|^Up.Browser|^SoftBank|iPhone|iPod|Android|Windows Phone|^vodafone|^J-PHONE|Googlebot-Mobile|-Mobile|_Mobile)" />
          </conditions>
          <action type="Redirect" url="/mobile/{R:1}" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

※同じプロセス内のURLにリダイレクトするとリダイレクトがループして発生し、404エラーとなりますので注意が必要です。
※iPadもユーザーエージェントにiphoneと記載あるため、転送されてしまいます。



4.Response.Redirectでの実装方法

ユーザーエージェントからスマホかどうかを判定し、リダイレクトすべき URL を組み立てて、302リダイレクトします。PC用のマスターページに記載します。スマホ用のマスターページ等には記載をしないようにしてください。

PCSiteMasterPage.vb
Namespace Master
Public Class PCSiteMasterPage
Inherits System.Web.UI.MasterPage

Private Sub PCSiteMasterPage_Init(sender As Object, e As EventArgs) Handles Me.Init

If Me.IsMobileDevice() = True Then
'リダイレクトするURLを組み立てます。
Dim scheme As String = HttpUtility.HtmlEncode(Request.Url.Scheme)
Dim host As String = HttpUtility.HtmlEncode(Request.Url.Host)
Dim page As String = HttpUtility.HtmlEncode(Request.RawUrl)
Dim port As Integer = Request.Url.Port
If port = 80 OrElse port = 443 Then
port = 0
End If
Dim url As String = scheme + "://" + host + IIf(port > 0, ":" + port.ToString(), "") + "/mobile" + page

'302リダイレクトで画面遷移させます。
Response.Redirect(url, True)
End If
End Sub

Protected Sub PageMasterPage_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub

''' <summary>
''' モバイル端末のアクセスかどうかを判定する
''' </summary>
''' <returns>True:スマホ/False:PC</returns>
Private Function IsMobileDevice() As Boolean

Dim userAgent As String = HttpUtility.HtmlEncode(Request.UserAgent).ToLower()
'Androidのタブレットに関しては一貫性が無い為、考慮していません。
Dim allowedAgents As String() = New String() {"windows nt", "ipad"}
'Goolebot-Mobileはmobileでヒットする
Dim deniedAgents As String() = New String() {"iphone", "ipod", "android", "windows phone",
"mobile",
"docomo", "softbank", "kddi", "vodafone", "j-phone",
"up.browser"}

For Each aa As String In allowedAgents
If userAgent.Contains(aa) = True Then
'PCと判定
Return False
End If
Next

For Each da As String In deniedAgents
If userAgent.Contains(da) = True Then
'スマホと判定 
Return True
End If
Next

'その他はPCと判定
Return False

End Function

End Class
End Namespace



5.Javascriptでの実装方法

<script type="text/javascript">
window.onload = function () {
    MobileRedirect();
}
function MobileRedirect() {
    var agent = navigator.userAgent;
    if (agent.indexOf('Windows NT') < 0 &&
        agent.indexOf('iPad') < 0 &&
        (agent.indexOf('iPhone') >= 0 ||
            agent.indexOf('iPod') >= 0 ||
            agent.indexOf('Windows Phone') >= 0 ||
            agent.indexOf('Android') >= 0 ||
            agent.indexOf('Mobile') >= 0)) {
        //if (window.confirm('スマートフォン向けサイトに移動しますか?')) {
            location.href = "/mobile/index.aspx";
        //}
    }
}
</script>



6.動作の確認方法

実機のスマホを用意できれば良いのですが、シミュレータで行う方法や、Chrome だけで行う方がより簡単です。

Chrome でPCサイトにアクセスします。

aspnet_mobile_redirect_01.png


次にF12を押下して、
1:Toggle device toolbar ボタンを押下します。
2:機種を選択し、
3:F5更新すると、
スマホサイトにリダイレクトされるはずです。

aspnet_mobile_redirect_02.png


最後までお読みいただきありがとうございます。
いかがでしたでしょうか。他にも asp.net に関連する記事を投稿しておりますのでよろしければご参考くださいませ。


関連記事

コメント

コメントの投稿

カテゴリ別記事一覧

広告

プロフィール

石河 純


著者名 :石河 純
自己紹介:素人上がりのIT技術者。趣味は卓球・車・ボウリング

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語・データベース】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
Oracle10g SQLServer2008R2 SQLAnywhere8/11/16
ActiveReport CrystalReport ReportNet(IBM)
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS IIS6/7 apache2

休みの日は卓球をやっています。
現在、卓球用品通販ショップは休業中です。