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