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アプリ開発について説明します。まずワークフローです。

 

Monacaのワークフロー

 

コーディングはローカルのエディタ、またはCloud IDEを使ってブラウザ上での開発が選択できます。テストはMonacaデバッガーを使って行います。コードを編集すると自動的に同期する仕組みになっています。

 

ビルドはMonacaのクラウド上で行います。ブラウザを使って開発できますので、iOSアプリを開発するのにMac OSXが必要と言ったことはありません。

 

デモをお見せします。

 

左側がクラウドIDEです。コードの自動補完が入っています。Angularの補完も可能です。

 

編集したら、Runをクリックすると、スマートフォンのMonacaデバッガー上でアプリが実行されます。

 

ファイルを編集するとすぐにMonacaデバッガーが再読込されて変更が反映されます。さらにデバッガーはインスペクターも使えるようになっています。

 

Monaca IDEのデモ

 

さて今回は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を使ったアプリ

 

Onsen UIは数多くのUIコンポーネントを提供しています。例えばスイッチであったり、レンジであったり、タブバーなど様々です。

 

Onsen UIのUIコンポーネント

 

これらを組み合わせることで様々なネイティブアプリ風のUIが実現できます。これらはAngularを使って作られています。

 

Onsen UI×Angular

 

次に次期バージョンであるOnsen UI 2.0について説明します。特徴としては、

 

• Web Componentを利用
• フレームワークの依存性をなくす
• コアをなるべく小さく
• ES6

 

になります。

 

構成としては、Onsen CoreとOnsen CSSの二つに分かれる形になります。Onsen CoreはWeb Componentを使っており、Angular 1.x系または2.0系であったり、Reactにバインディングして使うことができます。

 

Onsen 2.0 の構造

 

なぜ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でコードを公開していますのでぜひ見てください。

 

Onsen 2.0×Angular 2.0のデモ

 

Angular 2.0はこれまでと大幅に変わっており、多くの点において変更が必要になります。ぜひ皆さんの協力が欲しいと思っています。Onsen UIは最新ビルドがいつでもダウンロードできるようになっています。ぜひ試して問題があれば報告したり、pull reqを送ってください。