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

逆向きUIの世界 〜iOSアプリのRTL言語対応〜
2025/09/21 iOSDC Japan day2

Transcript

1. ٯ޲͖UIͷੈք ʙiOSΞϓϦͷRTLݴޠରԠʙ iOSDC Japan 2025 09/21 @akatsuki174
2. ࣗݾ঺հ
3. • @akatsuki174 • Android/iOS/FlutterΤϯδχΞ • גࣜձࣾΏΊΈॴଐ • Android/FlutterνʔϜ • ࠓͷ࢓ࣄ͸Android/iOS • 2ࣇͷ฼
4. ࠓ೔ͷ࿩
6. ࿩͢ର৅ • SwiftUI͕ϝΠϯ • iOS͕ϝΠϯ • ʙiOS 18ܥɺXcode 16ܥ
8. RTLݴޠରԠͱ͸
9. RTLݴޠͱ͸ • จࣈ΍UIͷ഑ஔ͕ʮӈ͔Βࠨʯʹ޲͔ͬͯਐΉݴޠɹɹɹ ʢRight to Leftݴޠʣ • ୅දతͳRTLݴޠ • ΞϥϏΞޠ • ϔϒϥΠޠ • ΢ϧυΡʔޠ etc…
10. RTLݴޠରԠ͞Εͨঢ়ଶͱ͸ ຋༁͕ೖ͍ͬͯΔ͜ͱʹՃ͑ͯ… • ϨΠΞ΢τ͕ࠨӈ൓స͍ͯ͠Δ • ํ޲ੑΛ࣋ͭΞΠίϯ͕ࠨӈ൓స͍ͯ͠Δ • RTLݴޠɺLTRݴޠ͕ࠞࡏ͍ͯͯ͠΋ਖ਼͍͠ฒͼʹͳ͍ͬͯΔ etc…
14. RTLݴޠରԠͷඞཁੑ • RTLݴޠͰ͋ΔΞϥϏΞจࣈͷ࢖༻ਓޱ͸6ԯ6ઍສਓ • ΞϧϑΝϕοτͱதࠃจࣈʹ͍࣍ͰੈքͰ3൪໨ʹଟ͘ॻ͔Εͯ ͍Δݴޠ • RTLݴޠϢʔβʔʹͱͬͯɺLTRϨΠΞ΢τ͸ҧ࿨ײ͕͋Δ
15. ͳΜ͔େมͦ͏͡ΌͶʁ • ͍͍ͩͨ͸OSɺϑϨʔϜϫʔΫଆ͕ࣗಈͰରԠͯ͘͠ΕΔ • ͕ɺ։ൃऀ͕खಈରԠ͢΂͖ͱ͜Ζ΋͋Δ
16. લఏɿԿ΋͠ͳ͍ͱRTLϨΠΞ΢τʹͳΒͳ͍ • ʮͱΓ͋͑ͣγεςϜݴޠΛΞϥϏΞޠʹͯ͠ϨΠΞ΢τ่Ε͕ ͳ͍͔֬ೝͯ͠ΈΔ͔ʯͱࢥͬͯ΋ɺͦͷ··ͩͱLTRϨΠΞ΢ τͷ·· • طଘݴޠͷίϐϖͰ͍͍͔Β຋༁ϑΝΠϧΛೖΕΔ͔ɺޙड़͢Δ σόοά༻ͷઃఆͰڧ੍RTLϨΠΞ΢τʹ͢Δ
17. ஫ɿҰ֓ʹʮRTLݴޠʯͱׅΕͳ͍ • ྫɿϔϒϥΠޠ͸جຊRTLݴޠͰ͸͋Δ͕ɺ਺஋ͳͲ͸LTRʹͳΔ • ରԠ͢Δݴޠʹ͓͍ͯԿ͕ਖ਼͍͔͠͸ࣄલʹௐ΂͓ͯ͘΂͖
18. RTLݴޠରԠʹؔ͢Δ ެࣜ৘ใ
19. ެࣜ৘ใ • ͍ΖΜͳͱ͜ΖʹRTLʹؔ͢Δެࣜ৘ใ͕͋Δ • WWDCͷಈը • Human Interface Guidelines etc…
20. Human Interface Guidelines • ʮRight to leftʯͱ͍͏ষ͕͋Δ • RTLϨΠΞ΢τશൠΛͬ͘͟Γ໢ཏ͍ͯ͠Δ • σβΠφʔ͞Μʹ͸·͔ͣ͜͜Βݟͯ΋Β͏ͷ͕ྑͦ͞͏
21. Design for Arabic / WWDC22 • Human Interface GuidelinesΑΓৄࡉͳ৘ใ͕ࡌ͍ͬͯΔ • σβΠφʔ͞Μʹ2൪໨ʹݟͯ΋Β͏ͳΒ͜Ε͔΋͠Εͳ͍
22. Get it right (to left) / WWDC22 • ։ൃऀ޲͚ͷRLTݴޠରԠಈը • ۩ମతʹͲ͏࣮૷ͨ͠Β͍͍͔͕঺հ͞Ε͍ͯΔ
23. ʮࣗಈͰʯ͞ΕΔ RTLݴޠରԠ
24. ӳޠ؀ڥ ΞϥϏΞޠ؀ڥ
25. RTLݴޠରԠΫΠζ
26. ͜ͷΫΠζͷҙٛ • શ෦OSɺϑϨʔϜϫʔΫଆ͕ରԠͯ͘͠ΕΔΘ͚Ͱ͸ͳ͍ • ػցతʹʮਖ਼͍͠RTLσβΠϯʹͳ͍ͬͯΔ͔ʁʯΛςετ͢Δ ͷ͸೉͍͠ʢޙड़ʣ • ࣗ෼ͷײ֮Λཆ͏ඞཁ͕͋Δ
27. Q1. ͜ͷΞΠίϯ͸RTL༻ʁ
28. A1. 🙆 • εϐʔΧʔ෦෼͸Իͷग़Δํ޲Λࣔ͢ͷͰ൓సͤ͞Δ • ࣼઢ෦෼͸ແޮɺېࢭΛද͕͢ʗͰ΋ʘͰ΋ҙຯ͸มΘΒͳ͍Β͍͠ • Apple͸ʘͰ౷Ұ͍ͯ͠ΔΒ͍͠
29. ೔ຊޠ؀ڥ ΞϥϏΞޠ؀ڥ J04 "OESPJE
30. Q2. ͜ͷΞΠίϯ͸RTL༻ʁ
31. A2. 🙆 • ͜ͷϖϯ͕ӈʹ܏͍͍ͯΔͷ͸ӈར͖ͷਓ͕ଟ͍͔Β
32. Q3. ͜ͷঢ়ଶ͸RTLରԠ͕͞Ε͍ͯΔʁ
33. A3. 🙅 • Human Interface GuidelinesʹΑΔͱɺஈམʢ3ߦҎ্ͷςΩετͰఆ ٛ͞ΕΔʣͷ഑ஔ͸ஈམͷݴޠͱҰகͤ͞ΔΑ͏ʹͱॻ͔Ε͍ͯΔ
34. Q4. ͜ͷঢ়ଶ͸RTLରԠ͕͞Ε͍ͯΔʁ
35. A4. 🙆 • ࣌ܭදݱ͸RTLݴޠݍͰ΋ʮ࣌ܭճΓʯ • ProgressViewͷCircularProgressViewStyle͸RTLݴޠͰ΋ʮ࣌ܭճΓʯ
36. ʮखಈͰʯ΍Δ RTLݴޠରԠ
37. ϨΠΞ΢τ
38. left/rightͰॻ͍͍ͯΔͱ͜Ζ • leading/trailing͸ݴޠʹΑͬͯҧ͏͕ɺleft/right͸ڞ௨ • left/rightͰॻ͍͍ͯͨΒ΋ͪΖΜϨΠΞ΢τ͕ݻఆ͞Εͯ͠·͏
40. ӳޠ؀ڥ ΞϥϏΞޠ؀ڥ
42. ӳޠ؀ڥ ΞϥϏΞޠ؀ڥ
44. Ұ෦ͷϨΠΞ΢τ • Կ͔͠Βͷཧ༝ͰRTLͱLTRͰϨΠΞ΢τΛผʹ͍ͨ͠৔߹͸ɺ ୺຤ͷϨΠΞ΢τํ޲Λ൑ผ͔ͯ͠Β৚݅෼ذͰUIΛग़͠෼͚Δ
47. ํ޲Λݻఆ͍ͨ͠৔߹ • RTLͰ΋LTRͰ΋ಉ͡ϨΠΞ΢τʹ͢Δ͜ͱ͕Ͱ͖Δ • UIKitͱSwiftUI྆ํͷํ๏Λ঺հ
49. ΞϥϏΞޠ؀ڥʢରԠલʣ ΞϥϏΞޠ؀ڥʢରԠޙʣ
52. RTL,LTRݴޠࠞ߹ͷςΩετ • جຊతʹ͸͍͍͔Μ͡ʹ΍ͬͯ͘ΕΔ • ͕ɺྫ͑͹ύϥϝʔλ͖ͭURLΛͻͱ͖ͭͮͷLTRͱղऍͰ͖ͣ ʹόϥόϥʹฒ΂ΒΕͯ͠·͏͜ͱ͕͋Δ
53. LRM,RLMͰڬΉ • LRM (Left-to-Right Mark) • Unicode: \u{200E} • ςΩετͷྲྀΕΛࠨˠӈʹڧ੍͍ͨ͠ͱ͖ʹ࢖͏੍ޚจࣈ • RLM (Right-to-Left Mark) • Unicode: \u{200F} • ςΩετͷྲྀΕΛӈˠࠨʹڧ੍͍ͨ͠ͱ͖ʹ࢖͏੍ޚจࣈ
54. ˞͜ͷίʔυ͸खΛՃ͑ͳͯ͘΋ਖ਼͍͠ޠॱͰදࣔ͞Ε·͢
55. ը૾
56. Ұ෦ͷը૾ • RTLͱLTRͰҟͳΔ΋ͷΛද͍ࣔͨ͠৔߹͸ɺAsset Catalogʹ྆ ํͷը૾ΛೖΕΔ
60. ͲΜͳը૾Λ൓సͤ͞Δ΂͖͔ • ʮํ޲ੑͷ͋Δ΋ͷʯͱݴΘΕͯ΋… • SF SymbolsΛࢀߟʹ͢Δͷ͕ྑͦ͞͏
64. ਺ࣈ
65. ਺ࣈ͕ೖͬͨςΩετ • ಉ͡ݴޠݍͰ΋ɺ஍ҬʹΑͬͯͲΜͳ਺ࣈදه͕Ұൠతͳͷ͔͕ ҟͳΔ • ྆ํͰද่ࣔΕ͕ͳ͍͔֬ೝͨ͠ํ͕͍͍ • ਺ࣈ΋ϩʔΧϥΠζ͞ΕΔঢ়ଶʹͳ͍ͬͯΔ͔֬ೝ͢Δ
70. ه߸෇͖਺ࣈ • ʮ%ʯʮ-ʯͳͲͷه߸͕਺ࣈʹͭ͘৔߹͕͋Δ • ಉ͡RTLݴޠͰ΋ɺ਺ࣈͷલʹͭ͘৔߹΋͋Ε͹ޙΖʹͭ͘৔߹ ΋͋Δ • ࣗ෼Ͱه߸Λ෇༩͢ΔͷͰ͸ͳ͘ɺ਺஋formatterΛ࢖͏͜ͱ
71. 88%$
    (FU
    JU
    SJHIU
    UP
    MFGU
    IUUQTEFWFMPQFSBQQMFDPNXXED
74. ͦͷଞ
75. WebView΍ͦͷଞ֎෦࿈ܞ • WebViewͷத਎͕ະରԠʹͳΒͳ͍Α͏ʹ • ͦͷଞݴޠίʔυ΍ࠃίʔυΛSDKͳͲʹ౉͍ͯ͠ΔՕॴ͕͋ͬ ͨΒ஫ҙ
76. ʮӈʯʮࠨʯͷςΩετ • ʮࠨʹεϫΠϓͯ͠࡟আ͍ͯͩ͘͠͞ʯͳͲͷจݴ͸࣮ࡍͷಈ࡞ ͱҟͳΔ͔΋
77. ݻఆαΠζͷϨΠΞ΢τ • ҰൠతʹΞϥϏΞޠͷํ͕௕͍ͷͰɺݻఆαΠζͷUIͩͱ่ΕΔ ͱ͜Ζ͕͋Δ͔΋ • ՄมϨΠΞ΢τʹͨ͠Γɺ৔߹ʹΑͬͯ͸຋༁Λௐ੔ͨ͠Γ͢Δ
78. (option)ϑΥϯτͷมߋ • ҰൠతʹΞϥϏΞޠͷํ͕খ͘͞ݟ͑Δ • ΞϥϏΞޠͷϑΥϯτΛ10%େ͖͘͢ΔͱಡΈ΍͘͢ͳΔ 88%$
    %FTJHO
    GPS
    "SBCJD
    IUUQTEFWFMPQFSBQQMFDPNKQWJEFPTQMBZXXED
79. 88%$
    %FTJHO
    GPS
    "SBCJD
    IUUQTEFWFMPQFSBQQMFDPNKQWJEFPTQMBZXXED (option)ߴ͞ͷௐ੔ • ൃԻه߸ɺࣝผه߸ͳͲ͕͋ΔͱΞϧϑΝϕοτΑΓΞϥϏΞจ ࣈͷํ͕ߴ͘ͳΔ • ্Լ͕Χοτ͞Εͳ͍Α͏ʹؾΛ෇͚Δ
80. ͲͷΑ͏ʹςετ͢Δ͔
81. લఏ • ػցతʹશ෦ʮRTLσβΠϯରԠͰ͖͍ͯΔ͔ʁʯΛςετ͢Δ ͷ͸ʢͨͿΜʣແཧ • ಠࣗΞΠίϯΛ࢖͍ͬͯͨΒʮ͜Ε͸൓స͢΂͖ͳͷ͔ʁʯ͸ ਓ͕ؒ൑அ͢Δ͔͠ͳ͍ • ςετͱ͸ݴ͏΋ͷͷɺ࠷ॳʹ͜ΕΛ΍ͬͯ޻਺ײΛ೺Ѳͨ͠ํ ͕͍͍ͱࢥ͏
82. ओͳνΣοΫϙΠϯτ • ϨΠΞ΢τɺը૾ɺΞχϝʔγϣϯ͕ਖ਼͍͠޲͖ʹͳ͍ͬͯΔ͔ • RTLݴޠɺLTRݴޠ͕ࠞࡏ͍ͯͯ͠΋ਖ਼͍͠ฒͼʹͳ͍ͬͯΔ͔ etc…
83. ༏ઌ͢ΔݴޠΛมߋͯ͠໨ࢹ • Ұ൪ຊ෺ʹ࣮ۙͯ֬͘ͳํ๏ • νΣοΫϙΠϯτʹैͬͯɺ͓͔͍͠ͱ͜Ζ͕ͳ͍͔Λ֬ೝ͢Δ • ͨͩ͠ɺRTLݴޠͷ຋༁ϑΝΠϧ͕ೖͬͯͳ͍ͱ൓స͠ͳ͍
85. ౾஌ࣝ • ʮRTLݴޠʹͨ͠ΒઃఆΞϓϦ͕ಡΊͳ͘ͳͬͯݩʹ໭ͤͳ͍ʯ ͱͳͬͨ৔߹͸ผ୺຤ͰGoogleϨϯζΛ࢖͏ͱศར • ΞϓϦ͕ʮ༏ઌ͢ΔݴޠʯʹରԠ͍ͯ͠ΔͳΒͦͬͪΛ࢖ͬͯ΋
86. εΩʔϜΤσΟλΛฤू • εΩʔϜΤσΟλʹApp Language͕͋ΓɺRTLݴޠʹͨ͠Γɺ PseudolanguageʢՍۭݴޠʣʹͰ͖Δ • ࣮ߦϑΝΠϧʹRTLݴޠ͕ೖͬͯͳͯ͘΋ςετͰ͖ͯศར
89. Right-to-Left Pseudolanguage • UI ϨΠΞ΢τͷํ޲͚ͩΛRTLʹ͢Δ • จࣈྻ͸ͦͷ·· • ϨΠΞ΢τ͕ਖ਼͘͠RTLݴޠରԠͰ͖͍ͯΔ͔Λ֬ೝͰ͖Δ
90. ௨ৗϏϧυ 3JHIUUP-FGU
    1TFVEPMBOHVBHFࢦఆ
91. SwiftUIͷϓϨϏϡʔͰ໨ࢹ • SwiftUIͷϓϨϏϡʔͰRTL༻LTR༻ϓϨϏϡʔΛ࡞੒͢Δ • StoryboardͩͱͰ͖ͳͦ͏
93. ࠷ޙʹ
94. ࠓ೔ͷ·ͱΊ • RTLݴޠΛ࢖͍ͬͯΔਓ͸͔ͳΓଟ͍ͷͰରԠͨ͠ํ͕͍͍Α • OSɺϑϨʔϜϫʔΫଆ͕উखʹ͍͍͔Μ͡ʹͯ͘͠ΕΔ͜ͱ͕ଟ ͍Α • Ͱ΋ࣗಈͰରԠ͞Εͳ͍ͱ͜Ζ΋͋Δ͔ΒؤுͬͯରԠ͠Α͏Ͷ
95. ݸਓతͳײ૝ • σβΠφʔ͞Μͱ૬ஊͭͭ͠ɺͰ͖Δ͚ͩඪ४UIίϯϙʔωϯτ ͰσβΠϯΛ࡞Δͷ͕ྑͦ͞͏ • ஍ຯʹେมͳͷͰ޻਺͸ଟΊʹऔͬͨํ͕ྑͦ͞͏ • ωΠςΟϒͷਓʹνΣοΫͯ͠΋Β͏ͷ͕Ұ൪҆৺…
96. ͓ΘΓ