Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

ツルオカ

June 05, 2023
Tweet

More Decks by ツルオカ

Other Decks in Technology

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