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

by najeira

Slide 1

Slide 1 text

Flutter Android/iOS 両対応のアプリ開発 GDG DevFest 2017 Tokyo @najeira generated by Marp 1

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Flutter とは？開発フレームワーク、SDK モバイルアプリ単一のコードベース Android、iOS、Fuchsia Flutter でAndroid/iOS 両対応のアプリ開発 8

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

クロスプラットフォーム他にもいろいろある 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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

多数の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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

build, setState build メソッドが返すWidget ツリーが描画される setState で状態を変えると、再build される Flutter は前回のbuild と今回のbuild の Widget ツリーの差分を再描画する Flutter でAndroid/iOS 両対応のアプリ開発 20

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

ホットリロード Flutter でAndroid/iOS 両対応のアプリ開発 22

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Platform Channels プラットフォーム側のAPI を呼び出すことも出来る ※ カメラ、位置情報など Flutter でAndroid/iOS 両対応のアプリ開発 25

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Dart by Google 動的型付け Java に似ている当初はブラウザにおける JavaScript の置き換えを狙っていた…… Google のAdWords とAdSense のサーバ側はDart らしい Flutter ではDart コードをネイティブコンパイル Flutter でAndroid/iOS 両対応のアプリ開発 30

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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