Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
Search
akatsuki174
September 11, 2025
Design
1
520
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
DroidKaigi 2025 Day2
https://2025.droidkaigi.jp/timetable/944034/
akatsuki174
September 11, 2025
Tweet
Share
More Decks by akatsuki174
See All by akatsuki174
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
akatsuki174
1
280
私が変えてきたこと、変えなかったこと
akatsuki174
2
890
最近読んでいる本-読書シェア会vol.1
akatsuki174
2
220
SwiftUI、UIKitでキャプチャを撮ろう!
akatsuki174
1
110
Appleにおけるプライバシーの全容を把握する
akatsuki174
0
5.8k
近年のAppleにおける位置情報とプライバシー
akatsuki174
3
470
オフライン勉強会ぼっち対策
akatsuki174
1
670
Xcode 15の新機能
akatsuki174
0
2.8k
AndroidにもSelect Photosがやってきた
akatsuki174
0
1.4k
Other Decks in Design
See All in Design
越境するデザイン人材:デザイナーが社会資本となる世界へ
goodpatch
0
210
「UXとUIの違い」v2
shirasu3
0
250
Installing and Running decksh/pdfdeck
ajstarks
1
870
Ana Cortes Visual Development Portfolio 2025
haruanleb
0
120
Findyのプロデチームの 歩みとこれから
satty9556
0
320
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
root_recruit
PRO
0
160
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
spring_aki
1
140
What makes a great Director?
_limex_
0
330
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
400
佐藤千晶|ポートフォリオ
chimi_chia
0
210
大きな変化の中で、わたしが向き合ったこと #もがく中堅デザイナー
bengo4com
1
1.3k
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
bitkey
PRO
0
100
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
Building Applications with DynamoDB
mza
96
6.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
990
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Context Engineering - Making Every Token Count
addyosmani
7
300
Code Review Best Practice
trishagee
72
19k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Typedesign – Prime Four
hannesfritz
42
2.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Transcript
ٯ͖UIͷੈք ʙAndroidΞϓϦͷRTLݴޠରԠʙ DroidKaigi 2025 Day2 @akatsuki174
ࣗݾհ
• @akatsuki174 • Android/iOS/FlutterΤϯδχΞ • גࣜձࣾΏΊΈॴଐ • Android/FlutterνʔϜ • ࠓͷࣄAndroid/iOS
• 2ࣇͷ
ࠓͷ
None
͢ର • Android ViewϕʔεͷUIɺJetpack ComposeϕʔεͷUIɹ ͲͬͪΧόʔ • ͰͪΐͬͱJetpack ComposeدΓ
iOS൛͋ΔΑʂ
RTLݴޠରԠͱ
RTLݴޠͱ • จࣈUIͷஔ͕ʮӈ͔Βࠨʯʹ͔ͬͯਐΉݴޠɹɹ ʢRight to Leftݴޠʣ • දతͳRTLݴޠ • ΞϥϏΞޠ
• ϔϒϥΠޠ • ϧυΡʔޠ etc…
RTLݴޠରԠ͞Εͨঢ়ଶͱ ༁͕ೖ͍ͬͯΔ͜ͱʹՃ͑ͯ… • ϨΠΞτ͕ࠨӈస͍ͯ͠Δ • ํੑΛ࣋ͭΞΠίϯ͕ࠨӈస͍ͯ͠Δ • RTLݴޠɺLTRݴޠ͕ࠞࡏ͍ͯͯ͠ਖ਼͍͠ฒͼʹͳ͍ͬͯΔ etc…
RTLݴޠରԠͷඞཁੑ • RTLݴޠͰ͋ΔΞϥϏΞจࣈͷ༻ਓޱ6ԯ6ઍສਓ • ΞϧϑΝϕοτͱதࠃจࣈʹ͍࣍ͰੈքͰ3൪ʹଟ͘ॻ͔Ε ͍ͯΔݴޠ • RTLݴޠϢʔβʔʹͱͬͯɺLTRϨΠΞτҧײ͕͋Δ
ͳΜ͔େมͦ͏͡ΌͶʁ • ͍͍ͩͨOSɺϑϨʔϜϫʔΫଆ͕ࣗಈͰରԠͯ͘͠ΕΔ • ͕ɺ։ൃऀ͕खಈରԠ͖͢ͱ͜Ζ͋Δ
RTLϨΠΞτͷαϙʔτ • ϓϩδΣΫτ࡞࣌ʹtrueʹͳ͍ͬͯΔͱࢥ͏
ɿҰ֓ʹʮRTLݴޠʯͱׅΕͳ͍ • ྫɿϔϒϥΠޠجຊRTLݴޠͰ͋Δ͕ɺͳͲLTRʹ ͳΔ • ରԠ͢Δݴޠʹ͓͍ͯԿ͕ਖ਼͍͔͠ࣄલʹௐ͓͖ͯ͘
ʮࣗಈͰʯ͞ΕΔ RTLݴޠରԠ
ຊޠڥ ΞϥϏΞޠڥ
RTLݴޠରԠΫΠζ
͜ͷΫΠζͷҙٛ • શ෦OSɺϑϨʔϜϫʔΫଆ͕ରԠͯ͘͠ΕΔΘ͚Ͱͳ͍ • ػցతʹʮਖ਼͍͠RTLσβΠϯʹͳ͍ͬͯΔ͔ʁʯΛςετɹ ͢Δͷ͍͠ʢޙड़ʣ • ࣗͷײ֮Λཆ͏ඞཁ͕͋Δ
Q1. ͜ΕRTLϨΠΞτʁ ˡਐΉํ
A1. ΄ͱΜͲ🙆 • ΄ͱΜͲͷRTLݴޠͰਖ਼ղ • ͨͩ͠ϔϒϥΠޠͳͲҰ෦ͷRTLݴޠͰLTRʹͳΔ • LinearProgressIndicatorͦ͜ΒΜରԠ͍ͯ͠Δ
Q2. ͜ΕRTLϨΠΞτʁ ˡਐΉํ ਐΉํ↩
A2.🙆 • ࣌ܭRTLݴޠݍͰʮ࣌ܭճΓʯ • ͪͳΈʹTimePickerʮ࣌ܭճΓʯ • εΫγϣCircularProgressIndicator
Q3. ͜ΕRTLϨΠΞτʁ
A3. 🙅 • ࠨ্ʹόοδΛදࣔ͢Δ • IconButtonͱBadgedBoxͷΈ߹ΘͤͳΒࣗಈͰରԠ͞ΕΔ ⬅ਖ਼ղ
Q4. RTLʹͳͬͯͳ͍ͷͲ͜ʁ
A4. ૹ৴ΞΠίϯ • ํੑΛ࣋ͭΞΠίϯࠨӈస͢Δ͖ • ͏গ͠ৄ͍͠ޙड़ • Δ/࠶ੜΞΠίϯͷҹ͕స͍ͯ͠Δ͜ͱʹ
ʮखಈͰʯΔ RTLݴޠରԠ
ϨΠΞτ
left/rightͰॻ͍͍ͯΔͱ͜Ζ • start/endݴޠʹΑͬͯҧ͏͕ɺleft/rightڞ௨ • left/rightͰॻ͍͍ͯͨΒϨΠΞτ͕ݻఆ͞Εͯ͠·͏
None
ຊޠڥ ΞϥϏΞޠڥʢରԠલʣ
None
ຊޠڥ ΞϥϏΞޠڥʢରԠޙʣ
TextViewͷจࣈدͤ • ʮ͑ɺstart/endʹ͢Εେৎͬͯݴͬͨ͡ΌΜʯ • ͜Ε͚ͩͰղܾ͠ͳ͍߹͋ΔΜͰ͢…
ຊޠڥ ΞϥϏΞޠڥʢରԠલʣ
None
HSBWJUZɺUFYU"MJHONFOU͕ ࢥ͏Α͏ʹޮ͔ͳ͘ͳΔ
None
ຊޠڥ ΞϥϏΞޠڥʢରԠޙʣ
RTLͱLTRͰผʹ͍ͨ͠ϨΠΞτ • Կ͔͠Βͷཧ༝ͰRTLͱLTRͰϨΠΞτΛผʹ͍ͨ͠߹ • Android View • layout-ar/main.xmlͷΑ͏ʹผϑΝΠϧΛ࡞ • Jetpack
Compose • ComposableΛ݅ذͰࠩ͠ସ͑Δ
None
ํΛݻఆ͍ͨ͠߹ • RTLͰLTRͰϨΠΞτΛݻఆ͍ͨ͠߹ • CompositionLocalProviderͰLocalLayoutDirectionΛ্ॻ͖
None
ຊޠڥ ΞϥϏΞޠڥʢରԠޙʣ
RTL,LTRݴޠࠞ߹ͷςΩετ • جຊతʹ͍͍͔Μ͡ʹͬͯ͘ΕΔ • ͕ɺྫ͑ࣈͰॻ͔Εͨॅॴͷ൪͕͓͔͠ͳҐஔʹදࣔɹ ͞ΕΔ͜ͱ͕͋Δ • BidiFormatterΛ͏ͱɺํςΩετΛؚΉจࣈྻΛɹɹ ਖ਼͘͠දࣔͰ͖Δ
TUSJOHTYNM /(ྫ ظ ʮ%s ͷ͜ͱͰ͔͢ʁʯˠ จࣈͷํ่͕Εͯ͠·͏ྫ
BidiFormatter • unicodeWrap() • จࣈͷํΛݕग़ͯ͠ɺํΛએݴ͢ΔUnicodeϑΥʔϚοτ จࣈͰจࣈྻΛϥοϓͯ͘͠ΕΔ • ͦͷ··Ͱจࣈํ͕पғͷจ຺ʹҾͬுΒΕ่ͯΕΔɹ Մೳੑ͕͋Δจࣈྻʹ͏
6 & 6 & 6 ' 6 '
None
ը૾
Ұ෦ͷΞΠίϯʢJetpack Composeʣ • Material IconsͰࠨӈݻఆͷΞΠίϯΛ͍ͬͯͨΒRTLݴޠ Ͱస͠ͳ͍ • AutoMirrored͕͋Δ߹ͦͬͪΛ͏
None
ຊޠڥ ΞϥϏΞޠڥ స͍ͯ͠Δ
Ұ෦ͷը૾ʢJetpack Composeʣ • ϕΫλʔը૾Λ͍ͬͯΔͳΒautoMirrored = trueΛ༩͢Δ • ϕΫλʔը૾Ͱͳ͍or୯७ʹࠨӈΛసͤ͞Ε͍͍Θ͚Ͱ ͳ͍߹ʢޙड़ʣLayoutDirectionΛͬͯग़͚͠Δ
None
None
Ұ෦ͷը૾ʢAndroid Viewʣ • ͦͷ··Ͱࠨӈస͠ͳ͍ • ϕΫλʔը૾Λ͍ͬͯΔͳΒautoMirrored = trueΛ༩͢Δ • ϕΫλʔը૾Ͱͳ͍or୯७ʹࠨӈΛసͤ͞Ε͍͍Θ͚Ͱ
ͳ͍߹drawable-ldrtl, drawable-arϑΥϧμͳͲʹஔ͘
ࠨͷҙຯͰ ͍ͬͯΔ จࣈ͕ ೖ͍ͬͯΔ ࣌ܭ ੈքڞ௨ ࠨӈసͰμϝͳέʔε • ը૾ͷதʹҎԼͷέʔε͋Δ •
ࠨӈస͢Δͱҙຯ͕มΘͬͯ͠·͏ͷ • จࣈ͕ຒΊࠐ·Εͯ͠·͍ͬͯΔͷ
ͲΜͳը૾Λసͤ͞Δ͖͔ • ʮํੑͷ͋ΔͷʯͱݴΘΕͯ… • ࣅͨΞΠίϯ͕Material Iconsʹ͋ΔͳΒɺAutoMirrored͕ɹ ଘࡏ͢Δ͔Ͱஅͯ͠ྑͦ͞͏ • iOSͷSF SymbolsΛࢀߟʹ͢Δͷྑͦ͞͏
None
None
ͦͷଞ
WebViewͦͷଞ֎෦࿈ܞ • WebViewͷத͕ະରԠʹͳΒͳ͍Α͏ʹ • ͦͷଞݴޠίʔυࠃίʔυΛSDKͳͲʹ͍ͯ͠ΔՕॴ͕ ͋ͬͨΒҙ
Ξχϝʔγϣϯͷํௐ • ඪ४తͳΞχϝʔγϣϯͰ͋ΕࣗಈͰࠨӈస͢Δ • ͕ɺྫ͑ΦϑηοτΛ໌͍ࣔͯ͠Δͱํ͕ݻఆ͞Εͯ͠· ͏
None
None
None
None
ʮӈʯʮࠨʯͷςΩετ • ʮࠨʹεϫΠϓͯ͠আ͍ͯͩ͘͠͞ʯͳͲͷจݴ࣮ࡍͷɹ ಈ࡞ͱҟͳΔ͔
ݻఆαΠζͷϨΠΞτ • ҰൠతʹΞϥϏΞޠͷํ͕͍ͷͰɺݻఆαΠζͷUIͩͱɹɹ ่ΕΔͱ͜Ζ͕͋Δ͔ • ՄมϨΠΞτʹͨ͠Γɺ༁Λௐͨ͠Γ͢Δ
(option)ϑΥϯταΠζͷมߋ • ҰൠతʹΞϥϏΞޠͷํ͕খ͘͞ݟ͑Δ • ΞϥϏΞޠͷϑΥϯτΛ10%େ͖͘͢ΔͱಡΈ͘͢ͳΔ
88%$%FTJHOGPS"SBCJD IUUQTEFWFMPQFSBQQMFDPNKQWJEFPTQMBZXXED (option)ߴ͞ͷௐ • ൃԻه߸ɺࣝผه߸ͳͲ͕͋ΔͱΞϧϑΝϕοτΑΓΞϥϏΞ จࣈͷํ͕ߴ͘ͳΔ • ্Լ͕Χοτ͞Εͳ͍Α͏ʹؾΛ͚Δ
ͲͷΑ͏ʹςετ͢Δ͔
લఏ • ػցతʹશ෦ʮRTLσβΠϯରԠͰ͖͍ͯΔ͔ʁʯΛςετɹ ͢ΔͷʢͨͿΜʣແཧ • ಠࣗΞΠίϯΛ͍ͬͯͨΒʮ͜Εస͖͢ͳͷ͔ʁʯ ਓ͕ؒஅ͢Δ͔͠ͳ͍ • ςετͱݴ͏ͷͷɺ࠷ॳʹ͜ΕΛͬͯײΛѲͨ͠ ํ͕͍͍ͱࢥ͏
ओͳνΣοΫϙΠϯτ • ϨΠΞτɺը૾ɺΞχϝʔγϣϯ͕ਖ਼͍͔͠ • RTLݴޠɺLTRݴޠ͕ࠞࡏ͍ͯͯ͠ਖ਼͍͠ฒͼʹͳ͍ͬͯΔ͔ etc…
γεςϜݴޠΛมߋͯ͠ࢹ • Ұ൪ຊʹ࣮ۙͯ֬͘ͳํ๏ • νΣοΫϙΠϯτʹैͬͯɺ͓͔͍͠ͱ͜Ζ͕ͳ͍͔Λ֬ೝ
None
౾ࣝ • ʮRTLݴޠʹͨ͠ΒઃఆΞϓϦ͕ಡΊͳͯ͘ݩʹͤͳ͍ʯͱ ͳͬͨ߹ผͰGoogleϨϯζΛ͏ͱศར • ʮΞϓϦ͝ͱͷݴޠઃఆʯʹରԠ͍ͯ͠ΔͳΒͦΕΛ͏ͳͲ
։ൃऀ͚ΦϓγϣϯΛ׆༻ • ඳըηΫγϣϯʹʮRTL ϨΠΞτํΛ༻ʯ͕͋Δ • ݴޠͦͷ··ʹɺUIશମ͕ڧ੍తʹRTLʹͳΔ
None
Android StudioͷϓϨϏϡʔͰࢹ • Jetpack ComposeɺAndroid ViewͲͪΒͰՄೳ
Jetpack Composeͷ߹ • @Preview(locale = “ar")ͳͲlocaleΛࢦఆ͢ΕͦΕʹԠͨ͡ ϓϨϏϡʔ͕ݟΒΕΔ
None
Android Viewͷ߹ • ϨΠΞτxmlϑΝΠϧͷSplitϏϡʔͰʮPreview Right to LeftʯΛબ͢Δ
None
None
ՍۭϩέʔϧͰ֬ೝ • LTRͱRTLͷՍۭݴޠ͕༻ҙ͞Ε͍ͯΔ • RTLՍۭݴޠͷar-XBΛ͏ͱUIશମ͕RTLʹͳΔͷͰɹɹɹɹ ϨΠΞτ่Ε͕֬ೝͰ͖Δ • ϕλॻ͖ʹͳͬͯ͠·͍ͬͯΔςΩετΛൃݟͰ͖Δ
Սۭϩέʔϧݟ͔ͭΒͳ͍… • ։ൃऀ͚Φϓγϣϯʢ͘͠௨ৗͷγεςϜݴޠબʣʹ ͦͷઃఆ͕͋ΔͣͳͷʹݟͨΒͳ͍ • ͬͯΔਓ͍ͨΒڭ͍͑ͯͩ͘͞…
࠷ޙʹ
ࠓͷ·ͱΊ • RTLݴޠΛ͍ͬͯΔਓ͔ͳΓଟ͍ͷͰରԠͨ͠ํ͕͍͍Α • OSɺϑϨʔϜϫʔΫଆ͕উखʹ͍͍͔Μ͡ʹͯ͘͠ΕΔ͜ͱ͕ ଟ͍Α • ͰࣗಈͰରԠ͞Εͳ͍ͱ͜Ζ͋Δ͔ΒؤுͬͯରԠ͠Α͏Ͷ
ݸਓతͳײ • σβΠφʔ͞Μͱ૬ஊͭͭ͠ɺͰ͖Δ͚ͩඪ४UIίϯϙʔωϯ τͰσβΠϯΛ࡞Δͷ͕ྑͦ͞͏ • ຯʹେมͳͷͰଟΊʹऔͬͨํ͕ྑͦ͞͏ • ωΠςΟϒͷਓʹνΣοΫͯ͠Β͏ͷ͕Ұ൪҆৺…
͓ΘΓ