Asial Blog

Recruit! Asialで一緒に働きませんか?

ANGULAR UにてMonaca/Onsen UIの発表を行いました

カテゴリ :
Monaca
タグ :
Angular
Monaca
Onsen

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のワークフロー

Monacaのワークフロー



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



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



デモをお見せします。



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



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



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




Monaca IDEのデモ

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を使ったアプリ



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




Onsen UIのUIコンポーネント

Onsen UIのUIコンポーネント



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




Onsen 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 の構造

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のデモ

Onsen 2.0×Angular 2.0のデモ



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