NTTドコモ様_dカーシェア
NTTドコモ様_dカーシェア
2015.04.07

Web開発フレームワーク「CodeIgniter」でデバイス別テーマ切り替えを実装する方法

ひろゆき

こんにちは、ひろゆきです。

今日は、PC・スマホでテーマを切り替える際にCodeIgniterで行ったことを、メモがてら残します。今回初めてCodeIgniterを使ったのですが、ビックリするくらいあっさりできてしまいました。

1. ユーザーエージェントの定義

デフォルトで用意されている「application/config/user_agents.php」の$mobilesに、スマホサイトとして表示させたいユーザーエージェント名を配列のキーに記述します。

ざっくりとした例ですが、以下のような形式です。

$mobiles = array(
	'iphone'			=> "Apple iPhone",
	'ipad'				=> "iPad",
	'ipod'				=> "Apple iPod Touch",
	'mobile'			=> "Generic Mobile",
	'smartphone'		=> "Generic Mobile",
);

2. 使用テーマ判定用の共通関数作成

次に、テーマの切り替え判定を行う関数を「core/MY_Controller.php」に作成します。

/**
 * テーマ切り替え用関数
 *
 * @param string サブフォルダ/ビューファイル名
 * @return string テーマディレクトリ
 */
public function get_theme($view) {
	$this->load->library('user_agent');
	
	// スマホ判定
	if ($this->agent->is_mobile()) {
		return 'sp/' . $view;
	}
	return 'pc/' . $view;
}

3. コントローラーでビュー読み込み

次に、使用するコントローラ内で「2」で作成した関数と合わせて、以下のようにビューを読み込む。

$data = array(); // ビューに渡したい要素を詰め込む

 ・
 ・
 ・

$this->load->view($this->get_theme('article/detail'), $data);

4. テーマ別にビューファイル作成

「3」の例でいくと、viewsディレクトリの下に「pc」と「sp」ディレクトリを作成したあと、それぞれに「article」ディレクトリを作成し、「detail.php」をビューファイルとして設置します。

サンプルとして動かすなら、以下のような感じでしょうか。

PC版:views/pc/article/detail.php

<html>
    <head></head>
    <body>
        PC版を表示しています。
    </body>
</html>

SP版:views/sp/article/detail.php

<html>
    <head></head>
    <body>
        SP版を表示しています。
    </body>
</html>

あとはPC・スマホの各ブラウザからそれぞれアクセスしてみると、それぞれのテーマが表示されるかと思います。

さいごに

いかがでしたでしょうか?
僕は普段WordPressばかり触っていたので、こういったことをあらためて実装してみると凄く新鮮な気分になれました。

それでは、また。

 

【最強PHPerになる!】

CakePHPの「Tree」Behaviorをカスタマイズして実装する方法

phpenv + php-buildでPHPを複数バージョン利用する方法

PHPer必見!最強PHPerになれると噂の「新言語Hack」を試してみよう!

CakePHPでBitbucketのAPIを利用する方法

PHPでjQueryチックにWebサイトをクローリングする方法