Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
Search
akatsuki174
September 11, 2025
Design
1
650
逆向き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
350
私が変えてきたこと、変えなかったこと
akatsuki174
2
940
最近読んでいる本-読書シェア会vol.1
akatsuki174
2
230
SwiftUI、UIKitでキャプチャを撮ろう!
akatsuki174
1
120
Appleにおけるプライバシーの全容を把握する
akatsuki174
0
5.9k
近年のAppleにおける位置情報とプライバシー
akatsuki174
3
480
オフライン勉強会ぼっち対策
akatsuki174
1
680
Xcode 15の新機能
akatsuki174
0
2.8k
AndroidにもSelect Photosがやってきた
akatsuki174
0
1.4k
Other Decks in Design
See All in Design
体験を守るためのデザイン計測
techtekt
PRO
0
110
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
yamamotoyuta
0
210
ユーザー像を「みてね」らしく可視化する 家族アルバムみてねUXリサーチチームの取り組み
mixi_design
PRO
3
390
mento Design Team Portfolio
mento0fficial
2
1.1k
Installing and Running decksh/pdfdeck
ajstarks
1
900
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
770
身の丈に合うところから始めるデザインシステム
tommytommy30
1
120
Goodpatch Tour💙 / We are hiring!
goodpatch
31
920k
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
mkasumi
0
960
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
1
440
AI業務アプリケーションの体験デザイン
kazuhirokimura
0
220
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
370
Featured
See All Featured
Facilitating Awesome Meetings
lara
57
6.6k
Faster Mobile Websites
deanohume
310
31k
Rails Girls Zürich Keynote
gr2m
95
14k
Code Review Best Practice
trishagee
73
19k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
Building Applications with DynamoDB
mza
96
6.8k
jQuery: Nuts, Bolts and Bling
dougneiner
65
8.1k
Become a Pro
speakerdeck
PRO
30
5.7k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Why You Should Never Use an ORM
jnunemaker
PRO
60
9.6k
Speed Design
sergeychernyshev
33
1.3k
Embracing the Ebb and Flow
colly
88
4.9k
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ίϯϙʔωϯ τͰσβΠϯΛ࡞Δͷ͕ྑͦ͞͏ • ຯʹେมͳͷͰଟΊʹऔͬͨํ͕ྑͦ͞͏ • ωΠςΟϒͷਓʹνΣοΫͯ͠Β͏ͷ͕Ұ൪҆৺…
͓ΘΓ