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

近年、React Native、Ionic、NativeScriptなどクロスプラットフォームアプリ開発のためのフレームワークがでてきました。

これらはHTML/CSS/JavaScriptなどのWebの技術でAndroidやiOS、またはデスクトップやWebに対応したアプリが作れます。

その中でもIonicを実際の案件に導入してみてわかった事、ネイティブアプリやハイブリットアプリ、HTML5アプリの違い、そのほかのフレームワークについて話したいと思います。

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

6. IonicFramework
   FRONTENDCONFERENCEFUKUOKA2018
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

18. FRONTENDCONFERENCEFUKUOKA2018
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. SNACK
    Online Editor for React Native
    FRONTEND CONFERENCE FUKUOKA 2018
    

    View Slide

23. IonicCLI
    FRONTENDCONFERENCEFUKUOKA2018
    

    View Slide

24. IonicCreator
    FRONTENDCONFERENCEFUKUOKA2018
    

    View Slide

25. IonicStudio(まだ)
    FRONTENDCONFERENCEFUKUOKA2018
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

36. FRONTENDCONFERENCEFUKUOKA2018
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide