Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,950 views

Published on

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

Published in: Engineering
  • Be the first to comment

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

  1. 1. Flutter Android/iOS両対応の アプリ開発 GDG DevFest 2017 Tokyo @najeira generated by Marp 1
  2. 2. Target Flutterの概要を知りたい エンジニア デザイナー FlutterでAndroid/iOS両対応のアプリ開発 2
  3. 3. Engineer/Developer モバイルアプリを作る エンジニア/デベロッパー FlutterでAndroid/iOS両対応のアプリ開発 3
  4. 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. 5. Other モバイルアプリを作るにあたり どのような選択肢があるか 知っておきたい人にも FlutterでAndroid/iOS両対応のアプリ開発 5
  6. 6. Agenda 概要、特徴 仕組み 機能、UI 事例 FlutterでAndroid/iOS両対応のアプリ開発 6
  7. 7. Flutter FlutterでAndroid/iOS両対応のアプリ開発 7
  8. 8. Flutter とは? 開発フレームワーク、SDK モバイルアプリ 単一のコードベース Android、iOS、Fuchsia FlutterでAndroid/iOS両対応のアプリ開発 8
  9. 9. 目指すもの 高い開発効率 高い実行パフォーマンス FlutterでAndroid/iOS両対応のアプリ開発 9
  10. 10. 対象 2Dの「アプリ」 ゲームを作るものではない FlutterでAndroid/iOS両対応のアプリ開発 10
  11. 11. 特徴 Dart language Reactive framework inspired by React 自前UI (Material and iOS) オープンソースon GitHub developed by Google and community FlutterでAndroid/iOS両対応のアプリ開発 11
  12. 12. 特徴 ネイティブのARMコードにコンパイル iOS: C/C++/Dartすべて Android: C/C++すべて、Dartの大半 2D GPU-accelerated APIs IntelliJ プラグイン& IDEデバッグ ホットリロード FlutterでAndroid/iOS両対応のアプリ開発 12
  13. 13. 注意点 まだアルファ版 自前UIなので、OEM UIと混在できない Flutter画面とプラットフォーム画面の往来は可能 FlutterでAndroid/iOS両対応のアプリ開発 13
  14. 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. 15. Flutter UI FlutterでAndroid/iOS両対応のアプリ開発 15
  16. 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. 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. 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. 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. 20. build, setState buildメソッドが返すWidgetツリーが描画される setStateで状態を変えると、再buildされる Flutterは前回のbuildと今回のbuildの Widgetツリーの差分を再描画する FlutterでAndroid/iOS両対応のアプリ開発 20
  21. 21. Flutter の機能 FlutterでAndroid/iOS両対応のアプリ開発 21
  22. 22. ホットリロード FlutterでAndroid/iOS両対応のアプリ開発 22
  23. 23. テスト unit Dart標準の単体テスト用のパッケージ widget Widgetに対してテストを行う 操作するための手段が提供されている integration 実際のアプリを起動してスクリプトから操作する FlutterでAndroid/iOS両対応のアプリ開発 23
  24. 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. 25. Platform Channels プラットフォーム側のAPIを呼び出すことも出来る ※カメラ、位置情報など FlutterでAndroid/iOS両対応のアプリ開発 25
  26. 26. Flutter の仕組み FlutterでAndroid/iOS両対応のアプリ開発 26
  27. 27. Stack from utter.io FlutterでAndroid/iOS両対応のアプリ開発 27
  28. 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. 29. from Chromium Chromiumからのコードが多数ある utter/engine にはCopyright Chromium Authors Apple Inc のファイルが多数ある ※HTMLのDOMを表示するブラウザと Widget treeを表示するアプリの共通性 FlutterでAndroid/iOS両対応のアプリ開発 29
  30. 30. Dart by Google 動的型付け Javaに似ている 当初はブラウザにおける JavaScriptの置き換えを狙っていた…… GoogleのAdWordsとAdSenseの サーバ側はDartらしい FlutterではDartコードをネイティブコンパイル FlutterでAndroid/iOS両対応のアプリ開発 30
  31. 31. 事例 FlutterでAndroid/iOS両対応のアプリ開発 31
  32. 32. 事例 まだ少ない Google (mobile sales tool app) Hamilton musical Newsvoice CARTUNE FlutterでAndroid/iOS両対応のアプリ開発 32
  33. 33. CARTUNE FlutterでAndroid/iOS両対応のアプリ開発 33
  34. 34. CARTUNE FlutterでAndroid/iOS両対応のアプリ開発 34
  35. 35. CARTUNE ※アニメーションGIFのため粗いですが、実際はもっと綺麗です FlutterでAndroid/iOS両対応のアプリ開発 35
  36. 36. まとめ・感想 FlutterでAndroid/iOS両対応のアプリ開発 36
  37. 37. なぜFlutter を選んだのか Dartの型チェックが期待できた IntelliJのプラグインやデバッグ機能 FlutterでAndroid/iOS両対応のアプリ開発 37
  38. 38. 開発してみて いくつかバグには遭遇した テキスト入力で改行まわり プラットフォーム側のテキスト入力画面を表示 クラッシュまわりはログをIssue登録 修正してもらえたり、調査中 機能の追加のPull-Requestを送ってマージされた FlutterでAndroid/iOS両対応のアプリ開発 38
  39. 39. 開発してみて UIまわりはFlutter提供のものを組み合わせればOK プラットフォーム側の機能との連携は実装が必要 プラグインは少ない StackOver owで質問すると即回答 Googleの人も見てくれている フレームワークのソースコードが公開されており Dartなので読めば分かる FlutterでAndroid/iOS両対応のアプリ開発 39
  40. 40. 向き不向き 新規のアプリ開発には有力な候補 本アプリを作ってもよし プロトタイプだけでもよし 既存アプリにハイブリッド的に組み込むのは 向かない(と思う) 作成済みUIを利用できないなど FlutterでAndroid/iOS両対応のアプリ開発 40
  41. 41. まとめ FlutterでAndroid/iOS両対応のアプリ開発 41
  42. 42. Flutter モバイルアプリのSDK Android / iOS 両対応 高い開発効率(ホットリロード・IDEデバッグ) アルファ版 FlutterでAndroid/iOS両対応のアプリ開発 42

×