laravel User Agentでクライアント情報を検出しましょう

# はじめに
![2-16.jpg](https://qiita-image-store.s3.amazonaws.com/0/320164/f6978f04-63e5-297c-a4bb-66a43708e873.jpeg)

laravel&vueで仕事できるのは実に気持ちいいです,開発速度も速いし、フロントもvueの存在のおかげでjqueryで書くよりコートの量が大分減ります:relaxed:だけど,多くのユーザーにアプリを使ってもらうために一つ注意しなければならないことがあります
それが`vueはIE8以下サポートしていない`ということです
![kokannsei.PNG](https://qiita-image-store.s3.amazonaws.com/0/320164/3eaab741-4282-cb71-b484-44b0887b1da9.png)
未だにIEユーザーいますかって話もあるでしょうけど、実は結構いらっしゃるのが現実です,
その方たちにもちゃんとアプリ使えるために、IEでも動くアプリバージョンも用意しなければいけません、もちろんスマートフォン版とpc向けのUIそれぞれ用意できたら更によいでしょう,そこでlaravelどうやってクライアント情報を検出し、そして具体的なアクションを見ていきましょう
## クライアント情報はどこにある?
ブラウザを開いて見てみましょう
![11.PNG](https://qiita-image-store.s3.amazonaws.com/0/320164/b155058f-420b-ed04-54bc-1e591c6dcd8e.png)
`Ctrl+Shift+i`で上にある`Network`をワンクリックすると沢山ブラウザから送ったリクエストが確認できます、
どれかを開いてみると`Headers`の`Request Headers`で`User-Agent`という項目が確認できます、クライアントの情報はすべてそこにあります,pythonでクローラー作る時に、botであることを隠蔽するためにも`User-Agent`を使用することがありますが、それはまた別の機会で話ましょう:point_up:

## laravelでクライアント情報を取得する
ここで一つライブラリを使用することになります[jenssegers/agent](https://github.com/jenssegers/agent)
githubからも使い方確認できます
###インストール
laravelのプロジェクトを開いてください
`composer require jenssegers/agent`
インストール終了後、実際使えるようになったのかテストしてみます:thinking:
`php artisan tink`
` use Jenssegers\Agent\Agent; `と
`$agent = new Agent();`をtinkに入力しましょう` Jenssegers\Agent\Agent {#2879}`で確認できたら大丈夫でしょう
そして`$agent->setUserAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/537.13+ (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2');`を入力し,テスト用のUserAgentのセットします,このUserAgent大まかにいうとマックOSのSafariからのリクエストという意味になります
実際テストしてみましょう
tinkに`$agent->is('OS X');`を入力してください
`true`という結果が返ってくるでしょう
また`$agent->is('Windows');`を入力すると`false`が返ってくるはずです
`$agent->browser();`を入力すれば,使用するブラウザを確認できます
更に`$agent->version( $agent->browser());`命令でブラウザバージョンも確認可能です
##実際の運用場面
例えばlaravel+vueのアプリにIEユーザーがアクセスきたら、その方を別のバージョンへ誘導しなければならないシナリオを考えましょう
ここでlaravelにいくつのコードを追加します

```php:route/web.php
Route::get('/','HomeController@home');
```

```php:Controller/HomeController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;


class HomeController extends Controller
{
      public function home()
      {
          $browser = \Agent::browser();
          if ($browser == 'IE' && \Agent::version($browser) <= 8) {
              return response('<button>IE対応版</button>');
          }
          return view('welcome');
      }
}
```
土台用意できましたら具体的な動作見てみましょう,パソコンにIEが入ってないため[Http User-Agent Switcher](https://chrome.google.com/webstore/detail/http-user-agent-switcher/dalfpgoflklogpfibbjelegbgfamlhof)ライブラリでIE環境に切り替えます
`php artisan server`でサーバー起動してChromeで`http://127.0.0.1:8000/`へアクセスしてみましょう
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/320164/013b0297-f22e-137c-6252-76414c20f92c.png)
お馴染みな`welcome`viewが確認できるはずです
ではここで`Http User-Agent Switcher`を使用してIE7へ切り替え、またアクセスしてみましょう
![キャプチ1ャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/320164/4fb8f498-2f14-1e47-94cf-7fde53dce811.png)

`IE対応版`というボタンだけの画面になってるはずです:relaxed:
またスマートフォン対応してるUIがあれば,コード少し変えればユーザーの誘導も簡単でしょう

```php:Controller/HomeController.php
 public function home()
      {
     if(!\Agent::isMobile()){
              return response('PC画面');
          }else{
              return response('スマートフォン画面');
          }
     }
```
# 最後に
実際クライアントチェックする時に,ミドルウェアとして入れることをお勧めです:relaxed: