FlutterでAndroid/iOS両対応のアプリ開発

FlutterでAndroid/iOS両対応のアプリ開発

1. Flutter Android/iOS 両対応の アプリ開発 GDG DevFest 2017 Tokyo @najeira generated by Marp 1
2. Target Flutter の概要を知りたい エンジニア デザイナー Flutter でAndroid/iOS 両対応のアプリ開発 2
3. Engineer/Developer モバイルアプリを作る エンジニア/ デベロッパー Flutter でAndroid/iOS 両対応のアプリ開発 3
4. Designer Flutter のUI は宣言的 new Row(children: <Widget>[ new Icon(Icons.thumb_up), new Text('Welcome to Flutter!', style: const TextStyle( color: Colors.red, fontSize: 20.0, ), ), ]), レイアウト/ スタイルを編集しやすい Flutter でAndroid/iOS 両対応のアプリ開発 4
5. Other モバイルアプリを作るにあたり どのような選択肢があるか 知っておきたい人にも Flutter でAndroid/iOS 両対応のアプリ開発 5
6. Agenda 概要、 特徴 仕組み 機能、UI 事例 Flutter でAndroid/iOS 両対応のアプリ開発 6
7. Flutter Flutter でAndroid/iOS 両対応のアプリ開発 7
8. Flutter とは？ 開発フレー ムワー ク、SDK モバイルアプリ 単一のコー ドベー ス Android、iOS、Fuchsia Flutter でAndroid/iOS 両対応のアプリ開発 8
9. 目指すもの 高い開発効率 高い実行パフォー マンス Flutter でAndroid/iOS 両対応のアプリ開発 9
10. 対象 2D の「 アプリ」 ゲー ムを作るものではない Flutter でAndroid/iOS 両対応のアプリ開発 10
11. 特徴 Dart language Reactive framework inspired by React 自前UI (Material and iOS) オー プンソー ス on GitHub developed by Google and community Flutter でAndroid/iOS 両対応のアプリ開発 11
12. 特徴 ネイティブのARM コー ドにコンパイル iOS: C/C++/Dart すべて Android: C/C++ すべて、Dart の大半 2D GPU-accelerated APIs IntelliJ プラグイン & IDE デバッグ ホットリロー ド Flutter でAndroid/iOS 両対応のアプリ開発 12
13. 注意点 まだアルファ版 自前UI なので、OEM UI と混在できない Flutter 画面とプラットフォー ム画面の往来は可能 Flutter でAndroid/iOS 両対応のアプリ開発 13
14. クロスプラットフォー ム 他にもいろいろある React Native JavaScript & CSS, Facebook, ホットリロー ド, Web のReact, OEM UI, JavaScript Runtime Xamarin C#, Microsoft, OEM UI & Xamarin.Forms, ネイティ ブコンパイル(iOS) & Mono VM (Android) などなど Flutter でAndroid/iOS 両対応のアプリ開発 14
15. Flutter UI Flutter でAndroid/iOS 両対応のアプリ開発 15
16. Hello, Flutter! void main() { runApp(new MaterialApp( home: new Scaffold( appBar: new AppBar( title: const Text('DevFest 2017'), ), body: const Center(child: const Text( 'Hello, Flutter!', style: const TextStyle(fontSize: 48.0), )), ), )); } Flutter でAndroid/iOS 両対応のアプリ開発 16
17. 多数のWidget よく使うもの Text, TextStyle, Icon, Theme, RaisedButton, FlatButton, Scaffold, AppBar, ListView, GridView, ScrollView, ListTile, ListBody, Container, Row, Column, Stack, Padding, Expand, Image, BottomNavigationBar, TabBar, TabBarView, MaterialApp, Drawer, Card, AlertDialog, Color, EdgeInset, InkWell, GestureDetector, ... Widget だけで1000 近くある Flutter でAndroid/iOS 両対応のアプリ開発 17
18. Widget class YourPage extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar(title: new Text('My App')), body: new Center(child: new Text('Hello!')), ); } } StatelessWidget, StatefullWidget をextends して 自分のWidget（ 部品や画面） を作る Flutter でAndroid/iOS 両対応のアプリ開発 18
19. StatefullWidget class YourApp extends StatefullWidget { YourAppState createState() => new YourAppState(); } class YourAppState extends State<YourApp> { int counter = 0; Widget build(BuildContext context) { return new RaisedButton( child: new Text('counter = $counter'), onPressed: () { setState(() { counter++; }); }, ); } } Flutter でAndroid/iOS 両対応のアプリ開発 19
20. build, setState build メソッドが返すWidget ツリー が描画される setState で状態を変えると、 再build される Flutter は前回のbuild と今回のbuild の Widget ツリー の差分を再描画する Flutter でAndroid/iOS 両対応のアプリ開発 20
21. Flutter の機能 Flutter でAndroid/iOS 両対応のアプリ開発 21
22. ホットリロー ド Flutter でAndroid/iOS 両対応のアプリ開発 22
23. テスト unit Dart 標準の単体テスト用のパッケー ジ widget Widget に対してテストを行う 操作するための手段が提供されている integration 実際のアプリを起動してスクリプトから操作する Flutter でAndroid/iOS 両対応のアプリ開発 23
24. Widget テスト testWidgets('description', (WidgetTester tester) async { await tester.pumpWidget( ... new FlatButton(...), ... ); expect( tester.getSize( find.byType(FlatButton)), equals(const Size(88.0, 36.0), ), ); } Flutter でAndroid/iOS 両対応のアプリ開発 24
25. Platform Channels プラットフォー ム側のAPI を呼び出すことも出来る ※ カメラ、 位置情報など Flutter でAndroid/iOS 両対応のアプリ開発 25
26. Flutter の仕組み Flutter でAndroid/iOS 両対応のアプリ開発 26
27. Stack from utter.io Flutter でAndroid/iOS 両対応のアプリ開発 27
28. Rendering Flutter App | Platform Native Code Widget Tree -- Renderer ---- | -------------------- Canvas React Native App | Platform JavaScript Virtual Widgets -- Bridge -- | -- OEM Widgets ------ Canvas Flutter でAndroid/iOS 両対応のアプリ開発 28
29. from Chromium Chromium からのコー ドが多数ある utter/engine には Copyright Chromium Authors Apple Inc のファイルが多数ある ※HTML のDOM を表示するブラウザと Widget tree を表示するアプリの共通性 Flutter でAndroid/iOS 両対応のアプリ開発 29
30. Dart by Google 動的型付け Java に似ている 当初はブラウザにおける JavaScript の置き換えを狙っていた…… Google のAdWords とAdSense の サー バ側はDart らしい Flutter ではDart コー ドをネイティブコンパイル Flutter でAndroid/iOS 両対応のアプリ開発 30
31. 事例 Flutter でAndroid/iOS 両対応のアプリ開発 31
32. 事例 まだ少ない Google (mobile sales tool app) Hamilton musical Newsvoice CARTUNE Flutter でAndroid/iOS 両対応のアプリ開発 32
33. CARTUNE Flutter でAndroid/iOS 両対応のアプリ開発 33
34. CARTUNE Flutter でAndroid/iOS 両対応のアプリ開発 34
35. CARTUNE ※ アニメー ションGIF のため粗いですが、 実際はもっと綺麗です Flutter でAndroid/iOS 両対応のアプリ開発 35
36. まとめ・ 感想 Flutter でAndroid/iOS 両対応のアプリ開発 36
37. なぜ Flutter を選んだのか Dart の型チェックが期待できた IntelliJ のプラグインやデバッグ機能 Flutter でAndroid/iOS 両対応のアプリ開発 37
38. 開発してみて いくつかバグには遭遇した テキスト入力で改行まわり プラットフォー ム側のテキスト入力画面を表示 クラッシュまわりはログをIssue 登録 修正してもらえたり、 調査中 機能の追加のPull-Request を送ってマー ジされた Flutter でAndroid/iOS 両対応のアプリ開発 38
39. 開発してみて UI まわりはFlutter 提供のものを組み合わせればOK プラットフォー ム側の機能との連携は実装が必要 プラグインは少ない StackOver ow で質問すると即回答 Google の人も見てくれている フレー ムワー クのソー スコー ドが公開されており Dart なので読めば分かる Flutter でAndroid/iOS 両対応のアプリ開発 39
40. 向き不向き 新規のアプリ開発には有力な候補 本アプリを作ってもよし プロトタイプだけでもよし 既存アプリにハイブリッド的に組み込むのは 向かない（ と思う） 作成済みUI を利用できないなど Flutter でAndroid/iOS 両対応のアプリ開発 40
41. まとめ Flutter でAndroid/iOS 両対応のアプリ開発 41
42. Flutter モバイルアプリのSDK Android / iOS 両対応 高い開発効率（ ホットリロー ド・IDE デバッグ） アルファ版 Flutter でAndroid/iOS 両対応のアプリ開発 42