ネイティブとクロスプラットフォームが混在するアンドパッド のアプリ開発

Transcript

1. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 ネイティブとクロスプラットフォームが混在するアンドパッドのアプリ開発 株式会社 アンドパッド　アプリチーム　伊藤智行
2. 自己紹介 名前: 伊藤 智行（イトウ トモユキ） 所属: 株式会社アンドパッド　アプリチーム 経歴: 組み込みC → iOS Obj-C → 色々あってライブ配信アプリ → 自分の家を建てる → 建設Techのアンドパッドへ X-Plat歴: 前職でReact Nativeの漫画アプリ開発 アンドパッドでもX-Platにはふれている Twitter: @tmyk110
3. 会社紹介 サービス 施工管理アプリ ANDPAD https://andpad.jp 今年の５月に社名、ブランドロゴが新しくなりました！ 株式会社アンドパッド 東京都千代田区神田練塀町 300 住友不動産秋葉原駅前ビル 8階 ミッション 幸せを築く人を、幸せに。 住まいをつくる。ビルや施設をつくる。街をつくる。 生活を豊かにする建築・建設業は、幸せづくりと例えられます。 私たちは、その幸せづくりをする人たちを、 テクノロジーの力で後押しし ていきたい。 心からそう考えています。
4. アジェンダ • ANDPADとクロスプラットフォーム • ネイティブとの混在 • 運用上のPros/Cons • React NativeからFlutterへ
5. ANDPADとクロスプラットフォーム
6. ANDPADについて クラウドストレージ ガントチャート メール チャット このほかにも様々な機能があります。詳しくは Webサイトを見てください
7. アプリのラインナップ ANDPAD ANDPAD CHAT ANDPAD 検査 ANDPAD 短工事 ANDPAD 図面 全部で5種類を展開しています！
8. アプリのラインナップ ネイティブ iOS,Android ネイティブ iOS,Android React Native iOS,Android Flutter iOS,Android ネイティブ iOS ネイティブやReact Native、Flutterと様々な技術で開発をしています！
9. クロスプラットフォームを使う理由 • 開発リソースがない ◦ 人がたくさんいればネイティブで作れば良いですよね ◦ Webエンジニアばかりのチーム • 新しいことに挑戦したいという意欲！ ◦ ワンソースでiOS、Android作れるのすごい ◦ 流行りに乗りたい
10. 実際に使うかどうかの判断 • クロスプラットフォームの制約を許容できるか？ ◦ 端末、OS特有の機能をフルに使えない • デザインのこだわりに応えない交渉ができるか？ ◦ ネイティブであれば簡単にできる実装も困難になる場合も • 速度や大量のデータ処理等、パフォーマンスを求められないか ◦ Flutterは速いと定評あるものの、ネイティブが一番
11. ネイティブとの混在
12. 混在について 1. 同 一サービスのモバイルアプリにおいてネイティブ、 RactNative、Flutterと様々 な技術で開発をしている
13. 混在について 1. 同 一サービスのモバイルアプリにおいてネイティブ、 RactNative、Flutterと様々 な技術で開発をしている 2. ネイティブアプリとReactNativeアプリとでライブラリの共有をしている
14. ライブラリの共有 黒板カメラライブラリ インポート インポート
15. 混在させる技術 - ライブラリのインポート iOS アプリ Android アプリ Swift ライブラリ Kotlin ライブラリ ※ ライブラリはそれぞれ別々のリポジトリで管理 （ネイティブの場合） Cocoapods Gradle
16. React Native プロジェクト 混在させる技術 - ライブラリのインポート iOS アプリ Android アプリ Swift ライブラリ Kotlin ライブラリ （Rewact Nativeの場合） Cocoapods Gradle ※ ライブラリはそれぞれ別々のリポジトリで管理
17. 混在させる技術 - ネイティブ連携 React Native の Native Modulesを利用 iOS アプリ Android アプリ Native Modules JavaScript コード 「AndpadCamera」 を登録 「AndpadCamera」 を登録 「AndpadCamera」 を呼び出し ※ Flutterの場合はplatform channelsという同様の仕組みがある
18. データの受け渡し 引数: 　工事名や工事会社など、 　黒板に表示する情報 コールバック: 　撮影した写真の 　ファイルパス
19. ライブラリ化のポイント • ネイティブ実装が必要である機能 ◦ ワンソースで書けるならそれに越したことはない • データの受け渡しがシンプル（開始と終了時） ◦ ライブラリ実行中に追加データを渡すなどは困難 • 機能の呼び出しが単方向であること ◦ ネイティブライブラリからさらに X-Platの画面呼び出しなどの 複雑さは向かない
20. 運用上のPros/Cons
21. 運用上のPros • 1人でも十分にiOS、Android両方のアプリを修正、リリースできる ◦ 開発リソースが少なくすむ ◦ iOS、Android間で開発進捗を調整する必要がない • アプリが大きくなるほどホットリロードが助かる ◦ レガシーネイティブアプリではビルド時間が長い上にデバッグしづらい
22. 運用上のCons • 最新の開発環境への対応が必要になる ◦ 毎年発生するXcode、AndroidStudioのアップデートで問題が起こることも • クロスプラットフォームを担うエンジニアが少ない ◦ 引き継ぎや、継続的な開発に難色を示してしまう • トレンドの移り変わりが激しい ◦ Titanium、PhoneGap、Cordova、Xamarin、React Native、Flutter → .NET MAUI?
23. 運用上のCons Xcode11、iOS13の端末で起動時にクラッシュ SDK内の問題箇所をコメントアウトしておけば一旦回避できるが。。
24. React NativeからFlutterへ
25. React NativeかFlutterか？ • 今年2月に比較したブログを書いた • まとめとしてはReactNativeもFlutterも どちらも良い • トレンドとしてはFlutterだが、開発する エンジニアのバックボーンから選定される のでは？
26. 社内のFlutter人気が加速 ブログを書いたその後 ↓ 新規開発をFlutterでやろうと決意 ↓ 社内でFlutterの勉強会が始まる ↓ 俺もFlutterをやる！という人が続出 ↓ アプリチームとしてはFlutterで意思統一の流れ
27. (反論) React Nativeについて • CodePush(Visual Studio App Center)でOTAができる • Expoで開発効率の向上、配布がQRコードでできる • Reactの知見を活かせる • Javascriptというなんでも開発できる言語
28. Flutter 状態管理の変遷 ① Redux ② BLoC ③ Provider + ChangeNotifier ④ Provider + StateNotifier 短工事アプリは①からはじめ、途中で②へ 新規アプリは③ではじめたが、④の波が来ている アーキテクチャトレンドが頻繁に変わる
29. Flutter(Dart)の好きなところ 暗黙的インターフェース 宣言されたclassを別のクラスの宣言時に implementsで指定する DIがなんとでもなるので、ユニットテストが 書きやすい
30. Collection if、Collection for 配列を作成する中で、if文やfor文を組み込むこと ができる 組み合わせが複雑なパターンもすっきりと表現で き読みやすい Flutter(Dart)の好きなところ
31. ご清聴ありがとうございました。 株式会社アンドパッドはアプリエンジニアを大募集中です！ 様々な技術に挑戦できる環境があります、奮ってご応募ください！ ANDPAD Tech Blog https://tech.andpad.co.jp ANDPAD HR ブログ https://note.com/andpad_hr