FuelPHP jQuery

FuelPHPでスマホサイトを作成する

更新日:

最近、スマホサイトに関する質問が多くなってきていますので、今回から何回かにわけてFuePHP内でjQueryMobileを利用した、スマホ(モバイル)サイトを実際に作成してみたいと思います。FulePHP内でjQueryMobileを実際に動かすための設定方法等からjQueryのexValidationというフォームバリデーションプラグインを使ったバリデーション処理等までやってみたいと思います。

1. jQueryMobileを使うには、2種類の方法があります。最も簡単なのは、サイトのヘッダー内に以下のCDNサイトのリンクを貼り付けることです。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

2. もう一つの方法は、jQueryMobileサイトのダウンロードページから実際にファイルをダウンロードすることです。こちらは少し複雑ですので、実際にやってみたいと思います。

3. ダウンロードページの中程に、Zipファイルがありますので、これをダウンロードして、解凍します。解凍したフォルダ内の『jquery.mobile-1.0.1.min.js』ファイルをpublic/assets/jsフォルダ内にコピーします。

4.  同様に、『jquery.mobile-1.0.1.min.css』ファイルをpublic/assets/cssフォルダ内にコピーします。

5. 次に、『images』のフォルダごと、cssのフォルダの中にコピーします。

6. 最後に、jQueryのダウンロードサイトへ行き、中程のDownload jQuery から、Minifiedを右クリックして、名前を付けて、リンク先を保存をクリックします。保存した、『jquery-1.6.4.min.js』ファイルをpublic/assets/jsフォルダ内に保存します(※最新版の1.7.2では、jQueryMobileの表示に不具合が出ますので、1.7.1か1.6.4ファイルを保存して下さい)。

7. それでは、早速、サンプルファイルを作成してみたいと思います。コントローラを下記のように記述します。

fuel/app/controller/sample6.php

class Controller_Sample6 extends Controller{
 public function action_index(){
 $data=array(
 'title'=>'FulePHPでスマホサイト',
 'site_name'=>'WinRoad徒然草',
 'footer'=>'@2012 winroad',
 );
 $view=View::forge('sample6/index',$data);
 return $view;
 }
}

CDNからファイルを読み込む方法

7. sample6フォルダを作成し、ビューファイル(index.php)を下記のように作成します。最初にCDNからファイルを読み込む方法を使って作成してみます。

fuel/app/views/sample6/index.php

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,minimum-scale=1">
 <title><?=$title?></title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
 <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
 <div data-role="header">
 <h1><?=$site_name?></h1>
 </div>
 <div data-role="content">
 <ul data-role="listview">
 <li><a href="#page2">2 ページ</a></li>
 <li><a href="#page3">3 ページ</a></li>
 <li><a href="http://google.co.jp" rel="external">Google</a></li>
 </ul>
 </div>
 <div data-role="footer">
 <h4><?=$footer?></h4>
 </div>
</div>
<div data-role="page" id="page2" data-add-back-btn="true">
 <div data-role="header">
 <h1>2 ページ</h1>
 </div>
 <div data-role="content">
 ここに2ページ目のコンテンツを表示します。
 </div>
 <div data-role="footer">
 <h4><?=$footer?></h4>
 </div>
</div>
<div data-role="page" id="page3" data-add-back-btn="true">
 <div data-role="header">
 <h1>3 ページ</h1>
 </div>
 <div data-role="content">
 ここに3ページ目のコンテンツを表示します。
 </div>
 <div data-role="footer">
 <h4><?=$footer?></h4>
 </div>
</div>
</body>
</html>

8. それでは、実際に表示してみましょう。今回は、DreamweaverのDevice Centralではなく、『Mobilizer』というソフトで表示してみます。iphoneとAndroid携帯の両方で同時に表示してみます。

9. たったこれだけで、スマートフォンっぽいサイトが出来上がりました。

ファイルをダウンロードして利用する方法

10. ファイルのダウンロード方法と、保存場所に関しては、最初の方で説明しましたので、実際にダウンロードしたファイルを読み込む方法を説明したいと思います。

11. ビューファイルのindex.phpの7行目から9行目を下記のように変更します。

<?php echo Asset::css('jquery.mobile-1.0.1.min.css')?>
<?php echo Asset::js(array('jquery-1.6.4.min.js','jquery.mobile-1.0.1.min.js'))?>

又は、

<?php echo Asset::css('jquery.mobile-1.0.1.min.css')?>
<?php echo Asset::js('jquery-1.6.4.min.js')?>
<?php echo Asset::js('jquery.mobile-1.0.1.min.js')?>

12. jsファイルは、配列で指定してもいいですし、別々に記述しても構いません。只、必ず、先にjquery-1.6.4.min.jsを記述して下さい。

スマートフォン用Viewportの設定

13. index.phpファイルの5行目にviewportの設定をしています。viewportとは、スマートフォンのブラウザがWebページをどのように表示するかを制御するためのmeta要素です。これを省略すると、画面を縮小して表示しますので、かなり見づらい画面になってしまいます。ただ、上記の設定では、iphoneで本体の向きを横向きに変えたとき、拡大されてしまいます。これが、気になる人は、下記のように拡大を制御するmaximum-scaleの設定を追加して下さい。

<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">

14. ただ、この場合はユーザーによる拡大縮小が出来ませんので、どちらが自身のサイトにとってユーザビリティがいいかを判断して設定するようにして下さい。

CDNとダウンロードファイルの長所と短所

15. CDNから直接ファイルを読み込む方法は、ネットワークに繋がってさえいれば、簡単に利用することが出来ます。ほとんど何も設定する必要ないため、扱いやすいのですが、後々ファイル数が増えたときのバージョンアップは、全てのファイルのヘッダー情報を変更しなければならないので、その辺が面倒です。

16. その点、ダウンロードファイルの場合は、初期設定は面倒ですが、ダウンロードファイル名を統一しておけば、(例えば、jquery.mobile-1.0.1.min.cssをjquery.mobile.min.cssで保存しておき、バージョンアップしたときも同じファイル名で上書き保存すれば)、ビューファイルのヘッダー情報は全く変更する必要がありません。

どちらも一長一短がありますので、好みで設定して下さい。

本日は以上です。

-FuelPHP, jQuery
-,

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