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
210
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
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
bitkey
PRO
0
250
「UXとUIの違い」v2
shirasu3
0
250
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
400
CMS管理画面のアクセシビリティ
magi1125
8
2.5k
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
6
890
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
tame
0
280
Memory Man v3 (WIP)
storybychad
PRO
0
2.7k
【Designship 2025|10.11】デザイン組織と事業貢献、その挑戦と結果。
payatsusan213
1
650
Correspondence:共に生成していく過程
akiramotomura
0
100
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
techtekt
PRO
7
1k
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
hiromitsuuuuu
1
780
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
930
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
15k
Facilitating Awesome Meetings
lara
56
6.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Fireside Chat
paigeccino
40
3.7k
Being A Developer After 40
akosma
91
590k
Practical Orchestrator
shlominoach
190
11k
Producing Creativity
orderedlist
PRO
347
40k
How GitHub (no longer) Works
holman
315
140k
Docker and Python
trallard
46
3.6k
The Cult of Friendly URLs
andyhume
79
6.6k
Typedesign – Prime Four
hannesfritz
42
2.8k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
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ίϯϙʔωϯ τͰσβΠϯΛ࡞Δͷ͕ྑͦ͞͏ • ຯʹେมͳͷͰଟΊʹऔͬͨํ͕ྑͦ͞͏ • ωΠςΟϒͷਓʹνΣοΫͯ͠Β͏ͷ͕Ұ൪҆৺…
͓ΘΓ