Onsen UIとjQueryを組み合わせてスマートフォンWebサイト/ハイブリッドアプリを作ろう
Onsen UIはHTML5モバイルアプリを高速化し、かつネイティブアプリのようなUIを提供するフレームワークになっています。技術的にはカスタムエレメントとAngularJSを使って作られていますが、その利用に際してAngularJSの習得が必須という訳ではありません。現在のOnsen UIはAngularJS以外の様々なJavaScriptフレームワークと組み合わせて使えるようになっています。
今回はWeb開発で最も使われているであろうjQueryを使ってOnsen UIの操作を説明したいと思います。
ベースになるHTML
まずはベースのHTMLファイルの内容です。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>My App</title>
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="styles/app.css"/>
<link rel="stylesheet" href="styles/onsen-css-components-blue-basic-theme.css">
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script src="lib/jquery/jquery-2.1.3.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-toolbar>
<div class="center">Onsen + jQuery デモ</div>
</ons-toolbar>
<p>
<div style="text-align: center">
<p><ons-button id="next_page">次のページ</ons-button></p>
<p><div id="my-content">書き換えられるコンテンツ</div></p>
</div>
</p>
</ons-page>
</ons-navigator>
</body>
</html>
HTMLのレベルではOnsen UIのカスタムエレメントをそのまま書きます。また、カスタムエレメントを通常のHTMLに変換するためにAngularJSとOnsen UIのJavaScriptは必須です。
通常のHTMLに展開する
カスタムエレメントを描画するのはまだ殆どのブラウザが対応していません。そこでOnsen UIのコンパイル機能を使います。
ons.bootstrap();
この bootstrap メソッドによって、以下のように描画されます。
見ての通り、
<ons-button id="next_page">次のページ</ons-button>
はボタンの表示になっていますが、
<div id="my-content">書き換えられるコンテンツ</div>
は変わっていません。動的にUIを書き換える場合は次のようにします。
ons.ready(function() {
var content = $("#my-content");
content.html("<ons-button>追加されたボタン</ons-button>");
ons.compile(content[0]);
});
jQueryを使って #my-content の内容を Onsen UIのカスタムエレメントに書き換えています。それを ons.compileに渡すことによってHTMLエレメントに変換しています。jQueryオブジェクトからDOMに変換する際には [0] を使います。$(function() {}) ではなく、 ons.ready を使うのが注意点です。
ボタンを押した時のイベント
ボタンを押した時のイベントは通常のjQueryとして記述ができます。
$("ons-button#next_page").on('click', function(e) {
// ここに処理を書きます
});
ナビゲーション操作
ページを移動するスタック管理やナビゲーション機能を提供するコンポーネントに ons-navigator があります。こちらを使う場合には予め次のように var要素を書いておきます。
<ons-navigator title="Navigator" var="myNavigator">
:
</ons-navigator>
こうすることで window.myNavigator にこのナビゲーションコンポーネントが定義されますので myNavigator としてアクセスが可能になります。
ボタンを押した時に画面遷移する
前述のクリックイベントとナビゲーションコンポーネントを組み合わせるとページ移動ができるようになります。
$("ons-button#next_page").on('click', function(e) {
myNavigator.pushPage('page2.html');
});
pushPageはページ移動になります。page2.htmlは元々のHTMLファイルと同じ階層にあるpage2.htmlを読み込みます。例えば次のような記述です。
<ons-page>
<ons-toolbar>
<div class="center">Onsen + jQuery デモ</div>
<div class="left">
<ons-back-button onclick="myNavigator.popPage();">Back</ons-back-button>
</div>
</ons-toolbar>
<div id="my-content">
</div>
</ons-page>
こちらのようにonでイベントハンドリングするだけでなく、onclickで定義も可能です。popPageはページスタックから最前面のページが削除され、1つ前のページに戻る処理です。page2.htmlで記述している内容はコンパイル済みで、HTMLエレメントがそのまま表示されます。
表示する際の動的書き換え
画面を移動する際にコンテンツを動的に書き換えたいというニーズは多いと思います。この場合はナビゲーターのイベントハンドリングで行います。
myNavigator.on('postpush', function(e) {
$(e.enterPage.element).find("#my-content").html('<p><div class="center" style="text-align:center">コンテンツ書き換え</div></p>');
});
postpushはpushが完了した時に呼ばれるイベントになります。 $(e.enterPage.element) にページの内容が入っていますので、そこから書き換えたい要素を検索して変更できるようになっています。
全体の動きは次のようになります。
このようにOnsen UIはAngularJSからだけでなく、jQuery（その他のJavaScriptフレームワークも）から利用が可能です。基本的な使い方さえ覚えてしまえば、スマートフォンアプリはもちろん、スマートフォンWebサイトに求められるアニメーションやUI/UXを簡単に手に入れることができます。これまでのナレッジを使って開発ができるようになるでしょう。
ぜひOnsen UIを使ってスマートフォンWebサイト/アプリを開発してください。
