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
210
逆向き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
230
私が変えてきたこと、変えなかったこと
akatsuki174
2
880
最近読んでいる本-読書シェア会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
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
840
CursorでAI活用のナレッジベースを構築する
kanzaki
0
730
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
lycorptech_jp
PRO
0
490
1年目デザイナーが実践する、チーム貢献のための2つのアプローチ
kinomidesign
0
110
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
390
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
2.6k
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
210
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
380
Ana Cortes Visual Development Portfolio 2025
haruanleb
0
120
harutaka Vision Deck
zenkigenforrecruit
0
230
The Spectacular Lies of Maps
axbom
PRO
1
290
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
160
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Speed Design
sergeychernyshev
32
1.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
The Language of Interfaces
destraynor
162
25k
Faster Mobile Websites
deanohume
310
31k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
How to Ace a Technical Interview
jacobian
280
23k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
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ίϯϙʔωϯ τͰσβΠϯΛ࡞Δͷ͕ྑͦ͞͏ • ຯʹେมͳͷͰଟΊʹऔͬͨํ͕ྑͦ͞͏ • ωΠςΟϒͷਓʹνΣοΫͯ͠Β͏ͷ͕Ұ൪҆৺…
͓ΘΓ