Flutter移行の苦労と、乗り越えた先に得られたもの
1 like7,260 views
iOS/Android共にリリースから１０年を迎えたじゃらんアプリでは、さらなる開発効率と品質の向上を目指しFlutterへの順次移行に挑戦しています。本資料では、その過程で得られた知見についてまとめています。
![class TabPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DefaultTabController(
...
child: Scaffold(
appBar: AppBar(
title: Text('Tab Sample'),
bottom: TabBar(tabs: <Widget>[
const Tab(child: Text('Tab A')),
const Tab(child: Text('Tab B'))
])),
body: TabBarView(
children: <Widget>[
TabA(),
TabB(),
],
● タブのページを作成する
サンプルコード: タブのページ
33](https://image.slidesharecdn.com/20200930-200930065253/85/Flutter-33-320.jpg)
![class TabPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DefaultTabController(
...
child: Scaffold(
appBar: AppBar(
title: Text('Tab Sample'),
bottom: TabBar(tabs: <Widget>[
const Tab(child: Text('Tab A')),
const Tab(child: Text('Tab B'))
])),
body: TabBarView(
children: <Widget>[
TabA(),
TabB(),
],
● 2つのタブ
● TabA()
● TabB()
サンプルコード: タブのページ
34](https://image.slidesharecdn.com/20200930-200930065253/85/Flutter-34-320.jpg)
![class AppDelegate: FlutterAppDelegate {
lazy var flutterEngine = FlutterEngine(name: "my flutter engine")
override func application(_ application: UIApplication, didFinishLaunchingWithOptions
launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
flutterEngine.run();
GeneratedPluginRegistrant.register(with: self.flutterEngine);
return super.application(application, didFinishLaunchingWithOptions: launchOptions);
}
}
FlutterEngineの初期化
69
• AppDelegateにおいてFlutterEngineインスタンスの生成](https://image.slidesharecdn.com/20200930-200930065253/85/Flutter-69-320.jpg)
![class AppDelegate: FlutterAppDelegate {
lazy var flutterEngine = FlutterEngine(name: "my flutter engine")
override func application(_ application: UIApplication, didFinishLaunchingWithOptions
launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
flutterEngine.run();
GeneratedPluginRegistrant.register(with: self.flutterEngine);
return super.application(application, didFinishLaunchingWithOptions: launchOptions);
}
}
FlutterEngineの初期化
70
• Dartのmainを実行し、FlutterEngineの初期化を行う
• FlutterEngineの初期化は時間がかかるため、予め呼ぶ必要がある](https://image.slidesharecdn.com/20200930-200930065253/85/Flutter-70-320.jpg)
![void main() async {
WidgetsFlutterBinding.ensureInitialized();
Map<String, String> proxy = await SystemProxy.getProxySettings();
...
HttpOverrides.global = _HttpOverrides(proxy['host'], proxy['port']);
runApp(Application());
}
class _HttpOverrides extends HttpOverrides {
_HttpOverrides(this._host, this._port);
final String _host;
final String _port;
@override
HttpClient createHttpClient(SecurityContext context) {
return super.createHttpClient(context)
..findProxy = (uri) {
return _host != null ? "PROXY $_host:$_port;" : 'DIRECT';
};
● システムのProxy設定を
取得
● その情報を使用してPACを
findProxyに指定
システムProxyからPACを指定する
95](https://image.slidesharecdn.com/20200930-200930065253/85/Flutter-95-320.jpg)
More Related Content
What's hot (20)
More from Recruit Lifestyle Co., Ltd. (20)
Flutter移行の苦労と、乗り越えた先に得られたもの
- 1. Flutter移行の苦労と、 乗り越えた先に得られたもの Recruit Co., Ltd. Keisuke Kiriyama 1
- 2. • Recruit Co., Ltd. • iOS / Flutter • じゃらんアプリ開発T Keisuke Kiriyama
- 6. Flutterのコミュニティ ● 2018年12月のver1.0リリース以降、 Flutterを使用する開発者は増え続け 現在は200万人を超えた ● 国内においてもFlutterの記事や話題を目にする機会が増 え、日に日に盛り上がりを感じている 6 Flutter Spring 2020 Update.：https://medium.com/flutter/flutter-spring-2020-update-f723d898d7af, (参照2020-08-02)
- 12. 発表のゴール ● Flutter開発経験者 →直面した課題と得られたメリットを知り 技術選定の際の判断材料になる ● Flutter開発未経験者 →まずはFlutter触ってみたいと思ってもらう 12
- 13. 1. 前提の共有 ○ じゃらんのFlutter移行 ○ Flutterのレイアウト構築 2. 直面した課題 3. 得られたメリット 4. まとめ 説明の流れ 13
- 16. じゃらんアプリのリプレース検討 ● クロスプラットフォーム技術の検討 ○ iOS/Android開発工数 ○ リプレースコスト ● クロスプラットフォーム技術の中でも Flutterの開発生産性が最も高いと実感し Flutterの採用を決断 16 半減
- 17. 17
- 18. 18
- 20. Flutterへの段階的移行 ● Add-to-app(Add Flutter to existing app)を使用 ● 既存のネイティブプロジェクトにFluterプロジェクトを部分的 に組み込む仕組み 20 じゃらん アプリ Swift Objective-c じゃらん遊び・体験 Flutterプロジェクト
- 21. Flutterへの段階的移行 ● Add-to-app(Add Flutter to existing app)を使用 ● 既存のネイティブプロジェクトにFluterプロジェクトを部分的 に組み込む仕組み 21 じゃらん アプリ Swift Objective-c じゃらん遊び・体験 Flutterプロジェクト Flutterモジュール
- 23. Flutterのレイアウト構築 ● Widget ○ UIの構成情報を保持するクラス ● Widgetをツリー上に構成することによって UIの構築を行う 23
- 24. 24 class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter Demo Home Page'), ), body: Center( child: Text( 'Hello iOSDC!!', style: TextStyle( fontSize: 30, ), ...
- 25. 25 class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter Demo Home Page'), ), body: Center( child: Text( 'Hello iOSDC!!', style: TextStyle( fontSize: 30, ), ...
- 26. 26 class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter Demo Home Page'), ), body: Center( child: Text( 'Hello iOSDC!!', style: TextStyle( fontSize: 30, ), ...
- 27. 27 class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter Demo Home Page'), ), body: Center( child: Text( 'Hello iOSDC!!', style: TextStyle( fontSize: 30, ), ... ● 』UI部品だけではなく、 「画面の中心に表示」 の様なUIの構成情報も Widgetで表現する
- 28. 直面した課題 28
- 29. 直面した課題 29 1. タブ切り替えのパフォーマンス 2. Flutterの画面が初期化されない 3. ネットワーク通信がproxyサーバーを経由しない 4. Google Mapのクラッシュ
- 30. 直面した課題 30 1. タブ切り替えのパフォーマンス 2. Flutterの画面が初期化されない 3. ネットワーク通信がproxyサーバーを経由しない 4. Google Mapのクラッシュ
- 32. 発生した問題 ● リストのアイテムを大量に読み込んでタブを切り替える ● タブ切り替えのアニメーションが重くなってしまう ● まれにタブ切り替えのタイミングで アプリがクラッシュすることがある 32
- 33. class TabPage extends StatelessWidget { @override Widget build(BuildContext context) { return DefaultTabController( ... child: Scaffold( appBar: AppBar( title: Text('Tab Sample'), bottom: TabBar(tabs: <Widget>[ const Tab(child: Text('Tab A')), const Tab(child: Text('Tab B')) ])), body: TabBarView( children: <Widget>[ TabA(), TabB(), ], ● タブのページを作成する サンプルコード: タブのページ 33
- 34. class TabPage extends StatelessWidget { @override Widget build(BuildContext context) { return DefaultTabController( ... child: Scaffold( appBar: AppBar( title: Text('Tab Sample'), bottom: TabBar(tabs: <Widget>[ const Tab(child: Text('Tab A')), const Tab(child: Text('Tab B')) ])), body: TabBarView( children: <Widget>[ TabA(), TabB(), ], ● 2つのタブ ● TabA() ● TabB() サンプルコード: タブのページ 34
- 35. class TabA extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Text('Tab A'), ); } } ● TabA()は画面の中心に “Tab A”を表示するだけ サンプルコード: TabA 35
- 36. class TabB extends StatelessWidget { @override Widget build(BuildContext context) { return ListView.builder( key: PageStorageKey('TabB'), itemCount: 1000, itemBuilder: (BuildContext context, int index) { return ListTile( title: Text('Item $index'), ); ... ● TabB()はリストを保持 ● 1000個のアイテムを表示 サンプルコード: TabB 36
- 42. ● 再度タブを表示する際には、表示するタブの レイアウトを再計算する必要がある なぜアニメーション重くなる？ ● タブを切り替えた際、表示 されないタブはWidget ツリーから除外される 42 TabA表示時 TabB表示時
- 45. タブが保持するリストのアイテムの高さが可変の場合 ● 1つ目のアイテムから順にレイアウト を計算して、高さを決定しないと ● 前回のスクロール位置の アイテムを表示できない ● この演算のために パフォーマンスが低下 なぜアニメーション重くなる？ 45 … 前回の スクロール位置
- 48. class TabB extends StatefulWidget { ... class _TabBState extends State<TabB> with AutomaticKeepAliveClientMixin { @override Widget build(BuildContext context) { super.build(context); return ListView.builder( key: PageStorageKey('TabB'), itemCount: 1000, itemBuilder: (BuildContext context, int index) { return ListTile( title: Text('Item $index'), ... @override bool get wantKeepAlive => true; } ● TabのWidgetを StatefulWidgetに変更する タブにAutomaticKeepAliveClientMixinを適用 48
- 49. class TabB extends StatefulWidget { ... class _TabBState extends State<TabB> with AutomaticKeepAliveClientMixin { @override Widget build(BuildContext context) { super.build(context); return ListView.builder( key: PageStorageKey('TabB'), itemCount: 1000, itemBuilder: (BuildContext context, int index) { return ListTile( title: Text('Item $index'), ... @override bool get wantKeepAlive => true; } ● Stateに AutomaticKeepAlive ClientMixin を適用する タブにAutomaticKeepAliveClientMixinを適用 49
- 50. class TabB extends StatefulWidget { ... class _TabBState extends State<TabB> with AutomaticKeepAliveClientMixin { @override Widget build(BuildContext context) { super.build(context); return ListView.builder( key: PageStorageKey('TabB'), itemCount: 1000, itemBuilder: (BuildContext context, int index) { return ListTile( title: Text('Item $index'), ... @override bool get wantKeepAlive => true; } タブにAutomaticKeepAliveClientMixinを適用 50 ● super.buildの呼び出し ● wantKeepAliveのgetterで trueを返す
- 51. class TabB extends StatefulWidget { ... class _TabBState extends State<TabB> with AutomaticKeepAliveClientMixin { @override Widget build(BuildContext context) { super.build(context); return ListView.builder( key: PageStorageKey('TabB'), itemCount: 1000, itemBuilder: (BuildContext context, int index) { return ListTile( title: Text('Item $index'), ... @override bool get wantKeepAlive => true; } タブにAutomaticKeepAliveClientMixinを適用 51 ● 一時的なメモリ圧迫も 起こらなくなる
- 52. 直面した課題 52 1. タブ切り替えのパフォーマンス 2. Flutterの画面が初期化されない 3. ネットワーク通信がproxyサーバーを経由しない 4. Google Mapのクラッシュ
- 62. 62 じゃらんTOP present dismiss 遊び・体験(Flutter) 遊び・体験(Flutter) 検索条件指定 遊び・体験を再度開く 前回の検索条件のまま ● Add-to-appでFlutterの画面を表示する方法の説明 ↓ ● この問題の原因の説明
- 69. class AppDelegate: FlutterAppDelegate { lazy var flutterEngine = FlutterEngine(name: "my flutter engine") override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { flutterEngine.run(); GeneratedPluginRegistrant.register(with: self.flutterEngine); return super.application(application, didFinishLaunchingWithOptions: launchOptions); } } FlutterEngineの初期化 69 • AppDelegateにおいてFlutterEngineインスタンスの生成
- 70. class AppDelegate: FlutterAppDelegate { lazy var flutterEngine = FlutterEngine(name: "my flutter engine") override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { flutterEngine.run(); GeneratedPluginRegistrant.register(with: self.flutterEngine); return super.application(application, didFinishLaunchingWithOptions: launchOptions); } } FlutterEngineの初期化 70 • Dartのmainを実行し、FlutterEngineの初期化を行う • FlutterEngineの初期化は時間がかかるため、予め呼ぶ必要がある
- 71. class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() } @IBAction func showFlutter(_ sender: Any) { let flutterEngine = (UIApplication.shared.delegate as! AppDelegate).flutterEngine let flutterViewController = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil) present(flutterViewController, animated: true, completion: nil) } } FlutterViewControllerへ遷移 71 • FlutterEngineを指定して、FlutterViewControllerをインスタンス化 • FlutterViewControllerに画面遷移することでFlutterの画面を表示
- 73. ● FlutterEngineはAppDelegateで初期化し、 参照を保持しておくので、破棄されない 何故画面を再生成しても初期状態にならない？ 73 FlutterEngine class AppDelegate: FlutterAppDelegate { lazy var flutterEngine = FlutterEngine(name: "my flutter engine") FlutterViewController
- 74. ● FlutterEngineはAppDelegateで初期化し、 参照を保持しておくので、破棄されない 何故画面を再生成しても初期状態にならない？ 74 FlutterEngine ● Dartを実行しているのはFlutterEngine ● Flutterの画面を閉じても、Dart内で破棄 していないStateは残ってしまう FlutterViewController
- 75. ● FlutterEngineはAppDelegateで初期化し、 参照を保持しておくので、破棄されない 何故画面を再生成しても初期状態にならない？ 75 FlutterEngine ● Dartを実行しているのはFlutterEngine ● Flutterの画面を閉じても、Dart内で破棄 していないStateは残ってしまう ● 時間がかかるためFlutterEngineを毎回初期化 するわけにもいかない FlutterViewController
- 76. ● Flutterモジュールの最初に空の画面を挿入(InitialPage) ● FlutterViewController遷移時に ○ InitialPage以外のページを全て破棄 ○ 本来最初に表示したいページを生成して、 即座に遷移する どう回避したか 76
- 77. FlutterViewControllerに遷移するコード class ViewController: UIViewController { ... @IBAction func showFlutter(_ sender: Any) { let flutterEngine = (UIApplication.shared.delegate as! AppDelegate).flutterEngine let flutterViewController = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil) let channel = FlutterMethodChannel(name: "channel", binaryMessenger: flutterViewController.binaryMessenger) channel.invokeMethod("setup", arguments: nil); flutterViewController.modalPresentationStyle = .fullScreen present(flutterViewController, animated: true, completion: nil) } } 77 • Method Channelを使用して、setupのDartコードを呼び出す
- 78. FlutterViewControllerに遷移するコード class ViewController: UIViewController { ... @IBAction func showFlutter(_ sender: Any) { let flutterEngine = (UIApplication.shared.delegate as! AppDelegate).flutterEngine let flutterViewController = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil) let channel = FlutterMethodChannel(name: "channel", binaryMessenger: flutterViewController.binaryMessenger) channel.invokeMethod("setup", arguments: nil); flutterViewController.modalPresentationStyle = .fullScreen present(flutterViewController, animated: true, completion: nil) } } 78 • その後FlutterViewControllerへ画面遷移する
- 79. Initial Pageのコード class InitialPage extends StatelessWidget { static const MethodChannel channel = MethodChannel('channel'); @override Widget build(BuildContext context) { channel.setMethodCallHandler((MethodCall call) async { switch (call.method) { case 'setup': return Navigator.pushNamedAndRemoveUntil<void>( context, TopPage.routeName, (Route<dynamic> route) => route.isFirst, ); } 79 • 空のInitial pageを作成 • Flutterモジュールの先頭の 画面に設定
- 80. Initial Pageのコード class InitialPage extends StatelessWidget { static const MethodChannel channel = MethodChannel('channel'); @override Widget build(BuildContext context) { channel.setMethodCallHandler((MethodCall call) async { switch (call.method) { case 'setup': return Navigator.pushNamedAndRemoveUntil<void>( context, TopPage.routeName, (Route<dynamic> route) => route.isFirst, ); } 80 • setupのMethod Channelが 呼び出された際に 実行されるコード
- 81. • pushNamedAndRemoveUntil 条件が満たされるまで、 画面を破棄する。 その後新たな画面をpush Initial Pageのコード class InitialPage extends StatelessWidget { static const MethodChannel channel = MethodChannel('channel'); @override Widget build(BuildContext context) { channel.setMethodCallHandler((MethodCall call) async { switch (call.method) { case 'setup': return Navigator.pushNamedAndRemoveUntil<void>( context, TopPage.routeName, (Route<dynamic> route) => route.isFirst, ); } 81
- 82. ● 条件 一番最初の画面であること。 すなわちInitial Pageに到達す るまで画面が破棄される Initial Pageのコード class InitialPage extends StatelessWidget { static const MethodChannel channel = MethodChannel('channel'); @override Widget build(BuildContext context) { channel.setMethodCallHandler((MethodCall call) async { switch (call.method) { case 'setup': return Navigator.pushNamedAndRemoveUntil<void>( context, TopPage.routeName, (Route<dynamic> route) => route.isFirst, ); } 82
- 83. ● 条件を満たしたタイミングで本 来表示したかった 最初の画面がpushされる Initial Pageのコード class InitialPage extends StatelessWidget { static const MethodChannel channel = MethodChannel('channel'); @override Widget build(BuildContext context) { channel.setMethodCallHandler((MethodCall call) async { switch (call.method) { case 'setup': return Navigator.pushNamedAndRemoveUntil<void>( context, TopPage.routeName, (Route<dynamic> route) => route.isFirst, ); } 83
- 85. 直面した課題 85 1. タブ切り替えのパフォーマンス 2. Flutterの画面が初期化されない 3. ネットワーク通信がproxyサーバーを経由しない 4. Google Mapのクラッシュ
- 86. ● 詳細なデバッグや試験を行う際に パケットモニタリングを使用したい ● iOSプロジェクトにおいては Wi-Fi設定からproxyサーバーの IPアドレスとポート番号を入力する ことでパケットモニタリング可能 (例: Charles) iOSプロジェクトでパケットモニタリング 86
- 89. final httpClient = HttpClient(); httpClient.findProxy = (url) { return 'PROXY localhost:8888; DIRECT'; }; final request = await httpClient .getUrl(Uri.https('jsonplaceholder.typicode.com', '/posts')); final response = await request.close(); ● HttpClientのfindProxyに PACを指定する PACを指定する方法(HttpClient) 89
- 90. Future<void> main() async { HttpOverrides.global = _HttpOverrides(); runApp(Application()); } class _HttpOverrides extends HttpOverrides { @override HttpClient createHttpClient(SecurityContext context) { return super.createHttpClient(context) ..findProxy = (uri) { return 'PROXY localhost:8888; DIRECT'; }; } ● HttpOverridesを継承した クラスを定義 PACを指定する方法(httpパッケージ) 90
- 91. Future<void> main() async { HttpOverrides.global = _HttpOverrides(); runApp(Application()); } class _HttpOverrides extends HttpOverrides { @override HttpClient createHttpClient(SecurityContext context) { return super.createHttpClient(context) ..findProxy = (uri) { return 'PROXY localhost:8888; DIRECT'; }; } ● HttpOverridesの createHttpClientメソッドを overrideする ● 作成されるHttpClientクラス にfindProxyを指定する PACを指定する方法(httpパッケージ) 91
- 92. Future<void> main() async { HttpOverrides.global = _HttpOverrides(); runApp(Application()); } class _HttpOverrides extends HttpOverrides { @override HttpClient createHttpClient(SecurityContext context) { return super.createHttpClient(context) ..findProxy = (uri) { return 'PROXY localhost:8888; DIRECT'; }; } ● HttpOverridesの派生クラス のインスタンスを HttpOverrides.globalに 指定する PACを指定する方法(httpパッケージ) 92
- 93. Future<void> main() async { HttpOverrides.global = _HttpOverrides(); runApp(Application()); } class _HttpOverrides extends HttpOverrides { @override HttpClient createHttpClient(SecurityContext context) { return super.createHttpClient(context) ..findProxy = (uri) { return 'PROXY localhost:8888; DIRECT'; }; } ● PACをベタ書きしている PACを指定する方法(httpパッケージ) 93
- 94. システムProxyからPACを指定する ● じゃらんではsystem_proxyパッケージを使用 94 pub system_proxy：https://pub.dev/packages/system_proxy, (参照2020-08-10)
- 95. void main() async { WidgetsFlutterBinding.ensureInitialized(); Map<String, String> proxy = await SystemProxy.getProxySettings(); ... HttpOverrides.global = _HttpOverrides(proxy['host'], proxy['port']); runApp(Application()); } class _HttpOverrides extends HttpOverrides { _HttpOverrides(this._host, this._port); final String _host; final String _port; @override HttpClient createHttpClient(SecurityContext context) { return super.createHttpClient(context) ..findProxy = (uri) { return _host != null ? "PROXY $_host:$_port;" : 'DIRECT'; }; ● システムのProxy設定を 取得 ● その情報を使用してPACを findProxyに指定 システムProxyからPACを指定する 95
- 96. 直面した課題 96 1. タブ切り替えのパフォーマンス 2. Flutterの画面が初期化されない 3. ネットワーク通信がproxyサーバーを経由しない 4. Google Mapのクラッシュ
- 97. Google Mapの使用 ● レジャー施設の場所や集合場所を示 すために、地図(Google Map)を表示す る ● google_maps_flutterパッケージを使用 97 pub google_maps_flutter：https://pub.dev/packages/google_maps_flutter, (参照2020-08-10)
- 98. ● google_maps_flutterはDevelopers Preview ● 実際に使用すると、 Google Mapを何度も表示した際に アプリがクラッシュする問題が発覚 ● Google Mapを閉じてもメモリが解放 されない ● 地図を開くたびにメモリを圧迫してしまい、 最終的にクラッシュしてしまっていた 発生した問題 98 Memory Usage
- 99. 原因と問題の回避 ● GoogleMapが内部で使用しているPlatformViewに おいて循環参照があり、それによってGoogleMapが 解放されなくなっていた ● 当時使用していたFlutter ver1.12.13+hotfix.7から Flutter ver1.15.17にアップデートしたことで、 メモリが解放される様になり、回避することができた 99
- 100. ライブラリのステータス ● developers preview等のライブラリや機能に関する 既知の問題には、issueにタグが付与されている ● その様なライブラリや機能を使用する際には、 タグでフィルタリングして、関連issueを確認することで 事前に問題を把握すると吉 100 pub google_maps_flutter：https://pub.dev/packages/google_maps_flutter, (参照2020-08-10)
- 101. 直面した課題まとめ ● Flutterを採用してみると、いくつかの課題に直面した ● GoogleMapがdevelopers previewである等、 プラットフォームの未成熟な部分は若干ある? ● しかし、いずれの直面した課題も回避することは できていて、プロダクション採用不可能となる様な 事態には直面しなかった 101
- 104. ● 開発効率は著しく向上した 1. 既成部品の充実 2. hot reload/restart 3. IDE(Android Studio)の機能の充実 得られたメリット：開発効率の向上 104 開発効率 の向上
- 105. 1. 既成部品の充実 105 ● Widgetの種類がとても充実 している ● じゃらんにおいては、これら既成 部品でほぼ事足りた ● 既成部品を積極的に使用できた ことが、開発効率向上に 寄与した Widget catalog：https://flutter.dev/docs/development/ui/widgets, (参照2020-08-10)
- 106. ● コードを修正した際に、ビルドし直さなくても その修正が即座にアプリに反映される仕組み ○ hot reload: 約0.5s ○ hot restart: 約3s ● じゃらんはビルド時間が大分増加してしまって いたので、この仕組みの開発効率向上への 寄与は大きかった 2. hot reload/ restart 106
- 107. ● Widgetの上でoption+Enterを押すことで、包む Widget等の候補を表示。 Widgetツリーの構築をサクサクできる ● “stless”や”stful”と打つことで Stateless WidgetやStateful Widget を自動生成 3. IDE(Android Studio)の機能の充実 107 ● XCodeで開発する場合に比べて開発スピードが向上した
- 108. 1. iOS/Androidの開発工数削減 2. 開発以外の工数削減 3. 移行工数の削減 得られたメリット：工数の削減 108 工数の 削減
- 109. ● じゃらんはメディアであり、 プラットフォーム固有の機能が少ない ● 完全移行が完了すれば、iOS/Androidの開発工数を ほぼ半分にすることができそう 1. iOS/Androidの開発工数削減 109
- 110. ● iOSとAndroidの仕様差分をなるべく減らす ● デザインをマテリアルデザインに統一 ● 開発以外の工数も削減することができている 2. 開発以外の工数削減 110 開発工数 要件検討工数 デザイン作成工数 ５割減 ５割減 3割減
- 111. ● 段階的移行を行っていることにより、各プラットフォームの 実装が多少必要になっている ○ 例えば、ネイティブ側が保持するアプリの設定情報を Flutterモジュールに伝播する処理 ● しかし、大部分は共通化できていて、その点 移行コストも大きく削減することができている 3. 移行工数の削減 111
- 112. 開発効率向上、工数削減以外にも多くのメリット ● 宣言的UI構築が素晴らしい ○ 参考: 宣言的UI そな太さん https://speakerdeck.com/sonatard/xuan-yan-de-ui ● FlutterがOSSであることで、内部処理を確認できる ● パフォーマンスモニタリングが充実している ● 全てDartで記述するため、コードレビューや コンフリクトの解消がしやすい などなど... 112
- 113. まとめ 113
- 114. ● じゃらんでは現在Flutterへの段階的移行を行っている ● 複数課題に直面したものの、回避することはできた ● 直面した課題を乗り越えたことで、開発効率向上や開発 工数削減など多くのメリットを得ることができた ● 完全移行に向けて引き続きFlutter頑張ります💪 まとめ 114
- 115. ありがとうございました！ 115