今回は Monaca と組み合わせて利用することが可能なオープンソースの UI フレームワーク「Onsen UI」を紹介します。
前回までの記事はこちら
MonacaではじめるCordovaアプリ開発入門 第一回
MonacaではじめるCordovaアプリ開発入門 第二回
Onsen UI とは
Onsen UI は、独自の HTML タグを記述するだけでネイティブライクな画面を手軽に作ることができる UI フレームワークです。 画面遷移エフェクト等のアニメーションは Cordova アプリ向けに最適化されており、ネイティブと遜色ないパフォーマンスを発揮します。
UI を構成するコンポーネントも豊富に用意されています。
その他にも、 Onsen UI には以下のような特徴があります。
- iOS/Android の UI ガイドラインに準拠
- レスポンシブデザイン対応
- Corcova アプリにも、 Web サイト制作にも利用可能
- SPA （ Single Page Application ）の構築が容易
2016年9月に、最新バージョンの Onsen UI 2.0 がリリースされました。 2.0 からは、 Angular 、 React 、 Vue.js 、 Meteor 、 jQuery といった、主要な JavaScript のフレームワークと組み合わせて利用することが可能となりました。
また、端末のプラットフォームを判別して iOS ではフラットデザイン、 Android ではマテリアルデザインを自動的に適用する Automatic Styling 機能が搭載されました。
Monaca で Onsen UI を使う
Monaca にログインし、「新規プロジェクト」ボタンを押すとテンプレートの一覧が表示されます。
Onsen UI のコンポーネントが組み込まれている最小限のテンプレートをはじめ、ページ遷移やタブバー、オーバーレイ表示されるメニューなど、様々なテンプレートが用意されています。 ここでは、ページ遷移のサンプルコードが含まれている、「Onsen UI V2 JS Navigation」テンプレートを選択します。
プロジェクト作成して IDE を開き、プレビューまたは Monaca デバッガーで確認すると、ボタン押下によって次ページに遷移する画面が表示されます。
この画面のソースコードは、 index.html の中にすべて記述されています。 まずはじめに、<body>タグの中から見ていきます。
<body>
<ons-navigator id="navigator" page="page1.html"></ons-navigator>
<ons-template id="page1.html">
<ons-page>
<ons-toolbar>
<div class="center">Page 1</div>
</ons-toolbar>
<p>This is the first page.</p>
<ons-button id="push-button">Push page</ons-button>
</ons-page>
</ons-template>
<ons-template id="page2.html">
<ons-page>
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Page 2</div>
</ons-toolbar>
<p>This is the second page.</p>
</ons-page>
</ons-template>
</body>
Onsen UI で作成するアプリは、 SPA （ Single Page Application ）といって、一枚の HTML ファイルの中に複数の画面を含む構成になっています。 SPA を採用することによって、画面を遷移する際にページの読み込みが発生しなくなり、高速な画面遷移を実現できます。
まずは先頭に記述されている<ons-navigation>タグについて解説します。
<ons-navigator id="navigator" page="page1.html"></ons-navigator>
<ons-navigation>は、複数の画面を管理するためのコンポーネントで、画面遷移などの機能を提供します。 page 属性に指定した画面が、初期表示される画面となります。
次に、初期表示される画面として指定されている、 page1.html がどのように実装されているのかを解説します。
<ons-template id="page1.html">
<ons-page>
<ons-toolbar>
<div class="center">Page 1</div>
</ons-toolbar>
<p>This is the first page.</p>
<ons-button id="push-button">Push page</ons-button>
</ons-page>
</ons-template>
<ons-template>は、仮想的な HTML ファイルを作成するためのコンポーネントです。このタグで囲まれた範囲を一枚の HTML ファイルとして扱うことができるようになります。 id 属性に指定した値が、仮想的な HTML ファイルの URL となります。
<ons-template>の中に記述されている<ons-page>は、ページそのものを表すコンポーネントです。画面上に表示したいコンテンツをこのタグの中に記述します。
<ons-toolbar>は画面上部に表示されるツールバー、<ons-button>はボタンを表します。
遷移先の page2.html も同様に、<ons-template>によって定義されています。
続いて、ボタンを押したときに画面遷移を実行する方法について解説します。画面遷移は、<ons-navigation>が持つメソッドを JavaScript で呼び出すことで実行できます。 JavaScript が記述されている<script>タグの中を確認してみましょう。
<script>
ons.ready(function() {
var button = document.getElementById('push-button');
var navigator = document.getElementById('navigator');
button.onclick = function() {
navigator.pushPage('page2.html', {animation: "lift"});
};
});
</script>
ons.ready()は、 Onsen UI がロードされて利用可能になったタイミングで実行されます。引数の関数の中に、初期化の処理などを記述します。
ここでは初期化処理として、<ons-button>を押したときに page2.html に遷移する命令を記述しています。
画面遷移を実行しているのは以下の箇所になります。
navigator.pushPage('page2.html');
<ons-navigation>の pushPage メソッドによって、画面遷移を実行します。引数には遷移先ページの URL を指定します。デフォルトの遷移アニメーションは、 iOS の場合はスライドイン、 Android の場合はフェードインが設定されています。遷移アニメーションは第二引数にオプションを指定することで変更が可能です。
以下はリフトアップする遷移アニメーションを指定した例です。
navigator.pushPage('page2.html', {animation: "lift"});
このように、 Onsen UI では ons-*ではじまる独自のタグを埋め込み、 JavaScript で画面遷移などの動きをつけることで UI を構築していきます。
ここで紹介したコンポーネントは一例で、 Onsen UI にはまだまだ数多くのコンポーネントが用意されています。 詳細は Onsen UI の公式サイトをご確認ください。
まとめ
手軽に本格的な UI を制作できることが可能な Onsen UI の利用方法を紹介しました。 スピーディに UI 構築を行うことができるため、アプリ開発はもちろんモックアップ制作にも役立てることができます。
三回に渡って連載してまいりました、「Monaca ではじめる Cordova アプリ開発入門」は今回で終了となります。 ぜひこの機会に、 Monaca と Onsen UI によるアプリ開発を体験してみてください。
