FuelPHP

FuelPHPのテーマクラスでスマホサイトの振り分け

更新日:

現在、社内専用サイトの作成に毎日追われています。社内専用サイトはモバイル版が中心ですので、TwitterBootstrapのレスポンシブデザインで対応してもいいのですが、やはり専用のモバイルサイトは作成したいと考えています。そこで、FuelPHPのテーマクラスで、簡単にPCサイトとスマホサイトを兼用する方法を考えてみました。

1. まず、基本的には、レスポンシブデザインでサイトを構築します。こうすれば、急ぎでスマホサイトを作成しなくても、ある程度はスマートフォンにも対応できます。

2. そのときに、テーマクラスを中心にしたサイトを構築するように、コントローラ、モデル、ビューファイルを作成します。テーマクラスの設定方法は、『FuelPHPのテーマクラス』及び『FuelPHPのテーマクラスの概要』を参照して下さい。

3. そして、時間があるときに少しずつスマートフォン用のサイト(ページ)を作成します。FuelPHPのテーマクラスは、テーマクラスで指定したファイルが無い場合、既存のビューファイルを表示します。ですので、元々レスポンシブデザインでサイトを作成しておけば、スマートフォン用のサイトに少しずつリニューアルできます。

Configファイルの作成

4. それでは実際にやってみましょう。まず、core/configフォルダのtheme.phpをapp/configフォルダにコピーします。

5. コピーしたtheme.phpファイルを下記のように書き換えます。

app/config/theme.php

<?php
$active='default';
 //モバイルの場合
 if(Agent::is_mobiledevice()){
 $active='mobile';
 }
return array(
 'active' => $active,
 'fallback' => 'default',
'paths' => array(
 APPPATH.'themes',
 ),
'assets_folder' => 'assets',
'view_ext' => '.php',
'require_info_file' => false,
'info_file_name' => 'themeinfo.php',
 );
Configファイル内にロジックを書かれる方はほとんどいないと思いますが、これが一番簡単な方法ですので、私は採用しています。つまり、テーマクラスのConfigファイルを読み込む時点で、デバイスを判断し、モバイルデバイスの場合は、themes/mobile内のファイルを読み込み、モバイル以外の場合は、themes/defalut内のファイルを読み込みます。
テーマクラスの面白いところは、このテーマクラスで指定しているフォルダ内にビューファイルが無い場合、既存のビューフォルダからファイルを捜してきて表示します。ですので、とりあえずはPC用のサイトだけを作成しておき、後からスマートフォン専用のサイトを作成するということが出来ます

5. 次に、appフォルダの直下(viewsフォルダと同じ階層)にthemesフォルダを作成します。

viewsフォルダ内に、themesフォルダを作成する方が多いと思いますが、themesフォルダ内には、viewsフォルダと同じ名前のフォルダやファイルを作成します。viewsフォルダ内にthemesフォルダを作成すると、フォルダやファイルを間違えやすいので、私の場合はviewsフォルダと別フォルダに作成しています。

6. そして、そのthemesフォルダ内にdefaultフォルダとmobileフォルダを作成します。この、defaultフォルダとmobileフォルダが無いとエラーになりますので、使用しなくても必ずこの二つのフォルダは作成します。私もdefalutフォルダは使用したことがありません(^0^)。

7. 最後にスマートフォンで表示したいファイル(ページ)をthems/mobileフォルダの中に、viewsフォルダと同じ構成(同じフォルダ名、同じファイル名)で作成します。たったこれだけでPCサイトとスマートフォン専用サイトを兼用することが出来ます。

8. 下に、テーマクラスで作成(現在作成中)した、例を表示しておきます。左側は、TwitterBootstrapのレスポンシブデザインで作成したPC用サイトです。右側が、jQueryMobileで作成したスマートフォン用サイトです。両方のサイトとも同じ、アドレスにアクセスしています。

9. このように、FuelPHPのテーマクラスを利用すると簡単にPC用サイトとスマホ用サイトを兼用(同じコントローラで別々のビューファイルを表示)することが出来ます。皆さんも試して下さい。

10. 次回から、伝言板アプリを作成したいと思います。私の会社でもメッセージはメールを多用していますが、メールの場合、会社からのメールだけでなく、個人のメールもありますし、1日に何件もメールを受け取る人は、あっという間に埋もれてしまい、以前受け取ったメールを捜すのに苦労します。

11. そこで、メッセージを社内サイトのデータベースで管理することで、色々便利なことが出来ます。検索は簡単にできますし、コメントもその場で付けることが出来ます。また、受け取ったメッセージを自分自身のTodoに変換することも出来ます。

12. 等々、やりたい事はたくさんあるのですが、とりあえず基本的な伝言板(メッセージ)アプリを作成したいと思います。

本日は以上です。

-FuelPHP
-,

Copyright© WinRoad徒然草 , 2018 All Rights Reserved Powered by AFFINGER5.