https://slides.com/masa-tanaka/html5j-plat-21/
アシアル株式会社
代表取締役 兼 Monacaプロダクトマネージャー
Bunkyo, Tokyo
@massie
masahirotanaka
ASIA'S LEADER
バックエンドからフロントエンドまでフルスタックに対応します
HTML5アプリ開発
プラットフォーム
Web Components
モバイルUIフレームワーク
Cordova
&
Monaca
&
Onsen UI
http://cordova.apache.org/
ネイティブレイヤー
WebView
HTML5でアプリを記述
ネイティブコード
Cordovaフレームワーク (=WebView)
Cordovaプラグイン
プログラム
Nativeブリッジ
開発環境をセットアップするためのコマンドラインツール
$ npm install -g cordova
$ cordova create cordova-sample && cd cordova-sample
# iOSプラットフォームを追加
$ cordova platform add ios
# エミュレーターで起動
$ cordova run ios --emulator
技術的には非常に似ている
ユースケースが異なる
Service Worker
HTML5アプリ
ブラウザー
Cordova Plugin
HTML5アプリ
アプリ
どちらもHTML5が基本
Service Worker
HTML5アプリ
ブラウザー
Cordova Plugin
HTML5アプリ
アプリ
ネイティブAPI
Twitter Lite - PWA版Twitter
フジテック社 エレベータメンテナンスアプリ
https://ja.monaca.io/showcase/fujitec.html
WebView(SPA)アプリ開発の難しさ
パフォーマンス最適化
遅い原因はDOMにあり
≒ DevToolsを使いこなす
UIライブラリを活用する
SPAの高速化手法:
こういった手法を使いこなすのは困難。
車輪の再発明を避けるべく、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専用
非対応
Webの世界
Nativeの世界
Hybrid
の
世界
OSレイヤー
ネイティブSDK
自分のコード
OSレイヤー
WebView
自分のコード
SPAフレームワーク
Cordovaプラグイン
中間レイヤーが多い
シンプルなスタック
UIフレームワーク
よくある例
OSレイヤー
WebView
自分のコード
SPAフレームワーク
Cordovaプラグイン
OSレイヤー
WebView
自分のコード
UIフレームワーク
ネイティブコード
① UIフレームワーク自体のSPA機能を利用
UIフレームワーク
② Cordovaプラグインを使わず、自分で必要なコードを記述する
Cordova Plugin NativeBridge
オレオレNativeプラグインを簡単に作るためのプラグイン。
JavaとObjective-Cのクラスと公開メソッドを作るだけで、同名のメソッドをJavaScriptから呼び出すことができる。
Cordovaプラグインの問題
プラグイン1
Cordovaプラグインはビルド時にソースコードに取り込まれるため、ビルドを実際に行うまでエラーが分からない
プラグイン2
プラグイン3
+
+
同じライブラリの別バージョンが使われていて名前空間が重複する
hookスクリプトでCordova本体を修正しようとしてパッチ適用に失敗する
特定のバージョンのCordovaに依存していて、最新バージョンで動かない
Cordova Plugin NativeBridge
オレオレNativeプラグインを簡単に作るためのプラグイン。
JavaとObjective-Cのクラスと公開メソッドを作るだけで、同名のメソッドをJavaScriptから呼び出すことができる。
@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);
}
}
}
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
デスクトップ
アプリ
技術サポート
Monacaのなかで発生する問題を
実際のコードを見てサポートいたします
PWA開発のサポート
Webパブリッシュ機能
ターミナル機能の提供
開発中の次バージョンのクラウドIDE
Monacoエディタとの統合
Monacoエディタ+Language Server化
Ionicのサポート
https://github.com/monaca-templates/ionic-angular-tabbar
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/