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