Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

    View full-size slide

  2. Target
    Flutter
    の概要を知りたい
    エンジニア
    デザイナー
    Flutter
    でAndroid/iOS
    両対応のアプリ開発 2

    View full-size slide

  3. Engineer/Developer
    モバイルアプリを作る
    エンジニア/
    デベロッパー
    Flutter
    でAndroid/iOS
    両対応のアプリ開発 3

    View full-size slide

  4. Designer
    Flutter
    のUI
    は宣言的
    new Row(children: [
    new Icon(Icons.thumb_up),
    new Text('Welcome to Flutter!',
    style: const TextStyle(
    color: Colors.red,
    fontSize: 20.0,
    ),
    ),
    ]),
    レイアウト/
    スタイルを編集しやすい
    Flutter
    でAndroid/iOS
    両対応のアプリ開発 4

    View full-size slide

  5. Other
    モバイルアプリを作るにあたり
    どのような選択肢があるか
    知っておきたい人にも
    Flutter
    でAndroid/iOS
    両対応のアプリ開発 5

    View full-size slide

  6. Agenda
    概要、
    特徴
    仕組み
    機能、UI
    事例
    Flutter
    でAndroid/iOS
    両対応のアプリ開発 6

    View full-size slide

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

    View full-size slide

  8. Flutter
    とは?
    開発フレー
    ムワー
    ク、SDK
    モバイルアプリ
    単一のコー
    ドベー

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

    View full-size slide

  9. 目指すもの
    高い開発効率
    高い実行パフォー
    マンス
    Flutter
    でAndroid/iOS
    両対応のアプリ開発 9

    View full-size slide

  10. 対象
    2D
    の「
    アプリ」
    ゲー
    ムを作るものではない
    Flutter
    でAndroid/iOS
    両対応のアプリ開発 10

    View full-size slide

  11. 特徴
    Dart language
    Reactive framework
    inspired by React
    自前UI (Material and iOS)
    オー
    プンソー
    ス on GitHub
    developed by Google and community
    Flutter
    でAndroid/iOS
    両対応のアプリ開発 11

    View full-size slide

  12. 特徴
    ネイティブのARM
    コー
    ドにコンパイル
    iOS: C/C++/Dart
    すべて
    Android: C/C++
    すべて、Dart
    の大半
    2D GPU-accelerated APIs
    IntelliJ
    プラグイン & IDE
    デバッグ
    ホットリロー

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

    View full-size slide

  13. 注意点
    まだアルファ版
    自前UI
    なので、OEM UI
    と混在できない
    Flutter
    画面とプラットフォー
    ム画面の往来は可能
    Flutter
    でAndroid/iOS
    両対応のアプリ開発 13

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  19. StatefullWidget
    class YourApp extends StatefullWidget {
    YourAppState createState() => new YourAppState();
    }
    class YourAppState extends State {
    int counter = 0;
    Widget build(BuildContext context) {
    return new RaisedButton(
    child: new Text('counter = $counter'),
    onPressed: () { setState(() { counter++; }); },
    );
    }
    }
    Flutter
    でAndroid/iOS
    両対応のアプリ開発 19

    View full-size slide

  20. build, setState
    build
    メソッドが返すWidget
    ツリー
    が描画される
    setState
    で状態を変えると、
    再build
    される
    Flutter
    は前回のbuild
    と今回のbuild

    Widget
    ツリー
    の差分を再描画する
    Flutter
    でAndroid/iOS
    両対応のアプリ開発 20

    View full-size slide

  21. Flutter
    の機能
    Flutter
    でAndroid/iOS
    両対応のアプリ開発 21

    View full-size slide

  22. ホットリロー

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

    View full-size slide

  23. テスト
    unit
    Dart
    標準の単体テスト用のパッケー

    widget
    Widget
    に対してテストを行う
    操作するための手段が提供されている
    integration
    実際のアプリを起動してスクリプトから操作する
    Flutter
    でAndroid/iOS
    両対応のアプリ開発 23

    View full-size slide

  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

    View full-size slide

  25. Platform Channels
    プラットフォー
    ム側のAPI
    を呼び出すことも出来る

    カメラ、
    位置情報など
    Flutter
    でAndroid/iOS
    両対応のアプリ開発 25

    View full-size slide

  26. Flutter
    の仕組み
    Flutter
    でAndroid/iOS
    両対応のアプリ開発 26

    View full-size slide

  27. Stack
    from utter.io
    Flutter
    でAndroid/iOS
    両対応のアプリ開発 27

    View full-size slide

  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

    View full-size slide

  29. from Chromium
    Chromium
    からのコー
    ドが多数ある
    utter/engine
    には Copyright
    Chromium Authors
    Apple Inc
    のファイルが多数ある
    ※HTML
    のDOM
    を表示するブラウザと
    Widget tree
    を表示するアプリの共通性
    Flutter
    でAndroid/iOS
    両対応のアプリ開発 29

    View full-size slide

  30. Dart
    by Google
    動的型付け
    Java
    に似ている
    当初はブラウザにおける
    JavaScript
    の置き換えを狙っていた……
    Google
    のAdWords
    とAdSense

    サー
    バ側はDart
    らしい
    Flutter
    ではDart
    コー
    ドをネイティブコンパイル
    Flutter
    でAndroid/iOS
    両対応のアプリ開発 30

    View full-size slide

  31. 事例
    Flutter
    でAndroid/iOS
    両対応のアプリ開発 31

    View full-size slide

  32. 事例
    まだ少ない
    Google (mobile sales tool app)
    Hamilton musical
    Newsvoice
    CARTUNE
    Flutter
    でAndroid/iOS
    両対応のアプリ開発 32

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. CARTUNE

    アニメー
    ションGIF
    のため粗いですが、
    実際はもっと綺麗です
    Flutter
    でAndroid/iOS
    両対応のアプリ開発 35

    View full-size slide

  36. まとめ・
    感想
    Flutter
    でAndroid/iOS
    両対応のアプリ開発 36

    View full-size slide

  37. なぜ Flutter
    を選んだのか
    Dart
    の型チェックが期待できた
    IntelliJ
    のプラグインやデバッグ機能
    Flutter
    でAndroid/iOS
    両対応のアプリ開発 37

    View full-size slide

  38. 開発してみて
    いくつかバグには遭遇した
    テキスト入力で改行まわり
    プラットフォー
    ム側のテキスト入力画面を表示
    クラッシュまわりはログをIssue
    登録
    修正してもらえたり、
    調査中
    機能の追加のPull-Request
    を送ってマー
    ジされた
    Flutter
    でAndroid/iOS
    両対応のアプリ開発 38

    View full-size slide

  39. 開発してみて
    UI
    まわりはFlutter
    提供のものを組み合わせればOK
    プラットフォー
    ム側の機能との連携は実装が必要
    プラグインは少ない
    StackOver ow
    で質問すると即回答
    Google
    の人も見てくれている
    フレー
    ムワー
    クのソー
    スコー
    ドが公開されており
    Dart
    なので読めば分かる
    Flutter
    でAndroid/iOS
    両対応のアプリ開発 39

    View full-size slide

  40. 向き不向き
    新規のアプリ開発には有力な候補
    本アプリを作ってもよし
    プロトタイプだけでもよし
    既存アプリにハイブリッド的に組み込むのは
    向かない(
    と思う)
    作成済みUI
    を利用できないなど
    Flutter
    でAndroid/iOS
    両対応のアプリ開発 40

    View full-size slide

  41. まとめ
    Flutter
    でAndroid/iOS
    両対応のアプリ開発 41

    View full-size slide

  42. Flutter
    モバイルアプリのSDK
    Android / iOS
    両対応
    高い開発効率(
    ホットリロー
    ド・IDE
    デバッグ)
    アルファ版
    Flutter
    でAndroid/iOS
    両対応のアプリ開発 42

    View full-size slide