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

by akatsuki174

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ࣗݾ঺հ

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

ࠓ೔ͷ࿩

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

࿩͢ର৅ • Android ViewϕʔεͷUIɺJetpack ComposeϕʔεͷUIɹ Ͳͬͪ΋Χόʔ • Ͱ΋ͪΐͬͱJetpack ComposeدΓ

Slide 7

Slide 7 text

iOS൛΋͋ΔΑʂ

Slide 8

Slide 8 text

RTLݴޠରԠͱ͸

Slide 9

Slide 9 text

RTLݴޠͱ͸ • จࣈ΍UIͷ഑ஔ͕ʮӈ͔Βࠨʯʹ޲͔ͬͯਐΉݴޠɹɹ ʢRight to Leftݴޠʣ • ୅දతͳRTLݴޠ • ΞϥϏΞޠ • ϔϒϥΠޠ • ΢ϧυΡʔޠ etc…

Slide 10

Slide 10 text

RTLݴޠରԠ͞Εͨঢ়ଶͱ͸ ຋༁͕ೖ͍ͬͯΔ͜ͱʹՃ͑ͯ… • ϨΠΞ΢τ͕ࠨӈ൓స͍ͯ͠Δ • ํ޲ੑΛ࣋ͭΞΠίϯ͕ࠨӈ൓స͍ͯ͠Δ • RTLݴޠɺLTRݴޠ͕ࠞࡏ͍ͯͯ͠΋ਖ਼͍͠ฒͼʹͳ͍ͬͯΔ etc…

Slide 11

Slide 11 text

RTLݴޠରԠͷඞཁੑ • RTLݴޠͰ͋ΔΞϥϏΞจࣈͷ࢖༻ਓޱ͸6ԯ6ઍສਓ • ΞϧϑΝϕοτͱதࠃจࣈʹ͍࣍ͰੈքͰ3൪໨ʹଟ͘ॻ͔Ε ͍ͯΔݴޠ • RTLݴޠϢʔβʔʹͱͬͯɺLTRϨΠΞ΢τ͸ҧ࿨ײ͕͋Δ

Slide 12

Slide 12 text

ͳΜ͔େมͦ͏͡ΌͶʁ • ͍͍ͩͨ͸OSɺϑϨʔϜϫʔΫଆ͕ࣗಈͰରԠͯ͘͠ΕΔ • ͕ɺ։ൃऀ͕खಈରԠ͢΂͖ͱ͜Ζ΋͋Δ

Slide 13

Slide 13 text

RTLϨΠΞ΢τͷαϙʔτ • ϓϩδΣΫτ࡞੒࣌ʹtrueʹͳ͍ͬͯΔͱࢥ͏

Slide 14

Slide 14 text

஫ɿҰ֓ʹʮRTLݴޠʯͱׅΕͳ͍ • ྫɿϔϒϥΠޠ͸جຊRTLݴޠͰ͸͋Δ͕ɺ਺஋ͳͲ͸LTRʹ ͳΔ • ରԠ͢Δݴޠʹ͓͍ͯԿ͕ਖ਼͍͔͠͸ࣄલʹௐ΂͓ͯ͘΂͖

Slide 15

Slide 15 text

ʮࣗಈͰʯ͞ΕΔ RTLݴޠରԠ

Slide 16

Slide 16 text

೔ຊޠ؀ڥ ΞϥϏΞޠ؀ڥ

Slide 17

Slide 17 text

RTLݴޠରԠΫΠζ

Slide 18

Slide 18 text

͜ͷΫΠζͷҙٛ • શ෦OSɺϑϨʔϜϫʔΫଆ͕ରԠͯ͘͠ΕΔΘ͚Ͱ͸ͳ͍ • ػցతʹʮਖ਼͍͠RTLσβΠϯʹͳ͍ͬͯΔ͔ʁʯΛςετɹ ͢Δͷ͸೉͍͠ʢޙड़ʣ • ࣗ෼ͷײ֮Λཆ͏ඞཁ͕͋Δ

Slide 19

Slide 19 text

Q1. ͜Ε͸RTLϨΠΞ΢τʁ ˡਐΉํ޲

Slide 20

Slide 20 text

A1. ΄ͱΜͲ🙆 • ΄ͱΜͲͷRTLݴޠͰ͸ਖ਼ղ • ͨͩ͠ϔϒϥΠޠͳͲҰ෦ͷRTLݴޠͰ͸LTRʹͳΔ • LinearProgressIndicator͸ͦ͜Β΁Μ΋ରԠ͍ͯ͠Δ

Slide 21

Slide 21 text

Q2. ͜Ε͸RTLϨΠΞ΢τʁ ˡਐΉํ޲ ਐΉํ޲↩

Slide 22

Slide 22 text

A2.🙆 • ࣌ܭ͸RTLݴޠݍͰ΋ʮ࣌ܭճΓʯ • ͪͳΈʹTimePicker΋ʮ࣌ܭճΓʯ • εΫγϣ͸CircularProgressIndicator

Slide 23

Slide 23 text

Q3. ͜Ε͸RTLϨΠΞ΢τʁ

Slide 24

Slide 24 text

A3. 🙅 • ࠨ্ʹόοδΛදࣔ͢Δ • IconButtonͱBadgedBoxͷ૊Έ߹ΘͤͳΒࣗಈͰରԠ͞ΕΔ ⬅ਖ਼ղ

Slide 25

Slide 25 text

Q4. RTLʹͳͬͯͳ͍ͷ͸Ͳ͜ʁ

Slide 26

Slide 26 text

A4. ૹ৴ΞΠίϯ • ํ޲ੑΛ࣋ͭΞΠίϯ͸ࠨӈ൓స͢Δ΂͖ • ΋͏গ͠ৄ͍͠࿩͸ޙड़ • ໭Δ/࠶ੜΞΠίϯͷ໼ҹ͕൓స͍ͯ͠Δ͜ͱʹ΋஫໨

Slide 27

Slide 27 text

ʮखಈͰʯ΍Δ RTLݴޠରԠ

Slide 28

Slide 28 text

ϨΠΞ΢τ

Slide 29

Slide 29 text

left/rightͰॻ͍͍ͯΔͱ͜Ζ • start/end͸ݴޠʹΑͬͯҧ͏͕ɺleft/right͸ڞ௨ • left/rightͰॻ͍͍ͯͨΒϨΠΞ΢τ͕ݻఆ͞Εͯ͠·͏

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

HSBWJUZɺUFYU"MJHONFOU͕ ࢥ͏Α͏ʹޮ͔ͳ͘ͳΔ

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

RTLͱLTRͰผʹ͍ͨ͠ϨΠΞ΢τ • Կ͔͠Βͷཧ༝ͰRTLͱLTRͰϨΠΞ΢τΛผʹ͍ͨ͠৔߹ • Android View • layout-ar/main.xmlͷΑ͏ʹผϑΝΠϧΛ࡞੒ • Jetpack Compose • ComposableΛ৚݅෼ذͰࠩ͠ସ͑Δ

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

6& 6& 6' 6'

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

ը૾

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

Ұ෦ͷը૾ʢAndroid Viewʣ • ͦͷ··Ͱ͸ࠨӈ൓స͠ͳ͍ • ϕΫλʔը૾Λ࢖͍ͬͯΔͳΒautoMirrored = trueΛ෇༩͢Δ • ϕΫλʔը૾Ͱ͸ͳ͍or୯७ʹࠨӈΛ൓సͤ͞Ε͹͍͍Θ͚Ͱ ͸ͳ͍৔߹͸drawable-ldrtl, drawable-arϑΥϧμͳͲʹஔ͘

Slide 58

Slide 58 text

ࠨͷҙຯͰ ࢖͍ͬͯΔ จࣈ͕ ೖ͍ͬͯΔ ࣌ܭ͸ ੈքڞ௨ ࠨӈ൓సͰ͸μϝͳέʔε • ը૾ͷதʹ͸ҎԼͷέʔε΋͋Δ • ࠨӈ൓స͢Δͱҙຯ͕มΘͬͯ͠·͏΋ͷ • จࣈ͕ຒΊࠐ·Εͯ͠·͍ͬͯΔ΋ͷ

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

ͦͷଞ

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

ͲͷΑ͏ʹςετ͢Δ͔

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

࠷ޙʹ

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

͓ΘΓ