ZOZOTech meetup Frontend ＃１０

Transcript

1. Flutter for Webを使ったログ監視アプ リ
 株式会社ZOZOテクノロジーズ
 開発部 
 山田尚吾 Copyright © ZOZO Technologies, Inc.
2. © ZOZO Technologies, Inc. 株式会社ZOZOテクノロジーズ
 開発部
 ZOZOTOWN Android担当 山田 尚吾
 2 @yshogo87
 @yshogo87

3. © ZOZO Technologies, Inc. 3 ・2018年9月入社
 ・現在はZOZOTOWN Android担当
 ・個人ではFlutterとFirebaseをよく触ってる
 ・一人開発が趣味

4. © ZOZO Technologies, Inc. 目次
 4 ・Flutterとは
 ・Flutter for Webとは
 ・Flutter for Webを使ってログ監視サイトを作る
 ・実装方法
 ・実際触ってみて感じた、メリット、デメリット
 ・まとめ

5. © ZOZO Technologies, Inc. Flutterとは
 5 ・Googleが開発している、iOSとAndroid両方を１つのコードで動か すためのSDK (2017/5/12 に初リリース）
 
 ・2018/12/5 に開催されたFlutter Liveにてバージョン1.0が発表
 
 ・現在も開発は活発に進んでいる

6. © ZOZO Technologies, Inc. Flutter for Webとは
 6 ・Flutter Live 2018にてFlutterをWebでも動くようにするプロジェク ト「Humming Bird」発表
 
 ・その後Google I/O 2019にて「Flutter for Web」となりテクニカル プレビューとしてリリース

7. © ZOZO Technologies, Inc. Flutter for Webとは
 7
8. © ZOZO Technologies, Inc. 8 Flutter for Webを使ってログ監視サイトを作る
9. © ZOZO Technologies, Inc. Flutter for Webを使ってログ監視サイトを作る
 
 9 ・DroidKaigi、try! Swift、RubyKaigiで展示したファッションチェック アプリ
 FlutterとFirebase ML Kitを使ってカン ファレンス用デモアプリを作った話 https://techblog.zozo.com/entry/2019 /03/08/170000
10. © ZOZO Technologies, Inc. Flutter for Webを使ってログ監視サイトを作る
 
 10 ・採点結果をFirestoreに保存し、カンファレンス中に結果の数値 を確認していた

11. © ZOZO Technologies, Inc. Flutter for Webを使ってログ監視サイトを作る
 
 11 ・アプリで確認だとデメリットが多い
 (インストールしないといけない、Firebaseコンソールに素早くアク セスできない etc..)
 Flutter for Webでソースコードを改変せずにデプロイ したい！！

12. © ZOZO Technologies, Inc. 12 手順
13. © ZOZO Technologies, Inc. 手順
 13 ・Flutter for Webの開発環境を作る
 ・Flutter for Webを既存プロジェクトに導入
 ・ローカルで起動
 ・Firebase Hostingにデプロイ

14. © ZOZO Technologies, Inc. 手順
 14 ・Flutter for Webの開発環境を作る
 ・Flutter for Webを既存プロジェクトに導入
 ・ローカルで起動
 ・Firebase Hostingにデプロイ
 そんなに甘くなかった、、、、

15. © ZOZO Technologies, Inc. 手順
 15 ・Flutter for Webを既存プロジェクトに導入
 現時点ではできない (2019/6/20 時点)

16. © ZOZO Technologies, Inc. 手順
 16 ・import先はWebとモバイルで異なっている
 　import 'package:flutter/material.dart';　 Flutter (mobile)
 Flutter for Web
 　import 'package:flutter_web/material.dart';　 補足：他にもあります。

17. © ZOZO Technologies, Inc. 手順
 17 ・Flutter for Webでプロジェクトを作成し、ソースコードを持ってく る
 ・importを変更する
 ・Flutter (Mobile用)のプラグインを使っている場合はDart用のプ ラグインに変更
 

18. © ZOZO Technologies, Inc. 手順
 18 マイグレーション方法もかかれている
 https://github.com/flutter/flutter_web/blob/master/docs/migration_guide.md
 

19. © ZOZO Technologies, Inc. 手順
 19 ・`webdev build` コマンドでプロジェクトをビルド
 ・`webdev serve -r` コマンドでローカルで起動する
 ・ http://127.0.0.1:8080 にアクセスすると表示できる
 

20. © ZOZO Technologies, Inc. 手順
 20
21. © ZOZO Technologies, Inc. 手順
 21 Firebase Hostingにデプロイ
 ・デプロイする前にfontを指定したjsonファイルを配置する
 → https://github.com/flutter/flutter_web/blob/master/examples/custom_fonts/web/assets/FontManifest.json
 ・デプロイの手順は他のプロジェクトと同じなので割愛
 

22. © ZOZO Technologies, Inc. 手順
 22
23. © ZOZO Technologies, Inc. 23 実際触ってみて感じた、メリット、デメリット
24. © ZOZO Technologies, Inc. 実際触ってみて感じた、メリット、デメリット
 
 24 メリット
 ・100%モバイルコードがWebで動くわけではないが、ほとんどのコー ドはそのまま動く
 ・マテリアルデザインも忠実に再現されていて美しい
 ・DartはJavaとJavaScriptの良いところを持ってきたような言語で書 きやすい

25. © ZOZO Technologies, Inc. 実際触ってみて感じた、メリット、デメリット
 
 25 デメリット
 ・文字列の選択ができない
 ・モバイルアプリをそのまま動かせるわけではない
 ・エラー文言がわかりにくい
 (DartをJavaScriptにコンパイルしてるので、Dart側でどんな問題が あったか特定しづらい)
 etc....
 

26. © ZOZO Technologies, Inc. 実際触ってみて感じた、メリット、デメリット
 
 26 Flutter team do not recommend using code created with Flutter for web in production at this time.
 
 「Flutter チームは現時点では商用でFlutter for webを使ってコード を書くことはおすすめしない」
 
 （参照：https://github.com/flutter/flutter_web）
 現時点まだちゃんと使えるわけではない (2019/6/20 時点)

27. © ZOZO Technologies, Inc. 実際触ってみて感じた、メリット、デメリット
 
 27 開発はちゃんと進んでる
 ・動作の安定化
 ・CSSの改善
 ・Flutter本体のプロジェクトにマージしてそのまま動くようにする
 
 
 
 

28. © ZOZO Technologies, Inc. 28 まとめ
29. © ZOZO Technologies, Inc. まとめ
 29 ・FlutterはモバイルアプリのためのSDKでそれをそのままWebでも 動くようにするプロジェクト
 ・現状はモバイルプロジェクトをそのまま動かせることはできない
 ・現状は「とりあえず動く」レベルものだと思う
 ・開発は活発なので今後の期待