Suche senden
Hochladen
FlutterでAndroid/iOS両対応のアプリ開発
•
5 gefällt mir
•
3,551 views
N
najeira
Folgen
FlutterでAndroid/iOS両対応のアプリ開発
Weniger lesen
Mehr lesen
Ingenieurwesen
Melden
Teilen
Melden
Teilen
1 von 42
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
Flutter2
Flutter2
asuka y
Flutter (フラッター)
Flutter (フラッター)
fujita noriko
Namespace API を用いたマルチテナント型 Web アプリの実践
Namespace API を用いたマルチテナント型 Web アプリの実践
Takuya Ueda
粗探しをしてGoのコントリビューターになる方法
粗探しをしてGoのコントリビューターになる方法
Takuya Ueda
GoによるiOSアプリの開発
GoによるiOSアプリの開発
Takuya Ueda
僕がAndroid開発する時にちょっと便利だと思うtips
僕がAndroid開発する時にちょっと便利だと思うtips
Masataka Kono
静的解析とUIの自動生成を駆使してモバイルアプリの運用コストを大幅に下げた話
静的解析とUIの自動生成を駆使してモバイルアプリの運用コストを大幅に下げた話
Takuya Ueda
goパッケージで型情報を用いたソースコード検索を実現する
goパッケージで型情報を用いたソースコード検索を実現する
Takuya Ueda
Empfohlen
Flutter2
Flutter2
asuka y
Flutter (フラッター)
Flutter (フラッター)
fujita noriko
Namespace API を用いたマルチテナント型 Web アプリの実践
Namespace API を用いたマルチテナント型 Web アプリの実践
Takuya Ueda
粗探しをしてGoのコントリビューターになる方法
粗探しをしてGoのコントリビューターになる方法
Takuya Ueda
GoによるiOSアプリの開発
GoによるiOSアプリの開発
Takuya Ueda
僕がAndroid開発する時にちょっと便利だと思うtips
僕がAndroid開発する時にちょっと便利だと思うtips
Masataka Kono
静的解析とUIの自動生成を駆使してモバイルアプリの運用コストを大幅に下げた話
静的解析とUIの自動生成を駆使してモバイルアプリの運用コストを大幅に下げた話
Takuya Ueda
goパッケージで型情報を用いたソースコード検索を実現する
goパッケージで型情報を用いたソースコード検索を実現する
Takuya Ueda
ネットワークの切り替えを感知する方法
ネットワークの切り替えを感知する方法
Keisuke Yamaguchi
minneにおけるテスト〜リリース〜リリース後にやっている事の紹介
minneにおけるテスト〜リリース〜リリース後にやっている事の紹介
Masataka Kono
Go goes Mobile: Quick Exploration on Go 1.5 and Gomobile
Go goes Mobile: Quick Exploration on Go 1.5 and Gomobile
Takahiro Yoshimura
[ABC2016S]Android Wear アプリ開発入門
[ABC2016S]Android Wear アプリ開発入門
Kenichi Kambara
HoloLens 2 開発入門
HoloLens 2 開発入門
Akihiro Ueyama
Cloud functionsの紹介
Cloud functionsの紹介
Takuya Ueda
オススメの標準・準標準パッケージ20選
オススメの標準・準標準パッケージ20選
Takuya Ueda
[Lt]versionごとにurlを自動生成
[Lt]versionごとにurlを自動生成
shouta yoshikai
2015年度研究室プレ卒研用Android講座1
2015年度研究室プレ卒研用Android講座1
Hokuto Tateyama
Goだけでモバイルアプリを作ろう
Goだけでモバイルアプリを作ろう
Takuya Ueda
2017823 pythonを始めよう
2017823 pythonを始めよう
shouta yoshikai
Android概要資料
Android概要資料
サイバーエージェント
Pythonを始めよう
Pythonを始めよう
shouta yoshikai
Android Studio 2.2の紹介@Google I/O 2016東京報告会
Android Studio 2.2の紹介@Google I/O 2016東京報告会
mokelab
[デブサミ2015]Androidで広がる世界&エンジニアとしての歩み
[デブサミ2015]Androidで広がる世界&エンジニアとしての歩み
Kenichi Kambara
Android dev summit 2019 recap
Android dev summit 2019 recap
furusin
Go MobileでAndroidアプリ開発
Go MobileでAndroidアプリ開発
Takuya Ueda
Android Wearアプリ開発経験談
Android Wearアプリ開発経験談
Kenichi Kambara
オープンソースによるドローン開発の概要( #ABC2015S )
オープンソースによるドローン開発の概要( #ABC2015S )
博宣 今村
Android Wearアプリ プレビュー版→正式版への移植ガイド
Android Wearアプリ プレビュー版→正式版への移植ガイド
Kenichi Kambara
HTML5/JavaScriptで作るAndroidアプリ開発seminar
HTML5/JavaScriptで作るAndroidアプリ開発seminar
kujirahand kujira
AndroidアプリのUI/UX改善例
AndroidアプリのUI/UX改善例
Kenichi Kambara
Weitere ähnliche Inhalte
Was ist angesagt?
ネットワークの切り替えを感知する方法
ネットワークの切り替えを感知する方法
Keisuke Yamaguchi
minneにおけるテスト〜リリース〜リリース後にやっている事の紹介
minneにおけるテスト〜リリース〜リリース後にやっている事の紹介
Masataka Kono
Go goes Mobile: Quick Exploration on Go 1.5 and Gomobile
Go goes Mobile: Quick Exploration on Go 1.5 and Gomobile
Takahiro Yoshimura
[ABC2016S]Android Wear アプリ開発入門
[ABC2016S]Android Wear アプリ開発入門
Kenichi Kambara
HoloLens 2 開発入門
HoloLens 2 開発入門
Akihiro Ueyama
Cloud functionsの紹介
Cloud functionsの紹介
Takuya Ueda
オススメの標準・準標準パッケージ20選
オススメの標準・準標準パッケージ20選
Takuya Ueda
[Lt]versionごとにurlを自動生成
[Lt]versionごとにurlを自動生成
shouta yoshikai
2015年度研究室プレ卒研用Android講座1
2015年度研究室プレ卒研用Android講座1
Hokuto Tateyama
Goだけでモバイルアプリを作ろう
Goだけでモバイルアプリを作ろう
Takuya Ueda
2017823 pythonを始めよう
2017823 pythonを始めよう
shouta yoshikai
Android概要資料
Android概要資料
サイバーエージェント
Pythonを始めよう
Pythonを始めよう
shouta yoshikai
Android Studio 2.2の紹介@Google I/O 2016東京報告会
Android Studio 2.2の紹介@Google I/O 2016東京報告会
mokelab
[デブサミ2015]Androidで広がる世界&エンジニアとしての歩み
[デブサミ2015]Androidで広がる世界&エンジニアとしての歩み
Kenichi Kambara
Android dev summit 2019 recap
Android dev summit 2019 recap
furusin
Go MobileでAndroidアプリ開発
Go MobileでAndroidアプリ開発
Takuya Ueda
Android Wearアプリ開発経験談
Android Wearアプリ開発経験談
Kenichi Kambara
オープンソースによるドローン開発の概要( #ABC2015S )
オープンソースによるドローン開発の概要( #ABC2015S )
博宣 今村
Android Wearアプリ プレビュー版→正式版への移植ガイド
Android Wearアプリ プレビュー版→正式版への移植ガイド
Kenichi Kambara
Was ist angesagt?
(20)
ネットワークの切り替えを感知する方法
ネットワークの切り替えを感知する方法
minneにおけるテスト〜リリース〜リリース後にやっている事の紹介
minneにおけるテスト〜リリース〜リリース後にやっている事の紹介
Go goes Mobile: Quick Exploration on Go 1.5 and Gomobile
Go goes Mobile: Quick Exploration on Go 1.5 and Gomobile
[ABC2016S]Android Wear アプリ開発入門
[ABC2016S]Android Wear アプリ開発入門
HoloLens 2 開発入門
HoloLens 2 開発入門
Cloud functionsの紹介
Cloud functionsの紹介
オススメの標準・準標準パッケージ20選
オススメの標準・準標準パッケージ20選
[Lt]versionごとにurlを自動生成
[Lt]versionごとにurlを自動生成
2015年度研究室プレ卒研用Android講座1
2015年度研究室プレ卒研用Android講座1
Goだけでモバイルアプリを作ろう
Goだけでモバイルアプリを作ろう
2017823 pythonを始めよう
2017823 pythonを始めよう
Android概要資料
Android概要資料
Pythonを始めよう
Pythonを始めよう
Android Studio 2.2の紹介@Google I/O 2016東京報告会
Android Studio 2.2の紹介@Google I/O 2016東京報告会
[デブサミ2015]Androidで広がる世界&エンジニアとしての歩み
[デブサミ2015]Androidで広がる世界&エンジニアとしての歩み
Android dev summit 2019 recap
Android dev summit 2019 recap
Go MobileでAndroidアプリ開発
Go MobileでAndroidアプリ開発
Android Wearアプリ開発経験談
Android Wearアプリ開発経験談
オープンソースによるドローン開発の概要( #ABC2015S )
オープンソースによるドローン開発の概要( #ABC2015S )
Android Wearアプリ プレビュー版→正式版への移植ガイド
Android Wearアプリ プレビュー版→正式版への移植ガイド
Ähnlich wie FlutterでAndroid/iOS両対応のアプリ開発
HTML5/JavaScriptで作るAndroidアプリ開発seminar
HTML5/JavaScriptで作るAndroidアプリ開発seminar
kujirahand kujira
AndroidアプリのUI/UX改善例
AndroidアプリのUI/UX改善例
Kenichi Kambara
Droidcon London2012 Speaker Experience
Droidcon London2012 Speaker Experience
Kenichi Kambara
事例で解説するハイブリッドアプリ開発のポイント
事例で解説するハイブリッドアプリ開発のポイント
Monaca
Cordova利用アプリ開発経験談
Cordova利用アプリ開発経験談
Kenichi Kambara
【17-A-1】Mobile Future Conference開会のご挨拶/世界へ挑むDeNAの「X-border」「X-device」戦略
【17-A-1】Mobile Future Conference開会のご挨拶/世界へ挑むDeNAの「X-border」「X-device」戦略
Developers Summit
Visual Studio 2013 と HTML5 で実現するマルチデバイス/マルチプラットフォーム アプリの開発
Visual Studio 2013 と HTML5 で実現するマルチデバイス/マルチプラットフォーム アプリの開発
Osamu Monoe
Web制作で培ってきたFlashのリッチな表現力をモバイルアプリに
Web制作で培ってきたFlashのリッチな表現力をモバイルアプリに
invogue
Androidアプリ開発どこまでいける?
Androidアプリ開発どこまでいける?
高見 知英
[Potatotips]クロスプラットフォーム開発Tips
[Potatotips]クロスプラットフォーム開発Tips
Kenichi Kambara
Xamarin と Visual Studio でまとめて作る iOS / Android / Windows アプリ ( Developers Summ...
Xamarin と Visual Studio でまとめて作る iOS / Android / Windows アプリ ( Developers Summ...
友太 渡辺
#MRDevDaysJP HoloLens 2 アプリ開発入門
#MRDevDaysJP HoloLens 2 アプリ開発入門
Madoka Chiyoda
Android Studio 4.0 つまみぐい!
Android Studio 4.0 つまみぐい!
tsutomuhayakawa
Devsumi 17 d-2
Devsumi 17 d-2
Daizen Ikehara
devsumi17 d-2
devsumi17 d-2
dikehara
もう怖くないモバイルアプリ開発!
もう怖くないモバイルアプリ開発!
Toshiki Iga
Flutterとプラットフォーム依存の処理の対応について
Flutterとプラットフォーム依存の処理の対応について
Satoshi Noda
デスクトップアプリを『一歩前へ』進める方法
デスクトップアプリを『一歩前へ』進める方法
グレープシティ株式会社 ツール事業部
10 power night2014_uematsu
10 power night2014_uematsu
TerraSky
勉強会用Swift授業2018-0126
勉強会用Swift授業2018-0126
Akihiro Fujiwara
Ähnlich wie FlutterでAndroid/iOS両対応のアプリ開発
(20)
HTML5/JavaScriptで作るAndroidアプリ開発seminar
HTML5/JavaScriptで作るAndroidアプリ開発seminar
AndroidアプリのUI/UX改善例
AndroidアプリのUI/UX改善例
Droidcon London2012 Speaker Experience
Droidcon London2012 Speaker Experience
事例で解説するハイブリッドアプリ開発のポイント
事例で解説するハイブリッドアプリ開発のポイント
Cordova利用アプリ開発経験談
Cordova利用アプリ開発経験談
【17-A-1】Mobile Future Conference開会のご挨拶/世界へ挑むDeNAの「X-border」「X-device」戦略
【17-A-1】Mobile Future Conference開会のご挨拶/世界へ挑むDeNAの「X-border」「X-device」戦略
Visual Studio 2013 と HTML5 で実現するマルチデバイス/マルチプラットフォーム アプリの開発
Visual Studio 2013 と HTML5 で実現するマルチデバイス/マルチプラットフォーム アプリの開発
Web制作で培ってきたFlashのリッチな表現力をモバイルアプリに
Web制作で培ってきたFlashのリッチな表現力をモバイルアプリに
Androidアプリ開発どこまでいける?
Androidアプリ開発どこまでいける?
[Potatotips]クロスプラットフォーム開発Tips
[Potatotips]クロスプラットフォーム開発Tips
Xamarin と Visual Studio でまとめて作る iOS / Android / Windows アプリ ( Developers Summ...
Xamarin と Visual Studio でまとめて作る iOS / Android / Windows アプリ ( Developers Summ...
#MRDevDaysJP HoloLens 2 アプリ開発入門
#MRDevDaysJP HoloLens 2 アプリ開発入門
Android Studio 4.0 つまみぐい!
Android Studio 4.0 つまみぐい!
Devsumi 17 d-2
Devsumi 17 d-2
devsumi17 d-2
devsumi17 d-2
もう怖くないモバイルアプリ開発!
もう怖くないモバイルアプリ開発!
Flutterとプラットフォーム依存の処理の対応について
Flutterとプラットフォーム依存の処理の対応について
デスクトップアプリを『一歩前へ』進める方法
デスクトップアプリを『一歩前へ』進める方法
10 power night2014_uematsu
10 power night2014_uematsu
勉強会用Swift授業2018-0126
勉強会用Swift授業2018-0126
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
Jetzt herunterladen