ANGULAR UにてMonaca/Onsen UIの発表を行いました
6月に開催されたANGULAR UにてAndreasがMonacaおよびOnsen UIについてプレゼンを行いました。この記事ではその意訳版になります。実際の発表の様子は下記の動画をご覧ください。
私はスウェーデンで生まれ育ったのですが、今は日本で働いています。仕事は二つあり、一つはハイブリッドアプリ開発プラットフォームであるMonaca、もう一つはハイブリッドアプリのUIコンポーネントライブラリであるOnsen UIの開発となっています。
まずハイブリッドアプリに関して説明します。ハイブリッドアプリはWebアプリをスマートフォンのネイティブコンポーネントであるWebViewを使ってアプリにする技術です。そのため、HTMLやJavaScript、スタイルシートを使ってスマートフォンアプリが開発できます。
なぜハイブリッドアプリを選択するかと言うと、
- クロスプラットフォームサポート
- 既に覚えているWeb開発のスキルを活かしてアプリ開発ができる
- JavaScriptを使ってネイティブアプリのAPIにアクセスできる
といった特徴があるからです。
次にハイブリッドとネイティブアプリの違いについてです。FacebookのCEOであるザッカーバーグ氏は実行速度を理由にHTML5からネイティブに開発の軸を変更しました。しかしそれから数年経ち、Ruby on Railsの開発者で知られるDHH氏は昨年、パフォーマンスは大幅に改善していると書いています。
ではここからMonacaを使ったCordovaアプリ開発について説明します。まずワークフローです。
コーディングはローカルのエディタ、またはCloud IDEを使ってブラウザ上での開発が選択できます。テストはMonacaデバッガーを使って行います。コードを編集すると自動的に同期する仕組みになっています。
ビルドはMonacaのクラウド上で行います。ブラウザを使って開発できますので、iOSアプリを開発するのにMac OSXが必要と言ったことはありません。
デモをお見せします。
左側がクラウドIDEです。コードの自動補完が入っています。Angularの補完も可能です。
編集したら、Runをクリックすると、スマートフォンのMonacaデバッガー上でアプリが実行されます。
ファイルを編集するとすぐにMonacaデバッガーが再読込されて変更が反映されます。さらにデバッガーはインスペクターも使えるようになっています。
さて今回はAngularのカンファレンスですが、まだAngular向きの話をしていません。そこで知って欲しいのがOnsen UIです。Onsen UIはAngularベースのUIフレームワークです。
Onsen UIの特徴は、
- ハイブリッドアプリ向けのUIフレームワーク
- コンポーネント可能なカスタムHTMLタグ
- Angular JSの上に実装されている
になります。
名前の由来ですが、Onsenというのは日本語で温泉（hot spring）のことです。他の言い方ではスパ（SPA）とも言います。SPAといえばSingle Page Applicationです。そこからとっています。
Onsen UIはアジア圏、特に日本において成長しています。とはいえグローバルで見ればまだまだでIonicのがよく知られているでしょう。Onsen UIの事例としてはヘルス系、メッセージ系など数多くあります。
Onsen UIは数多くのUIコンポーネントを提供しています。例えばスイッチであったり、レンジであったり、タブバーなど様々です。
これらを組み合わせることで様々なネイティブアプリ風のUIが実現できます。これらはAngularを使って作られています。
次に次期バージョンであるOnsen UI 2.0につ いて説明します。特徴としては、
- Web Componentを利用
- フレームワークの依存性をなくす
- コアをなるべく小さく
- ES6
になります。
構成としては、Onsen CoreとOnsen CSSの二つに分かれる形になります。Onsen CoreはWeb Componentを使っており、Angular 1.x系または2.0系であったり、Reactにバインディングして使うことができます。
なぜWeb Componentsを使うかと言うと、
- Angular 1.x系のディレクティブよりも軽量かつシンプルなAPIである
- Angular 2.0と組み合わせて使うことができる
- Onsen UI 1.x系のナレッジを活かして再開発できる
- 複数のフレームワークをサポートするのが容易になる
といったことが挙げられます。
まずOnsen 2.0とAngular 1.xとの組み合わせはこのようなコードになります。
次にOnsen 2.0とAngualr 2.0の場合です。多少書き方は変わりますが、殆ど変わっていないのが分かるかと思います。
現在のOnsen 2.0の開発状況ですが、まだまだ開発中ですが、UIコンポーネントをWeb Componentsに書き換え中です。
Angular 2.0と組み合わせたデモアプリを紹介します。これはGitHubでコードを公開していますのでぜひ見てください。
Angular 2.0はこれまでと大幅に変わっており、多くの点において変更が必要になります。ぜひ皆さんの協力が欲しいと思っています。Onsen UIは最新ビルドがいつでもダウンロードできるようになっています。ぜひ試して問題があれば報告したり、pull reqを送ってください。
