Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
ZOZOTech meetup Frontend #10
shogo.yamada
June 19, 2019
2
1.1k
ZOZOTech meetup Frontend #10
shogo.yamada
June 19, 2019
Tweet
Share
More Decks by shogo.yamada
See All by shogo.yamada
yshogo
0
180
yshogo
0
3.2k
yshogo
1
240
yshogo
0
8
yshogo
1
360
yshogo
1
130
yshogo
0
4.2k
yshogo
2
230
yshogo
0
340
Featured
See All Featured
lynnandtonic
272
16k
morganepeng
17
1.1k
trallard
13
660
searls
204
35k
cassininazir
347
20k
dotmariusz
94
5.1k
tammielis
237
23k
jnunemaker
PRO
40
4.6k
ammeep
656
54k
zenorocha
296
40k
keavy
106
14k
cromwellryan
101
5.9k
Transcript
Flutter for Webを使ったログ監視アプ リ 株式会社ZOZOテクノロジーズ 開発部 山田尚吾 Copyright ©
ZOZO Technologies, Inc.
© ZOZO Technologies, Inc. 株式会社ZOZOテクノロジーズ 開発部 ZOZOTOWN Android担当 山田 尚吾
2 @yshogo87 @yshogo87
© ZOZO Technologies, Inc. 3 ・2018年9月入社 ・現在はZOZOTOWN Android担当 ・個人ではFlutterとFirebaseをよく触ってる ・一人開発が趣味
© ZOZO Technologies, Inc. 目次 4 ・Flutterとは ・Flutter for Webとは
・Flutter for Webを使ってログ監視サイトを作る ・実装方法 ・実際触ってみて感じた、メリット、デメリット ・まとめ
© ZOZO Technologies, Inc. Flutterとは 5 ・Googleが開発している、iOSとAndroid両方を1つのコードで動か すためのSDK (2017/5/12 に初リリース)
・2018/12/5 に開催されたFlutter Liveにてバージョン1.0が発表 ・現在も開発は活発に進んでいる
© ZOZO Technologies, Inc. Flutter for Webとは 6 ・Flutter Live
2018にてFlutterをWebでも動くようにするプロジェク ト「Humming Bird」発表 ・その後Google I/O 2019にて「Flutter for Web」となりテクニカル プレビューとしてリリース
© ZOZO Technologies, Inc. Flutter for Webとは 7
© ZOZO Technologies, Inc. 8 Flutter for Webを使ってログ監視サイトを作る
© ZOZO Technologies, Inc. Flutter for Webを使ってログ監視サイトを作る 9 ・DroidKaigi、try!
Swift、RubyKaigiで展示したファッションチェック アプリ FlutterとFirebase ML Kitを使ってカン ファレンス用デモアプリを作った話 https://techblog.zozo.com/entry/2019 /03/08/170000
© ZOZO Technologies, Inc. Flutter for Webを使ってログ監視サイトを作る 10 ・採点結果をFirestoreに保存し、カンファレンス中に結果の数値
を確認していた
© ZOZO Technologies, Inc. Flutter for Webを使ってログ監視サイトを作る 11 ・アプリで確認だとデメリットが多い
(インストールしないといけない、Firebaseコンソールに素早くアク セスできない etc..) Flutter for Webでソースコードを改変せずにデプロイ したい!!
© ZOZO Technologies, Inc. 12 手順
© ZOZO Technologies, Inc. 手順 13 ・Flutter for Webの開発環境を作る ・Flutter
for Webを既存プロジェクトに導入 ・ローカルで起動 ・Firebase Hostingにデプロイ
© ZOZO Technologies, Inc. 手順 14 ・Flutter for Webの開発環境を作る ・Flutter
for Webを既存プロジェクトに導入 ・ローカルで起動 ・Firebase Hostingにデプロイ そんなに甘くなかった、、、、
© ZOZO Technologies, Inc. 手順 15 ・Flutter for Webを既存プロジェクトに導入 現時点ではできない
(2019/6/20 時点)
© ZOZO Technologies, Inc. 手順 16 ・import先はWebとモバイルで異なっている import 'package:flutter/material.dart'; Flutter
(mobile) Flutter for Web import 'package:flutter_web/material.dart'; 補足:他にもあります。
© ZOZO Technologies, Inc. 手順 17 ・Flutter for Webでプロジェクトを作成し、ソースコードを持ってく る
・importを変更する ・Flutter (Mobile用)のプラグインを使っている場合はDart用のプ ラグインに変更
© ZOZO Technologies, Inc. 手順 18 マイグレーション方法もかかれている https://github.com/flutter/flutter_web/blob/master/docs/migration_guide.md
© ZOZO Technologies, Inc. 手順 19 ・`webdev build` コマンドでプロジェクトをビルド ・`webdev
serve -r` コマンドでローカルで起動する ・ http://127.0.0.1:8080 にアクセスすると表示できる
© ZOZO Technologies, Inc. 手順 20
© ZOZO Technologies, Inc. 手順 21 Firebase Hostingにデプロイ ・デプロイする前にfontを指定したjsonファイルを配置する →
https://github.com/flutter/flutter_web/blob/master/examples/custom_fonts/web/assets/FontManifest.json ・デプロイの手順は他のプロジェクトと同じなので割愛
© ZOZO Technologies, Inc. 手順 22
© ZOZO Technologies, Inc. 23 実際触ってみて感じた、メリット、デメリット
© ZOZO Technologies, Inc. 実際触ってみて感じた、メリット、デメリット 24 メリット ・100%モバイルコードがWebで動くわけではないが、ほとんどのコー ドはそのまま動く
・マテリアルデザインも忠実に再現されていて美しい ・DartはJavaとJavaScriptの良いところを持ってきたような言語で書 きやすい
© ZOZO Technologies, Inc. 実際触ってみて感じた、メリット、デメリット 25 デメリット ・文字列の選択ができない ・モバイルアプリをそのまま動かせるわけではない
・エラー文言がわかりにくい (DartをJavaScriptにコンパイルしてるので、Dart側でどんな問題が あったか特定しづらい) etc....
© 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 時点)
© ZOZO Technologies, Inc. 実際触ってみて感じた、メリット、デメリット 27 開発はちゃんと進んでる ・動作の安定化 ・CSSの改善
・Flutter本体のプロジェクトにマージしてそのまま動くようにする
© ZOZO Technologies, Inc. 28 まとめ
© ZOZO Technologies, Inc. まとめ 29 ・FlutterはモバイルアプリのためのSDKでそれをそのままWebでも 動くようにするプロジェクト ・現状はモバイルプロジェクトをそのまま動かせることはできない ・現状は「とりあえず動く」レベルものだと思う
・開発は活発なので今後の期待
None