Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
コードで見るFlutterアプリの実装
Search
konifar
February 09, 2018
Programming
28
55k
コードで見るFlutterアプリの実装
DroidKaigi 2018 2日目 17:40 ~ 18:10
konifar
February 09, 2018
Tweet
Share
More Decks by konifar
See All by konifar
オーナーシップを持つ領域を明確にする
konifar
13
3.2k
雑に思考を整理する技術と効能
konifar
60
29k
何のための個人目標設定?
konifar
27
13k
30点で打席に立つ
konifar
79
47k
Linterでチョット安心 iOS多言語化対応 / ios-i18n-linter
konifar
1
870
VPoEとして1年 もっとこうすればよかった3選 / VPoE Retrospective
konifar
13
6k
Introduction to API Testing Automation by Postman
konifar
1
3.4k
Kyash iOSアプリのQAの歴史
konifar
1
9.6k
エンジニアから見たKyashのPdMのおしごと / An engineer's perspective for PdM roles in Kyash
konifar
3
1.8k
Other Decks in Programming
See All in Programming
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
340
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
940
Anthropic Cookbook のおすすめレシピ
schroneko
7
1k
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
禅の心を手に入れよ
eltociear
1
120
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
840
2 週間で Twitter Bot を作ってみた
contour_gara
0
610
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
220
VS Code をプロダクトにどう取り込むか
onomax
1
420
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
7
990
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
390
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1025
450k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
The Cult of Friendly URLs
andyhume
74
5.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
260
12k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
121
39k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
Documentation Writing (for coders)
carmenintech
60
3.9k
KATA
mclloyd
15
12k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
116
18k
Transcript
ίʔυͰݟΔ FlutterΞϓϦͷ࣮ 'SJ %SPJE,BJHJ !LPOJGBS
None
Kyash Inc. • Sending and receiving money with kyash
is easy breeze • HP : https://kyash.co/ • Store : https://goo.gl/C594Ri Konifar’s QR
Main topic
DroidKaigi2018 Flutter App https://github.com/konifar/droidkaigi2018-flutter
ࠓ͢͜ͱ • Android/iOSΞϓϦ͕”࡞ΕΔ”ͷΘ͔ͬͨ • “ۀ”Ͱ࠾༻Ͱ͖Δͷʁ
ۀͰ࠾༻͢Δ࣌ʹߟ͑Δ͜ͱ • ੜଘՄೳੑ ެࣜͷαϙʔτ۩߹ɺίϛϡχςΟͷ׆ൃ͞ • ࣮ ϨΠΞτɺωοτϫʔΫ௨৴ɺΩϟογϡ • σόοάɺςετ σόοάπʔϧɺCIɺςετϑϨʔϜϫʔΫ
• ӡ༻ Push NotificationɺAnalyticsɺςετ৴ɺϦϦʔε
ۀͰ࠾༻͢Δ࣌ʹߟ͑Δ͜ͱ • ੜଘՄೳੑ ެࣜͷαϙʔτ۩߹ɺίϛϡχςΟͷ׆ൃ͞ • ࣮ ϨΠΞτɺωοτϫʔΫ௨৴ɺΩϟογϡ • σόοάɺςετ σόοάπʔϧɺCIɺςετϑϨʔϜϫʔΫ
• ӡ༻ Push NotificationɺAnalyticsɺςετ৴ɺϦϦʔε .BJOUPQJD
ۀͰ࠾༻͢Δ࣌ʹߟ͑Δ͜ͱ • ੜଘՄೳੑ ެࣜͷαϙʔτ۩߹ɺίϛϡχςΟͷ׆ൃ͞ • ࣮ ϨΠΞτɺωοτϫʔΫ௨৴ɺΩϟογϡ • σόοάɺςετ σόοάπʔϧɺCIɺςετϑϨʔϜϫʔΫ
• ӡ༻ Push NotificationɺAnalyticsɺςετ৴ɺϦϦʔε ͜ͷΜҰ෦͔͚Ͱ৮Ε·͢
Today’s goal • FlutterΒͳ͔ͬͨਓ => ʮԿ͔࡞ͬͯΈΑ͏͔ͳʯ • Flutterͬͯͨਓ => ʮ͔ͨ͠͠ΒۀͰ͑Δ͔ʁʯ
ࠓ͞ͳ͍͜ͱ • Dartͷݴޠ༷ͷ => JavaʹࣅͯΔɻlanguage-tourΑ͍ɻhttps://www.dartlang.org/guides/language/language-tour • FlutterͷηοτΞοϓͷ => ެࣜυΩϡϝϯτ͕खް͘આ໌ͯ͘͠Ε͍ͯΔɻ https://flutter.io/setup/
• Flutterͷ෦࣮ͷ => https://docs.google.com/presentation/d/1B3p0kP6NV_XMOimRV09Ms75ymIjU5gr6GGIX74Om_DE/edit#slide=id.g2388ebc691_2_112 • ઃܭͷ => ΄ͱΜͲReactͱಉٞ͡ɻ http://fluttersamples.com/ • طଘΞϓϦʹFlutterΛಋೖ͢Δ => Έͱͯ͠Ͱ͖Δɻ https://github.com/flutter/flutter/tree/master/examples/platform_view • iOSͷ => ϦϦʔεେมͱ͚͓͖͍ͩ͑ͯͨɻ
Agenda 1. Flutterͷ͓͞Β͍ (5) 1. Flutterͱ 2. ReactNativeͱͷҧ͍ 3. Androider͔ΒݟͨFlutter
2. Flutterͷίʔυ (15) 1. WidgetʢجຊɺWidgetπϦʔͷߏஙʣ 2. σʔλͷѻ͍ʢωοτϫʔΫ௨৴ɺΩϟογϡʣ 3. ҰҰ (5)
1. Flutterͷ͓͞Β͍
Flutterͱ • OSਪͷσβΠϯʹ߹Θͤͨ៉ྷͳΞϓϦΛ ૉૣ͘࡞ΔͨΊͷΫϩεϓϥοτϑΥʔϜ SDK • Googleɻ։ൃݴޠDart • ϨΠΞτxmlͰͳ͘DartͰWidget Tree
Λॻ͘
ReactNativeͱͷҧ͍ Flutter ReactNative Language Dart Javascript UI Support Support officially
Depends on 3rd party libraries Rendering Own engine JS bridge & Native https://flutter.io/faq/
๛ͳWidget • Material Design Guidelineʹग़ͯ͘Δύλʔϯ ͷUI΄΅શͯެࣜʹαϙʔτ͞Ε͍ͯΔ • WidgetΛΓɺ͍͜ͳ͢͜ͱ͕ߴʹ։ൃ ্͍ͯ͘͠Ͱͱͯॏཁ
ྫ : Scaffold
ྫ : Scaffold "QQ#BS
ྫ : Scaffold %SBXFS
ྫ : Scaffold
ྫ : Scaffold
https://flutter.io/widgets/ A lots of Widgets!!
Androider͔ΒݟͨFlutter • IntelliJͰ։ൃͰ͖Δ • DartJavaͱࣅͯΔɻඪ४ϥΠϒϥϦ͕๛ • Hot ReloadͰमਖ਼͕1ඵͰөɻөͰ͖ͳ ͍࣌ϑϧϦϩʔυ͕ඞཁͱڭ͑ͯ͘ΕΔɻ ϑϧϦϩʔυ10ඵ͘Β͍ʢ࠷ߴʣ
2. ίʔυͰݟΔFlutter
2-1. Widget
Widgetͷجຊ 1. ͯ͢WidgetͰ͋Δ 2. statelessͱstatefulͷೋछྨ͕͋Δ 3. Widget TreeΛΈཱͯΔ
ͯ͢WidgetͰ͋Δ • Icon = Widget • IconButton = Widget •
Positioned = Widget! • ScaleTransition = Widget!!
ͯ͢WidgetͰ͋Δ • Icon = Widget • IconButton = Widget •
Positioned = Widget! • ScaleTransition = Widget!!
ͯ͢WidgetͰ͋Δ • Icon = Widget • IconButton = Widget •
Positioned = Widget • ScaleTransition = Widget!!
ͯ͢WidgetͰ͋Δ • Icon = Widget • IconButton = Widget •
Positioned = Widget • ScaleTransition = Widget "OJNBUJPO
ͯ͢WidgetͰ͋Δ "OJNBUJPO
Stateless & Stateful • ঢ়ଶΛ࣋ͨͳ͍Widgetstatelessʹ͢Δ • ௨৴݁ՌϢʔβʔͷૢ࡞Ͱಈతʹมߋ͕ى ͖Δ߹ͳͲɺstateΛ͖࣋ͭwidget statefulʹ͢Δ
statefulͷྫ: Loadingͷදࣔ
Loadingͷදࣔ -PBEJOHTUBUF
Loadingͷදࣔ $BMMFEPOMZpSTUUJNF
Loadingͷදࣔ -PBEUIFSPPN UBC MJTU
Loadingͷදࣔ $BMMFEBGUFSMPBEJOH
Loadingͷදࣔ $IBOHFETUBUF JOTFU4UBUF
Loadingͷදࣔ TUBUF͕ॻ͖ΘΔͱ CVJME ͕ݺΕͯ8JEHFU͕ॻ͖ΘΔ
ϙΠϯτ • ͲͷWidget͕stateΛ͖͔࣋ͭΛܾΊΔͷ͕ ͍ͪΜେࣄ • ͜ͷTutorialΛಡΉͱstateͷߟ͑ํ͕Θ͔Δ https://flutter.io/tutorials/interactive
2-2. Widget Tree
Widget Tree • FlutterͰWidgetΛೖΕࢠʹͯ͠πϦʔͷΑ ͏ʹϨΠΞτΛΈཱ͍ͯͯ͘ • IntelliJͷFlutter plugin͕αϙʔτͯ͘͠ΕΔ
ಈը : https://goo.gl/wubWiE
Widget Tree ิʢOption + EnterʣΛͬͯWidget TreeΛ ΜͰ͍͖ɺ͍ํ͕Θ͔Βͳ͚ΕWidgetͷ ΫϥεͷϓϩύςΟΛݟͯཧղ͢Δ͜ͱ
2-3. σʔλͷѻ͍
σʔλͷѻ͍ 1. ωοτϫʔΫܦ༝Ͱऔಘ 2. Ϟσϧͷม 3. ϩʔΧϧͰͷΩϟογϡ
FirebaseΛ͔ͭ͏ ެࣜplugin͕༻ҙ͞Ε͍ͯΔ • cloud_firestore https://github.com/flutter/plugins/tree/master/packages/cloud_firestore • firebase_database https://github.com/flutter/plugins/tree/master/packages/firebase_database • firebase_storage
https://github.com/flutter/plugins/tree/master/packages/firebase_storage
cloud_store͔ΒϚΠηογϣϯऔಘ users / $userId / favorites / $sessionId { favorite
: boolean }
cloud_store͔ΒϚΠηογϣϯऔಘ users / $userId / favorites / $sessionId { favorite
: boolean }
cloud_store͔ΒϚΠηογϣϯऔಘ users / $userId / favorites / $sessionId { favorite
: boolean }
cloud_store͔ΒϚΠηογϣϯऔಘ users / $userId / favorites / $sessionId { favorite
: boolean }
httpϥΠϒϥϦΛ͏ • Dartͷhttp package + async, await • dart:convert Ͱύʔε
ηογϣϯҰཡͷऔಘ https://droidkaigi.jp/2018/ sessionize/all.json
ηογϣϯҰཡͷऔಘ
ηογϣϯҰཡͷऔಘ
ϞσϧͷϚοϐϯά • convertϥΠϒϥϦΛͬͯखಈͰΔ͔ • built_valueΛͬͯdeserialize͢Δ͔ https://github.com/google/built_value.dart
Preferenceͷอଘ • ެࣜͷshared_preferences plugin͕͋Δ https://github.com/flutter/plugins/tree/master/packages/shared_preferences • Android/iOSͱʹಈ͘
લճ։͍ͨλϒҐஔͷอଘ
લճ։͍ͨλϒҐஔͷอଘ
લճ։͍ͨλϒҐஔͷอଘ
લճ։͍ͨλϒҐஔͷอଘ
SQLite • sqfliteͰSQLiteΛૢ࡞͢ΔʢAndroid / iOSʣ https://github.com/tekartik/sqflite • Raw SQLͷ࣮ߦʹՃ͑ͯɺInsertɺDeleteɺ UpdateͳͲͷૢ࡞ͷHelper͕༻ҙ͞Ε͍ͯΔ
3. ҰҰ
Q1. CI·ΘͤΔʁ A. Yes ͨͩ͠ɺFlutter x86_64-linux-gnu/ libstdc++.so.6 version GLIBCXX_3.4.18 ͕ඞཁ
ͳͷͰɺಉόʔδϣϯͷڥͰCIΛճ͢ඞཁ͕ ͋Δɻ
Travisͷྫ
Travisͷྫ
Travisͷྫ Setup Flutter
Travisͷྫ Run test
Q2. AnalyticsͲ͏͢Δͷʁ A. FirebaseAnalytics pluginΛ͔ͭ͏ https://github.com/flutter/plugins/tree/master/packages/firebase_analytics
ϖʔδભҠͷτϥοΩϯά
ϩάͷૹ৴
Q3. Push NotificationͲ͏͢Δʁ A. FirebaseMessaging pluginΛ͔ͭ͏ https://github.com/flutter/plugins/tree/master/packages/firebase_messaging
Q4. Animationαϙʔτ͞ΕͯΔʁ A. Yes AnimationɺTransitionWidgetͰදݱ͢Δͷ ͰɺΓํAndroidͱ͍ͩͿҧ͏ https://flutter.io/animations/
Animation Examples ಈը : https://goo.gl/npYoj1
Q5. ϢχοτςετͲ͏ॻ͘ʁ A. mockito.dartɺtest/test.dart Λ͔ͭ͏ https://flutter.io/testing/
Json͔ΒϞσϧʹύʔε͢Δςετ
Json͔ΒϞσϧʹύʔε͢Δςετ
Json͔ΒϞσϧʹύʔε͢Δςετ
Q6. ଟݴޠԽͲ͏Δͷʁ A. dart:intlΛ͔ͭ͏ https://flutter.io/tutorials/internationalization/ ͨͩ͠ɺstrings.xmlͱൺͯΘΓͱ໘ Widgetͷςετ͕ίέΔͷͰɺtester.pump()Λ ݺΜͰ͓͘ϫʔΫΞϥϯυ͕ඞཁ https://github.com/flutter/flutter/issues/1865
Q7. Ϋϥογϡϩάͷऩूํ๏ʁ A. Firebase Crash Reporting ·ͨ SentryΛ ͔ͭ͏ https://github.com/flutter/flutter/issues/614
https://firebase.google.com/docs/crash https://pub.dartlang.org/packages/sentry
Q8. ϥΠϒϥϦΛ୳͢ͱ͖ʁ A. ެࣜϓϥάΠϯ or dart libraryΛݕࡧ͠Α͏ https://github.com/flutter/plugins https://pub.dartlang.org/flutter/packages
None
None
Lots of Libraries!
·ͱΊ
FlutterͷϙΠϯτ • ͲΜͳWidget͕͋Δ͔Δͷ͕େࣄ • ര։ൃͷͨΊʹIntelliJΛ͍͜ͳͦ͏ • ެࣜυΩϡϝϯτͱαϯϓϧ͕๛ͳͷͰࢀ ߟʹ͠Α͏
“ۀ”Ͱ͔ͭ͑Δͷ͔ʁ
͔ͭ͑ͦ͏
݁ہϓϩμΫγϣϯʹ ಥͬࠐΜͰΈͳ͍ͱΘ͔Βͳ͍
ཁ͢Δʹ ”֮ޛ” ࣍ୈ
Kyash Inc. ʹͯɺދࢹᚳʑͱ Ϳͬ͜ΈͷػձΛ͍ͬͯ·͢
Thanks!