Web開発者のためのクロスプラットフォームアプリ開発

WEB開発者のためのクロスプラットフォームアプリ開発株式会社Fusic 浦⽥⼤貴 FRONTENDCONFERENCEFUKUOKA2018

⾃⼰紹介浦⽥⼤貴 Twitter:@daiki7nohe GitHub:7nohe 出⾝:⻘森県福岡在住:２年趣味:PokémonGo(最近はLet'sGo!ピカチュウ) 業務で使う技術:Rails/Laravel/Vue 興味のある技術:
Angular/React/Vue/Flutter/Nest/JAMStack/Ionicなど FRONTENDCONFERENCEFUKUOKA2018

お話することクロスプラットフォームアプリとは？ HTML5ハイブリッドモバイルアプリネイティブハイブリッドモバイルアプリデスクトップアプリ ProgressiveWebApps NativeProgressiveWebApps 開発⼿法実務で採⽤してみてわかったこと Web開発者のための技術選択
FRONTENDCONFERENCEFUKUOKA2018

クロスプラットフォームアプリとは？ここでは１ソースで複数のプラットフォーム（iOS/Androidなど）で動かせるアプリのことを「クロスプラットフォームアプリ」とします。特にHTML/CSS/JavaScriptなどの Webフロントエンド技術で開発できるクロスプラットフォームアプリ開発にフォーカスして
お話します。 FRONTENDCONFERENCEFUKUOKA2018

HTML5 ハイブリッドモバイルアプリ (以降HTML5アプリ) いわゆるCordovaベースのアプリ。 Webアプリ(SPA)をWebView上で動かしている。ネイティブ機能(カメラ、位置情報など)を使うには Cordovaプラグインを介してアクセスする。

IonicFramework FRONTENDCONFERENCEFUKUOKA2018

ざっくりなアーキテクチャ FRONTENDCONFERENCEFUKUOKA2018

HTML5(Cordova)アプリ FRONTENDCONFERENCEFUKUOKA2018 対応プラットフォームパフォーマンスネイティブ操作 UIフレームワーク
Web,iOS,Android ネイティブには劣る Cordovaプラグインがあれば Ionic,OnsenUI,Fremework7など

ネイティブハイブリッドモバイルアプリ (以降ハイブリッドアプリ) ボタンなどのUIコンポーネントはネイティブAPI で描画される。 ReactNativeでいうとReact(JavaScript)が JavaScriptランタイムを経由してネイティブAPI へアクセスするイメージ。

ハイブリッドアプリ FRONTENDCONFERENCEFUKUOKA2018 対応プラットフォームパフォーマンス
ネイティブ操作フレームワーク iOS,Android ネイティブには劣るが、 HTML5アプリよりは良いライブラリがあれば ReactNative,NativeScript,Flutter

ハイブリッドデスクトップアプリ Electron製アプリのこと。 ChromiumとNode.jsのランタイムで動いている。 Mac、Windows、Linuxそれぞれで動くアプリが作れる。 Cordovaのデスクトップ版のようなもので、
HTML/CSS/JavaScriptでデスクトップアプリが作れる。 VisualStudioCodeやSlackもElectronでできている。 FRONTENDCONFERENCEFUKUOKA2018

Electronアプリ FRONTENDCONFERENCEFUKUOKA2018 対応プラットフォームパフォーマンスネイティブ操作
UIフレームワーク Windows,macOS,Linux ネイティブには劣る Electronが対応していれば Photon

Progressive WebApps Webアプリだがネイティブアプリのような機能や振る舞いを実現するアプリ。具体的にはオフライン動作、Push通知、A2HSなどが使える。アプリストアを介さずユーザーにリーチできるなどの利点があり、今注⽬されている技術。
しかしまだまだネイティブよりできることは少ない。 FRONTENDCONFERENCEFUKUOKA2018

PWA FRONTENDCONFERENCEFUKUOKA2018 対応プラットフォームリーチ⼒
ネイティブ操作 Web,iOS,Android,Windows,Linux (ブラウザ制限あり) ⾼いできることは少ない

WEBもモバイルもデスクトップも全てに対応できるいい感じのツールないの？ FRONTENDCONFERENCEFUKUOKA2018

Ionicチームが開発を進めるCordovaの後継。 Cordovaプラグインも使える。ざっくりいうとCordovaとReactNativeのような仕組みを混ぜたもの。 iOS/Androidだけでなく、PWAやデスクトップでも動くアプリが作れる。 Native Progressive
WebApps Capacitor(beta) FRONTENDCONFERENCEFUKUOKA2018

CordovaとCapacitor FRONTENDCONFERENCEFUKUOKA2018 特徴対応プラットフォーム設定スタイルネイティブ操作本番利⽤ Cordova
iOS,Android,Windows Phone Config.xml 制限あり可能 Capacitor iOS,Android,Desktop (Windows,Mac,Linux),PWA プラットフォーム毎(info.plist, AndroidManifest.xml) 全てそろそろ(ベータ)

開発⼿法基本プレビューアプリを使ってデバッグしながら開発していく。オンラインPlaygroundが提供されていてサクッと試せる。 FRONTENDCONFERENCEFUKUOKA2018

SNACK Online Editor for React Native FRONTEND CONFERENCE FUKUOKA 2018

IonicCLI FRONTENDCONFERENCEFUKUOKA2018

IonicCreator FRONTENDCONFERENCEFUKUOKA2018

IonicStudio(まだ) FRONTENDCONFERENCEFUKUOKA2018

実務で採⽤してみて Ionicv3+Cordova IonicでAndroid/iOS対応HTML5アプリを開発。利⽤したネイティブ機能はヘルス、Push通知など。 FRONTENDCONFERENCEFUKUOKA2018

Webアプリ感覚でUIを実装ブラウザでレイアウト、ページ遷移などのデバッグができ効率よく開発できた。 FRONTENDCONFERENCEFUKUOKA2018

ネイティブ機能を使うなら実機デバッグは必要 Ionicプレビューアプリ「Ionic DevApp」ではいくつかのCordovaプラグインに対応していたが、やはり動かなかったりするのでXcode 経由でデバッグが必要になったりもした。

ある程度はネイティブや Cordova の知識が必要 FRONTENDCONFERENCEFUKUOKA2018 ネイティブ機能にアクセスするための権限要求の設定/処理 config.xmlに結局iOSやAndroid特有の設定 Cordovaプラグインのバグで謎エラーでつまる

WebViewならではの問題も... FRONTENDCONFERENCEFUKUOKA2018

技術選択 forWebdevelopers ここまでクロスプラットフォームアプリを開発するための技術を紹介。でも⾊々あって結局どの技術を使えばいいのか？どの技術選択を⾏えばいいかをWeb開発者⽬線で考えてみる。 FRONTENDCONFERENCEFUKUOKA2018

WEBフロントエンドフレームワークで選ぶ FRONTENDCONFERENCEFUKUOKA2018

FRONTENDCONFERENCEFUKUOKA2018 AngularCLIコマンドから直接addできるようになった！ https://github.com/ionic-team/ionic/pull/15323 TypeScriptで書くフルスタックなフレームワーク。 CLIコマンドが充実していたり、DIでクラス間を疎結合に書ける。 Angular

FRONTENDCONFERENCEFUKUOKA2018 React 昨今のフロントエンド界を牽引してきたパイオニア。ライブラリも豊富で使っている⼈は多い。 ReactNativeの実績も数多くある。

FRONTENDCONFERENCEFUKUOKA2018 かなり⼈気。福岡でVueを採⽤している企業が多く、盛り上がっているイメージ。 Vue

@ionic/vue(alpha) CapacitorでiOS,Android,PWAに対応できる！ FRONTENDCONFERENCEFUKUOKA2018

⽬的別に選ぶケースとしてはWebが得意なエンジニアが多く在籍していて、リソースの少ない事を想定しています。 iOS/Androidエンジニアがいて、リソースのある⽅々はそれぞれネイティブ⾔語で開発をするのが⼀番です。 FRONTENDCONFERENCEFUKUOKA2018

CASE１ネイティブ機能はほぼ使わず、パフォーマンスも求めない。 +αとしてホーム画⾯にインストールさせたり、 Push通知機能がほしい。情報配信アプリ、クーポンアプリ、プロトタイプで使うなど FRONTENDCONFERENCEFUKUOKA2018

PWA/HTML5アプリ FRONTENDCONFERENCEFUKUOKA2018 インストール Push通知対応プラットフォーム PWA ◯ △(iOSSafari未対応)
Desktop,Web, iOS,Android (制限多め) HTML5アプリ ◯ ◯ Web,iOS,Android (制限あり)

CASE2 ネイティブ機能を使いたい、パフォーマンスは多少必要。ネイティブアプリをメインとするサービスを展開しようとしているがエンジニアリソースが⾜りないスタートアップなど FRONTENDCONFERENCEFUKUOKA2018

ハイブリッドvsネイティブ FRONTENDCONFERENCEFUKUOKA2018 パフォーマンスネイティブ機能開発効率ハイブリッド △ △(ライブラリがあれば) １ソース、２アプリ
ネイティブ ◯ ◯ 各プラットフォーム毎に開発

プロダクトがある程度成⻑して、リソースにも余裕がでてきた段階でネイティブへの⽅向転換もアリ FRONTENDCONFERENCEFUKUOKA2018

まとめクロスプラットフォームアプリを作るにも様々な技術選択肢がある開発は簡単に始められる環境にあるそれなりに弱点はあるが、システム要件によってはフィットする Webフロントエンドエンジニアが普段使っている技術で開発できる「リソースが⾜りないけど早くプロダクトをローンチしたい」⼈向け Cpacitorに期待！！ FRONTENDCONFERENCEFUKUOKA2018

ありがとうございました！ FRONTENDCONFERENCEFUKUOKA2018

Web開発者のためのクロスプラットフォームアプリ開発

Web開発者のためのクロスプラットフォームアプリ開発

More Decks by daiki7nohe

Other Decks in Technology

Featured

Transcript