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

29

Vue/Angular/React

対応

Drifty Co. (米)

iOS / Android

28

Angular

アルファ版

iDangero.us (露)

iOS / Android

40

Vue/React

非対応

ElementFE (中)

独自デザイン

25

Vue専用

非対応

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)側の記述

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パブリッシュ機能

COMING SOON!

ターミナル機能の提供

  • オンラインIDE内でLinuxコンテナを動作させ、各種コマンドをネイティブで実行させる

 

  • WebPackやGulp、NPMなどをフルに利用可能に

 

  • プレビューにはWebpack-dev-serverを使用

最新バージョンのクラウドIDE

Monacoエディタとの統合

  • MonacaにMonacoを搭載することで、TypeScriptなどの新しい言語にも対応予定

 

  • 現在MonacoからDockerコンテナ上で動かしているLanguage Serverと通信する仕組みを検討中

Monacoエディタ+Language Server化

これが何を意味するか?

PWA対応

WebPack対応

TypeScript対応

Ionicをフルサポート

DEMO TIME

ありがとうございました

Where to go next?

質問は: masahiro@asial.co.jp

MonacaのWebサイト: https://ja.monaca.io/

Cordovaの技術サポート: https://ja.monaca.io/service/

Ionic Meetup Tokyo #4

By Masa Tanaka

Ionic Meetup Tokyo #4

Ionic Meetup Tokyo #4

  • 292
Loading comments...

More from Masa Tanaka