$30 off During Our Annual Pro Sale. View details »

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

najeira
October 10, 2017

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

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

najeira

October 10, 2017
Tweet

More Decks by najeira

Other Decks in Programming

Transcript

  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