Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Flutterとの1年
Search
najeira
September 02, 2018
Technology
4
1.6k
Flutterとの1年
najeira
September 02, 2018
Tweet
Share
More Decks by najeira
See All by najeira
Flutter with Platform
najeira
4
1.4k
Google I/O 2019 Extended Tokyo - Flutter
najeira
1
200
Flutter APP DOJO 2019-04
najeira
1
190
Flutter List View 概要
najeira
0
1.2k
Flutter / Google I/O 2018 報告会 信州
najeira
0
320
仕組みを知れば怖くない! Flutter入門
najeira
16
8k
FlutterでAndroid/iOS両対応のアプリ開発
najeira
0
4.6k
Google I/O 2017 報告会 Firebase/Cloud
najeira
1
180
Google I/O 2017 報告会 Flutter/Dart
najeira
1
340
Other Decks in Technology
See All in Technology
Data Hubグループ 紹介資料
sansan33
PRO
0
2.7k
生成AIを活用した音声文字起こしシステムの2つの構築パターンについて
miu_crescent
PRO
2
170
顧客との商談議事録をみんなで読んで顧客解像度を上げよう
shibayu36
0
210
What happened to RubyGems and what can we learn?
mikemcquaid
0
250
インフラエンジニア必見!Kubernetesを用いたクラウドネイティブ設計ポイント大全
daitak
0
340
OWASP Top 10:2025 リリースと 少しの日本語化にまつわる裏話
okdt
PRO
3
590
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.3k
学生・新卒・ジュニアから目指すSRE
hiroyaonoe
2
580
超初心者からでも大丈夫!オープンソース半導体の楽しみ方〜今こそ!オレオレチップをつくろう〜
keropiyo
0
100
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
17k
日本の85%が使う公共SaaSは、どう育ったのか
taketakekaho
1
150
FinTech SREのAWSサービス活用/Leveraging AWS Services in FinTech SRE
maaaato
0
130
Featured
See All Featured
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
160
Rebuilding a faster, lazier Slack
samanthasiow
85
9.4k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.2k
The Invisible Side of Design
smashingmag
302
51k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
56
<Decoding/> the Language of Devs - We Love SEO 2024
nikkihalliwell
1
130
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.6k
Introduction to Domain-Driven Design and Collaborative software design
baasie
1
580
Designing Experiences People Love
moore
144
24k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
10
1.1k
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
140
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
konakalab
0
350
Transcript
Flutter との1 年 GDG DevFest 2018 Tokyo @najeira
Flutter との1 年 Flutter をアプリ開発(プロダクション)に 使い始めてから1 年と少し経った 開発にまつわる四方山話
Agenda どういうアプリを作ったか? なぜFlutter を選んだか? 使ってみての感想 OSS としてのFlutter
作ったアプリ CARTUNE (車のコミュニティ)
なぜFlutter を選んだか? 高い開発効率 すばやく試行錯誤(リリース)したい 少人数での開発 Android/iOS の両方でリリースしたい → クロスプラットフォームSDK を使いたい
検証 Flutter を利用して開発できるか事前に検証 1 画面を試しに実装 ネイティブとの連携
写真グリッドを試しに実装 ※スクリーンショットは最新のもので、検証版とは多少異なります
写真グリッドを試しに実装 重要な機能となる1 画面を選んで実装してみた Flutter 初心者でも1 日で実装できた さわってみて パフォーマンスには問題なかった
ネイティブとの連携 Flutter ⇔ ネイティブ
ネイティブとの連携 ネイティブ(Activity/ViewController )の 画面へ遷移することができるか確認した これができれば、Flutter で実装できなくても いざとなったらネイティブ実装でなんとかなる
CARTUNE でのネイティブ画面 WebView お知らせ、ヘルプ 写真Picker Android / iOS のプラットフォーム固有の 機能(API)
を使うため 写真編集 OpenCV を使っているため Flutter で実装できない画面は少なかった
写真Picker Android は Intent でギャラリー系アプリを起動 iOS は Photos フレームワーク
写真編集 OpenCV を使ってナンバー検出して隠す Android JNI を経由するためネイティブ側で実装 ※おそらくFlutter でも画面は実装できる
ネイティブとの連携 分かりやすく分けると UI に関するものは Flutter でできる そうでないものはネイティブ側で作る
使ってみての感想
よかったこと
コードの共有 画面数で数えると: 95% コード(Dart) でみると: 70% ※写真編集で使っているOpenCV 関連コードが多くDart が70% にとどまる
開発効率 ホットリロードがとても便利
困ったこと
機能的な課題 不十分な箇所があった(改善してきている) [Fixed] 動画再生がない [Fixed] 一部のマイナー文字で落ちる [Fixed] 複数行テキスト入力がない フォント選択が日本語にならないことがある IME
や入力欄の挙動がネイティブと違う 広告SDK との連携がいまいち テキストまわりが多い
テキストまわり CARTUNE ではテキスト入力欄はネイティブ側で実装 Flutter 側の画面で 投稿・入力ボタンを押すと ネイティブの Activity / ViewController
が起動 テキスト入力して OK すると Flutter に入力した文章が渡される あとはそれを使って処理を実行
その他バグとの遭遇 Issue 報告 Pull Request Flutter(Dart 部分) のバグは 回避して UI
を作れば OK だいたいワークアラウンドがある C++ で書かれたエンジン部分のバグは 直すしかないことが多い →CARTUNE ではパッチをあてて使っている
OSS としてのFlutter
OSS としてのFlutter GitHub: utter/ utter Stars: 35,963 Commits: 11,701 Contributors:
238 今月だけでも: 272 commits, 47,173 additions, 14,296 deletions, 691 closed issues ※2018/08/27 時点
Contribution CONTRIBUTING . md があるので読む コードを変更する (必要に応じて)テストを追加する テストを実行する あとは GitHub
のプルリクエスト
Contribution utter/engine 側は準備が必要 C++ で書かれているのでビルドツールを準備 あとは utter/ utter と同じ ※こちらもCONTRIBUTING
. md があるので読めばOK
まとめ CARTUNE というアプリをFlutter で作り、継続してア ップデートできている 開発効率が高いのがよい バグなどはあるが、改善されていっている 開発は活発、OSS なので自分でなおせる