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.2k
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.4k
yshogo
1
250
yshogo
0
8
yshogo
1
370
yshogo
1
140
yshogo
0
4.6k
yshogo
2
230
yshogo
0
350
Featured
See All Featured
trallard
15
810
dougneiner
56
5.4k
yeseniaperezcruz
302
31k
roundedbygravity
84
7.9k
sugarenia
233
880k
danielanewman
201
20k
cromwellryan
104
6.3k
thoeni
3
660
bkeepers
PRO
54
4.3k
marktimemedia
7
440
geeforr
333
29k
mongodb
23
3.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