ZOZOTech meetup Frontend #10

E222076ea6b90ae53c2bc68c8a4e01f1?s=47 shogo.yamada
June 19, 2019
1.1k

ZOZOTech meetup Frontend #10

E222076ea6b90ae53c2bc68c8a4e01f1?s=128

shogo.yamada

June 19, 2019
Tweet

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両方を1つのコードで動か すための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