安心して現場で学習できる環境として 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ձ@ौ୩
2. πϧΦΧ • ๭େख௨৴ࣄۀձࣾͷ৽نࣄۀ෦໳ʹॴଐ • FlutterΛ৮Γ࢝Ίͨͷ͸2020೥4݄ࠒʢFlutter 1.0͕ग़ͯ҆ఆޙʣ • ΤϯδχΞϦϯά×σβΠϯͷڥքྖҬʹؔ৺ • Perfume͕޷͖ Self-Introduction @h_tsuruo
3. Zennʹٕͯज़هࣄͷൃ৴ pub.devύοέʔδͷެ։ Speaker Deck OSS Contribute Personal Activities
4. 4 Today’s Talk ຊ೔͓࿩͢Δ͜ͱ Flutter WebͰ؅ཧαΠτΛ ࡞ΔϝϦοτ͸ͨ͘͞Μ͋Δͱࢥ͍·͕͢ɺ ͦͷ1ͭʢڭҭੑʣΛମݧஊͱͯ͠঺հ ※؅ཧαΠτ: ΞΧ΢ϯτ؅ཧɺ஫จঢ়گͷ֬ೝɺ౷ܭ৘ใͷ෼ੳͳͲӡӦ͕ར༻͢ΔμογϡϘʔυΛ૝ఆ
5. 5 ref. https://github.com/abuanwar072/Flutter-Responsive-Admin-Panel-or-Dashboard ※؅ཧαΠτͷΠϝʔδ
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) ҆৺࣮ͯ͠຿ܦݧ͕٧ΊΔॳظϓϩδΣΫτͱͯ͠ڭҭʹదͯ͠ ͍Δɻ˒ຊ೔ͷτϐοΫ
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
8. 8 ͢Ͱʹӡ༻͍ͯ͠ΔαʔϏεͷ ঎༻ιʔείʔυ͕͋Δͱ͠·͢ iOS/AndroidͷϞόΠϧΞϓϦΛ૝ఆ
9. 9 ৽͍͠ϝϯόʔ͕Ճೖͨ͠ࡍɺ ͲΜͳ෩ʹΩϟονΞοϓΛଅ͠·͔͢ʁ ྫʣυΩϡϝϯτΛ۱͔ΒಡΜͰ΋Β͏ɺίʔυϦʔσΟϯάଅ͢ɺϖΞϓϩɺ࣮ફ&ϨϏϡʔ etc…
10. 10 ͓٬༷ʹ௚઀Өڹ͢Δ঎༻ιʔείʔυΛ ͍͖ͳΓ࿔Δͷ͸৺ཧతোน͕ߴ͍ʢਓ΋͍Δʣ ঎༻ιʔείʔυͰ΋ΠγϡʔΛখ͘͞੾Γग़ͯ͠ΞαΠϯ͢Δͱ͍͏ԦಓͰOKͳ৔߹͸໰୊ͳ͠
11. 11 Flutter Webͷ؅ཧαΠτΛ࢖ͬͯ ҆৺ͯ͠ݱ৔ͰֶशͰ͖Δ؀ڥΛఏڙ͍ͯ͠·͢ Flutterಛ༗ͷWidgetجຊಈ࡞΍νʔϜͰ࠾༻͍ͯ͠ΔΞʔΩςΫνϟʹ׳Εͯ΋Β͏͜ͱ͕ओͳ໨త
12. 12 Multi Package MelosΛ࢖ͬͨϚϧνύοέʔδߏ੒Ͱ͓٬༷؀ڥΛ෼཭ common app admin ͓٬༷͕࢖͏ϞόΠϧΞϓϦ؀ڥ ӡӦ͕࢖͏؅ཧαΠτ ΞϓϦͱ؅ཧαΠτͷڞ௨෦෼
13. 13 ͓٬༷؀ڥͱ੾Γ཭ͨ͠ adminύοέʔδʹดͯ͡։ൃ͠ܦݧΛੵΉ όά͕ࠞೖͯ͠΋͓٬༷ʹ௚઀ӨڹΛ༩͑ͳ͍ͱ͍͏৺ཧతͳ҆શੑΛ֬อ࣮ͭͭ͠຿ܦݧΛੵΉ
14. 14 Step Up /admin /common /app ঎༻ΞϓϦέʔγϣϯίʔυ΁ஈ֊తʹࢀՃ Flutter Webͷ؅ཧαΠτ͸ ͓٬༷؀ڥͱ੾Γ཭͞Ε͍ͯ ΔͷͰɺόά͕ࠞೖ͍ͯͯ͠ ΋100%Өڹ͕ͳ͍ɻ 1 2 3 ֶश͕ਐΉͱνʔϜͰར༻͠ ͍ͯΔύοέʔδͷཧղ΍ɺ ڞ௨ཁૉΛऔΓѻ͏common Λ࿔Δػձ͕૿͑Δɻ commonͷࢀরઌΛḷΔͱΞ ϓϦέʔγϣϯίʔυΛϦʔ σΟϯά͢Δػձ͕૿͑ɺ։ ൃʹεϜʔζʹࢀՃͰ͖Δɻ
15. 15 Summary ͓٬༷؀ڥͱ੾Γ཭͞Εͨ؀ڥͰ͸ɺ ҆৺࣮ͯ͠຿ܦݧΛੵΉ͜ͱ͕Ͱ͖ɺ Flutter Web ؅ཧαΠτ͸ͦͷ༻్ͱͯ͠΋༏ल
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) ҆৺࣮ͯ͠຿ܦݧ͕٧ΊΔॳظϓϩδΣΫτͱͯ͠ڭҭʹదͯ͠ ͍Δɻ˒ຊ೔ͷτϐοΫ
17. 17 Fin ৽͍͠ϝϯόʔͷΩϟονΞοϓ؀ڥͱͯ͠ Flutter WebͰ؅ཧαΠτɺ͍͔͕Ͱ͔͢ʁ