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

Transcript

1. ٯ޲͖UIͷੈք ʙAndroidΞϓϦͷRTLݴޠରԠʙ DroidKaigi 2025 Day2 @akatsuki174

2. ࣗݾ঺հ

3. • @akatsuki174 • Android/iOS/FlutterΤϯδχΞ • גࣜձࣾΏΊΈॴଐ • Android/FlutterνʔϜ • ࠓͷ࢓ࣄ͸Android/iOS

   • 2ࣇͷ฼

4. ࠓ೔ͷ࿩

5. None

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Ͱॻ͍͍ͯͨΒϨΠΞ΢τ͕ݻఆ͞Εͯ͠·͏

30. None

31. ೔ຊޠ؀ڥ ΞϥϏΞޠ؀ڥʢରԠલʣ

32. None

33. ೔ຊޠ؀ڥ ΞϥϏΞޠ؀ڥʢରԠޙʣ

34. TextViewͷจࣈدͤ • ʮ͑ɺstart/endʹ͢Ε͹େৎ෉ͬͯݴͬͨ͡ΌΜʯ • ͜Ε͚ͩͰղܾ͠ͳ͍৔߹΋͋ΔΜͰ͢…

35. ೔ຊޠ؀ڥ ΞϥϏΞޠ؀ڥʢରԠલʣ

36. None

37. HSBWJUZɺUFYU"MJHONFOU͕
    ࢥ͏Α͏ʹޮ͔ͳ͘ͳΔ

38. None

39. ೔ຊޠ؀ڥ ΞϥϏΞޠ؀ڥʢରԠޙʣ

40. RTLͱLTRͰผʹ͍ͨ͠ϨΠΞ΢τ • Կ͔͠Βͷཧ༝ͰRTLͱLTRͰϨΠΞ΢τΛผʹ͍ͨ͠৔߹ • Android View • layout-ar/main.xmlͷΑ͏ʹผϑΝΠϧΛ࡞੒ • Jetpack

    Compose • ComposableΛ৚݅෼ذͰࠩ͠ସ͑Δ
41. None

42. ํ޲Λݻఆ͍ͨ͠৔߹ • RTLͰ΋LTRͰ΋ϨΠΞ΢τΛݻఆ͍ͨ͠৔߹ • CompositionLocalProviderͰLocalLayoutDirectionΛ্ॻ͖

43. None

44. ೔ຊޠ؀ڥ ΞϥϏΞޠ؀ڥʢରԠޙʣ

45. RTL,LTRݴޠࠞ߹ͷςΩετ • جຊతʹ͸͍͍͔Μ͡ʹ΍ͬͯ͘ΕΔ • ͕ɺྫ͑͹਺ࣈͰॻ͔Εͨॅॴͷ൪஍͕͓͔͠ͳҐஔʹදࣔɹ ͞ΕΔ͜ͱ͕͋Δ • BidiFormatterΛ࢖͏ͱɺ૒ํ޲ςΩετΛؚΉจࣈྻΛɹɹ ਖ਼͘͠දࣔͰ͖Δ

46. TUSJOHTYNM /(ྫ ظ଴஋ ʮ%s ͷ͜ͱͰ͔͢ʁʯˠ จࣈͷํ޲่͕Εͯ͠·͏ྫ

47. BidiFormatter • unicodeWrap() • จࣈͷํ޲Λݕग़ͯ͠ɺํ޲Λએݴ͢ΔUnicodeϑΥʔϚοτ จࣈͰจࣈྻΛϥοϓͯ͘͠ΕΔ • ͦͷ··Ͱ͸จࣈํ޲͕पғͷจ຺ʹҾͬுΒΕ่ͯΕΔɹ Մೳੑ͕͋Δจࣈྻʹ࢖͏

48. 6 & 6 & 6 ' 6 '

49. None

50. ը૾

51. Ұ෦ͷΞΠίϯʢJetpack Composeʣ • Material IconsͰ΋ࠨӈݻఆͷΞΠίϯΛ࢖͍ͬͯͨΒRTLݴޠ Ͱ΋൓స͠ͳ͍ • AutoMirrored͕͋Δ৔߹͸ͦͬͪΛ࢖͏

52. None

53. ೔ຊޠ؀ڥ ΞϥϏΞޠ؀ڥ ൓స͍ͯ͠Δ

54. Ұ෦ͷը૾ʢJetpack Composeʣ • ϕΫλʔը૾Λ࢖͍ͬͯΔͳΒautoMirrored = trueΛ෇༩͢Δ • ϕΫλʔը૾Ͱ͸ͳ͍or୯७ʹࠨӈΛ൓సͤ͞Ε͹͍͍Θ͚Ͱ ͸ͳ͍৔߹ʢޙड़ʣ͸LayoutDirectionΛ࢖ͬͯग़͠෼͚Δ

55. None
56. None

57. Ұ෦ͷը૾ʢAndroid Viewʣ • ͦͷ··Ͱ͸ࠨӈ൓స͠ͳ͍ • ϕΫλʔը૾Λ࢖͍ͬͯΔͳΒautoMirrored = trueΛ෇༩͢Δ • ϕΫλʔը૾Ͱ͸ͳ͍or୯७ʹࠨӈΛ൓సͤ͞Ε͹͍͍Θ͚Ͱ

    ͸ͳ͍৔߹͸drawable-ldrtl, drawable-arϑΥϧμͳͲʹஔ͘

58. ࠨͷҙຯͰ
    ࢖͍ͬͯΔ จࣈ͕
    ೖ͍ͬͯΔ ࣌ܭ͸
    ੈքڞ௨ ࠨӈ൓సͰ͸μϝͳέʔε • ը૾ͷதʹ͸ҎԼͷέʔε΋͋Δ •

    ࠨӈ൓స͢Δͱҙຯ͕มΘͬͯ͠·͏΋ͷ • จࣈ͕ຒΊࠐ·Εͯ͠·͍ͬͯΔ΋ͷ

59. ͲΜͳը૾Λ൓సͤ͞Δ΂͖͔ • ʮํ޲ੑͷ͋Δ΋ͷʯͱݴΘΕͯ΋… • ࣅͨΞΠίϯ͕Material Iconsʹ͋ΔͳΒɺAutoMirrored͕ɹ ଘࡏ͢Δ͔Ͱ൑அͯ͠΋ྑͦ͞͏ • iOSͷSF SymbolsΛࢀߟʹ͢Δͷ΋ྑͦ͞͏

60. None
61. None

62. ͦͷଞ

63. WebView΍ͦͷଞ֎෦࿈ܞ • WebViewͷத਎͕ະରԠʹͳΒͳ͍Α͏ʹ • ͦͷଞݴޠίʔυ΍ࠃίʔυΛSDKͳͲʹ౉͍ͯ͠ΔՕॴ͕ ͋ͬͨΒ஫ҙ

64. Ξχϝʔγϣϯͷํ޲ௐ੔ • ඪ४తͳΞχϝʔγϣϯͰ͋Ε͹ࣗಈͰࠨӈ൓స͢Δ • ͕ɺྫ͑͹ΦϑηοτΛ໌͍ࣔͯ͠Δͱํ޲͕ݻఆ͞Εͯ͠· ͏

65. None
66. None
67. None
68. None

69. ʮӈʯʮࠨʯͷςΩετ • ʮࠨʹεϫΠϓͯ͠࡟আ͍ͯͩ͘͠͞ʯͳͲͷจݴ͸࣮ࡍͷɹ ಈ࡞ͱҟͳΔ͔΋

70. ݻఆαΠζͷϨΠΞ΢τ • ҰൠతʹΞϥϏΞޠͷํ͕௕͍ͷͰɺݻఆαΠζͷUIͩͱɹɹ ่ΕΔͱ͜Ζ͕͋Δ͔΋ • ՄมϨΠΞ΢τʹͨ͠Γɺ຋༁Λௐ੔ͨ͠Γ͢Δ

71. (option)ϑΥϯταΠζͷมߋ • ҰൠతʹΞϥϏΞޠͷํ͕খ͘͞ݟ͑Δ • ΞϥϏΞޠͷϑΥϯτΛ10%େ͖͘͢ΔͱಡΈ΍͘͢ͳΔ

72. 88%$
    %FTJHO
    GPS
    "SBCJD
    IUUQTEFWFMPQFSBQQMFDPNKQWJEFPTQMBZXXED (option)ߴ͞ͷௐ੔ • ൃԻه߸ɺࣝผه߸ͳͲ͕͋ΔͱΞϧϑΝϕοτΑΓΞϥϏΞ จࣈͷํ͕ߴ͘ͳΔ • ্Լ͕Χοτ͞Εͳ͍Α͏ʹؾΛ෇͚Δ

73. ͲͷΑ͏ʹςετ͢Δ͔

74. લఏ • ػցతʹશ෦ʮRTLσβΠϯରԠͰ͖͍ͯΔ͔ʁʯΛςετɹ ͢Δͷ͸ʢͨͿΜʣແཧ • ಠࣗΞΠίϯΛ࢖͍ͬͯͨΒʮ͜Ε͸൓స͢΂͖ͳͷ͔ʁʯ ͸ਓ͕ؒ൑அ͢Δ͔͠ͳ͍ • ςετͱ͸ݴ͏΋ͷͷɺ࠷ॳʹ͜ΕΛ΍ͬͯ޻਺ײΛ೺Ѳͨ͠ ํ͕͍͍ͱࢥ͏

75. ओͳνΣοΫϙΠϯτ • ϨΠΞ΢τɺը૾ɺΞχϝʔγϣϯ͕ਖ਼͍͔͠ • RTLݴޠɺLTRݴޠ͕ࠞࡏ͍ͯͯ͠΋ਖ਼͍͠ฒͼʹͳ͍ͬͯΔ͔ etc…

76. γεςϜݴޠΛมߋͯ͠໨ࢹ • Ұ൪ຊ෺ʹ࣮ۙͯ֬͘ͳํ๏ • νΣοΫϙΠϯτʹैͬͯɺ͓͔͍͠ͱ͜Ζ͕ͳ͍͔Λ֬ೝ

77. None

78. ౾஌ࣝ • ʮRTLݴޠʹͨ͠ΒઃఆΞϓϦ͕ಡΊͳͯ͘ݩʹ໭ͤͳ͍ʯͱ ͳͬͨ৔߹͸ผ୺຤ͰGoogleϨϯζΛ࢖͏ͱศར • ʮΞϓϦ͝ͱͷݴޠઃఆʯʹରԠ͍ͯ͠ΔͳΒͦΕΛ࢖͏ͳͲ

79. ։ൃऀ޲͚ΦϓγϣϯΛ׆༻ • ඳըηΫγϣϯʹʮRTL ϨΠΞ΢τํ޲Λ࢖༻ʯ͕͋Δ • ݴޠ͸ͦͷ··ʹɺ୺຤UIશମ͕ڧ੍తʹRTLʹͳΔ

80. None

81. Android StudioͷϓϨϏϡʔͰ໨ࢹ • Jetpack ComposeɺAndroid ViewͲͪΒͰ΋Մೳ

82. Jetpack Composeͷ৔߹ • @Preview(locale = “ar")ͳͲlocaleΛࢦఆ͢Ε͹ͦΕʹԠͨ͡ ϓϨϏϡʔ͕ݟΒΕΔ

83. None

84. Android Viewͷ৔߹ • ϨΠΞ΢τxmlϑΝΠϧͷSplitϏϡʔͰʮPreview Right to LeftʯΛબ୒͢Δ

85. None
86. None

87. ՍۭϩέʔϧͰ֬ೝ • LTRͱRTLͷՍۭݴޠ͕༻ҙ͞Ε͍ͯΔ • RTLՍۭݴޠͷar-XBΛ࢖͏ͱUIશମ͕RTLʹͳΔͷͰɹɹɹɹ ϨΠΞ΢τ่Ε͕֬ೝͰ͖Δ • ϕλॻ͖ʹͳͬͯ͠·͍ͬͯΔςΩετΛൃݟͰ͖Δ

88. Սۭϩέʔϧݟ͔ͭΒͳ͍… • ։ൃऀ޲͚Φϓγϣϯʢ΋͘͠͸௨ৗͷγεςϜݴޠબ୒ʣʹ ͦͷઃఆ͕͋Δ͸ͣͳͷʹݟ౰ͨΒͳ͍ • ஌ͬͯΔਓ͍ͨΒڭ͍͑ͯͩ͘͞…

89. ࠷ޙʹ

90. ࠓ೔ͷ·ͱΊ • RTLݴޠΛ࢖͍ͬͯΔਓ͸͔ͳΓଟ͍ͷͰରԠͨ͠ํ͕͍͍Α • OSɺϑϨʔϜϫʔΫଆ͕উखʹ͍͍͔Μ͡ʹͯ͘͠ΕΔ͜ͱ͕ ଟ͍Α • Ͱ΋ࣗಈͰରԠ͞Εͳ͍ͱ͜Ζ΋͋Δ͔ΒؤுͬͯରԠ͠Α͏Ͷ

91. ݸਓతͳײ૝ • σβΠφʔ͞Μͱ૬ஊͭͭ͠ɺͰ͖Δ͚ͩඪ४UIίϯϙʔωϯ τͰσβΠϯΛ࡞Δͷ͕ྑͦ͞͏ • ஍ຯʹେมͳͷͰ޻਺͸ଟΊʹऔͬͨํ͕ྑͦ͞͏ • ωΠςΟϒͷਓʹνΣοΫͯ͠΋Β͏ͷ͕Ұ൪҆৺…

92. ͓ΘΓ