schedule2020-04-21

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

LaravelでガラケーのWEBページに対応した際のコードです。 middlewareでUserAgentを判別し、それを基にControllerでガラケー用のViewに切り替えました。 docomo, SoftBank, auの３キャリアに応じた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($ arg);`でControllerに変数を渡せます。（Illuminate/Http/Request.phpの310行目）

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

スマートフォン・携帯のユーザーエージェント
userAgent（ユーザーエージェント一覧）
- ガラケーのUserAgentのまとめは、恐らくここが一番詳しい。無くなっていた場合は魚拓にあります。

ControllerとView

ControllerでPC/スマホとガラケーのViewの切り替える。ガラケーのViewで３つのキャリアに応じた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 == &quot;Docomo&quot;)
{{-- Docomo --}}
&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
&lt;!DOCTYPE html PUBLIC &quot;-//JPHONE//DTD XHTML Basic 1.0 Plus//EN&quot; &quot;xhtml-basic10-plus.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;ja&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html;charset=utf-8&quot; /&gt;

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

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

&lt;/head&gt;

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