FuelPHP jQuery

jQueryMobileのテーマローダーで簡単テーマ作成

更新日:

jQueryMobileには、『a』~『e』の5種類のテーマがデフォルトで用意されていますが、これだけではバリエーションが全く足りないと思われている方が多いと思います。そこで、jQuery Mobileには自由にテーマを作成できる『テーマローダー』という機能が用意されています。この機能を使うと『自由な色の組み合わせ』で、新しいテーマを作成することが出来ます。今日は、このテーマローラーの使い方をご紹介したいと思います。

1. テーマローラーはWebブラウザ上で動作するアプリケーションです。ブラウザで下記のサイトを開いて下さい。

http://jquerymobile.com/themeroller/

2. Welcomeのダイアログが表示されたら、『Get Rolling』ボタンをクリックします。

3. デフォルトで『A』~『C』の3つのテーマが用意されています。これに、上の色見本から好きな色をドラッグ&ドロップするだけで、新しいテーマが作成されます。

4. 最初から全部作っていってもいいのですが、jQueryMobileで最初から用意されているデフォルトのテーマはそのままに『F』以降に、オリジナルのテーマを作成する方法をご紹介します。

5. まず画面上部の『Import』ボタンをクリックします。表示されたダイアログの左上でバージョンを指定して、右上の『Import Default Theme』をして、標準のテーマを読み込んだ後、『Import』ボタンをクリックします。

6. デフォルトのテーマ『A』~『E』が表示されました。

7. それでは、新しくテーマを作成してみたいと思います。左メニューの『+』タブをクリックするか、Add Swatchをクリックして、新しいテーマを作成します。

8. 新規で作成した『F』のタブをクリックし、ヘッダーバーの色を決めたら上の色見本からドラッグしてきます。同様にContent Bodyの色を決め、ボタンを色を決めます。色を決めたら、BACKGROUNDの右にある+ボタンをクリックします。これを指定することでヘッダーやボタン、ボディの背景色をグラデーション指定することが出来ます。

9. 何度でもやり直しがききますので、気の済むまで弄くり回して下さい。独自テーマは『F』~『Z』まで21種類作成することが出来ます。

10. 好きなテーマを作成したら、上の『DownLoad theme zip file』をクリックします。ダイアログが表示されますので、『Theme Name』に適当な名前を入力して、『Download Zip』ボタンをクリックします。

11. ダウンロードしたZipファイルを解凍して、中身を見てみます。themesフォルダとindex.htmlファイルがあります。themesフォルダの中にimagesフォルダと作成したcssがあります。

新しく作成したテーマの使用方法

12. 新しく作成したテーマは、jQueryMobileのデフォルトのCSSと入れ替えるだけでは、利用することが出来ません。新しく作成したテーマの後に、jQueryMobileの構造だけを記述したCSSファイル『jquery.mobile.structure-1.0.1.min.css』を読み込まなくてはなりません。

13. CDNを使う方法や、普通のサイトでの設定方法は難しくないと思いますので、今回も、FuelPHPでの設定方法を調べてみます。

14. jQueryMobileをダウンロードして、解凍したフォルダの中に、jquery.mobile.structure-1.0.1.cssとjquery.mobile.structure-1.0.1.min.cssがありますので、jquery.mobile.structure-1.0.1.min.cssを『public/assets/css』のフォルダ内にコピーして、名称をjquery.mobile.structure.min.cssに変更します(名称変更は任意です)。

15. 先程作成したオリジナルCSSファイルも同じ箇所にコピーします。

16. 前回のform.phpに新しく作成したテーマを適用してみます。まずコントローラを下記に記述します。18行目に新しく作成したテーマのCSSを挿入しています。19行目には、jQueryMobileの構造だけを記述したCSSファイルを挿入しています。

fule/app/classes/controller/sample6.php

<?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;
 }
 //フォームを表示するためのメソッド
 public function action_form(){
 $data=array(
 'title'=>'FulePHPでスマホサイト',
 'site_name'=>'WinRoad徒然草',
 'footer'=>'@2012 winroad',
 'css'=>array('winroad-theme.min.css',
 'jquery.mobile.structure.min.css',
 'exvalidation.css'),
 'js'=>array('jquery.min.js',
 'jquery.mobile.min.js',
 'exvalidation.min.js',
 'exchecker-ja.min.js'),
 );
 $view=View::forge('sample6/form',$data);
 return $view;
 }
}

17.  次にビューファイルを下記に記述しておきます。7行目で、CSSファイル、8行目でjsファイルを読み込んでいます。10、11、37、40行目の『data-thme="f"』で新しく作成したテーマを読み込んでいます。

fuel/app/views/sample6/form.php

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
<title><?=$title?></title>
<?php echo Asset::css($css)?>
<?php echo Asset::js($js)?>
<body>
<div data-role="page" id="page1" data-theme="f">
 <div data-role="header" data-theme="f">
 <h1><?=$site_name?></h1>
 </div>
<form action="" method="post">
 <div data-role="content">
 <fieldset data-role="controlgroup">
 <label for="name">名前</label>
 <input type="text" name="name" id="name" value="">
 <label for="kana">読み(カタカナ)</label>
 <input type="text" name="kana" id="kana" value="">
 </fieldset>
 <label for="email">メールアドレス</label>
 <input type="text" name="email" id="email" value="">
 <label for="password">パスワード</label>
 <input type="password" name="password" id="password" value="">
 <label for="repassword">パスワードの再入力</label>
 <input type="password" name="repassword" id="repassword" value="">
 <fieldset data-role="controlgroup" data-type="horizontal">
 <legend>性別</legend>
 <span class="chkradio" id="gender">
 <input type="radio" name="gender" id="gender-male" value="男性">
 <label for="gender-male">男性</label>
 <input type="radio" name="gender" id="gender-female" value="女性">
 <label for="gender-female">女性</label>
 </span>
 </fieldset>
 <input type="submit" value="登録" data-theme="f">
 </div>
</form>
 <div data-role="footer" data-theme="f">
 <h4><?=$footer?></h4>
 </div>
</div>
<script type="text/javascript">
 var validation = $("form")
 .exValidation({
 rules: {
 name: "chkrequired",
 kana: "chkrequired chkkatakana",
 email: "chkrequired chkemail chkhankaku",
 password: "chkrequired chkmin6 chkmax16",
 repassword: "chkrequired chkretype-password",
 },
 errInsertPos: 'before',
 errPosition: 'fixed'
 });
 var selectable = $('#pref').selectable({
 callback: function() {
 validation.laterCall('#pref');
 }
 });
</script>
</body>
</html>

18. それでは、Mobilizerで確認してみます。

19. まあ、ざっと作ったテーマですので、余り見栄えは良くありませんが、皆さんは頑張ってかっこいいテーマを作成して下さい。

本日は以上です。

-FuelPHP, jQuery
-

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