【Laravel】UserAgentでガラケー用のViewを切り替えるためのmiddleware

LaravelでガラケーのWEBページに対応した際のコードです。 middlewareでUserAgentを判別し、それを基にControllerでガラケー用のViewに切り替えました。 docomo, SoftBank, auの3キャリアに応じたDOCTYPEにします。

環境

  • Laravel 6.x
  • php 7.3

ガラケーのUserAgentを判定するmiddleware

ガラケーのUserAgentを判定するmiddlewareを作ります。 PC/スマホとガラケーのViewの切り替えはControllerでおこなうため、判定結果をControllerに渡します。

middleware SupportFeaturephone を作成する。(名前は何でもいい)

$ php artisan make:middleware SupportFeaturephone

SupportFeaturephone.php

<?php

namespace App\Http\Middleware;

use Closure;

class SupportFeaturephone
{
    public function handle($request, Closure $next)
    {
        $user_agent = $request->userAgent();
        // $requestにキャリアの文字列を渡す
        $request->merge([
            'mobile_carrier' => $this->checkMobileCarrier($user_agent),
        ]);

        return $next($request);
    }

    private function checkMobileCarrier($user_agent)
    {
        if ($this->isDocomo($user_agent)) return "Docomo";
        if ($this->isSoftbank($user_agent)) return "Softbank";
        if ($this->isKDDI($user_agent)) return "KDDI";
        // スマホ・PCのブラウザ
        return null;
    }

    private function isDocomo($user_agent)
    {
        return preg_match("/^DoCoMo/i", $user_agent);
    }

    private function isSoftbank($user_agent)
    {
        return preg_match("/^(J\-PHONE|Vodafone|MOT\-[CV]|SoftBank)/i", $user_agent);
    }

    private function isKDDI($user_agent)
    {
        return preg_match("/^KDDI\-/i", $user_agent);
    }
}

request>merge(request->merge(arg);`でControllerに変数を渡せます。 (Illuminate/Http/Request.phpの310行目

ガラケーのUserAgentの正規表現は以下を参考に作りました。

ControllerとView

ControllerでPC/スマホとガラケーのViewの切り替える。 ガラケーのViewで3つのキャリアに応じたDOCTYPEにします。

Controller

class IndexController extends Controller
{

      public function index(Request $request)
      {
          // ガラケーのページ
          if (isset($request->mobile_carrier)) {
              return view('m.index')->with([
                  'mobile_carrier' => $request->mobile_carrier,
              ]);
          }
          // PC/スマホのページ
          return view('index');
      }
}

View

.
├── m
│   ├── index.blade.php # ガラケー用
└── index.blade.php     # PC/スマホ
@if($mobile_carrier == "Docomo")
{{-- Docomo --}}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//JPHONE//DTD XHTML Basic 1.0 Plus//EN" "xhtml-basic10-plus.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

@elseif($mobile_carrier == "KDDI")
{{-- KDDI --}}
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML 1.0//EN" "http://www.openwave.com/DTD/xhtml-basic.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS" />

@else
{{-- 【softbank】 --}}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.1) 1.0//EN" "i-xhtml_4ja_10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
@endif

</head>

ガラケーのHTMLの参考: ゼロから始めるガラケーコーディング DOCTYPEとCSS編

Placeholder image

すずろく/suzu6

札幌にいるWEBアプリのエンジニア。最近はテストをもっと書きたい。

@suzu6_py Amazon ほしいものリスト

 関連記事

 新着 or 更新記事