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でも 動くようにするプロジェクト
 ・現状はモバイルプロジェクトをそのまま動かせることはできない
 ・現状は「とりあえず動く」レベルものだと思う


    ・開発は活発なので今後の期待
 
 

30. None