Tried Flutter Web

ࣗݾ঺հ • Masaki Hikosakaʢ@_hiko1129ʣ • ήʔϜΤΠτͰΤϯδχΞ΍ͬͯ·͢ ʘ(^o^)ʗ • ීஈ͸Docker / CircleCI / Rails / React / Next.js / GCP / AWS / Firebase౳࢖ͬ ͓ͯ࢓ࣄͯ͠·͢ • ͸͡ΊͯͷLTͷͨΊۓுͯ͠·͢^^;

Flutter Web ࢼͨ͠Α

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

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

+ ↓ +

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

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

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

URLมΘΓ·ͨ͠ • pushNamed࢖ͬͨΒແࣄมΘΓ·ͨ͠ https://hiko1129.github.io/flutter-basic-layout/#/ MaterialApp( initialRoute: '/', routes: { '/': (context) => FirstPage(), '/second': (context) => SecondPage(), }, ); // … onPressed: () { Navigator.pushNamed(context, ‘/second’) } // …

్த͋Εʁͬͯͳͬͨ͜ͱ

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

Iconग़ͤ·ͨ͠ • assets/FontManifest.jsonॻ͍ͨΒग़ͤͨ [ { "family": "MaterialIcons", "fonts": [ { "asset": "https://fonts.gstatic.com/s/ materialicons/v42/flUhRq6tzZclQEJ-Vdg- IuiaDsNcIhQ8tQ.woff2" } ] } ]

ͦͷଞ ύϑΥʔϚϯεɺSEOͱ͔

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

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

chromeͷauditsͱ͔͸ Ͳ͏ͳͷʁ

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

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

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

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

͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠