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

文字拡大されても怖くない レイアウト作りのコツ

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Tiphaine Tiphaine
July 14, 2023
Technology
3.1k
5

文字拡大されても怖くない レイアウト作りのコツ

Shibuya.apk #43
https://shibuya-apk.connpass.com/event/288211/

Avatar for Tiphaine

Tiphaine

July 14, 2023

More Decks by Tiphaine

See All by Tiphaine
既存デザインを変更せずにタップ領域を広げる方法
Avatar for Tiphaine tahia910
1
420
Lottieアニメーションをカスタマイズしてみた
Avatar for Tiphaine tahia910
0
340
Customize your Lottie animations
Avatar for Tiphaine tahia910
0
190
2024年のナビゲーション・フォーカス対応：Composeでキーボード・ナビゲーションをサポートしよう
Avatar for Tiphaine tahia910
0
1.2k
Navigation Focus Support in 2024: Support Keyboard Navigation with Compose!
Avatar for Tiphaine tahia910
0
170
Handling focus in 2024
Avatar for Tiphaine tahia910
0
1.6k
Matomoを使ってみた
Avatar for Tiphaine tahia910
0
2.5k
社内でできるアクセシビリティのはじめかた
Avatar for Tiphaine tahia910
3
820
Raise accessibility awareness at work as an Android developer
Avatar for Tiphaine tahia910
1
230

Other Decks in Technology

See All in Technology
ルールやカスタム機能、どう使う？理想の出力を引き出すために今知りたいIBM Bob 5つの機能
Avatar for mu (Mizuho Uehara) muehara
1
310
オンコールの負荷軽減のためのBits Assistant 活用方法 / How to Use Bits Assistant to Reduce the Workload on On-Call Staff
Avatar for SMS tech sms_tech
1
380
AI Adaptable なテストを整える工夫 / Ways to Make Your Tests AI-Adaptable
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
2
210
Cloud Run のアップデート 触ってみる＆紹介
Avatar for Gre212 gre212
0
300
Javaで学ぶSOLID原則
Avatar for Negima negima
1
270
「速く作る」から「正しく作る」へ ─ 生成AI時代の開発フロー改革の ロードマップと実行 ─
Avatar for starfish719 starfish719
0
5.9k
タクシーアプリ『GO』の実践的データ活用
Avatar for GO Inc. dev mot_techtalk
2
100
Gradle×GitHub_ActionsでCI時間を約50%短縮 ジョブ分割の設計と落とし穴 / Cutting CI Time by ~50% with Gradle and GitHub Actions: Job-Splitting Design and Pitfalls
Avatar for 冨澤宝斗 takatty
0
620
Java正規表現エンジン（NFA）の仕組みと パフォーマンスを維持するための最適化手法
Avatar for 竹内 雅和 takeuchi_132917
0
180
React、まだ楽しくて草
Avatar for uhyo uhyo
7
3.9k
探して_入れて_作って_使う_Agent_Skills___LT.pdf
Avatar for 松尾淳平 peintangos
2
160
「コーディング」しない人のための Claude Code 入門　ChatGPT の次の一歩 — 業務に組み込む 育成・共有・自動化
Avatar for ふくだ（fukuda ryu） rfdnxbro
2
1.1k

Featured

See All Featured
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
4k
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4.1k
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
Abbi's Birthday
Avatar for Violet Bock coloredviolet
2
7.9k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
62
54k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.9k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
220
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.2k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.5k

Transcript

  1. Shibuya.apk#43ɹ2023.7.14ɹTiphaineɹ จࣈ֦େ͞Εͯ΋ා͘ͳ͍ ϨΠΞ΢τ࡞Γͷίπ

  2. ࣗݾ঺հ ✤ Tiphaine(ςΟϑΣϯ) ✤ AndroidΤϯδχΞ ✤ϝυϐΞגࣜձࣾ

  3. จࣈ֦େʁ ✤ Ϣʔβʔิॿػೳ ✤ ϑΥϯτͱදࣔ྆ํͱ΋ ✤ ୺຤ʹΑͬͯσϑΥϧτͷ ઃఆͰ͋Δ͔΋

  4. ·͊ɺSPΛ࢖͑͹ ͳΜͱ͔ͳΔͰ͠ΐ͏ …ͦͷ͸ͣͩͬͨ

  5. STORY TIME

  6. ʮܾఆϘλϯ͕ग़ͯͳ͍ Ͱ͚͢Ͳʔʯ

  7. None
  8. None

  9. จࣈ֦େΛ͢Δͱ Ϙλϯ͕ݟ͑ͳ͍

  10. ͔͠΋ ͜ͷը໘͚ͩ͡Όͳ͍

  11. 😇

  12. ࠶ൃ๷ࢭରࡦͷͨΊʹ ࢀߟ͕ཉ͍͠

  13. “ WCAG ୡ੒ج४1.4.4ɹςΩετͷαΠζมߋ (…)ςΩετ͸ɺ ίϯςϯπຢ͸ػೳΛଛͳ͏͜ͱͳ͘ɺ ࢧԉٕज़ͳ͠Ͱ200%·ͰαΠζมߋͰ͖Δɻ

  14. ➤ શͯͷςΩετΛ֦େͰ͖Δ ➤ શͯͷςΩετ͕ಡΊΔ ➤ શͯͷػೳ͕࢖͑Δ ໨ඪ

  15. ͍ͭ΋ಉ͡໰୊ʹͳΔ ࡞Δ࣌ʹରࡦͰ͖Δ

  16. ؾΛ͚ͭΔ΂͖ϙΠϯτ 1⃣ εΫϩʔϧ 2⃣ Margin/Padding 3⃣ লུͱվߦ

  17. 1⃣ εΫϩʔϧ ✤ ΧελϜϨΠΞ΢τɺ·ͨ͸ComposeΛ࢖͏ͳΒɺ શମεΫϩʔϧग़དྷΔΑ͏ʹ͠Α͏ AμΠΞϩάʹ͍ͭͯ εΫϩʔϧͰ͖ͳ͍ ➡︎

  18. 1⃣ εΫϩʔϧ ✤ AlertDialog͸௕͍ςΩετΛsetTitleͰઃఆ͠ͳ͍ AμΠΞϩάʹ͍ͭͯ AlertDialog.Builder(this) .setTitle(“λΠτϧʹඇৗʹ…”) .setPositiveButton("ܾఆ", /*…*/) .setNegativeButton("Ωϟϯηϧ",

    /*…*/) .show() ̎ߦͰলུ͞Εͯ͠·͏ ➡︎

  19. AlertDialog.Builder(this) .setTitle(“λΠτϧʹඇৗʹ…”) .setPositiveButton("ܾఆ", /*…*/) .setNegativeButton("Ωϟϯηϧ", /*…*/) .show() AlertDialog.Builder(this) .setTitle(“λΠτϧʹඇৗʹ…”) .setMessage(“λΠτϧʹඇৗʹ…”)

    .setPositiveButton("ܾఆ", /*…*/) .setNegativeButton("Ωϟϯηϧ", /*…*/) .show() 1⃣ εΫϩʔϧ ➡ setMessageΛ࢖͓͏ AμΠΞϩάʹ͍ͭͯ

  20. ✤ ϢʔβʔͷखؒΛݮΒͨ͢Ίɺॏࢹ͍ͨ͠෦෼͚ͩΛ εΫϩʔϧൣғ͔Β֎ͦ͏ 1⃣ εΫϩʔϧ A෦෼తʹݻఆ͢Δ

  21. A෦෼తʹݻఆ͢Δ 1⃣ εΫϩʔϧ ݻఆ෦෼ εΫϩʔϧ Մೳ෦෼

  22. ✤ εΫϩʔϧͰ͖ΔࣄΛ໌֬ʹ͍͔ͨ͠Βɺ Πϯδέʔλʔ͸ফ͑ͳ͍Α͏ʹ͢Δ ✤ Compose͸·ͩͰ͖ͳ͍😣 1⃣ εΫϩʔϧ AΠϯδέʔλʔΛදࣔ͢Δ android:fadeScrollbars="false" android:scrollbarAlwaysDrawVerticalTrack="true"

    android:scrollbarSize="4dp" android:scrollbarThumbVertical=“@color/…” android:scrollbars="vertical"

  23. 1⃣ εΫϩʔϧ AΠϯδέʔλʔΛදࣔ͢Δ

  24. 2⃣ MARGIN / PADDING ✤ ࠨӈͷmarginΛ๨Εͳ͍

  25. 2⃣ MARGIN / PADDING ✤ ࠨӈ/্Լpadding΋๨Εͳ͍ʢಛʹΧελϜϏϡʔʣ

  26. ✤ padding͕ޮ͘Α͏ʹɺඞͣ minHeight/minWidthΛ࢖͓͏ 3⃣ লུͱվߦ AαΠζΛݻఆ͠ͳ͍ Modifier.defaultMinSize(minHeight = …) android:layout_height="wrap_content"

    android:minHeight=“@dimen/…”

  27. ✤ λοϓͯ͠ଓ͖͕ಡΊΔจষܥͳΒ🆗 ✤ ΞΫγϣϯΛى͜͢Ϙλϯܥ͸🆖 ❌ ✅ ✅ ✅ ELLIPSISͷ࢖͍ํ 3⃣

    লུͱվߦ

  28. ✤ Horizontal LinearLayoutɺ·ͨ͸ComposeͷRow͸ ෯ͷweightͳͲΛࢦఆ͠Α͏ ROWܥ͸ཁ஫ҙ ӈͷཁૉ͕֎΁ԡ͞Εͯ͠·͏ ⬆︎ 3⃣ লུͱվߦ

  29. ✤ ςΩετೖྗܥ͸ग़དྷΔ͚ͩϚϧνϥΠϯՄೳʹ͢Δ ✦ ʢจࣈ਺੍ݶͷӨڹͰແཧ͔΋😥ʣ ✦ ʢώϯτͷ௕͞ʹ߹Θͤͯվߦ͞Εͳ͍͔΋😭ʣ 3⃣ লུͱվߦ AςΩετೖྗʹ͍ͭͯ

  30. ⚠ ANDROID STUDIOͷϓϨϏϡʔ ✤ ࣮ػͱൺ΂ͯ෯͕޿͗͢Δ

  31. ݕূ୺຤ʹ͋Ε͹ແఢɿ Β͘Β͘εϚʔτϑΥϯ

  32. ·ͱΊ ✤ ϑϨʔϜϫʔΫΛ৴༻͗͢͠ͳ͍ ✤ ͻͨ͢ΒεΫϩʔϧΛೖΕΔ ✤ εΫϩʔϧͰ͖Δ͜ͱΛ໌֬ʹ͢Δ ✤ EllipsisΛਖ਼͘͠࢖͏ ✤

    Ͱ͖Δ͚ͩϚϧνϥΠϯՄೳʹ͢Δ

  33. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ @tahia910ɹ