WinRoadのLaravel4初心者講座

次世代PHPフレームワークのLaravel4を初心者向けに解説して参ります。

Winroad徒然草の管理人がお届けします
スマホと携帯を振り分けるには

スマホと携帯を振り分けるには

このエントリーをはてなブックマークに追加

スマートフォンが普及したとはいえ、未だに携帯(ガラケー)ユーザーは健在です。ですので、携帯ユーザーのためには、携帯専用のサイトを提供したいので、スマートフォンと携帯の振り分け方法について調べてみたいと思います。

いろいろな振り分け方法があるとは思いますが、今回はフィルターとブレードレイアウトを利用して振り分ける方法を調べてみたいと思います。

まず最初に考えた手順は、

  1. フィルターのApp::beforeメソッドで、ユーザーエージェントを取得します。
  2. 次に、取得したユーザーエージェントごとに、layout名のセッションを作成します。
  3. そして、ブレードテンプレートのextendsメソッドで、そのセッションを読み込む

という方法です。

それでは実際に作業してみましょう。

app/filter.php

App::before(function($request)
 {
 //ユーザーエージェントの取得
 $ua = $_SERVER['HTTP_USER_AGENT'];
if ((strpos($ua, 'Android') !== false) &&
 (strpos($ua, 'Mobile') !== false) ||
 (strpos($ua, 'iPhone') !== false) ||
 (strpos($ua, 'Windows Phone') !== false)) {
 // スマートフォンからアクセスされた場合
 Session::put('layout','jqm');
} elseif ((strpos($ua, 'Android') !== false) ||
 (strpos($ua, 'iPad') !== false)) {
 // タブレットからアクセスされた場合
 Session::put('layout','f5');
} elseif ((strpos($ua, 'DoCoMo') !== false) ||
 (strpos($ua, 'KDDI') !== false) ||
 (strpos($ua, 'SoftBank') !== false) ||
 (strpos($ua, 'Vodafone') !== false) ||
 (strpos($ua, 'J-PHONE') !== false)) {
 // 携帯からアクセスされた場合
 Session::put('layout','mobile');
} else {
 // その他(PC)からアクセスされた場合
 Session::put('layout','tbs');
 }
});
  • 4行目:まず最初にユーザーエージェントを取得します。
  • 5-26行目:そして、取得したユーザーエージェントの文字列からアクセスしてきた端末の種類を判別します。
  • 5-6行目:Androidのスマートフォンには、Androidという文字列とMobileという文字列が含まれているのが一般的ですので、この2つの文字列が含まれていたら、Androidスマートフォンと判断します。
  • 7-8行目:iPhoneとWindowsフォンの場合は、それぞれの文字が含まれていますので、それで判断します。
  • 10行目:そして、スマートフォンからアクセスされた場合は、セッションlayoutにjqmという文字列を登録します。
  • この文字列を、ブレードテンプレートの@extends(Session::get(‘layout))で、指定すれば、スマートフォンの時には、app/viewsフォルダにあるjqm.blade.phpファイルをブレードレイアウトとして、読み込みます。
  • 以下、タブレット、携帯、PCの場合も同様です。
  • 上記では、例として、スマートフォン用にjquerymobileを使用したCSSを用意し、タブレット用にはfoundation5を使用したCSS、携帯には携帯用のCSS、それ以外には、twitter Bootstrapを使用したCSSを用意するつもりです。
    • スマートフォン用
      app/views/jqm.blade.php
    • タブレット用
      app/views/f5.blade.php
    • 携帯用
      app/views/mobile.blade.php
    • PC用
      app/views/tbs.blade.php

この方法は、ユーザーエージェントにより、元になるブレードテンプレートを変更し、それぞれのスタイルシートでスマートフォン用、タブレット用、携帯用、PC用と変更します。

次に各デバイス用のテンプレートページを作成します。

(例)app/views/jqm.blade.php

<!DOCTYPE html>
<html lang="ja">
 <head>
 <title>Builwing</title>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
{{HTML::style('//code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css')}}
{{HTML::script('//code.jquery.com/jquery-2.1.0.min.js')}}
{{HTML::script('//code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js')}}
</head>
<body>
<div data-role="page" id="page1">
 <div data-role="header">
 <h1>Builwing</h1>
 </div><!-- /header -->
 <div role="main" class="ui-content">
 @yield('content')
 </div><!-- /main -->
 <div data-role="footer">
 <h4>Page Footer</h4>
 </div><!-- /footer -->
</div><!--page-->
</body>
</html>
  • 上記は、jquerymobileのCDNを利用して作成しています。

(例)app/views/tbs.blade.php

<!DOCTYPE html>
<html lang="ja">
 <head>
 <title>Builwing</title>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <!-- Bootstrap -->
 {{HTML::style('tbs/css/bootstrap.min.css')}}
 {{HTML::style('tbs/css/mystyle.css')}}
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 <!--[if lt IE 9]>
 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
 <![endif]-->
 </head>
 <body>
 <div class="content">
 <div class="container">
 @yield("content")
 </div>
 </div>
 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 <script src="https://code.jquery.com/jquery.js"></script>
 <!-- Include all compiled plugins (below), or include individual files as needed -->
 {{ HTML::script('tbs/js/bootstrap.min.js') }}
 </body>
</html>
  • 上記は、ダウンロードしてきたTwitter Bootstrapをapp/public/tbsフォルダ内に保存しているものとして作成しています。

そして、最後にコンテンツページでブレードテンプレートを指定すれば完成です。

(例)app/views/user/index.blade.php

@extends(Session::get('layout'))
@section('content')
<h2>ユーザーページ</h2>
ここにコンテンツを入力します。
@stop

この方法だと同じコントローラでデバイスごとのページを作成することができますが、きちんと携帯用のサイトを作成したい方は、Session::put()の場所を、return redirect::to()で移動したいページ(コントローラ)を指定してください。

Twitter BootstrapやFoundation5等のCSSフレームワークがレスポンシブWebデザインを主流として台頭していますが、それは、あくまでもスマートフォン以上のデバイスが中心です。今でもかなりの数を占めている携帯にはやはり携帯用のサイトが依然として必要な状況には変わりありません。

ですので、携帯(ガラケー)には、携帯用のサイトを作成するのも大切だと思います。とりあえず、ガラケー専用のサイトを作成しなくてもCSSのみでもある程度は対応できるはずです。

他にもいい振り分け方や携帯サイトの簡単な作成方法があればご伝授ください。

« »

コメントを残す

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