Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Flutter Webのすゝめ

Flutter Webのすゝめ

「鹿児島.mk #11 おかえりオンラインLT大会」で発表した内容です。
https://kagoshima-mk.connpass.com/event/182417/

Flutter Webの所感についてです。

B14ef08f92c7f31e679d991dafd7d77f?s=128

qst_exe

July 31, 2020
Tweet

More Decks by qst_exe

Other Decks in Programming

Transcript

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

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

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

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

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

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

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

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

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

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

  11. Web support for Flutter

  12. FlutterͰWebͷϑϩϯυΤϯυ΋։ൃͰ͖Δ • Ϗϧυ࣌ʹipa΍apkΛు͖ग़͢Α͏ʹ, HTML, JSϑΝΠϧΛు͖ग़ͤ Δ • SPAͬΆ͘੩తϖʔδͱͯ͠ѻ͑ΔͷͰ, GitHub Pages΍Netlify,

    Firebase HostingͰແྉެ։΋Մೳ • iOS/AndroidΞϓϦͷίʔυͰWebΞϓϦ΋ಈ͔͢͜ͱ͕Ͱ͖Δ
  13. ෳ਺ͷݴޠΛ࢖͏ετϨε͔Β։์͞ΕΔ Dart(Flutter) JavaScript, TypeScript Vue(Nuxt), React(Next)

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

  15. ࣮ࡍʹ࡞ͬͯΈͨ

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

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

  18. ײ૝ • ύοέʔδ͸Web൛ʹ͸ରԠ͍ͯ͠ͳ͍΋ͷ͕·ͩଟ͍ • Firebaseͷػೳ͸΄΅ϑϧͰ࢖͑ΔͷͰ, ΞϓϦͰݕূ͢Δલʹϓϩ τλΠϓΛಈ͔͢, ΞϓϦͷ؅ཧϖʔδͱ͍ͬͨ࢖͍ํ͕Մೳ • ίʔυͷڞ௨Խ͕೉ͯ͘͠΋,

    ΞϓϦͰ࡞ͬͨcomponentΛ submoduleԽ͓͚ͯ͠͹ϦϙδτϦΛ෼͚ͯ΋࢖͍ճͤΔ͸ͣ • ͋͘·Ͱβ൛ͳͷͰ, ຊ൪ӡ༻ʹ͸͘Ε͙Ε΋͝஫ҙΛʂ
  19. ݁࿦ ݸਓͰεϚϗΞϓϦΛ࡞ΔͳΒɺ FlutterͰΞϓϦ΋Web(؅ཧϖʔδ)΋࡞Ζ͏

  20. ΞϓϦ։ൃҊ݅ (εϚϗ, Web)ืूதͰ͢ʂ

  21. Thank You!!