Flutterとの1年

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

Flutterとの1年

Flutterとの1年

najeira

More Decks by najeira

Other Decks in Technology

Featured

Transcript