https://slides.com/masa-tanaka/ionic-meetup-3/
Monaca Product Manager @ Asial Corporation
Bunkyo, Tokyo
@massie
masahirotanaka
Ionic
&
Cordova
&
Monaca
PCと比べて低い端末性能
タッチが中心のUI
クロスプラットフォーム
異なるターゲットユーザー、利用目的
Twitter Lite - PWA版Twitter
フジテック社 エレベータメンテナンスアプリ
https://ja.monaca.io/showcase/fujitec.html
Operating System
WebView
Your App in HTML5
ネイティブコード
Cordovaフレームワーク
Cordovaプラグイン
プログラム
Nativeブリッジ
Webの世界
Nativeの世界
Hybrid
の
世界
よくある例
OSレイヤー
ネイティブSDK
自分のコード
OSレイヤー
WebView
自分のコード
Angular Framework
Cordovaプラグイン
中間レイヤーが多い
シンプルなスタック
OSレイヤー
WebView
自分のコード
Angular Framework
Cordovaプラグイン
OSレイヤー
WebView
自分のコード
CSS Components
Cordovaプラグイン
極力
シンプルに
Ionic CSS Components
Onsen UI Web Components
Onsen UI CSS Components
よくある例
DOMを徹底に管理する
ハードウェアGPUの活用
Web Components
≒ DevToolsを使いこなす
ビューから外れたら
アンロード
表示直前にロード
CSSコンポーネント
Web Components
フレームワーク向け
バインディング
VirtualDOM系フレームワーク(Angular等)に対応するための追加バインディング
ピュアなEcmaScriptだけで実装され、
ブラウザーのネイティブ機能でコンポーネント化
CSSコンポーネントレイヤー
Ionic v4 (現在アルファ版)とOnsen UIはWeb Componentsで構成されています
よくある例
Monaca = Cordovaの開発環境
技術サポート
Monacaのなかで発生する問題を
実際のコードを見てサポートいたします
クラウドIDE
デスクトップ型
Electron製
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/