Tried Flutter Web

Tried Flutter Web

"Flutter Meetup Tokyo #9"でのLT資料
https://flutter-jp.connpass.com/event/126419/

Flutter Webを試したときに得たものの共有です。

5f640cec4541b0978185c74870273dbc?s=128

hiko1129

May 22, 2019
Tweet

Transcript

  1. Tried Flutter Web

  2. ࣗݾ঺հ • Masaki Hikosakaʢ@_hiko1129ʣ • ήʔϜΤΠτͰΤϯδχΞ΍ͬͯ·͢ ʘ(^o^)ʗ • ීஈ͸Docker /

    CircleCI / Rails / React / Next.js / GCP / AWS / Firebase౳࢖ͬ ͓ͯ࢓ࣄͯ͠·͢ • ͸͡ΊͯͷLTͷͨΊۓுͯ͠·͢^^;
  3. Flutter Web ࢼͨ͠Α

  4. Flutter Web͸օ͞Μ͝ଘ஌ʂ Flutterͱಉ͡APIͰWeb্Ͱಈ͔ͤΔײ͡ͷ ΍ͭͰ͢ɻ

  5. ීஈReact (Next)Λ৮͍ͬͯΔͷͰ SPAߏ੒͕࣮ݱग़དྷͦ͏͔ࢼ͠·ͨ͠ʂ

  6. + ↓ +

  7. Firestore͸࢖͑Δʁ ΫΤϦύϥϝʔλ͸౉ͤΔʁ URL͸มΘΔʁ

  8. Firestore࢖͑·ͨ͠ • Web൛ͷfirestore͸dev_dependenciesΛมߋ ͢Ε͹ಈ͔ͤ·ͨ͠ dev_dependencies: build_runner: any build_web_compilers: '>=1.0.0 <2.0.0'

  9. ΫΤϦύϥϝʔλ࢖͑·ͨ͠ • onGenerateRoute࢖ͬͯ͝ʹΐ͝ʹΐ͢Ε͹ ͍͚·͢ɻͪΐͬͱ௕͍ͷͰ -> https:// github.com/hiko1129/flutter-pass- arguments-a-named-route/blob/master/lib/ main.dart

  10. URLมΘΓ·ͨ͠ • pushNamed࢖ͬͨΒແࣄมΘΓ·ͨ͠ https://hiko1129.github.io/flutter-basic-layout/#/ MaterialApp( initialRoute: '/', routes: { '/':

    (context) => FirstPage(), '/second': (context) => SecondPage(), }, ); // … onPressed: () { Navigator.pushNamed(context, ‘/second’) } // …
  11. ్த͋Εʁͬͯͳͬͨ͜ͱ

  12. IconͰͳ͍ͷ͕ͩ Ͳ͏ͨ͠Β…

  13. Iconग़ͤ·ͨ͠ • assets/FontManifest.jsonॻ͍ͨΒग़ͤͨ [ { "family": "MaterialIcons", "fonts": [ {

    "asset": "https://fonts.gstatic.com/s/ materialicons/v42/flUhRq6tzZclQEJ-Vdg- IuiaDsNcIhQ8tQ.woff2" } ] } ]
  14. ͦͷଞ ύϑΥʔϚϯεɺSEOͱ͔

  15. ϑΝΠϧαΠζͬͯ ͲΕ͙Β͍ʁ

  16. ී௨ • ࢼ͠ʹॻ͍ͨ΋ͷͷJSͷαΠζ͸285KB

  17. chromeͷauditsͱ͔͸ Ͳ͏ͳͷʁ

  18. ྑ͛͞ • ࣗ෼͕ॻ͍ͨ΋ͷͩͱԼͷΑ͏ʹͳͬͨɻத ਎͔͔͔ͩ͢͢ΒSEO௿͍ͷ͔΋ɻ

  19. λάͱ͔Ͳ͏ͳͬͯΔͷʁ

  20. Custom Elements͕ϝΠϯ? • h1ͱ͔h2ͱ͔͕Ͳͷ΢ΟδΣοτͱରԠ͢Δ ͔ෆ໌ɻݱঢ়ͩͱSEOऑͦ͏ͳҹ৅ɻ

  21. ऴΘΓʹ • ʮ͍ͭ͜ɾɾɾಈͧ͘ʯ͍ͬͯ͏ײͩͬͨ͡ɻςΫ χΧϧϓϨϏϡʔ͚ͩͲ͔ͳΓಈ͘ҹ৅ • Webͷਓ͚ؒͩͲFlutter࢖͍͖͍ͬͯͨͳʔͬͯ ࢥͬͨɻͨͩWebपΓͲ͏ͯ͘͠Δͷ͔ؾʹͳΔɻ • Cloud Functions͕DartରԠͨ͠Βશ෦DartͰॻ͘

    ͷ΋͋Γʹͳͬͯ͘ΔͷͰ͸ʁͬͯײͨ͡
  22. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠