10.スマートフォン対応（jQueryMobileとの連携）
Last modified by ishikawa on 2016/10/11, 09:57
チュートリアル目次
概要
本章では、jQuery Mobileを使った開発を「hifive」と連携しより使い易くするための連携機能を述べます。jQuery Mobileに関しては、以下サイトなどを参考にしてください。
hifiveとjQuery Mobileの連携
hifiveで用意されたjQuery Mobile専用のコントローラマネージャ(以下、マネージャと呼びます)を使用することにより、jQuery Mobile特有のページのライフサイクル(DOM生成や破棄)を意識することなく、簡単に組み合わせて使用することができます。
また、画面で必要なCSSファイルの読み込みもマネージャが行うので、他のページで使用しているCSSファイルの定義に干渉することを回避できます。
なぜマネージャが必要か
jQuery Mobileは、ページとなるDOM要素を以下のように操作するため、適切なタイミングでコントローラを設定または除去する必要があります。
連携方法
マネージャの使用方法は以下のとおりです。
- htmlファイルを作成します。構成は1html-1ページ(1html中にdata-role="page"のDIV要素は1つのみ存在する状態)にして下さい。
- HEADタグにアプリケーション全体で使用するjsファイルやcssファイルを記述します。
- h5.js, jquery.mobile.jsを読み込んだ後に、h5.ui.jqm.manager.init()でマネージャを初期化して下さい。
- ページに対してバインドするコントローラの定義が記述されたスクリプトのパスを、data-role="page"のDIV要素のdata-h5-script属性に記述します。(複数ある場合は","で分割して記述)
- data-h5-script属性に記述されたスクリプトは、デフォルトでは同期でロードされます。
非同期にロードしたい場合は、data-h5-script属性を記述した要素にdata-h5-async="true"と記述してください。
- data-h5-script属性に記述されたスクリプトは、デフォルトでは同期でロードされます。
- jsファイルを作成し、コントローラの定義を行います。
- h5.ui.jqm.manager.define()でコントローラ定義を登録します。
- h5.ui.jqm.manager.define()と登録するコントローラ定義は、data-h5-script属性に指定したJSファイルに記述して下さい。
サンプルコード
HTML
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- アプリケーション全体で使用するjsファイルやcssファイルはHEADタグ内に記述する -->
<link rel="stylesheet" href="jquery.mobile.css" />
<script src="jquery.js"></script>
<script src="ejs-1.0.h5mod.js"></script>
<script src="h5.js"></script>
<script src="jquery.mobile.js"></script>
<script>
h5.ui.jqm.manager.init(); // jQuery Mobile用コントローラマネージャの初期化
</script>
<title>JQMコントローラサンプル</title>
</head>
<body>
<!-- index.jsにはこのページで使用するコントローラの定義が書かれている -->
<!-- ここ(data-role"page"のDIVのdata-h5-script属性)で、index.jsの宣言を行う -->
<div data-role="page" id="index-page" data-h5-script="index.js">
<div data-role="header">
<h1>TEST 1</h1>
</div>
<div data-role="content">
<input type="button" id="btn1" value="TEST">
</div>
<div data-role="footer">
<div>footer</div>
</div>
</div>
</body>
</html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- アプリケーション全体で使用するjsファイルやcssファイルはHEADタグ内に記述する -->
<link rel="stylesheet" href="jquery.mobile.css" />
<script src="jquery.js"></script>
<script src="ejs-1.0.h5mod.js"></script>
<script src="h5.js"></script>
<script src="jquery.mobile.js"></script>
<script>
h5.ui.jqm.manager.init(); // jQuery Mobile用コントローラマネージャの初期化
</script>
<title>JQMコントローラサンプル</title>
</head>
<body>
<!-- index.jsにはこのページで使用するコントローラの定義が書かれている -->
<!-- ここ(data-role"page"のDIVのdata-h5-script属性)で、index.jsの宣言を行う -->
<div data-role="page" id="index-page" data-h5-script="index.js">
<div data-role="header">
<h1>TEST 1</h1>
</div>
<div data-role="content">
<input type="button" id="btn1" value="TEST">
</div>
<div data-role="footer">
<div>footer</div>
</div>
</div>
</body>
</html>
JavaScript
var indexController = {
__name: 'IndexController',
'#btn1 click': function() {
alert('Hello!');
}
};
// 第一引数にdata-role="page"のDIVのid名を指定
// 第二引数にこの画面で使用するCSSのパスを指定する。(配列で複数指定可能)
// 第三引数にコントローラ定義オブジェクト
h5.ui.jqm.manager.define('index-page', 'index.css', indexController);
__name: 'IndexController',
'#btn1 click': function() {
alert('Hello!');
}
};
// 第一引数にdata-role="page"のDIVのid名を指定
// 第二引数にこの画面で使用するCSSのパスを指定する。(配列で複数指定可能)
// 第三引数にコントローラ定義オブジェクト
h5.ui.jqm.manager.define('index-page', 'index.css', indexController);
以下のサンプルでは、ページ表示毎にコントローラのバインドまたはアンバインドの実行と、CSSファイルをロードしページにスタイルを適用していることを確認できます。
jQueryMobile + hifive連携サンプル
ページにコントローラを登録する
以下のように記述することで、ページにコントローラを登録することができます。
var indexController = {
__name: 'IndexController',
'#btn1 click': function() {
alert('Hello!');
}
};
var indexController2 = {
__name: 'IndexController2',
'#btn1 click': function() {
alert('World!');
}
};
h5.ui.jqm.manager.define('index-page', 'index.css', indexController);
h5.ui.jqm.manager.define('index-page', 'index.css', indexController2);
__name: 'IndexController',
'#btn1 click': function() {
alert('Hello!');
}
};
var indexController2 = {
__name: 'IndexController2',
'#btn1 click': function() {
alert('World!');
}
};
h5.ui.jqm.manager.define('index-page', 'index.css', indexController);
h5.ui.jqm.manager.define('index-page', 'index.css', indexController2);
- 登録するコントローラ定義オブジェクトを第三引数に指定します。
- 同じページIDに対して、登録するコントローラの数分h5.ui.jqm.manager.define()を実行して、複数のコントローラをバインドすることができます。
- 既にコントローラがバインド済みの場合はバインドを実行しません。
- バインド済みかの判定は、コントローラ定義オブジェクトの__nameプロパティの値がバインド済みのコントローラと同値であるかで行います。
次のステップ⇒チュートリアル11.HTML5APIの利用