Tweet
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 なので自分でなおせる