fuelphpでPC、スマホ、ガラケーサイトを構築する方法
必要な処理
・ユーザエージェントから端末を判別する
・PC、スマートフォン(以下SP)、フューチャーフォン(以下FP)で使用するテンプレートファイルをきりかえる
・PC、SP、FPで必要であれば文字コードをきりかえる
まずは全体的な構成
僕の場合は、fuel/app/classes/controllerに以下の様な構成にする事が多いです。
app.php ※システム全体で共通な処理などを記述
sample1.php
sample2.php
app.phpには
例えばログイン処理判定、端末判定などどのページでも必要な処理を記述するイメージです
そしてsample1.php、sample2.phpはapp.phpを継承して個別の処理を記述してゆきます
app.php
class Controller_App extends Controller {
public function before() {
//ログイン判定などサービス全体で必要となる処理を記述
}
}
class Controller_Sample1 extends Controller_App {
//これらのファイルではapp.phpに記述したログイン判定などが行われる
}
ユーザエージェントから端末を判別
PC、SP、FPの判別方法には色々あるようですが、fulephpには標準でAgentクラスなるものが用意されているようです。
また、このクラスにはSPかFPかを判別することはできないようなので、こちらを参考にAgentクラスを拡張するのが簡単かと思います。
PC、SP、FPごとにテンプレート(views)をきりかえる
ガラケーは無視してPCとスマホ対応サイトで、さらにレスポンシブデザインとかであれば気にする事はないのですが
端末ごとにHTMLやcssが別々に用意されている場合の方法を考えます。
やり方はいくつかあると思いますが、Themeクラスを使うのが1番簡単なのではないでしょうか。
簡単にいうとthemeを使用すると
views/pc ※PC用
views/sp ※SP用
views/fp ※FP用
のような構成を簡単に実装することができます
先ほどのapp.phpに追加してみます
app.php
class Controller_App extends Controller {
public function before() {
//ログイン判定などサービス全体で必要となる処理を記述
//デフォルト(PC)のテンプレート設定。各パラメータについては公式ドキュメントみてください。
//viewファイルの場所やviewファイルの拡張子とかなのでこのままでも大丈夫かな
$this->theme = Theme::instance(
'custom',
array(
'active' => 'pc',
'fallback' => 'pc',
'paths' => array(APPPATH.'views'),
'assets_folder' => 'assets',
'view_ext' => '.html',
'require_info_file' => false,
'use_modules' => false,
)
);
//PC、SP、FPを判別してSPまたはFPならthemeをきりかえる ※先ほど紹介した拡張版Agentクラスを使用
if (Agent::is_smartphone()) {
$this->theme->active('sp');
} elseif (Agent::is_mobiledevice()) {
$this->theme->active('fp');
}
//サイト全体で使用するレイアウト
//PCの場合、views/pc/laytout.html
//SPの場合、views/sp/laytout.html
//FPの場合、views/fp/laytout.html
$this->theme->set_template('layout')
}
}各ページでは以下のように設定します
sample1.php
class Controller_Sample extends Controller_App
{
public function action_index()
{
//ページ別のテンプレートを指定
//PCの場合、views/pc/sample1.html
//SPの場合、views/sp/sample2.html
//FPの場合、views/fp/sample3.html
$this->theme->template->content = $this->theme->view('sample1');
return $this->theme;
}
}また、テンプレートは以下のようになります。PC、SP、FPごとに準備する必要があります
layout.html
<!DOCTYPE html>
<html>
<head>/head>
<body>
<?php echo $content; ?>
</body>
</html>
PC、SP、FPで必要であれば文字コードをきりかえる
ここまでできたのであとはコレなのですが、今の携帯はUTF-8に対応してるので考える必要ないようですね
昔は機種によってSJISにしか対応していない端末とかもあったのでこんなような処理が必要でした。
app.phpに追加する形で軽くのせておきます。
app.php
class Controller_App extends Controller {
public function before() {
//省略
}
public function after($response) {
//PC、SP、FPを判別してFPなら文字コードをSJISに変換する
if (Agent::is_mobiledevice()) {
if (!Agent::is_smartphone()) {
$response = mb_convert_encoding($response,'SJIS-win','UTF-8');
}
}
$response = parent::after($response);
return $response;
}
}こんな感じになりました。まぁ文字コードに関しては対応する必要はないかもしれませんが
例えばリンク先を書き直して出力したりする場合にも同じような要領で使えるので意外と便利なんじゃないかなぁと思います
