Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ネイティブとクロスプラットフォームが混在するアンドパッド のアプリ開発
Search
ANDPAD inc
July 15, 2020
Programming
0
210
ネイティブとクロスプラットフォームが混在するアンドパッド のアプリ開発
ANDPAD inc
July 15, 2020
Tweet
Share
More Decks by ANDPAD inc
See All by ANDPAD inc
MySQL の SQL クエリチューニングの要所を掴む勉強会
andpad
3
6.3k
Long journey of Ruby standard library
andpad
0
19
Go 1.22 の Vet 変更点について
andpad
0
270
アンドパッドのある開発チームでの OSS への取り組み
andpad
2
4.3k
最初のファンを作り、最初のファンに価値を届けるまで
andpad
1
740
Deep dive into Ruby's require
andpad
0
84
AWS Security Hub を 「有効化したけど見てない」人に向けた DevSecOps の実現方法
andpad
0
77
EC2 からの脱出劇:多用途なサーバの全役割をサーバレス・コンテナ環境へ
andpad
0
27
Ruby on Rails + Sidekiq構成のモノリシックサービスをコンテナ化した話
andpad
0
250
Other Decks in Programming
See All in Programming
SIMD Parallel Programming with the Vector API
josepaumard
0
170
エンターテイメント業界で利用されるAWS
demuyan
0
210
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
Ruby GitHub Packages
bkuhlmann
0
630
Ruby Function Composition
bkuhlmann
1
330
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
560
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
700
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
Tailwind CSSを本気でカスタマイズする方法
fsubal
13
5.2k
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
360
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
takehilo
1
170
2 週間で Twitter Bot を作ってみた
contour_gara
0
380
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
274
13k
Visualization
eitanlees
136
14k
Building a Modern Day E-commerce SEO Strategy
aleyda
17
6.4k
BBQ
matthewcrist
80
8.8k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
How to Ace a Technical Interview
jacobian
272
22k
Faster Mobile Websites
deanohume
299
30k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
Transcript
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 無断転載・無断複製の禁止 ネイティブとクロスプラットフォームが混在するアンドパッドのアプリ開発 株式会社 アンドパッド アプリチーム 伊藤智行
自己紹介 名前: 伊藤 智行(イトウ トモユキ) 所属: 株式会社アンドパッド アプリチーム 経歴: 組み込みC →
iOS Obj-C → 色々あってライブ配信アプリ → 自分の家を建てる → 建設Techのアンドパッドへ X-Plat歴: 前職でReact Nativeの漫画アプリ開発 アンドパッドでもX-Platにはふれている Twitter: @tmyk110
会社紹介 サービス 施工管理アプリ ANDPAD https://andpad.jp 今年の5月に社名、ブランドロゴが新しくなりました! 株式会社アンドパッド 東京都千代田区神田練塀町 300 住友不動産秋葉原駅前ビル
8階 ミッション 幸せを築く人を、幸せに。 住まいをつくる。ビルや施設をつくる。街をつくる。 生活を豊かにする建築・建設業は、幸せづくりと例えられます。 私たちは、その幸せづくりをする人たちを、 テクノロジーの力で後押しし ていきたい。 心からそう考えています。
アジェンダ • ANDPADとクロスプラットフォーム • ネイティブとの混在 • 運用上のPros/Cons • React NativeからFlutterへ
ANDPADとクロスプラットフォーム
ANDPADについて クラウドストレージ ガントチャート メール チャット このほかにも様々な機能があります。詳しくは Webサイトを見てください
アプリのラインナップ ANDPAD ANDPAD CHAT ANDPAD 検査 ANDPAD 短工事 ANDPAD 図面
全部で5種類を展開しています!
アプリのラインナップ ネイティブ iOS,Android ネイティブ iOS,Android React Native iOS,Android Flutter iOS,Android
ネイティブ iOS ネイティブやReact Native、Flutterと様々な技術で開発をしています!
クロスプラットフォームを使う理由 • 開発リソースがない ◦ 人がたくさんいればネイティブで作れば良いですよね ◦ Webエンジニアばかりのチーム • 新しいことに挑戦したいという意欲! ◦
ワンソースでiOS、Android作れるのすごい ◦ 流行りに乗りたい
実際に使うかどうかの判断 • クロスプラットフォームの制約を許容できるか? ◦ 端末、OS特有の機能をフルに使えない • デザインのこだわりに応えない交渉ができるか? ◦ ネイティブであれば簡単にできる実装も困難になる場合も •
速度や大量のデータ処理等、パフォーマンスを求められないか ◦ Flutterは速いと定評あるものの、ネイティブが一番
ネイティブとの混在
混在について 1. 同 一サービスのモバイルアプリにおいてネイティブ、 RactNative、Flutterと様々 な技術で開発をしている
混在について 1. 同 一サービスのモバイルアプリにおいてネイティブ、 RactNative、Flutterと様々 な技術で開発をしている 2. ネイティブアプリとReactNativeアプリとでライブラリの共有をしている
ライブラリの共有 黒板カメラライブラリ インポート インポート
混在させる技術 - ライブラリのインポート iOS アプリ Android アプリ Swift ライブラリ Kotlin
ライブラリ ※ ライブラリはそれぞれ別々のリポジトリで管理 (ネイティブの場合) Cocoapods Gradle
React Native プロジェクト 混在させる技術 - ライブラリのインポート iOS アプリ Android アプリ
Swift ライブラリ Kotlin ライブラリ (Rewact Nativeの場合) Cocoapods Gradle ※ ライブラリはそれぞれ別々のリポジトリで管理
混在させる技術 - ネイティブ連携 React Native の Native Modulesを利用 iOS アプリ
Android アプリ Native Modules JavaScript コード 「AndpadCamera」 を登録 「AndpadCamera」 を登録 「AndpadCamera」 を呼び出し ※ Flutterの場合はplatform channelsという同様の仕組みがある
データの受け渡し 引数: 工事名や工事会社など、 黒板に表示する情報 コールバック: 撮影した写真の ファイルパス
ライブラリ化のポイント • ネイティブ実装が必要である機能 ◦ ワンソースで書けるならそれに越したことはない • データの受け渡しがシンプル(開始と終了時) ◦ ライブラリ実行中に追加データを渡すなどは困難 •
機能の呼び出しが単方向であること ◦ ネイティブライブラリからさらに X-Platの画面呼び出しなどの 複雑さは向かない
運用上のPros/Cons
運用上のPros • 1人でも十分にiOS、Android両方のアプリを修正、リリースできる ◦ 開発リソースが少なくすむ ◦ iOS、Android間で開発進捗を調整する必要がない • アプリが大きくなるほどホットリロードが助かる ◦
レガシーネイティブアプリではビルド時間が長い上にデバッグしづらい
運用上のCons • 最新の開発環境への対応が必要になる ◦ 毎年発生するXcode、AndroidStudioのアップデートで問題が起こることも • クロスプラットフォームを担うエンジニアが少ない ◦ 引き継ぎや、継続的な開発に難色を示してしまう •
トレンドの移り変わりが激しい ◦ Titanium、PhoneGap、Cordova、Xamarin、React Native、Flutter → .NET MAUI?
運用上のCons Xcode11、iOS13の端末で起動時にクラッシュ SDK内の問題箇所をコメントアウトしておけば一旦回避できるが。。
React NativeからFlutterへ
React NativeかFlutterか? • 今年2月に比較したブログを書いた • まとめとしてはReactNativeもFlutterも どちらも良い • トレンドとしてはFlutterだが、開発する エンジニアのバックボーンから選定される
のでは?
社内のFlutter人気が加速 ブログを書いたその後 ↓ 新規開発をFlutterでやろうと決意 ↓ 社内でFlutterの勉強会が始まる ↓ 俺もFlutterをやる!という人が続出 ↓ アプリチームとしてはFlutterで意思統一の流れ
(反論) React Nativeについて • CodePush(Visual Studio App Center)でOTAができる • Expoで開発効率の向上、配布がQRコードでできる
• Reactの知見を活かせる • Javascriptというなんでも開発できる言語
Flutter 状態管理の変遷 ① Redux ② BLoC ③ Provider + ChangeNotifier
④ Provider + StateNotifier 短工事アプリは①からはじめ、途中で②へ 新規アプリは③ではじめたが、④の波が来ている アーキテクチャトレンドが頻繁に変わる
Flutter(Dart)の好きなところ 暗黙的インターフェース 宣言されたclassを別のクラスの宣言時に implementsで指定する DIがなんとでもなるので、ユニットテストが 書きやすい
Collection if、Collection for 配列を作成する中で、if文やfor文を組み込むこと ができる 組み合わせが複雑なパターンもすっきりと表現で き読みやすい Flutter(Dart)の好きなところ
ご清聴ありがとうございました。 株式会社アンドパッドはアプリエンジニアを大募集中です! 様々な技術に挑戦できる環境があります、奮ってご応募ください! ANDPAD Tech Blog https://tech.andpad.co.jp ANDPAD HR ブログ
https://note.com/andpad_hr