はじめに

2016 年 9 月に UI フレームワークである Onsen UI のバージョン 2.0 が正式リリースされました。
Onsen UI は、 Cordova 上で動くことを想定された HTML5 ハイブリッドアプリ用の UI フレームワークです。
今回は、バージョン 2.0 で何が変わったのかとバージョン 1.x で作ったソースをバージョン 2.0 へ移行方法をお伝えしようと思います。

変更点

バージョン 1.x からの大きな変更点は、以下の二つです。

• AngularJS 1.x への依存性の解消
• iOS と Android でデザインの自動変更

AngularJS への依存性の解消

Onsen UI 1.x では、AngularJS への依存性が高く React などの他のフレームワークが使いづらい状態にありました。
そこで、バージョン 2.0 では各コンポーネントを Web Component として定義し直し AngularJS との高い依存性の解消させることで他のフレームワークでも使いやすくなりました。

iOS と Android でデザインの自動変更

バージョン 2.0 では、 Android ライクなマテリアルデザインがスタイルとして追加されました。また、デフォルトの機能として AutoStyling 機能が追加され iOS, Android で見た目が自動で切り替わるようになりました。
AutoStyling 機能を無効にしたい場合、以下のコードを後述の onseui.js を読み込んだ直後に記述します。
ons.disableAutoStyling();

Onsen UI のバージョンの移行

ここでは、バージョン 1.x で作ったプロジェクトを バージョン 2.0 + AngularJS へ移行する際の方法と注意点をお伝えします。

移行作業

まずはじめに、Onsen UI V2 のソースをダウンロードします。
GitHub にソースが入った zip が、置いてあるので README の Downloads からソースをダウンロードしましょう。
zip の中にある以下の二つのファイルが必要になります。

• onsenui.js
• angular-onsenui.js

ソースをダウンロードしたらプロジェクトの index.html に以下のコードを追加します。

<script src="path/to/onsenui.js"></script>
<script src="path/to/angular.js"></script>
<script src="path/to/angular-onsenui.js"></script>

上記のコードを追加するとコンソールにエラーが表示されると思います。
これは、バージョン 2.0 で API にも変更が行われたためで、エラーの内容もメソッドやオブジェクトがないという内容になっていると思います。
あとは、エラーの内容と Onsen UI V2 のリファレンス を見ながらエラーを潰していくだけになります。
以下に、主だってエラーを吐き出す API の変更点をまとめたので、もしよければ参考にしてください。

API の変更

全体

• component.set~() や compoent.is~() のメソッドは廃止され代わりに、プロパティーを使用する
  myCarousel.setDisabled(true); => myCarousel.disabled = true;.

• getDeviceBackButtonHandler() のようなイベントハンドラー取得のメソッドは廃止され、プロパティに変更されたのでこのプロパティーを使用する
  myNavigator.onDeviceBackButton = function() {};.

コンポーネント

• ons-navigator
  • getCurrentPage メソッドが廃止された。代わりに topPage プロパティーを使う
    myNavigator.getCurrentPage(); => myNavigator.topPage;
  • getPages メソッドが廃止された。代わりに pages プロパティーを使う
    myNavigator.getPages(); => myNavigator.pages;
  • options.onTransitionEnd は options.callback に改名されたのでこれを使う


• ons-tabbar
  • persistent 属性と no-reload 属性が消え、デフォルトでこれらの挙動になる


• ons-carousel
  • setActiveCarouselItemIndex() は setActiveIndex() に改名された
  • getActiveCarouselItemIndex() は getActiveIndex() に改名された


• ons-button
  • Spinner に関連するメソッドが廃止された。従来の機能を実現するには簡単な CSS のカスタマイズが必要


• ons-scroller
  • このコンポーネント自体が廃止された。div エレメントと以下に示す CSS で代用できる
    

    
    .scroller {
    display: block;
    height: 100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    -ms-scroll-snap-type: mandatory;
    }
    

最後に

移り変わりの激しい JS のフレームワークのことを考えると バージョン 2.0 で、AngularJS への依存がなくなり汎用性が高くなったことは、大きな転換点になったことでしょう。
バージョン 2.0 では、使い慣れたフレームワークで開発することが可能になっていますので、この機会にぜひ触ってみてはいかがでしょうか。

Tweet