端末ごとの表示を簡単に切り替えられるMobile Detect

レスポンシブサイトの制作でどうしてもワンソースで実現できないレイアウトのときに、PCやスマートフォン、タブレットなど端末ごとにソースを切り替えたいときがあります。そんなときに便利でオススメなのがPHPのクラスライブラリ「Mobile Detect」です。
Mobile DetectはPHPが動く環境なら、簡単にユーザーエージェントを取得・判定できます。今回はそのMobile Detectの利用方法を紹介します。

Mobile Detectの導入

公式サイトからMobile Detectのライブラリをダウンロードし、必要なページへ読み込みます。あわせてMobile Detectを機能させる変数も記述してしまいましょう。記述例は以下です。

<?php
  require_once 'Mobile_Detect.php'; //Mobile Detectの読み込み
  $detect = new Mobile_Detect;      //ユーザーエージェント判定用の変数
?>

使用例

変数に対してメソッドを指定することでユーザーエージェント判定ができます。例えば端末がスマートフォンのときの判定は以下のように記述します。

<?php if ( $detect->isMobile() ) : ?>
  表示したいソース
<?php endif; ?>

これを応用し、タブレットのとき、PCのときでそれぞれ別のソースを利用したい場合は以下のような記述になります。

<?php if ( $detect->isMobile() && !$detect->isTablet()) : ?>
  スマホでのみ表示したいソース
<?php elseif ( $detect->isTablet()) : ?>
  タブレットでのみ表示したいソース
<?php else : ?>
  PC（上記以外）で表示したいソース
<?php endif; ?>

まとめ

簡単なif文とメソッドの記述で、ユーザーエージェントの切り替えを実現することができます。phpなのでwordpressへの導入も簡単です。効果的に利用し、使い勝手の良さや、情報の整理されたサイトを実現しましょう。