Tried Flutter Web

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

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

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. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠