Flutter Webのすゝめ

by qst_exe

Slide 1

Slide 1 text

Flutter Web ͷ͢ʍΊ ࣛࣇౡ.mk #11 2020-07-31 ͨ͘͢Μ

Slide 2

Slide 2 text

Agenda 1. ࣗݾ঺հ 2. Flutterͷ֓ཁ঺հ 3. Flutter Webͷॴײ

Slide 3

Slide 3 text

ࣗݾ঺հ ◆໊લɿͨ͘͢Μ ◆ࣗݾ঺հ ϑϦʔϥϯεΤϯδχΞ (ελʔτΞοϓͷWeb, εϚϗΞϓϦ։ൃࢧԉ) ࣛࣇౡ.mk, ώϥϚαͳͲͷίϛϡχςΟ׆ಈ

Slide 4

Slide 4 text

ϑΥϩʔɾνϟϯωϧΑΖ͘͠Ͱ͢ʂ

Slide 5

Slide 5 text

ྗΛೖΕ͍ͯΔίϛϡχςΟ׆ಈ ࣛࣇౡ.mk ώϥϚα ॳݟͷਓͰ΋ؾܰʹࢀՃͰ͖ΔίϛϡχςΟ ڞಉ։ൃͷΤϯδχΞίϛϡχςΟ

Slide 6

Slide 6 text

ࣛࣇౡͰ࠷΋ΞϓϦ։ൃʹڧ͍ ϑϦʔϥϯεΤϯδχΞ

Slide 7

Slide 7 text

݁࿦ ݸਓͰεϚϗΞϓϦΛ࡞ΔͳΒɺ FlutterͰΞϓϦ΋Web(؅ཧϖʔδ)΋࡞Ζ͏

Slide 8

Slide 8 text

ͳͥεϚϗΞϓϦ։ൃʁ • ΠϯϑϧΤϯαʔ΍ϓϩάϥϛϯάεΫʔϧͷ޿ࠂʹΑΔΤϯδχΞ ࢢ৔ͷϨϞϯࢢ৔Խ • εϚϗΞϓϦΤϯδχΞ͸ਓ͕଍Γͣʹߴ୯ՁͱͳΔ܏޲͕͋Δ • Web։ൃͱεϚϗΞϓϦ։ൃ͸஌ݟΛͦͷ··స༻Ͱ͖ͣɺ࣮຿Λੵ ·ͳ͍ͱ஌ݟ͕ஷ·Γʹ͍͘ εϚϗΞϓϦ։ൃͷ͢ʍΊ

Slide 9

Slide 9 text

Flutterͱ͸ • Google։ൃͷΫϩεϓϥοτϑΥʔϜ؀ڥ • iOSɺAndroidɺσεΫτοϓɺWebͷ։ൃ͕Ͱ͖Δ • ϗοτϦϩʔυͰଈϓϨϏϡʔ͕Մೳ • Widgetͱݺ͹ΕΔύʔπΛ૊Έ߹ΘͤΔ͜ͱͰɺࠓ෩ͳUI(ϚςϦΞϧ σβΠϯ)Λ؆୯ʹ࡞੒Ͱ͖Δ(VuetifyΈ͍ͨͳײ͡) • ݴޠ͸ϚΠφʔͳDart(Kotlin΍TypeScriptͬΆ͍)

Slide 10

Slide 10 text

ͳͥFlutter͔ • ΫϩεϓϥοτϑΥʔϜͰ͋Δ • Google͕։ൃ͍ͯ͠ΔͨΊ, ޙΖ६͕ڧ͘Firebaseͱ΋૬ੑ͕ྑ͍ • Ͱ͖ͨ͹͔Γͷ؀ڥͰϥΠόϧ͕গͳ͍ (Flutterͷ࣮຿ܦݧ1೥Ͱ΋ϕςϥϯͷྖҬʹ͸͍Δ)

Slide 11

Slide 11 text

Web support for Flutter

Slide 12

Slide 12 text

FlutterͰWebͷϑϩϯυΤϯυ΋։ൃͰ͖Δ • Ϗϧυ࣌ʹipa΍apkΛు͖ग़͢Α͏ʹ, HTML, JSϑΝΠϧΛు͖ग़ͤ Δ • SPAͬΆ͘੩తϖʔδͱͯ͠ѻ͑ΔͷͰ, GitHub Pages΍Netlify, Firebase HostingͰແྉެ։΋Մೳ • iOS/AndroidΞϓϦͷίʔυͰWebΞϓϦ΋ಈ͔͢͜ͱ͕Ͱ͖Δ

Slide 13

Slide 13 text

ෳ਺ͷݴޠΛ࢖͏ετϨε͔Β։์͞ΕΔ Dart(Flutter) JavaScript, TypeScript Vue(Nuxt), React(Next)

Slide 14

Slide 14 text

Firebaseͱ૬ੑ͕Α͘, αʔόϨεͰӡ༻ ✕ όοΫΤϯυΛFirebaseͰ୅ସ

Slide 15

Slide 15 text

࣮ࡍʹ࡞ͬͯΈͨ

Slide 16

Slide 16 text

ύοέʔδ؅ཧ Firebaseͷಋೖ͸ΞϓϦ൛ͱಉ͡Α ͏ʹઃఆͰ͖Δ (ͨͩ͠, ΞϓϦ൛ͱಉ͡όʔδϣϯ ʹ͸Ͱ͖ͳ͍໛༷) 16

Slide 17

Slide 17 text

ϕʔλ൛ͳͷͰɺຊ൪ӡ༻ʹ͸஫ҙ͕ඞཁ https://ﬂutter.dev/web

Slide 18

Slide 18 text

ײ૝ • ύοέʔδ͸Web൛ʹ͸ରԠ͍ͯ͠ͳ͍΋ͷ͕·ͩଟ͍ • Firebaseͷػೳ͸΄΅ϑϧͰ࢖͑ΔͷͰ, ΞϓϦͰݕূ͢Δલʹϓϩ τλΠϓΛಈ͔͢, ΞϓϦͷ؅ཧϖʔδͱ͍ͬͨ࢖͍ํ͕Մೳ • ίʔυͷڞ௨Խ͕೉ͯ͘͠΋, ΞϓϦͰ࡞ͬͨcomponentΛ submoduleԽ͓͚ͯ͠͹ϦϙδτϦΛ෼͚ͯ΋࢖͍ճͤΔ͸ͣ • ͋͘·Ͱβ൛ͳͷͰ, ຊ൪ӡ༻ʹ͸͘Ε͙Ε΋͝஫ҙΛʂ

Slide 19

Slide 19 text