ZOZOTech meetup Frontend ＃１０

Transcript

1. Flutter for Webを使ったログ監視アプ
   リ

   株式会社ZOZOテクノロジーズ

   開発部 

   山田尚吾
   Copyright © ZOZO Technologies, Inc.
   

   View Slide

2. © ZOZO Technologies, Inc.
   株式会社ZOZOテクノロジーズ

   開発部

   ZOZOTOWN Android担当
   山田 尚吾

   2
   @yshogo87

   @yshogo87

   

   View Slide

3. © ZOZO Technologies, Inc.
   3
   ・2018年9月入社

   ・現在はZOZOTOWN Android担当

   ・個人ではFlutterとFirebaseをよく触ってる

   ・一人開発が趣味

   

   View Slide

4. © ZOZO Technologies, Inc.
   目次

   4
   ・Flutterとは

   ・Flutter for Webとは

   ・Flutter for Webを使ってログ監視サイトを作る

   ・実装方法

   ・実際触ってみて感じた、メリット、デメリット

   ・まとめ

   

   View Slide

5. © ZOZO Technologies, Inc.
   Flutterとは

   5
   ・Googleが開発している、iOSとAndroid両方を１つのコードで動か
   すためのSDK (2017/5/12 に初リリース）

   

   ・2018/12/5 に開催されたFlutter Liveにてバージョン1.0が発表

   

   ・現在も開発は活発に進んでいる

   

   View Slide

6. © ZOZO Technologies, Inc.
   Flutter for Webとは

   6
   ・Flutter Live 2018にてFlutterをWebでも動くようにするプロジェク
   ト「Humming Bird」発表

   

   ・その後Google I/O 2019にて「Flutter for Web」となりテクニカル
   プレビューとしてリリース

   

   View Slide

7. © ZOZO Technologies, Inc.
   Flutter for Webとは

   7
   

   View Slide

8. © ZOZO Technologies, Inc.
   8
   Flutter for Webを使ってログ監視サイトを作る
   

   View Slide

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
   

   View Slide

10. © ZOZO Technologies, Inc.
    Flutter for Webを使ってログ監視サイトを作る

    

    10
    ・採点結果をFirestoreに保存し、カンファレンス中に結果の数値
    を確認していた

    

    View Slide

11. © ZOZO Technologies, Inc.
    Flutter for Webを使ってログ監視サイトを作る

    

    11
    ・アプリで確認だとデメリットが多い

    (インストールしないといけない、Firebaseコンソールに素早くアク
    セスできない etc..)

    Flutter for Webでソースコードを改変せずにデプロイ
    したい！！

    

    View Slide

12. © ZOZO Technologies, Inc.
    12
    手順
    

    View Slide

13. © ZOZO Technologies, Inc.
    手順

    13
    ・Flutter for Webの開発環境を作る

    ・Flutter for Webを既存プロジェクトに導入

    ・ローカルで起動

    ・Firebase Hostingにデプロイ

    

    View Slide

14. © ZOZO Technologies, Inc.
    手順

    14
    ・Flutter for Webの開発環境を作る

    ・Flutter for Webを既存プロジェクトに導入

    ・ローカルで起動

    ・Firebase Hostingにデプロイ

    そんなに甘くなかった、、、、

    

    View Slide

15. © ZOZO Technologies, Inc.
    手順

    15
    ・Flutter for Webを既存プロジェクトに導入

    現時点ではできない (2019/6/20 時点)

    

    View Slide

16. © ZOZO Technologies, Inc.
    手順

    16
    ・import先はWebとモバイルで異なっている

    　import 'package:flutter/material.dart';　
    Flutter (mobile)

    Flutter for Web

    　import 'package:flutter_web/material.dart';　
    補足：他にもあります。

    

    View Slide

17. © ZOZO Technologies, Inc.
    手順

    17
    ・Flutter for Webでプロジェクトを作成し、ソースコードを持ってく
    る

    ・importを変更する

    ・Flutter (Mobile用)のプラグインを使っている場合はDart用のプ
    ラグインに変更

    

    

    View Slide

18. © ZOZO Technologies, Inc.
    手順

    18
    マイグレーション方法もかかれている

    https://github.com/flutter/flutter_web/blob/master/docs/migration_guide.md

    

    

    View Slide

19. © ZOZO Technologies, Inc.
    手順

    19
    ・`webdev build` コマンドでプロジェクトをビルド

    ・`webdev serve -r` コマンドでローカルで起動する

    ・ http://127.0.0.1:8080 にアクセスすると表示できる

    

    

    View Slide

20. © ZOZO Technologies, Inc.
    手順

    20
    

    View Slide

21. © ZOZO Technologies, Inc.
    手順

    21
    Firebase Hostingにデプロイ

    ・デプロイする前にfontを指定したjsonファイルを配置する

    → https://github.com/flutter/flutter_web/blob/master/examples/custom_fonts/web/assets/FontManifest.json

    ・デプロイの手順は他のプロジェクトと同じなので割愛

    

    

    View Slide

22. © ZOZO Technologies, Inc.
    手順

    22
    

    View Slide

23. © ZOZO Technologies, Inc.
    23
    実際触ってみて感じた、メリット、デメリット
    

    View Slide

24. © ZOZO Technologies, Inc.
    実際触ってみて感じた、メリット、デメリット

    

    24
    メリット

    ・100%モバイルコードがWebで動くわけではないが、ほとんどのコー
    ドはそのまま動く

    ・マテリアルデザインも忠実に再現されていて美しい

    ・DartはJavaとJavaScriptの良いところを持ってきたような言語で書
    きやすい

    

    View Slide

25. © ZOZO Technologies, Inc.
    実際触ってみて感じた、メリット、デメリット

    

    25
    デメリット

    ・文字列の選択ができない

    ・モバイルアプリをそのまま動かせるわけではない

    ・エラー文言がわかりにくい

    (DartをJavaScriptにコンパイルしてるので、Dart側でどんな問題が
    あったか特定しづらい)

    etc....

    

    

    View Slide

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
    時点)

    

    View Slide

27. © ZOZO Technologies, Inc.
    実際触ってみて感じた、メリット、デメリット

    

    27
    開発はちゃんと進んでる

    ・動作の安定化

    ・CSSの改善

    ・Flutter本体のプロジェクトにマージしてそのまま動くようにする

    

    

    

    

    

    View Slide

28. © ZOZO Technologies, Inc.
    28
    まとめ
    

    View Slide

29. © ZOZO Technologies, Inc.
    まとめ

    29
    ・FlutterはモバイルアプリのためのSDKでそれをそのままWebでも
    動くようにするプロジェクト

    ・現状はモバイルプロジェクトをそのまま動かせることはできない

    ・現状は「とりあえず動く」レベルものだと思う

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

    

    

    

    View Slide

30. View Slide