又川 尚樹

モバイルUIフレームワークのド本命、Onsen UI 2正式リリース!──React, Angular 2両対応!

先日、本サイトにて公開された React/Angular2時代のUIフレームワーク考──Ionic2、Onsen UI2を語る という記事を受けて、本記事ではOnsen UI 2の具体的な使い方をご紹介していきたいと思います。

Onsen UI 2 の概要

blog_onsen_2

Onsen UIはアシアル株式会社が2013年から公開しているオープンソースのHTML5 UIライブラリです。 HTML5モバイルアプリでの利用に特化した高速な動作性が特徴です。

2016/09/15(日本時間)に次期バージョン「Onsen UI 2」の正式版をリリースしました。 AngularJSのロードが必要だったOnsen UI 1と異なり、Onsen UI 2は単体で動作 します(Web 標準の Custom Elements を利用しています)。

また、Android向けの画面とiOS向けの画面をワンソースで構築できるAutomatic Stylingなどの新機能を備えています。

onsen-ui2-automatic-styling

Hello, World

空ディレクトリを作成し、以下のコマンドでonsenuiパッケージをインストールします。

次に、index.htmlを以下の内容で作成します。

head要素内で読み込まれているonsenui.css, onsen-css-components.css, onsenui.min.jsがOnsen UI 2の実体です。

上記3つのファイルの読み込みが完了すると、ons-pageons-toolbarといった要素がブラウザに登録され、元々ブラウザに組み込まれているinput要素などと同じ感覚で使えるようになります

最終的なディレクトリ構成は以下のようになります。

ブラウザでindex.htmlを開くと以下のような画面が表示されているはずです。 ボタンをクリックするとOnsen UI製のダイアログ(ons-alert-dialog 要素)が表示されます。

onsen-ui2-purejs-01-aligned onsen-ui2-purejs-02-aligned

このようにOnsen UI 2は、特殊な知識を必要とすることなく、少しの準備ですぐに使い始めることができます。

なお、今回使用したons-page, ons-toolbar, ons-button, ons-alert-dialog以外にも、Onsen UI 2はモバイルアプリに不可欠なコンポーネントを数多く揃えています(以下はその例です)。

onsen-ui2-components-02

使用可能なコンポーネントの一覧は Onsen UI 2 Docs にあります。Onsen UI 2を使った開発では、使用可能なコンポーネントとその使い方を公式ドキュメントから探しながら画面を実装していくことになります。

アプリケーションフレームワークと併用する

発展的な内容として、Onsen UI 2をアプリケーションフレームワークと併用する方法について解説します。

Onsen UI 2の特徴は任意のアプリケーションフレームワークと併用できる点です。実際、React, AngularJS, Angular2, Vue.js, Meteorと一緒に動作させても問題なく動作することを確認しています。

しかし Onsen UI 2のコンポーネントは input 要素などと同じく、DOM要素自体にメソッドが紐づけられているため、Onsen UI 2単体ではコンポーネントを操作する際にDOM要素への直接アクセスが必要になってしまいます。DOM要素への直接アクセスは、ReactやAngular2などといったDOM要素への直接アクセスを忌避するアプリケーションフレームワークにおいて問題となります。

その問題の解決策として、Onsen UI 2は一部のアプリケーションフレームワークに対してバインディングを用意しています。

バインディングを利用すると、DOM要素への直接アクセスを回避し、各アプリケーションフレームワークの流儀に則って Onsen UI 2のコンポーネントを操作することができます。

2016/09現在、Onsen UI 2は React, AngularJS, Angular 2, Vue.js の4種類のアプリケーションフレームワークに対してバインディングを提供しています。

React と併用する

Onsen UI 2をReactと併用する場合は react-onsenui パッケージ(React バインディング)を使用します。

空ディレクトリを作成し、以下のコマンドで必要なパッケージをインストールします。

次に、index.html を以下の内容で作成します。

最終的なディレクトリ構成は以下のようになります。

ブラウザで index.html を開くと先ほどと同様の画面が表示されているはずです。

Angular 2と併用する

Angular 2をReactと併用する場合はangular2-onsenuiパッケージ(Angular 2 バインディング)を使用します。

空ディレクトリを作成し、以下のコマンドで必要なパッケージ・型定義ファイルをインストールします。

次にmain.tsを以下の内容で作成します。

次に以下のコマンドを実行します。

生成された tsconfig.json を以下の内容に書き換えます。

次に以下のコマンドで main.bundle.js を生成します。

最後に index.html を以下の内容で作成します。

最終的なディレクトリ構成は以下のようになります。

ブラウザでindex.htmlを開くと先ほどと同様の画面が表示されているはずです。

まとめ

本記事ではOnsen UI 2の具体的な使い方を紹介しました。また、発展的な内容として、Onsen UI 2をReact, Angular 2と併用する方法について解説しました。

アプリケーションフレームワークの進化やUIライブラリの充実により、HTML5によるモバイルアプリの実装の敷居は下がり続けています。

ハイブリッドアプリに続いてProgressive Web Appsが話題となる中、そこで必要となるモバイルアプリライクな UI/UX の実装に対する一つの解として、是非Onsen UI 2を活用していただければと思います。

(追伸: 先日Twitterに@Onsen_UI_jaを開設しました。日本語での技術的な質問はこちらまでどうぞ)

de:code 2017
Powered byNTT Communications

tag list

アクセシビリティ イベント エンタープライズ デザイン ハイブリッド パフォーマンス ブラウザ プログラミング マークアップ モバイル 海外 高速化 Angular2 AngularJS Canvas Chrome Cordova CSS de:code ECMAScript Edge Firefox Google Google I/O 2014 HTML5 Conference 2013 html5j IoT JavaScript Microsoft Node.js PhoneGap Polymer React Safari SkyWay TypeScript UI UX W3C W3C仕様 Webアプリ Web Components WebGL WebRTC WebSocket