YOUTRUSTでやった技術発信まとめ

2023.06.05 (#1) ColorFiltered でカメラフィルタを実装する
https://speakerdeck.com/kumamotone/colorfiltered-de-kamerahuirutawoshi-zhuang-suru

2023.07.24 (#2) スワイプで閉じれる画像ビューアを作る
https://speakerdeck.com/kumamotone/suwaipudebi-zireruhua-xiang-viewerwozuo-ru

2023.09.29 (#3) VSCodeから一発でProxymanを起動する
https://speakerdeck.com/kumamotone/vscodekara-fa-teproxymanwoqi-dong-suru

2023.12.08 (#4) Integration Test で パフォーマンス計測する
https://speakerdeck.com/kumamotone/integration-test-de-pahuomansuji-ce-suru

2023.06.07: WWDC23 Platforms State of the Union の気になりポイントまとめ
https://tech.youtrust.co.jp/entry/2023/06/07/171250

2023.07.05: 最近知った Visual Studio Code の機能を Flutter アプリ開発の観点からご紹介
https://tech.youtrust.co.jp/entry/2023/07/05/190658

2023.08.30: アプリ開発時の通信デバッグに便利な Proxyman の Scripting Tool の使い方
https://tech.youtrust.co.jp/entry/2023/08/30/190746

2023.09.26: #DroidKaigi 2023 参加レポート
https://tech.youtrust.co.jp/entry/2023/09/26/180404

2023.11.10: #FlutterKaigi 2023 参加レポート
https://tech.youtrust.co.jp/entry/2023/11/10/205518

2024.01.19: YOUTRUSTアプリでのモーダルの使われ方
https://tech.youtrust.co.jp/entry/2024/01/19/174405

2024.03.15: 仕様書には載っていない、YOUTRUSTアプリの細かなUX改善の話
https://tech.youtrust.co.jp/entry/2024/03/15/134917

Transcript

1. YOUTRUSTͰ΍ٕͬͨज़ൃ৴·ͱΊ 2024/03/25 YOUTRUST x ΏΊΈ Flutter LTձ #5 x.com/kumamo_tone
2. • 2016.04ʙ2019.11: Ϡϑʔגࣜձࣾ iOS/AndroidΤϯδχΞ • 2019.12ʙ2023.04: גࣜձࣾϝϧϖΠ iOSΤϯδχΞ • 2023.05ʙ2023.03: גࣜձࣾYOUTRUST FlutterΤϯδχΞ • 2024.04ʙ: ϑϦʔϥϯεʁ ۽ຊ ࿨ਖ਼ (͘·΋Μ) (@kumamo_tone)
3. • YOUTRUST Tech Blog • 2023.06.07: WWDC23 Platforms State of the Union ͷؾʹͳΓϙΠϯτ·ͱΊ • 2023.07.05: ࠷ۙ஌ͬͨ Visual Studio Code ͷػೳΛ Flutter ΞϓϦ։ൃͷ؍఺͔Β͝঺հ • 2023.08.30: ΞϓϦ։ൃ࣌ͷ௨৴σόοάʹศརͳ Proxyman ͷ Scripting Tool ͷ࢖͍ํ • 2023.09.26: #DroidKaigi 2023 ࢀՃϨϙʔτ • 2023.11.10: #FlutterKaigi 2023 ࢀՃϨϙʔτ • 2024.01.19: YOUTRUSTΞϓϦͰͷϞʔμϧͷ࢖ΘΕํ • 2024.03.15: ࢓༷ॻʹ͸ࡌ͍ͬͯͳ͍ɺYOUTRUSTΞϓϦͷࡉ͔ͳUXվળͷ࿩ • YOUTRUST x ΏΊΈ Flutter LTձ@ौ୩ • 2023.06.05 (#1) ColorFiltered ͰΧϝϥϑΟϧλΛ࣮૷͢Δ • 2023.07.24 (#2) εϫΠϓͰด͡ΕΔը૾ViewerΛ࡞Δ • 2023.09.29 (#3) VSCode͔ΒҰൃ で ProxymanΛىಈ͢Δ • 2023.12.08 (#4) Integration Test Ͱ ύϑΥʔϚϯεܭଌ͢Δ YOUTRUSTͰ΍ٕͬͨज़ൃ৴·ͱΊ
4. ͓ؾʹೖΓϕετ5Λ঺հ͠·͢
5. ୈ5Ґ: εϫΠϓͰด͡ΕΔը૾ViewerΛ࡞Δ ϙΠϯτ • εϫΠϓͰด͡ΕΔը૾ϏϡʔΞ͸ɺInteractiveViewerͱɺListenerͷ૊ Έ߹ΘͤͰҙ֎ͱίϯύΫτʹ࣮૷͢Δ͜ͱ͕Ͱ͖Δ • SlideTransition/FadeTransitionͳͲͷTransitionܥͷWidget΍ɺHeroɺ PageRouteͷbuildTransitionΛར༻͢ΔͱɺࣗવͳΞχϝʔγϣϯΛಋ ೖͰ͖Δ • Flutterͷߴ඼࣭ͳϨϯμϦϯάΤϯδϯ͸Ξχϝʔγϣϯͱ૬ੑ͕ྑ͍ From YOUTRUST x ΏΊΈ Flutter LTձ@ौ୩ #2 2023.07.24 ৳ͼ͠Ζ • ϦϙδτϦΛެ։͠ͳ͔ͬͨʢۙ೔ެ։༧ఆʣ
6. ୈ4Ґ: ࠷ۙ஌ͬͨ VSCode ͷػೳΛFlutter ΞϓϦ։ൃͷ؍఺͔ Β͝঺հ • JetBrainsܥͷIDEେ޷͖ͳචऀ͕ɺϑϧλΠϜͰFlutterΤϯδχΞΛ͢ ΔΑ͏ʹͳֶͬͯΜͩVSCodeͷศརػೳΛଟ਺঺հ͍ͯ͠Δ • ⇧ ⌘ B: .vscode/tasks.json ͷλεΫΛ࣮ߦ • ಛఆͷ֦ுࢠͷϑΝΠϧΛදࣔ΍ݕࡧ͔Βআ֎͢Δ • "editor.codeActionsOnSave": { "source. fi xAll": true } Λ༗ޮʹ͢Δ • Flutter Links ֦ுػೳ ৳ͼ͠Ζ • GitHub Copilot ʹݴٴ͔ͨͬͨ͠ɻӈΫϦοΫͷ ʮCopilot > ͜ ΕΛमਖ਼͢Δʯ͕ɺด͡Χοίͷؔ࿈͕Α͘෼͔Βͳ͘ͳͬͨͱ ͖ͳͲʹศར From YOUTRUST Tech Blog 2024.07.05 ϙΠϯτ
7. ୈ3Ґ: VSCode͔ΒҰൃ で ProxymanΛىಈ͢Δ • tasks.json / multi-command֦ு / shell ίϚϯυΛ૊Έ߹ Θͤͨ΋ͷΛ keybind ʹઃఆ͢Δ͜ͱͰɺʮίʔυॻ͖ ׵͑ʯʮϓϩηεىಈʯʮHot RestartʯͳͲࣗ༝౓ͷߴ ͍Ұ࿈ͷॲཧΛγϣʔτΧοτΩʔҰൃͰߦ͏͜ͱ͕Ͱ͖ Δ • git update-index —skip-worktree ίϚϯυΛ࢖͏ͱgit ؅ ཧԼʹ͋ΔϑΝΠϧΛ͋͑ͯແࢹ͢Δ͜ͱ͕Ͱ͖Δ From YOUTRUST x ΏΊΈ Flutter LTձ@ौ୩ #3 2023.09.29 ৳ͼ͠Ζ • λΠτϧͷϢʔεέʔε͕ಛघͳͷͰ௚઀ࢀߟʹͳΔਓ͕ͨͿΜ΄ ΅͍ͳ͍ ϙΠϯτ
8. ୈ2Ґ: ࢓༷ॻʹ͸ࡌ͍ͬͯͳ͍ɺYOUTRUSTΞϓϦͷࡉ͔ͳUX վળͷ࿩ • ϞόΠϧΞϓϦΒ͍͠ڍಈΛ࣮ݱ͢ΔͨΊͷɺҎԼͷ Α͏ͳཁૉΛ঺հ • Material > InkWell Ͱ࣮૷͢ΔλονϑΟʔυόοΫ • HapticFeedback.xxxxxImpact() Ͱ࣮૷͢Δ৮֮ ϑΟʔυόοΫ • Skeleton Screen ʹΑΔϖʔδͷಡΈࠐΈͷετϨε ͷܰݮ From YOUTRUST Tech Blog 2024.03.15 ϙΠϯτ
9. ୈ1Ґ: YOUTRUSTΞϓϦͰͷϞʔμϧͷ࢖ΘΕํ • ϞʔμϧɺϙοϓΞοϓɺμΠΞϩάͳͲɺҧ͍ʹ͍ͭͯղઆ • HIG/Material Design/ fl utter.devͷ಺༰ͷΈΛҾ༻͍ͯ͠Δ • FlutterΤϯδχΞ޲͚ʹɺAlertDialog.adaptive Λ࢖ͬͨҎԼ ͷαϯϓϧίʔυ͖ͭ • OK/Cancel μΠΞϩά • Action sheets ෩ͷ ModalBottomSheet From YOUTRUST Tech Blog 2024.01.19 ϙΠϯτ