安心して現場で学習できる環境として Flutter Web の管理サイトがおすすめな話

2023.06.05に開催された YOUTRUST x ゆめみ Flutter LT会@渋谷 にて登壇
https://yumemi.connpass.com/event/284933/

Transcript

1. #yumemi_grow
   ҆৺ͯ͠ݱ৔ͰֶशͰ͖Δ؀ڥͱͯ͠
   
   
   Flutter Web ͷ؅ཧαΠτ͕͓͢͢Ίͳ࿩
   πϧΦΧ - Hideki TSURUOKA
   UpdatedAt 2023.06.05
   YOUTRUST x ΏΊΈ Flutter LTձ@ौ୩
   

   View Slide

2. πϧΦΧ
   • ๭େख௨৴ࣄۀձࣾͷ৽نࣄۀ෦໳ʹॴଐ
   
   
   • FlutterΛ৮Γ࢝Ίͨͷ͸2020೥4݄ࠒʢFlutter 1.0͕ग़ͯ҆ఆޙʣ
   
   
   • ΤϯδχΞϦϯά×σβΠϯͷڥքྖҬʹؔ৺
   
   
   • Perfume͕޷͖
   Self-Introduction
   @h_tsuruo
   

   View Slide

3. Zennʹٕͯज़هࣄͷൃ৴
   pub.devύοέʔδͷެ։
   Speaker Deck
   OSS Contribute
   Personal Activities
   

   View Slide

4. 4
   Today’s Talk
   ຊ೔͓࿩͢Δ͜ͱ
   Flutter WebͰ؅ཧαΠτΛ
   
   
   ࡞ΔϝϦοτ͸ͨ͘͞Μ͋Δͱࢥ͍·͕͢ɺ
   
   
   ͦͷ1ͭʢڭҭੑʣΛମݧஊͱͯ͠঺հ
   ※؅ཧαΠτ: ΞΧ΢ϯτ؅ཧɺ஫จঢ়گͷ֬ೝɺ౷ܭ৘ใͷ෼ੳͳͲӡӦ͕ར༻͢ΔμογϡϘʔυΛ૝ఆ
   

   View Slide

5. 5
   ref. https://github.com/abuanwar072/Flutter-Responsive-Admin-Panel-or-Dashboard
   ※؅ཧαΠτͷΠϝʔδ
   

   View Slide

6. 6
   The Bene
   fi
   ts of Flu
   tt
   er Web Admin Sites
   No. ಛ௃ ϝϦοτ
   1
   ։ൃ༰қੑ
   
   
   (Ease of Development)
   Dartʹ౷Ұ͞ΕɺݴޠʹΑΔεΠονϯάίετ͕΄΅ͳ͍ɻ
   2
   ޮ཰ੑ
   
   
   (Efficiency)
   ڞ௨෦෼ͷιʔείʔυ͕ू໿͞Εɺӡ༻ίετ͕௿ݮɻ
   3
   ݕূ༰қੑ
   
   
   (Ease of Validation)
   Sandboxతͳ؀ڥͰ৽͍͠ΞΠσΟΞ΍ٕज़ͷ༗ޮੑΛ༰қʹݕ
   ূͰ͖Δʢྫ: Riverpod v2΍go_routerͷࢼݧಋೖͳͲʣɻ
   4
   ڭҭੑ
   
   
   (Educationality)
   ҆৺࣮ͯ͠຿ܦݧ͕٧ΊΔॳظϓϩδΣΫτͱͯ͠ڭҭʹదͯ͠
   ͍Δɻ˒ຊ೔ͷτϐοΫ
   

   View Slide

7. 7
   Flu
   tt
   er Web
   •Flutter 3.10ͰCanvasKitͷੑೳUP͠͞Βʹ࢖͍΍͘͢
   
   
   •ҰํͰɺSEOͳͲैདྷͷWebΞϓϦʹඞਢͳ෦෼͸ශऑ ※1
   
   
   •؅ཧαΠτͰͷར༻͸దͨ͠Ϣʔεέʔεͷ1ͭʢੲ͔Βʣ
   
   
   •؅ཧαΠτ༻ͷUIςϯϓϨʔτΛ࢖͑͹ϨΠΞ΢τߏங΋ָ ※2
   ؆୯ʹ͓͞Β͍
   ※1: ະରԠͱ͍͏ΑΓ༻్Λ໌֬ʹ੾Γ෼͚͍ͯΔೝࣝͰɺݕࡧΤϯδϯʹ࠷దԽ͢Δ৔߹͸HTMLΛར༻͢ΔͳͲదࡐదॴ
   
   
   ref. https://docs.flutter.dev/platform-integration/web/faq#search-engine-optimization-seo
   ※2: ϨεϙϯγϒͳAdmin Panel / Dashboard͕GitHubͰެ։͞Ε͍ͯͨΓ͢Δ
   
   
   ref. https://github.com/abuanwar072/Flutter-Responsive-Admin-Panel-or-Dashboard
   

   View Slide

8. 8
   ͢Ͱʹӡ༻͍ͯ͠ΔαʔϏεͷ
   
   
   ঎༻ιʔείʔυ͕͋Δͱ͠·͢
   iOS/AndroidͷϞόΠϧΞϓϦΛ૝ఆ
   

   View Slide

9. 9
   ৽͍͠ϝϯόʔ͕Ճೖͨ͠ࡍɺ
   
   
   ͲΜͳ෩ʹΩϟονΞοϓΛଅ͠·͔͢ʁ
   ྫʣυΩϡϝϯτΛ۱͔ΒಡΜͰ΋Β͏ɺίʔυϦʔσΟϯάଅ͢ɺϖΞϓϩɺ࣮ફ&ϨϏϡʔ etc…
   

   View Slide

10. 10
    ͓٬༷ʹ௚઀Өڹ͢Δ঎༻ιʔείʔυΛ
    
    
    ͍͖ͳΓ࿔Δͷ͸৺ཧతোน͕ߴ͍ʢਓ΋͍Δʣ
    ঎༻ιʔείʔυͰ΋ΠγϡʔΛখ͘͞੾Γग़ͯ͠ΞαΠϯ͢Δͱ͍͏ԦಓͰOKͳ৔߹͸໰୊ͳ͠
    

    View Slide

11. 11
    Flutter Webͷ؅ཧαΠτΛ࢖ͬͯ
    
    
    ҆৺ͯ͠ݱ৔ͰֶशͰ͖Δ؀ڥΛఏڙ͍ͯ͠·͢
    Flutterಛ༗ͷWidgetجຊಈ࡞΍νʔϜͰ࠾༻͍ͯ͠ΔΞʔΩςΫνϟʹ׳Εͯ΋Β͏͜ͱ͕ओͳ໨త
    

    View Slide

12. 12
    Multi Package
    MelosΛ࢖ͬͨϚϧνύοέʔδߏ੒Ͱ͓٬༷؀ڥΛ෼཭
    common
    app
    admin
    ͓٬༷͕࢖͏ϞόΠϧΞϓϦ؀ڥ
    ӡӦ͕࢖͏؅ཧαΠτ
    ΞϓϦͱ؅ཧαΠτͷڞ௨෦෼
    

    View Slide

13. 13
    ͓٬༷؀ڥͱ੾Γ཭ͨ͠
    
    
    adminύοέʔδʹดͯ͡։ൃ͠ܦݧΛੵΉ
    όά͕ࠞೖͯ͠΋͓٬༷ʹ௚઀ӨڹΛ༩͑ͳ͍ͱ͍͏৺ཧతͳ҆શੑΛ֬อ࣮ͭͭ͠຿ܦݧΛੵΉ
    

    View Slide

14. 14
    Step Up
    /admin /common /app
    ঎༻ΞϓϦέʔγϣϯίʔυ΁ஈ֊తʹࢀՃ
    Flutter Webͷ؅ཧαΠτ͸
    ͓٬༷؀ڥͱ੾Γ཭͞Ε͍ͯ
    ΔͷͰɺόά͕ࠞೖ͍ͯͯ͠
    ΋100%Өڹ͕ͳ͍ɻ
    1 2 3
    ֶश͕ਐΉͱνʔϜͰར༻͠
    ͍ͯΔύοέʔδͷཧղ΍ɺ
    
    
    ڞ௨ཁૉΛऔΓѻ͏common
    Λ࿔Δػձ͕૿͑Δɻ
    commonͷࢀরઌΛḷΔͱΞ
    ϓϦέʔγϣϯίʔυΛϦʔ
    σΟϯά͢Δػձ͕૿͑ɺ։
    ൃʹεϜʔζʹࢀՃͰ͖Δɻ
    

    View Slide

15. 15
    Summary
    ͓٬༷؀ڥͱ੾Γ཭͞Εͨ؀ڥͰ͸ɺ
    
    
    ҆৺࣮ͯ͠຿ܦݧΛੵΉ͜ͱ͕Ͱ͖ɺ
    
    
    Flutter Web ؅ཧαΠτ͸ͦͷ༻్ͱͯ͠΋༏ल
    

    View Slide

16. 16
    The Bene
    fi
    ts of Flu
    tt
    er Web Admin Sites
    No. ಛ௃ ϝϦοτ
    1
    ։ൃ༰қੑ
    
    
    (Ease of Development)
    Dartʹ౷Ұ͞ΕɺݴޠʹΑΔεΠονϯάίετ͕΄΅ͳ͍ɻ
    2
    ޮ཰ੑ
    
    
    (Efficiency)
    ڞ௨෦෼ͷιʔείʔυ͕ू໿͞Εɺӡ༻ίετ͕௿ݮɻ
    3
    ݕূ༰қੑ
    
    
    (Ease of Validation)
    Sandboxతͳ؀ڥͰ৽͍͠ΞΠσΟΞ΍ٕज़ͷ༗ޮੑΛ༰қʹݕ
    ূͰ͖Δʢྫ: Riverpod v2΍go_routerͷࢼݧಋೖͳͲʣɻ
    4
    ڭҭੑ
    
    
    (Educationality)
    ҆৺࣮ͯ͠຿ܦݧ͕٧ΊΔॳظϓϩδΣΫτͱͯ͠ڭҭʹదͯ͠
    ͍Δɻ˒ຊ೔ͷτϐοΫ
    

    View Slide

17. 17
    Fin
    ৽͍͠ϝϯόʔͷΩϟονΞοϓ؀ڥͱͯ͠
    
    
    Flutter WebͰ؅ཧαΠτɺ͍͔͕Ͱ͔͢ʁ
    

    View Slide