Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Flutter との1 年 GDG DevFest 2018 Tokyo @najeira
Slide 2
Slide 2 text
Flutter との1 年 Flutter をアプリ開発(プロダクション)に 使い始めてから1 年と少し経った 開発にまつわる四方山話
Slide 3
Slide 3 text
Agenda どういうアプリを作ったか? なぜFlutter を選んだか? 使ってみての感想 OSS としてのFlutter
Slide 4
Slide 4 text
作ったアプリ CARTUNE (車のコミュニティ)
Slide 5
Slide 5 text
なぜFlutter を選んだか? 高い開発効率 すばやく試行錯誤(リリース)したい 少人数での開発 Android/iOS の両方でリリースしたい → クロスプラットフォームSDK を使いたい
Slide 6
Slide 6 text
検証 Flutter を利用して開発できるか事前に検証 1 画面を試しに実装 ネイティブとの連携
Slide 7
Slide 7 text
写真グリッドを試しに実装 ※スクリーンショットは最新のもので、検証版とは多少異なります
Slide 8
Slide 8 text
写真グリッドを試しに実装 重要な機能となる1 画面を選んで実装してみた Flutter 初心者でも1 日で実装できた さわってみて パフォーマンスには問題なかった
Slide 9
Slide 9 text
ネイティブとの連携 Flutter ⇔ ネイティブ
Slide 10
Slide 10 text
ネイティブとの連携 ネイティブ(Activity/ViewController )の 画面へ遷移することができるか確認した これができれば、Flutter で実装できなくても いざとなったらネイティブ実装でなんとかなる
Slide 11
Slide 11 text
CARTUNE でのネイティブ画面 WebView お知らせ、ヘルプ 写真Picker Android / iOS のプラットフォーム固有の 機能(API) を使うため 写真編集 OpenCV を使っているため Flutter で実装できない画面は少なかった
Slide 12
Slide 12 text
写真Picker Android は Intent でギャラリー系アプリを起動 iOS は Photos フレームワーク
Slide 13
Slide 13 text
写真編集 OpenCV を使ってナンバー検出して隠す Android JNI を経由するためネイティブ側で実装 ※おそらくFlutter でも画面は実装できる
Slide 14
Slide 14 text
ネイティブとの連携 分かりやすく分けると UI に関するものは Flutter でできる そうでないものはネイティブ側で作る
Slide 15
Slide 15 text
使ってみての感想
Slide 16
Slide 16 text
よかったこと
Slide 17
Slide 17 text
コードの共有 画面数で数えると: 95% コード(Dart) でみると: 70% ※写真編集で使っているOpenCV 関連コードが多くDart が70% にとどまる
Slide 18
Slide 18 text
開発効率 ホットリロードがとても便利
Slide 19
Slide 19 text
困ったこと
Slide 20
Slide 20 text
機能的な課題 不十分な箇所があった(改善してきている) [Fixed] 動画再生がない [Fixed] 一部のマイナー文字で落ちる [Fixed] 複数行テキスト入力がない フォント選択が日本語にならないことがある IME や入力欄の挙動がネイティブと違う 広告SDK との連携がいまいち テキストまわりが多い
Slide 21
Slide 21 text
テキストまわり CARTUNE ではテキスト入力欄はネイティブ側で実装 Flutter 側の画面で 投稿・入力ボタンを押すと ネイティブの Activity / ViewController が起動 テキスト入力して OK すると Flutter に入力した文章が渡される あとはそれを使って処理を実行
Slide 22
Slide 22 text
その他バグとの遭遇 Issue 報告 Pull Request Flutter(Dart 部分) のバグは 回避して UI を作れば OK だいたいワークアラウンドがある C++ で書かれたエンジン部分のバグは 直すしかないことが多い →CARTUNE ではパッチをあてて使っている
Slide 23
Slide 23 text
OSS としてのFlutter
Slide 24
Slide 24 text
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 時点
Slide 25
Slide 25 text
Contribution CONTRIBUTING . md があるので読む コードを変更する (必要に応じて)テストを追加する テストを実行する あとは GitHub のプルリクエスト
Slide 26
Slide 26 text
Contribution utter/engine 側は準備が必要 C++ で書かれているのでビルドツールを準備 あとは utter/ utter と同じ ※こちらもCONTRIBUTING . md があるので読めばOK
Slide 27
Slide 27 text
まとめ CARTUNE というアプリをFlutter で作り、継続してア ップデートできている 開発効率が高いのがよい バグなどはあるが、改善されていっている 開発は活発、OSS なので自分でなおせる