ここ数年でスマートフォンが普及し、Webサイトもモバイルに最適化する必要が増えてきました。
モバイルサイトに最適化するレスポンシブデザインなど、
フロントエンド面へのライブラリなどは充実してきましたが、
サーバーサイド側からでも対応したい場合があります。
今回はモバイルからのアクセスなのか、
デスクトップからのアクセスなのか判別する「Agent」というライブラリの紹介をしたいと思います。
github: jenssegers/agent
使い所の例としては、
- デスクトップ用、モバイル用のテンプレートの切り替え
- モバイルからのアクセスの場合にhtmlタグ内のclassの変更
- モバイルからのアクセスの場合のみ機能を省略させる
.... etc
使い方次第では色々なことが出来ます。
コマンドライン上でプロジェクトルートから下記のコマンドを打てば、
インストールが開始されます。
composer require jenssegers/agent
続いてapp/config.php内にサービスプロバイダーとエイリアスを追加します。
// app/config.php
'Jenssegers\Agent\AgentServiceProvider',
// php 5.6を使っているなら下記の書き方も可能
// Jenssegers\Agent\AgentServiceProvider::class,
// app/config.php
'Agent' => 'Jenssegers\Agent\Facades\Agent',
以上でインストール、初期設定は完了です。
正しく動作しているか、確認する為に以下のコードをroutes.phpに書きました。
# app/routes.php
// URL/agent
Route::get('/agent', function () {
/* mobileからのアクセスなら 'mobile'と表示され、
** そうでなければ 'desktop'と表示
*/
return \Agent::isMobile() ? h1('mobile') : h1('desktop');
});
// テストの為の関数
function h1($str)
{
return '<h1>' . $str . '</h1>';
}
動作確認の為にコマンドライン上から以下のコマンドを打ってサーバーを起動させました。
php artisan serve # localhost:8000でアクセス可能
ブラウザから localhost::8000/agent にアクセスし、
” desktop ”と表示されていれば正しく動作しています。
モバイルからのアクセスの確認はgoogle chromeデベロッパーツールの
”デバイスモード”の機能を使って確認して下さい。
google chromeデバイスモードのページ
デバイスモードからデバイスをモバイルに切り替え、
ページ上で" mobile "と表示されれば、正しく判別されています。
このAgentプラグインは" Mobile Detect "をベースに作られていますが、
本家にはない機能も用意搭載されています。
*その他の使い方
\Agent::isMobile(); // モバイル端末
\Agent::isTablet(); // タブレット端末
\Agent::isDesktop(); // デスクトップ
\Agent::is('Windows'); // OSが Windowsが判別
\Agent::is('Firefox'); // Firefoxからのアクセスか判別
\Agent::is('OS X'); // OSがMac OS X
\Agent::is('iPhone'); // 端末がiPhone
\Agent::isAndroidOS(); // OSがAndroid
\Agent::isNexus(); // 端末が Nexus
\Agent::isSafari(); // Safariブラウザからのアクセス
\Agent::match('regexp'); // 正規表現
\Agent::platform(); // アクセスされたOSを返す
\Agent::browser(); // アクセスされたブラウザを返す
アクセスされるブラウザによって挙動を変えたい場合や、
スマホからのアクセスの場合に何かしら処理をしたい場合に是非使ってみてください。