Onsen UI 2.11系について

keiji_asial

Pocket

Monacaチームの小田川です。

Onsen UIは、Monacaで開発するようなハイブリッドアプリやWebアプリ向けのUIフレームワークです。

Onsen UIは、AndroidやiOSのスタイルガイドライン準拠しているため、ネイティブアプリのようなUIでハイブリッドアプリを構築することができます。MonacaでもOnsen UIを使用したテンプレートを提供しています。

今回は、現在提供されているOnsen UI 2.11系から変更された注意点をいくつか紹介したいと思います。

UIWebViewサポートの終了

現在、iOSアプリをApp Storeへ公開する場合は、WKWebViewでアプリを構築する必要があります。UIWebViewについては、非推奨になっていることもあり、Onsen UI 2.11系からは、UIWebViewのサポートが終了しています。

そのため、MonacaでOnsen UI 2.11系を使用する場合は、Cordova 10用のMonacaプロジェクトを使用するか、Cordova 9.0用のMonacaプロジェクトを使用している場合は、WKWebView対応を行う必要があります。

Cordova 7.0用のMonacaプロジェクトを使用している場合は、Cordova 9.0またはCordova 10へアップグレードする必要があります。Cordova 7.0からCordova 9.0へアップグレードした場合は、WKWebView対応を行う必要があります。

AngularJS 1.xバインディング

Onsen UI 2.10系までは、AngularJS 1.xバインディングを行うための以下のファイルがOnsen UIに含まれていました。

angular-onsenui.js
angular-onsenui.min.js

Onsen UI 2.11系からは、AngularやVueのような他のフレームワークと同様に、上記のバインディングを行うためのファイルは、Onsen UIには含まれなくなりました。

そのため、MonacaプロジェクトでOnsen UI 2.11系とAngularJS 1.xを利用する場合は、上記のファイルを取得後、Monacaプロジェクトにアップロードして設定する必要があります。

NPMからangular-onsenuiを取得する

NPMからangular-onsenuiを取得する場合は、ローカルPCにNPM環境を構築し、以下のコマンドを実行することで取得することができます。

npm install angularjs-onsenui

取得したangular-onsenuiをMonacaプロジェクトにアップロード後、onsenui.jsとangular.jsを読み込んだ後に、angular-onsenuiを読み込みます。

// 設定例:www/lib/onsenui/jsにangular-onsenui.min.jsをアップロードした場合
<script src="lib/angular/angular.min.js"></script>
<script src="lib/onsenui/js/onsenui.min.js"></script>
<script src="lib/onsenui/js/angular-onsenui.min.js"></script>

CDNからangular-onsenuiを取得する

以下のCDNからもangularjs-onsenuiを取得することができます。

https://unpkg.com/angularjs-onsenui/dist/angularjs-onsenui.min.js

Monacaプロジェクトでは、onsenui.jsとangular.jsを読み込んだ後に、angular-onsenuiを読み込みます。

// 設定例:CDNからangular-onsenuiを取得する場合
<script src="lib/angular/angular.min.js"></script>
<script src="lib/onsenui/js/onsenui.min.js"></script>
<script src="https://unpkg.com/angularjs-onsenui/dist/angularjs-onsenui.min.js"></script>