CordovaとMonacaの
今後について
html5j Webプラットフォーム部 第21回勉強会
Masahiro Tanaka
https://slides.com/masa-tanaka/html5j-plat-21/
田中 正裕 MasAhiro Tanaka
アシアル株式会社
代表取締役 兼 Monacaプロダクトマネージャー
Bunkyo, Tokyo
@massie
masahirotanaka
アシアル会社紹介
ASIA'S LEADER
- 2002年設立で16期目
- 東京チームの2割は海外メンバー(ヨーロッパ中心に10カ国11名)
- サンフランシスコに拠点
システム開発・コンサルティング
バックエンドからフロントエンドまでフルスタックに対応します
HTML5プラットフォーム事業
HTML5アプリ開発
プラットフォーム
Web Components
モバイルUIフレームワーク
today's topic
Cordova
&
Monaca
&
Onsen UI
- HTML5でネイティブアプリを開発するためのフレームワーク
- 「ハイブリッドアプリ」とも呼ばれる
- Adobeが中心となり開発(「PhoneGap」はCordovaと同義)
- Apacheライセンスのオープンソース
Cordovaとは
http://cordova.apache.org/
Cordovaの仕組み
ネイティブレイヤー
WebView
HTML5でアプリを記述
Cordovaピラミッド
ネイティブコード
Cordovaフレームワーク (=WebView)
Cordovaプラグイン
プログラム
Nativeブリッジ
Cordova CLI
開発環境をセットアップするためのコマンドラインツール
$ npm install -g cordova
$ cordova create cordova-sample && cd cordova-sample
# iOSプラットフォームを追加
$ cordova platform add ios
# エミュレーターで起動
$ cordova run ios --emulator
CordovaとPWA
技術的には非常に似ている
ユースケースが異なる
CordovaとPWA
Service Worker
HTML5アプリ
ブラウザー
Cordova Plugin
HTML5アプリ
アプリ
どちらもHTML5が基本
Cordovaはネイティブ拡張ができる
Service Worker
HTML5アプリ
ブラウザー
Cordova Plugin
HTML5アプリ
アプリ
ネイティブAPI
Twitter Lite - PWA版Twitter
- コンシューマー向け
- アプリと同様の操作性
- 回線・端末性能が低いマーケットを重視
- ネイティブアクセスはできない
フジテック社 エレベータメンテナンスアプリ
- エンタープライズ内導入
- BYOD施策でクロスプラットフォーム必須
- オフライン運用やデバイス機能の活用
- jQuery Mobileで開発
https://ja.monaca.io/showcase/fujitec.html
WebView(SPA)アプリ開発の難しさ
パフォーマンス最適化
遅い原因はDOMにあり
- C言語でポインタを扱うがごとく、DOMの各要素の管理を徹底する
- 明示的に解放ができないため、きちんとGCされるように注意する
≒ DevToolsを使いこなす
UIライブラリを活用する
SPAの高速化手法:
- DOMのLazy Loading
- GPUレンダリングの最適化
- Web Componentsの利用
- requestAnimationFrame()やwill-changeプロパティの活用
- …
こういった手法を使いこなすのは困難。
車輪の再発明を避けるべく、UIライブラリを活用すると良い。
UIフレームワークを選ぶ
Onsen UI
Ionic
Framework 7
Element UI
開発
デザイン言語
コンポーネント数
フレームワーク
Web Components
アシアル (日)
iOS / Android
29
Vue/Angular/React
対応
Drifty Co. (米)
iOS / Android
28
Angular
アルファ版
iDangero.us (露)
iOS / Android
40
Vue/React
非対応
ElementFE (中)
独自デザイン
25
Vue専用
非対応
Cordovaアプリ開発の難しさ
両方の世界を知る必要がある
Webの世界
Nativeの世界
Hybrid
の
世界
ネイティブ開発と比べて
中間レイヤーが多い
OSレイヤー
ネイティブSDK
自分のコード
OSレイヤー
WebView
自分のコード
SPAフレームワーク
Cordovaプラグイン
中間レイヤーが多い
シンプルなスタック
UIフレームワーク
よくある例
- iOSとAndroidでアプリの挙動が違う
- Cordovaをバージョンアップしたら動かなくなった
- デバッグが大変
- プラグイン同士がバッティングしてビルドに失敗する
コードをダイエット
OSレイヤー
WebView
自分のコード
SPAフレームワーク
Cordovaプラグイン
OSレイヤー
WebView
自分のコード
UIフレームワーク
ネイティブコード
① UIフレームワーク自体のSPA機能を利用
UIフレームワーク
② Cordovaプラグインを使わず、自分で必要なコードを記述する
Cordovaプラグインは簡単に書ける
Cordova Plugin NativeBridge
オレオレNativeプラグインを簡単に作るためのプラグイン。
JavaとObjective-Cのクラスと公開メソッドを作るだけで、同名のメソッドをJavaScriptから呼び出すことができる。
Cordovaプラグインの問題
プラグイン1
Cordovaプラグインはビルド時にソースコードに取り込まれるため、ビルドを実際に行うまでエラーが分からない
プラグイン2
プラグイン3
+
+
同じライブラリの別バージョンが使われていて名前空間が重複する
hookスクリプトでCordova本体を修正しようとしてパッチ適用に失敗する
特定のバージョンのCordovaに依存していて、最新バージョンで動かない
Cordovaプラグインを代替する
Cordova Plugin NativeBridge
オレオレNativeプラグインを簡単に作るためのプラグイン。
JavaとObjective-Cのクラスと公開メソッドを作るだけで、同名のメソッドをJavaScriptから呼び出すことができる。
Objective-C (Androidも同様)
@interface SMPSimpleGate : CDPGate
@end
@implementation SMPSimpleGate
/**
* JavaScript レイヤで指定したメソッドと引数を受けることができる
* 値を戻すにはreturnParamsを使用する。
*/
- (void)coolMethod:(NSNumber*)arg1 :(BOOL)arg2 :(NSString*)arg3 :(NSDictionary*)arg4
{
// 任意の処理
NSString* msg = [NSString stringWithFormat:@"arg1: %@, arg2: %@, arg3: %@, 日本語でOK: %@"
, arg1, (arg2 ? @"true" : @"false"), arg3, (arg4[@"ok"] ? @"true" : @"false")];
// returnParams は NSObject を1つ返却できる。(return ステートメントと同じセマンティックス)
[self returnParams:msg];
}
module SampleApp {
export class SimpleGate extends CDP.NativeBridge.Gate {
constructor() {
super({ // super constructor には CDP.NativeBridge.Feature を指定 (必須)
name: "SimpleGate",
android: {
packageInfo: "com.sony.cdp.sample.SimpleGate", // Android Java でリフレクションに使用するクラス
},
ios: {
packageInfo: "SMPSimpleGate", // iOS Objective-C でリフレクションに使用するクラス
},
});
}
public coolMethod(arg1: number, arg2: boolean, arg3: string, arg4: Object): Promise {
return super.exec("coolMethod", <any>arguments);
}
}
}
TypeScript (JavaScript)側の記述
Cordova (PhoneGap) is cease to exist
PhoneGap Beliefs, Goals, and Philosophy:
https://phonegap.com/blog/2012/05/09/phonegap-beliefs-goals-and-philosophy/
PhoneGap (Cordova) の目的:
① 最高の開発プラットフォームとしてのWeb
② Cordovaが不要になる世界を作ること
Capacitor by Ionic
https://capacitor.ionicframework.com
クローズドアルファ版
React Nativeと同様に、iOS/Androidプロジェクトに直接プラグインがインストールされていく
Monacaとは
Monaca = HTML5アプリの開発環境
Monacaを使うメリット
クラウドIDE
デスクトップ
アプリ
- 開発環境の構築が不要
- 実機デバッグ用のツールを提供
- ローカルとクラウドの両方をサポート
- 20万人のユーザー、9万個を超えるアプリ
- 1回5000円〜の技術サポート
技術サポート
Monacaのなかで発生する問題を
実際のコードを見てサポートいたします
PWA開発のサポート
- ServiceWorkerの編集
- manifest.json の設定
- プッシュ通知用BaaS
Webパブリッシュ機能
ターミナル機能の提供
- オンラインIDE内でLinuxコンテナを動作させ、各種コマンドをネイティブで実行させる
- WebPackやGulp、NPMなどをフルに利用可能に
- プレビューにはWebpack-dev-serverを使用
開発中の次バージョンのクラウドIDE
Monacoエディタとの統合
- MonacaにMonacoを搭載することで、TypeScriptなどの新しい言語にも対応予定
- 現在MonacoからDockerコンテナ上で動かしているLanguage Serverと通信する仕組みを検討中
Monacoエディタ+Language Server化
Ionicのサポート
- Monaca CLIでIonicを使うためのテンプレートを提供
- ターミナル機能が提供されたら、クラウドIDEでIonicプロジェクトの開発ができるようになります
https://github.com/monaca-templates/ionic-angular-tabbar
Why "Monaca"?
Your Code
Wrapped in shell
モナカと言えば
あずきですよね…
ありがとうございました
Where to go next?
質問は: masahiro@asial.co.jp
MonacaのWebサイト: https://ja.monaca.io/
Cordovaの技術サポート: https://ja.monaca.io/service/
Monaca、Cordova、Onsen UI
By Masa Tanaka
Monaca、Cordova、Onsen UI
html5j Webプラットフォーム部 第21回勉強会
- 2,265