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から呼び出すことができる。

 

https://github.com/sony/cordova-plugin-cdp-nativebridge

Cordovaプラグインの問題

プラグイン1

Cordovaプラグインはビルド時にソースコードに取り込まれるため、ビルドを実際に行うまでエラーが分からない

プラグイン2

プラグイン3

+

+

同じライブラリの別バージョンが使われていて名前空間が重複する

hookスクリプトでCordova本体を修正しようとしてパッチ適用に失敗する

特定のバージョンのCordovaに依存していて、最新バージョンで動かない

Cordovaプラグインを代替する

Cordova Plugin NativeBridge

オレオレNativeプラグインを簡単に作るためのプラグイン。

 

JavaとObjective-Cのクラスと公開メソッドを作るだけで、同名のメソッドをJavaScriptから呼び出すことができる。

 

https://github.com/sony/cordova-plugin-cdp-nativebridge

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