Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

74e2d3eb9ddb159df160c2ee3d3ea886?s=47 daiki7nohe
December 08, 2018

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

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

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

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

74e2d3eb9ddb159df160c2ee3d3ea886?s=128

daiki7nohe

December 08, 2018
Tweet

Transcript

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

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

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

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

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

    FRONTENDCONFERENCEFUKUOKA2018
  6. IonicFramework FRONTENDCONFERENCEFUKUOKA2018

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

  8. HTML5(Cordova)アプリ FRONTENDCONFERENCEFUKUOKA2018  対応プラットフォーム  パフォーマンス  ネイティブ操作  UIフレームワーク

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

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

  11. ハイブリッドアプリ FRONTENDCONFERENCEFUKUOKA2018  対応プラットフォーム   パフォーマンス   

    ネイティブ操作  フレームワーク iOS,Android   ネイティブには劣るが、 HTML5アプリよりは良い   ライブラリがあれば  ReactNative,NativeScript,Flutter
  12. ハイブリッド デスクトップ アプリ Electron製アプリのこと。  ChromiumとNode.jsのランタイムで動いている。  Mac、Windows、Linuxそれぞれで動くアプリが作れる。  Cordovaのデスクトップ版のようなもので、

    HTML/CSS/JavaScriptでデスクトップアプリが作れる。  VisualStudioCodeやSlackもElectronでできている。 FRONTENDCONFERENCEFUKUOKA2018
  13. ざっくりなアーキテクチャ FRONTENDCONFERENCEFUKUOKA2018

  14. Electronアプリ FRONTENDCONFERENCEFUKUOKA2018  対応プラットフォーム   パフォーマンス   ネイティブ操作

     UIフレームワーク Windows,macOS,Linux   ネイティブには劣る   Electronが対応していれば  Photon
  15. Progressive WebApps Webアプリだがネイティブアプリのような機能や 振る舞いを実現するアプリ。 具体的にはオフライン動作、Push通知、A2HSなど が使える。  アプリストアを介さずユーザーにリーチできるなど の利点があり、今注⽬されている技術。 

    しかしまだまだネイティブよりできることは少ない。 FRONTENDCONFERENCEFUKUOKA2018
  16. PWA FRONTENDCONFERENCEFUKUOKA2018  対応プラットフォーム    リーチ⼒  

     ネイティブ操作 Web,iOS,Android,Windows,Linux (ブラウザ制限あり)   ⾼い    できることは少ない
  17. WEBもモバイルもデスクトップも全てに対応 できるいい感じのツールないの? FRONTENDCONFERENCEFUKUOKA2018

  18. FRONTENDCONFERENCEFUKUOKA2018

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

    WebApps Capacitor(beta) FRONTENDCONFERENCEFUKUOKA2018
  20. CordovaとCapacitor FRONTENDCONFERENCEFUKUOKA2018 特徴 対応プラットフォーム  設定スタイル  ネイティブ操作 本番利⽤ Cordova

    iOS,Android,Windows Phone Config.xml  制限あり 可能 Capacitor iOS,Android,Desktop (Windows,Mac,Linux),PWA プラットフォーム毎(info.plist, AndroidManifest.xml) 全て そろそろ(ベータ)
  21. 開発⼿法 基本プレビューアプリを使ってデバッグしながら開発していく。  オンラインPlaygroundが提供されていてサクッと試せる。 FRONTENDCONFERENCEFUKUOKA2018

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

  23. IonicCLI FRONTENDCONFERENCEFUKUOKA2018

  24. IonicCreator FRONTENDCONFERENCEFUKUOKA2018

  25. IonicStudio(まだ) FRONTENDCONFERENCEFUKUOKA2018

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

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

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

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

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

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

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

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

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

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

  36. FRONTENDCONFERENCEFUKUOKA2018

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

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

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

  40. PWA/HTML5アプリ FRONTENDCONFERENCEFUKUOKA2018  インストール Push通知  対応プラットフォーム PWA ◯ △(iOSSafari未対応)

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

  42. ハイブリッドvsネイティブ FRONTENDCONFERENCEFUKUOKA2018  パフォーマンス ネイティブ機能 開発効率 ハイブリッド △ △(ライブラリがあれば) 1ソース、2アプリ

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

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

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