逆向きUIの世界〜AndroidアプリのRTL言語対応〜

逆向きUIの世界〜AndroidアプリのRTL言語対応〜
DroidKaigi 2025 Day2
https://2025.droidkaigi.jp/timetable/944034/

Transcript

1. ٯ޲͖UIͷੈք ʙAndroidΞϓϦͷRTLݴޠରԠʙ DroidKaigi 2025 Day2 @akatsuki174
2. ࣗݾ঺հ
3. • @akatsuki174 • Android/iOS/FlutterΤϯδχΞ • גࣜձࣾΏΊΈॴଐ • Android/FlutterνʔϜ • ࠓͷ࢓ࣄ͸Android/iOS • 2ࣇͷ฼
4. ࠓ೔ͷ࿩
6. ࿩͢ର৅ • Android ViewϕʔεͷUIɺJetpack ComposeϕʔεͷUIɹ Ͳͬͪ΋Χόʔ • Ͱ΋ͪΐͬͱJetpack ComposeدΓ
7. iOS൛΋͋ΔΑʂ
8. RTLݴޠରԠͱ͸
9. RTLݴޠͱ͸ • จࣈ΍UIͷ഑ஔ͕ʮӈ͔Βࠨʯʹ޲͔ͬͯਐΉݴޠɹɹ ʢRight to Leftݴޠʣ • ୅දతͳRTLݴޠ • ΞϥϏΞޠ • ϔϒϥΠޠ • ΢ϧυΡʔޠ etc…
10. RTLݴޠରԠ͞Εͨঢ়ଶͱ͸ ຋༁͕ೖ͍ͬͯΔ͜ͱʹՃ͑ͯ… • ϨΠΞ΢τ͕ࠨӈ൓స͍ͯ͠Δ • ํ޲ੑΛ࣋ͭΞΠίϯ͕ࠨӈ൓స͍ͯ͠Δ • RTLݴޠɺLTRݴޠ͕ࠞࡏ͍ͯͯ͠΋ਖ਼͍͠ฒͼʹͳ͍ͬͯΔ etc…
11. RTLݴޠରԠͷඞཁੑ • RTLݴޠͰ͋ΔΞϥϏΞจࣈͷ࢖༻ਓޱ͸6ԯ6ઍສਓ • ΞϧϑΝϕοτͱதࠃจࣈʹ͍࣍ͰੈքͰ3൪໨ʹଟ͘ॻ͔Ε ͍ͯΔݴޠ • RTLݴޠϢʔβʔʹͱͬͯɺLTRϨΠΞ΢τ͸ҧ࿨ײ͕͋Δ
12. ͳΜ͔େมͦ͏͡ΌͶʁ • ͍͍ͩͨ͸OSɺϑϨʔϜϫʔΫଆ͕ࣗಈͰରԠͯ͘͠ΕΔ • ͕ɺ։ൃऀ͕खಈରԠ͢΂͖ͱ͜Ζ΋͋Δ
13. RTLϨΠΞ΢τͷαϙʔτ • ϓϩδΣΫτ࡞੒࣌ʹtrueʹͳ͍ͬͯΔͱࢥ͏
14. ஫ɿҰ֓ʹʮRTLݴޠʯͱׅΕͳ͍ • ྫɿϔϒϥΠޠ͸جຊRTLݴޠͰ͸͋Δ͕ɺ਺஋ͳͲ͸LTRʹ ͳΔ • ରԠ͢Δݴޠʹ͓͍ͯԿ͕ਖ਼͍͔͠͸ࣄલʹௐ΂͓ͯ͘΂͖
15. ʮࣗಈͰʯ͞ΕΔ RTLݴޠରԠ
16. ೔ຊޠ؀ڥ ΞϥϏΞޠ؀ڥ
17. RTLݴޠରԠΫΠζ
18. ͜ͷΫΠζͷҙٛ • શ෦OSɺϑϨʔϜϫʔΫଆ͕ରԠͯ͘͠ΕΔΘ͚Ͱ͸ͳ͍ • ػցతʹʮਖ਼͍͠RTLσβΠϯʹͳ͍ͬͯΔ͔ʁʯΛςετɹ ͢Δͷ͸೉͍͠ʢޙड़ʣ • ࣗ෼ͷײ֮Λཆ͏ඞཁ͕͋Δ
19. Q1. ͜Ε͸RTLϨΠΞ΢τʁ ˡਐΉํ޲
20. A1. ΄ͱΜͲ🙆 • ΄ͱΜͲͷRTLݴޠͰ͸ਖ਼ղ • ͨͩ͠ϔϒϥΠޠͳͲҰ෦ͷRTLݴޠͰ͸LTRʹͳΔ • LinearProgressIndicator͸ͦ͜Β΁Μ΋ରԠ͍ͯ͠Δ
21. Q2. ͜Ε͸RTLϨΠΞ΢τʁ ˡਐΉํ޲ ਐΉํ޲↩
22. A2.🙆 • ࣌ܭ͸RTLݴޠݍͰ΋ʮ࣌ܭճΓʯ • ͪͳΈʹTimePicker΋ʮ࣌ܭճΓʯ • εΫγϣ͸CircularProgressIndicator
23. Q3. ͜Ε͸RTLϨΠΞ΢τʁ
24. A3. 🙅 • ࠨ্ʹόοδΛදࣔ͢Δ • IconButtonͱBadgedBoxͷ૊Έ߹ΘͤͳΒࣗಈͰରԠ͞ΕΔ ⬅ਖ਼ղ
25. Q4. RTLʹͳͬͯͳ͍ͷ͸Ͳ͜ʁ
26. A4. ૹ৴ΞΠίϯ • ํ޲ੑΛ࣋ͭΞΠίϯ͸ࠨӈ൓స͢Δ΂͖ • ΋͏গ͠ৄ͍͠࿩͸ޙड़ • ໭Δ/࠶ੜΞΠίϯͷ໼ҹ͕൓స͍ͯ͠Δ͜ͱʹ΋஫໨
27. ʮखಈͰʯ΍Δ RTLݴޠରԠ
28. ϨΠΞ΢τ
29. left/rightͰॻ͍͍ͯΔͱ͜Ζ • start/end͸ݴޠʹΑͬͯҧ͏͕ɺleft/right͸ڞ௨ • left/rightͰॻ͍͍ͯͨΒϨΠΞ΢τ͕ݻఆ͞Εͯ͠·͏
31. ೔ຊޠ؀ڥ ΞϥϏΞޠ؀ڥʢରԠલʣ
33. ೔ຊޠ؀ڥ ΞϥϏΞޠ؀ڥʢରԠޙʣ
34. TextViewͷจࣈدͤ • ʮ͑ɺstart/endʹ͢Ε͹େৎ෉ͬͯݴͬͨ͡ΌΜʯ • ͜Ε͚ͩͰղܾ͠ͳ͍৔߹΋͋ΔΜͰ͢…
35. ೔ຊޠ؀ڥ ΞϥϏΞޠ؀ڥʢରԠલʣ
37. HSBWJUZɺUFYU"MJHONFOU͕
    ࢥ͏Α͏ʹޮ͔ͳ͘ͳΔ
39. ೔ຊޠ؀ڥ ΞϥϏΞޠ؀ڥʢରԠޙʣ
40. RTLͱLTRͰผʹ͍ͨ͠ϨΠΞ΢τ • Կ͔͠Βͷཧ༝ͰRTLͱLTRͰϨΠΞ΢τΛผʹ͍ͨ͠৔߹ • Android View • layout-ar/main.xmlͷΑ͏ʹผϑΝΠϧΛ࡞੒ • Jetpack Compose • ComposableΛ৚݅෼ذͰࠩ͠ସ͑Δ
42. ํ޲Λݻఆ͍ͨ͠৔߹ • RTLͰ΋LTRͰ΋ϨΠΞ΢τΛݻఆ͍ͨ͠৔߹ • CompositionLocalProviderͰLocalLayoutDirectionΛ্ॻ͖
44. ೔ຊޠ؀ڥ ΞϥϏΞޠ؀ڥʢରԠޙʣ
45. RTL,LTRݴޠࠞ߹ͷςΩετ • جຊతʹ͸͍͍͔Μ͡ʹ΍ͬͯ͘ΕΔ • ͕ɺྫ͑͹਺ࣈͰॻ͔Εͨॅॴͷ൪஍͕͓͔͠ͳҐஔʹදࣔɹ ͞ΕΔ͜ͱ͕͋Δ • BidiFormatterΛ࢖͏ͱɺ૒ํ޲ςΩετΛؚΉจࣈྻΛɹɹ ਖ਼͘͠දࣔͰ͖Δ
46. TUSJOHTYNM /(ྫ ظ଴஋ ʮ%s ͷ͜ͱͰ͔͢ʁʯˠ จࣈͷํ޲่͕Εͯ͠·͏ྫ
47. BidiFormatter • unicodeWrap() • จࣈͷํ޲Λݕग़ͯ͠ɺํ޲Λએݴ͢ΔUnicodeϑΥʔϚοτ จࣈͰจࣈྻΛϥοϓͯ͘͠ΕΔ • ͦͷ··Ͱ͸จࣈํ޲͕पғͷจ຺ʹҾͬுΒΕ่ͯΕΔɹ Մೳੑ͕͋Δจࣈྻʹ࢖͏
48. 6 & 6 & 6 ' 6 '
50. ը૾
51. Ұ෦ͷΞΠίϯʢJetpack Composeʣ • Material IconsͰ΋ࠨӈݻఆͷΞΠίϯΛ࢖͍ͬͯͨΒRTLݴޠ Ͱ΋൓స͠ͳ͍ • AutoMirrored͕͋Δ৔߹͸ͦͬͪΛ࢖͏
53. ೔ຊޠ؀ڥ ΞϥϏΞޠ؀ڥ ൓స͍ͯ͠Δ
54. Ұ෦ͷը૾ʢJetpack Composeʣ • ϕΫλʔը૾Λ࢖͍ͬͯΔͳΒautoMirrored = trueΛ෇༩͢Δ • ϕΫλʔը૾Ͱ͸ͳ͍or୯७ʹࠨӈΛ൓సͤ͞Ε͹͍͍Θ͚Ͱ ͸ͳ͍৔߹ʢޙड़ʣ͸LayoutDirectionΛ࢖ͬͯग़͠෼͚Δ
57. Ұ෦ͷը૾ʢAndroid Viewʣ • ͦͷ··Ͱ͸ࠨӈ൓స͠ͳ͍ • ϕΫλʔը૾Λ࢖͍ͬͯΔͳΒautoMirrored = trueΛ෇༩͢Δ • ϕΫλʔը૾Ͱ͸ͳ͍or୯७ʹࠨӈΛ൓సͤ͞Ε͹͍͍Θ͚Ͱ ͸ͳ͍৔߹͸drawable-ldrtl, drawable-arϑΥϧμͳͲʹஔ͘
58. ࠨͷҙຯͰ
    ࢖͍ͬͯΔ จࣈ͕
    ೖ͍ͬͯΔ ࣌ܭ͸
    ੈքڞ௨ ࠨӈ൓సͰ͸μϝͳέʔε • ը૾ͷதʹ͸ҎԼͷέʔε΋͋Δ • ࠨӈ൓స͢Δͱҙຯ͕มΘͬͯ͠·͏΋ͷ • จࣈ͕ຒΊࠐ·Εͯ͠·͍ͬͯΔ΋ͷ
59. ͲΜͳը૾Λ൓సͤ͞Δ΂͖͔ • ʮํ޲ੑͷ͋Δ΋ͷʯͱݴΘΕͯ΋… • ࣅͨΞΠίϯ͕Material Iconsʹ͋ΔͳΒɺAutoMirrored͕ɹ ଘࡏ͢Δ͔Ͱ൑அͯ͠΋ྑͦ͞͏ • iOSͷSF SymbolsΛࢀߟʹ͢Δͷ΋ྑͦ͞͏
62. ͦͷଞ
63. WebView΍ͦͷଞ֎෦࿈ܞ • WebViewͷத਎͕ະରԠʹͳΒͳ͍Α͏ʹ • ͦͷଞݴޠίʔυ΍ࠃίʔυΛSDKͳͲʹ౉͍ͯ͠ΔՕॴ͕ ͋ͬͨΒ஫ҙ
64. Ξχϝʔγϣϯͷํ޲ௐ੔ • ඪ४తͳΞχϝʔγϣϯͰ͋Ε͹ࣗಈͰࠨӈ൓స͢Δ • ͕ɺྫ͑͹ΦϑηοτΛ໌͍ࣔͯ͠Δͱํ޲͕ݻఆ͞Εͯ͠· ͏
69. ʮӈʯʮࠨʯͷςΩετ • ʮࠨʹεϫΠϓͯ͠࡟আ͍ͯͩ͘͠͞ʯͳͲͷจݴ͸࣮ࡍͷɹ ಈ࡞ͱҟͳΔ͔΋
70. ݻఆαΠζͷϨΠΞ΢τ • ҰൠతʹΞϥϏΞޠͷํ͕௕͍ͷͰɺݻఆαΠζͷUIͩͱɹɹ ่ΕΔͱ͜Ζ͕͋Δ͔΋ • ՄมϨΠΞ΢τʹͨ͠Γɺ຋༁Λௐ੔ͨ͠Γ͢Δ
71. (option)ϑΥϯταΠζͷมߋ • ҰൠతʹΞϥϏΞޠͷํ͕খ͘͞ݟ͑Δ • ΞϥϏΞޠͷϑΥϯτΛ10%େ͖͘͢ΔͱಡΈ΍͘͢ͳΔ
72. 88%$
    %FTJHO
    GPS
    "SBCJD
    IUUQTEFWFMPQFSBQQMFDPNKQWJEFPTQMBZXXED (option)ߴ͞ͷௐ੔ • ൃԻه߸ɺࣝผه߸ͳͲ͕͋ΔͱΞϧϑΝϕοτΑΓΞϥϏΞ จࣈͷํ͕ߴ͘ͳΔ • ্Լ͕Χοτ͞Εͳ͍Α͏ʹؾΛ෇͚Δ
73. ͲͷΑ͏ʹςετ͢Δ͔
74. લఏ • ػցతʹશ෦ʮRTLσβΠϯରԠͰ͖͍ͯΔ͔ʁʯΛςετɹ ͢Δͷ͸ʢͨͿΜʣແཧ • ಠࣗΞΠίϯΛ࢖͍ͬͯͨΒʮ͜Ε͸൓స͢΂͖ͳͷ͔ʁʯ ͸ਓ͕ؒ൑அ͢Δ͔͠ͳ͍ • ςετͱ͸ݴ͏΋ͷͷɺ࠷ॳʹ͜ΕΛ΍ͬͯ޻਺ײΛ೺Ѳͨ͠ ํ͕͍͍ͱࢥ͏
75. ओͳνΣοΫϙΠϯτ • ϨΠΞ΢τɺը૾ɺΞχϝʔγϣϯ͕ਖ਼͍͔͠ • RTLݴޠɺLTRݴޠ͕ࠞࡏ͍ͯͯ͠΋ਖ਼͍͠ฒͼʹͳ͍ͬͯΔ͔ etc…
76. γεςϜݴޠΛมߋͯ͠໨ࢹ • Ұ൪ຊ෺ʹ࣮ۙͯ֬͘ͳํ๏ • νΣοΫϙΠϯτʹैͬͯɺ͓͔͍͠ͱ͜Ζ͕ͳ͍͔Λ֬ೝ
78. ౾஌ࣝ • ʮRTLݴޠʹͨ͠ΒઃఆΞϓϦ͕ಡΊͳͯ͘ݩʹ໭ͤͳ͍ʯͱ ͳͬͨ৔߹͸ผ୺຤ͰGoogleϨϯζΛ࢖͏ͱศར • ʮΞϓϦ͝ͱͷݴޠઃఆʯʹରԠ͍ͯ͠ΔͳΒͦΕΛ࢖͏ͳͲ
79. ։ൃऀ޲͚ΦϓγϣϯΛ׆༻ • ඳըηΫγϣϯʹʮRTL ϨΠΞ΢τํ޲Λ࢖༻ʯ͕͋Δ • ݴޠ͸ͦͷ··ʹɺ୺຤UIશମ͕ڧ੍తʹRTLʹͳΔ
81. Android StudioͷϓϨϏϡʔͰ໨ࢹ • Jetpack ComposeɺAndroid ViewͲͪΒͰ΋Մೳ
82. Jetpack Composeͷ৔߹ • @Preview(locale = “ar")ͳͲlocaleΛࢦఆ͢Ε͹ͦΕʹԠͨ͡ ϓϨϏϡʔ͕ݟΒΕΔ
84. Android Viewͷ৔߹ • ϨΠΞ΢τxmlϑΝΠϧͷSplitϏϡʔͰʮPreview Right to LeftʯΛબ୒͢Δ
87. ՍۭϩέʔϧͰ֬ೝ • LTRͱRTLͷՍۭݴޠ͕༻ҙ͞Ε͍ͯΔ • RTLՍۭݴޠͷar-XBΛ࢖͏ͱUIશମ͕RTLʹͳΔͷͰɹɹɹɹ ϨΠΞ΢τ่Ε͕֬ೝͰ͖Δ • ϕλॻ͖ʹͳͬͯ͠·͍ͬͯΔςΩετΛൃݟͰ͖Δ
88. Սۭϩέʔϧݟ͔ͭΒͳ͍… • ։ൃऀ޲͚Φϓγϣϯʢ΋͘͠͸௨ৗͷγεςϜݴޠબ୒ʣʹ ͦͷઃఆ͕͋Δ͸ͣͳͷʹݟ౰ͨΒͳ͍ • ஌ͬͯΔਓ͍ͨΒڭ͍͑ͯͩ͘͞…
89. ࠷ޙʹ
90. ࠓ೔ͷ·ͱΊ • RTLݴޠΛ࢖͍ͬͯΔਓ͸͔ͳΓଟ͍ͷͰରԠͨ͠ํ͕͍͍Α • OSɺϑϨʔϜϫʔΫଆ͕উखʹ͍͍͔Μ͡ʹͯ͘͠ΕΔ͜ͱ͕ ଟ͍Α • Ͱ΋ࣗಈͰରԠ͞Εͳ͍ͱ͜Ζ΋͋Δ͔ΒؤுͬͯରԠ͠Α͏Ͷ
91. ݸਓతͳײ૝ • σβΠφʔ͞Μͱ૬ஊͭͭ͠ɺͰ͖Δ͚ͩඪ४UIίϯϙʔωϯ τͰσβΠϯΛ࡞Δͷ͕ྑͦ͞͏ • ஍ຯʹେมͳͷͰ޻਺͸ଟΊʹऔͬͨํ͕ྑͦ͞͏ • ωΠςΟϒͷਓʹνΣοΫͯ͠΋Β͏ͷ͕Ұ൪҆৺…
92. ͓ΘΓ