Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

© ZOZO Technologies, Inc. 株式会社ZOZOテクノロジーズ
 開発部
 ZOZOTOWN Android担当 山田 尚吾
 2 @yshogo87
 @yshogo87


Slide 3

Slide 3 text

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


Slide 4

Slide 4 text

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


Slide 5

Slide 5 text

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


Slide 6

Slide 6 text

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


Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

© ZOZO Technologies, Inc. Flutter for Webを使ってログ監視サイトを作る
 
 9 ・DroidKaigi、try! Swift、RubyKaigiで展示したファッションチェック アプリ
 FlutterとFirebase ML Kitを使ってカン ファレンス用デモアプリを作った話 https://techblog.zozo.com/entry/2019 /03/08/170000

Slide 10

Slide 10 text

© ZOZO Technologies, Inc. Flutter for Webを使ってログ監視サイトを作る
 
 10 ・採点結果をFirestoreに保存し、カンファレンス中に結果の数値 を確認していた


Slide 11

Slide 11 text

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


Slide 12

Slide 12 text

© ZOZO Technologies, Inc. 12 手順

Slide 13

Slide 13 text

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


Slide 14

Slide 14 text

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


Slide 15

Slide 15 text

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


Slide 16

Slide 16 text

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


Slide 17

Slide 17 text

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


Slide 18

Slide 18 text

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


Slide 19

Slide 19 text

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


Slide 20

Slide 20 text

© ZOZO Technologies, Inc. 手順
 20

Slide 21

Slide 21 text

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


Slide 22

Slide 22 text

© ZOZO Technologies, Inc. 手順
 22

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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


Slide 25

Slide 25 text

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


Slide 26

Slide 26 text

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


Slide 27

Slide 27 text

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


Slide 28

Slide 28 text

© ZOZO Technologies, Inc. 28 まとめ

Slide 29

Slide 29 text

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


Slide 30

Slide 30 text

No content