concrete5 ではモバイルサイトを構築するための仕組みが用意されています。
仕組みにはそれぞれ特徴があるので事前に把握しておくとスムーズに作業を進められます。
モバイルサイトの構築には下記のようなアプローチが考えられます。
- レスポンシブWebデザイン(RWD)なテーマ＆テンプレートを利用する。
- モバイルテーマを設定する。
- 3rdparty/mobile_detect を用いて分岐する。
レスポンシブWebデザイン(RWD)なテーマ＆テンプレートを利用する。
個人的な推奨は可能であれば__RWD__なテンプレートを作成＆利用することです。
concrete5 で__RWD__なテーマを利用すると１つ大きなメリットがあります。
それは concrete5 の機能である フルページキャッシュ が使える点です。
concrete5 では__フルページキャッシュ__を有効にした場合、ページに最初にアクセスした状態を丸ごとキャッシュし、次回以降のアクセスにはそのキャッシュを返却するようで、そうなるとキャッシュが存在する場合はアクセス元の判定が行われません。
ある程度大きな規模のサイトになってくると__フルページキャッシュ__が有効ですので、可能であれば__RWD__なデザインを採用したいところです。
モバイルテーマを設定する。
concrete5 ではPCサイト用のテーマとは別にモバイルサイト用のテーマを設定することが出来るようになっています。
そのため concrete5 ではモバイルテーマとして表示されていることを判別するための定数 MOBILE_THEME_IS_ACTIVE があります。
この定数を参照することでモバイルテーマで表示されていることがテンプレート側で判断できます。
if (defined('MOBILE_THEME_IS_ACTIVE') && MOBILE_THEME_IS_ACTIVE)
{
// モバイルテーマとして表示されている
}
else
{
// モバイルテーマとして表示されていない
}
気をつける点としては、__"モバイルテーマが表示されているか否か"__という判定であり、実際のアクセス元は直接影響しない点です。
3rdparty/mobile_detect を用いて分岐する。
concrete5 のモバイルテーマ設定とは関係なく、モバイル端末からのアクセスを判断する手段として、3rdparty/mobile_detect ライブラリを利用する方法もあります。
concrete5 自身もモバイルテーマへ分岐する判断に利用しています。
Loader::library('3rdparty/mobile_detect');
$md = new Mobile_Detect();
if ($md->isMobile())
{
// モバイル端末からのアクセス
}
else
{
// モバイル端末以外からのアクセス
}
3rdparty/mobile_detect ライブラリには、タブレット端末によるアクセスを判定する isTablet() 等もあります。
if ($md->isTablet())
{
// タブレット端末からのアクセス
}
else
{
// タブレット端末以外からのアクセス
}
端末毎のアクセス判定もできるようです。
if ($md->is('iPhone'))
{
// iPhoneからのアクセス
}
else
{
// iPhone以外からのアクセス
}
何がモバイル端末で何がタブレット端末なのか、判定される端末情報を詳しく知りたい場合は、
concrete/libraries/3rdparty/mobile_detect.php
にあるソースが参考になるかと思います。
気をつける点としては、__"アクセス元がどんな端末か"__という判定であり、モバイルテーマの設定に影響を受けない点です。