Ionicでも使えるクラウド開発環境「Monaca」

Ionic Meetup Tokyo #4

Masahiro Tanaka

https://slides.com/masa-tanaka/ionic-meetup-4/

田中正裕 MasAhiro Tanaka

アシアル株式会社

　　代表取締役兼 Monacaプロダクトマネージャー

Bunkyo, Tokyo

@massie

masahirotanaka

アシアル会社紹介

ASIA'S LEADER

2002年設立で16期目
東京チームの2割は海外メンバー（ヨーロッパ中心に10カ国11名）
サンフランシスコに拠点

システム開発・コンサルティング

バックエンドからフロントエンドまでフルスタックに対応します

HTML5プラットフォーム事業

HTML5アプリ開発

プラットフォーム

Web Components

モバイルUIフレームワーク

日本で初めて開催する
Vue.js カンファレンス

today's topic

Cordova

Monaca

Onsen UI

~~Onsen UI~~

Ionic

HTML5でネイティブアプリを開発するためのフレームワーク
「ハイブリッドアプリ」とも呼ばれる
Adobeが中心となり開発（「PhoneGap」はCordovaと同義）
Apacheライセンスのオープンソース

Cordovaとは

http://cordova.apache.org/

Cordovaの仕組み

ネイティブレイヤー

WebView

HTML5でアプリを記述

Cordovaはネイティブ拡張ができる

Service Worker

HTML5アプリ

ブラウザー

Cordova Plugin

HTML5アプリ

アプリ

ネイティブAPI

UIフレームワークを選ぶ

Onsen UI

Ionic

Framework 7

Element UI

開発

デザイン言語

コンポーネント数

フレームワーク

Web Components

アシアル (日)

iOS / Android

Vue/Angular/React

対応

Drifty Co. (米)

iOS / Android

Angular

アルファ版

iDangero.us (露)

iOS / Android

Vue/React

非対応

ElementFE (中)

独自デザイン

Vue専用

非対応

Cordovaプラグインの問題

プラグイン１

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

プラグイン２

プラグイン３

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

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);
        }
    }
}