Upgrade to Pro — share decks privately, control downloads, hide ads and more …

プレイドにおけるプロダクトの国際化の取り組み | 野田 陽平 PLAID, Inc

プレイドにおけるプロダクトの国際化の取り組み | 野田 陽平 PLAID, Inc

#SaaS_Frontend で発表した、SaaSプロダクトのKARTEの開発におけるプロダクトの国際化(i18n: Internationalization)についてです。

こちらの本にもi18nについて書いてますので、もしよろしければ眺めてみてください。
みんなのVue.js - 現場で役立つ実践ノウハウ

Avatar for positiveflat

positiveflat

July 13, 2021
Tweet

More Decks by positiveflat

Other Decks in Programming

Transcript

  1. 2 2021.07.13ɹʛɹʲPLAID×SmartHR×Uzabase×OPEN8 ʳSaaSϓϩμΫτͷϑϩϯτΤϯυ࠷લઢɹʛɹ ɹɹʛɹɹ© 2021 PLAID Inc. ࣗݾ঺հ ໺ా ཅฏ

    גࣜձࣾϓϨΠυ Engineer 2015 join Vue.jsೖ໳ɾΈΜͳͷVue.js ڞஶऀ ৽͍͠αʔϏεΛwatch͢Δͷ͕޷͖ Ex-IBMer twitter : @positive f l
  2. 3 2021.07.13ɹʛɹʲPLAID×SmartHR×Uzabase×OPEN8 ʳSaaSϓϩμΫτͷϑϩϯτΤϯυ࠷લઢɹʛɹ ɹɹʛɹɹ© 2021 PLAID Inc. ΈΜͳͷVue.js ʮΈΜͳͷVue.js -

    ݱ৔Ͱ໾ཱ࣮ͭફϊ΢ϋ΢ʯʢٕज़ධ࿦ࣾʣ
 ͱ͍͏ຊΛձࣾͷ஥ؒͱॻ͖·ͨ͠ ຊ೔͸͜ͷຊʹ΋ॻ͍ͨϓϩμΫτͷࠃࡍԽʹ͍ͭͯ࿩͠·͢ IUUQTHJIZPKQCPPL
  3. 5 2021.07.13ɹʛɹʲPLAID×SmartHR×Uzabase×OPEN8 ʳSaaSϓϩμΫτͷϑϩϯτΤϯυ࠷લઢɹʛɹ ɹɹʛɹɹ© 2021 PLAID Inc. ֬ೝ͢Δ جຊαʔϏε΍͝ར༻ํ๏Λ͝঺հ͠·͢ɻ ͓ಘͳಛయ΍໾ཱͭ৘ใ͕ຬࡌͰ͢ɻ

    ॳΊͯͷํ΁ ְתּׅ然钠ׅ׷ 6*رؠ؎ش٦׌ֽוזַזַ♳麦׃זְծ➙ ״׶إٔؗ،حف׃׋ְהְֲ倯䗳铣דׅկ UIرؠ؎ش٦ָ濼׏גֶֻץֹ 7אךرؠ؎ٕٝ٦ٕ DESIGN RULES » CHECK ׆׏ה⢪ִ׷،؎ذي׌ֽ׾䲧ִת׃׋կ ֿך堣⠓׾ֶ鋅鷕׃זֻկ 窫㼎ծ 妜׃ְ ౙͷओ໾ɺ Ξ΢λʔ COLLECTION OUTER 嗚稊勴⟝׾㼰׃㢌刿ׅ׷׌ֽדծ֮ז׋ך椚 䟝ך暟⟝ח⳿⠓ִ׷〳腉䚍ָ넝ֻז׶תׅկ 勴⟝׾㢌ִג嗚稊׃ג׫גֻ׌ְׁկ ׀䋞劄ך暟⟝כ 鋅אַ׶תׇ׿ד׃׋ַ ꟗׄ׷ ҰਓҰਓʹ߹Θͤͨ ސ٬ମݧΛఏڙ WebαΠτͷ๚໰ऀͷߦಈΛ
 ސ٬͝ͱʹϦΞϧλΠϜʹղੳ $9 ސ٬ମݧ ϓϥοτϑΥʔϜ ࠃࡍԽ͍ͯ͠ΔϓϩμΫτ KARTE ʹ͍ͭͯ
  4. ɹɹʛɹɹ© 2019 PLAID Inc. גࣜձࣾϓϨΠυʹ͍ͭͯ 2021.07.13ɹʛɹʲPLAID×SmartHR×Uzabase×OPEN8 ʳSaaSϓϩμΫτͷϑϩϯτΤϯυ࠷લઢɹʛɹ ɹɹʛɹɹ© 2021 PLAID

    Inc. גࣜձࣾϓϨΠυ ౦ژ౎தԝ۠ۜ࠲6-10-1 GINZA SIX 10 F ઃཱɿ2011೥10݄ ैۀһɿ194໊ ※2021೥3݄຤࣌఺ 6
  5. 9 2021.07.13ɹʛɹʲPLAID×SmartHR×Uzabase×OPEN8 ʳSaaSϓϩμΫτͷϑϩϯτΤϯυ࠷લઢɹʛɹ ɹɹʛɹɹ© 2021 PLAID Inc. I18n i18n: Internationalization

    l10n: Localization ΞϓϦέʔγϣϯɾίϯςϯπɾυΩϡϝϯτΛ
 l10nՄೳͳঢ়ଶʹͰ͖ΔΑ͏ʹઃܭɾ։ൃ͢Δ͜ͱ ΞϓϦέʔγϣϯɾίϯςϯπɾυΩϡϝϯτΛ
 ͋Δݴޠɾ஍ҬɾจԽͳͲʹରԠͤ͞Δ͜ͱʢ຋༁ɾจԽରԠʣ g11n: Globalization I18nͱಉٛʢi18n, l10n Λຬͨ͢͜ͱΛҙຯ͢Δ͜ͱ΋͋Δʣ ※ఆٛ͸৭ʑ͋Γ·͢
  6. 10 2021.07.13ɹʛɹʲPLAID×SmartHR×Uzabase×OPEN8 ʳSaaSϓϩμΫτͷϑϩϯτΤϯυ࠷લઢɹʛɹ ɹɹʛɹɹ© 2021 PLAID Inc. I18n ࠃࡍԽͷର৅͸ϓϩμΫτ͚ͩͰ͸ͳ͍ ϓϥΠόγʔϙϦγʔ


    ٴͼ࡞੒ํ਑ Owned Media Product Product Landing Page Corporate Site Support Site ։ൃऀ޲͚Document e.t.c… ར༻ن໿ Online Course ܖ໿ॻ ֤छఏҊࢿྉ
  7. 12 2021.07.13ɹʛɹʲPLAID×SmartHR×Uzabase×OPEN8 ʳSaaSϓϩμΫτͷϑϩϯτΤϯυ࠷લઢɹʛɹ ɹɹʛɹɹ© 2021 PLAID Inc. I18n ࠓճ͸ϑϩϯτΤϯυͷmeetupͳͷͰ
 ϓϩμΫτͷi18nʹߜͬͯ࿩͢

    + ີ઀ʹؔ࿈͢Δ຋༁ϑϩʔ(l10n)ʹ͍ͭͯ΋৮Ε·͢ ※Vue.jsΛ࢖͍ͬͯͳ͍ਓ΋ଟ͍ͱࢥ͏ͷͰɺ
 vue-i18nͷࡉ͔͍෦෼ʹ͸͋·Γ৮Εͳ͍Ͱ͢
  8. ຊ೔ͷςʔϚ 13 ɹɹʛɹɹ© 2021 PLAID Inc. 2021.07.13ɹʛɹʲPLAID×SmartHR×Uzabase×OPEN8 ʳSaaSϓϩμΫτͷϑϩϯτΤϯυ࠷લઢɹʛɹ SaaSϓϩμΫτͷi18n ࿩͢͜ͱ

    i18nͷ໨తͱ੍໿
 Softwareͷi18nରԠͷجຊ
 ϓϨΠυʹ͓͚Δi18nରԠ ຋༁ϑϩʔɾi18nରԠνΣοΫ
 ࠓޙʹ͍ͭͯ
  9. ຊ೔ͷςʔϚ 14 ɹɹʛɹɹ© 2021 PLAID Inc. 2021.07.13ɹʛɹʲPLAID×SmartHR×Uzabase×OPEN8 ʳSaaSϓϩμΫτͷϑϩϯτΤϯυ࠷લઢɹʛɹ SaaSϓϩμΫτͷi18n ࿩͢͜ͱ

    👉 i18nͷ໨తͱ੍໿
 Softwareͷi18nରԠͷجຊ
 ϓϨΠυʹ͓͚Δi18nରԠ ຋༁ϑϩʔɾi18nରԠνΣοΫ
 ࠓޙʹ͍ͭͯ
  10. 15 2021.07.13ɹʛɹʲPLAID×SmartHR×Uzabase×OPEN8 ʳSaaSϓϩμΫτͷϑϩϯτΤϯυ࠷લઢɹʛɹ ɹɹʛɹɹ© 2021 PLAID Inc. i18nͷ໨తͱ੍໿ i18nͷ໨త •

    ϓϩμΫτͷՁ஋ΛΑΓଟ͘ͷϢʔβʔʹಧ͚ΔͨΊ • ৽ͨͳࢢ৔ɾϢʔβʔʹରͯ͠ͷϓϩμΫτͷՁ஋ݕূͷͨΊ
  11. 16 2021.07.13ɹʛɹʲPLAID×SmartHR×Uzabase×OPEN8 ʳSaaSϓϩμΫτͷϑϩϯτΤϯυ࠷લઢɹʛɹ ɹɹʛɹɹ© 2021 PLAID Inc. i18nͷ໨తͱ੍໿ “Starting a

    company is like throwing yourself off the cliff and assembling an airplane on the way down”
 
 by Reid Hoffman (LinkedIn Co-founder) IUUQTXXXGBTUDPNQBOZDPNIPXMJOLFEJOTSFJEIP ff NBOKVNQFEP ff BDMJ ff BOECVJMUBOBJSQMBOF IUUQTFOXJLJQFEJBPSHXJLJ3FJE@)P ff NBO ͨͩ͠ϓϨΠυ͸ελʔτΞοϓ …ʮ֑ͷ্͔Βඈͼ߱Γͳ͕ΒඈߦػΛ࡞Δʯ
  12. 17 2021.07.13ɹʛɹʲPLAID×SmartHR×Uzabase×OPEN8 ʳSaaSϓϩμΫτͷϑϩϯτΤϯυ࠷લઢɹʛɹ ɹɹʛɹɹ© 2021 PLAID Inc. i18nͷ໨తͱ੍໿ PMFΛ໨ࢦ͢SaaS ϓϩμΫτΞ΢τ

    ϚʔέοτΠϯ ϓϩμΫτΛ࣠ʹࢢ৔ʹՁ஋Λ౰ͯʹ͍͘ ࢢ৔Λ࣠ʹϓϩμΫτΛߟ͑ɺఏڙ͢Δ ߴ଎ʹPMFͷୡ੒Λ໨ࢦ͢ඞཁ͕͋Δ
 = ։ൃεϐʔυΛͰ͖Δ͚ͩམͱ͞ͳ͍ͷ͕େࣄʢ੍໿ʣ
 + ਖ਼͘͠ίϯηϓτ͕఻ΘΔΑ͏ͳݴ༿બͼΛ͍ͨ͠ʢNot machine translationʣ …ϓϨΠυ͸ͪ͜Βʹॏ৺͕͋Δ
  13. ຊ೔ͷςʔϚ 18 ɹɹʛɹɹ© 2021 PLAID Inc. 2021.07.13ɹʛɹʲPLAID×SmartHR×Uzabase×OPEN8 ʳSaaSϓϩμΫτͷϑϩϯτΤϯυ࠷લઢɹʛɹ SaaSϓϩμΫτͷi18n ࿩͢͜ͱ

    👉 i18nͷ໨తͱ੍໿
 Softwareͷi18nରԠͷجຊ
 ϓϨΠυʹ͓͚Δi18nରԠ ຋༁ϑϩʔɾi18nରԠνΣοΫ
 ࠓޙʹ͍ͭͯ
  14. 21 ɹɹʛɹɹ© 2021 PLAID Inc. 2021.07.13ɹʛɹʲPLAID×SmartHR×Uzabase×OPEN8 ʳSaaSϓϩμΫτͷϑϩϯτΤϯυ࠷લઢɹʛɹ දࣔ͞ΕΔจݴҎ֎ͷ؍఺ • ෳ਺ܗɾtagΛؚΜͩޠॱม׵

    • TimezoneରԠ • CurrencyରԠ • จԽରԠʢه߸ɾίϯςϯπͳ Ͳʣ • σβΠϯͷରԠ • e.t.c… Softwareͷi18nରԠͷجຊ
  15. 23 2021.07.13ɹʛɹʲPLAID×SmartHR×Uzabase×OPEN8 ʳSaaSϓϩμΫτͷϑϩϯτΤϯυ࠷લઢɹʛɹ ɹɹʛɹɹ© 2021 PLAID Inc. ه߸ͷҙຯʹ͍ͭͯ … ৭ʑ͋Δ

    ✔ ೔ຊޠ: ɹؒҧ͍
 ӳɹޠ:ɹਖ਼ղ ~ (νϧμ)ͱʙ IUUQTCMPHOJTIJOPTDPNBSDIJWFTIUNM ೔ຊޠͰʙ165cm:ɹ165cmҎԼɹ
 ӳޠͰ~165cm:ɹ໿165cmɹ ̋, ✖︎ ೔ຊޠ: ܾఆɺΩϟϯηϧɹ
 ӳޠ: Ωϟϯηϧɺܾఆ
 ɹ※࠷ۙ͸೔ຊ൛͕ٯʹͳͬͯ౷Ұ͞Εͨ໛༷ ʢςετͷ࠾఺౳Ͱʣ (ήʔϜͷίϯτϩʔϥʔ) Softwareͷi18nରԠͷجຊ
  16. 24 2021.07.13ɹʛɹʲPLAID×SmartHR×Uzabase×OPEN8 ʳSaaSϓϩμΫτͷϑϩϯτΤϯυ࠷લઢɹʛɹ ɹɹʛɹɹ© 2021 PLAID Inc. { "en": {

    "save": "Save" }, "ja": { "save": "อଘ" } } <Button>{{ $t('save') }}</Button> جຊతͳϑϩϯτΤϯυͷi18nରԠ ja en I18n + l10nରԠ Renderingޙ i18nରԠલͷHTML • innerHTMLʹจࣈͰ͸ͳ͘ɺkeyΛೖΕΔ • จݴ͸ɺϢʔβʔͷݴޠ͝ͱʹresourceΛ࣋ͬͯࢀর͢Δ Softwareͷi18nରԠͷجຊ <Button>อଘ</Button> <Button>อଘ</Button> <Button>Save</Button>
  17. ຊ೔ͷςʔϚ 25 ɹɹʛɹɹ© 2021 PLAID Inc. 2021.07.13ɹʛɹʲPLAID×SmartHR×Uzabase×OPEN8 ʳSaaSϓϩμΫτͷϑϩϯτΤϯυ࠷લઢɹʛɹ SaaSϓϩμΫτͷi18n ࿩͢͜ͱ

    👉 i18nͷ໨తͱ੍໿
 Softwareͷi18nରԠͷجຊ
 ϓϨΠυʹ͓͚Δi18nରԠ ຋༁ϑϩʔɾi18nରԠνΣοΫ
 ࠓޙʹ͍ͭͯ
  18. ϓϨΠυʹ͓͚Δi18nରԠ 26 ɹɹʛɹɹ© 2021 PLAID Inc. 2021.07.13ɹʛɹʲPLAID×SmartHR×Uzabase×OPEN8 ʳSaaSϓϩμΫτͷϑϩϯτΤϯυ࠷લઢɹʛɹ ΞʔΩςΫνϟ ݩʑ͸ϞϊϦγοΫ

    - ؔ৺෼཭ - σϓϩΠΛ༰қʹ ϚΠΫϩαʔϏεʢͷΑ͏ͳʣઃܭʹ ※Ұ෦·͕ͨͬͯڞ௨Ͱ࢖͏component΍ ఆ਺ͳͲ͕͋Δ
  19. 28 ɹɹʛɹɹ© 2021 PLAID Inc. 2021.07.13ɹʛɹʲPLAID×SmartHR×Uzabase×OPEN8 ʳSaaSϓϩμΫτͷϑϩϯτΤϯυ࠷લઢɹʛɹ ϑϩϯτΤϯυ(view)Ҏ֎ • DBͷσʔλ

    • ֤ࠃޠ༻ʹσʔλΛ࡞Δ • σʔλ͝ͱʹresourceΛ࣋ͭ • σʔλʹkeyΛ࣋ͨͤͯɺresource͸ ϑϩϯτʹ࣋ͭ • όοΫΤϯυɾϑϩϯτΤϯυڞ ௨Ͱ࢖͏ఆ਺
 • ֎෦αʔϏεΛ࢖͍ͬͯΔ৔߹ ϓϨΠυʹ͓͚Δi18nରԠ
  20. 29 ɹɹʛɹɹ© 2021 PLAID Inc. 2021.07.13ɹʛɹʲPLAID×SmartHR×Uzabase×OPEN8 ʳSaaSϓϩμΫτͷϑϩϯτΤϯυ࠷લઢɹʛɹ جຊํ਑ • όοΫΤϯυʹจݴ͸࣋ͨͳ͍

    • จݴΛ࢖ͬͯϩδοΫΛॻ͔ͳ͍ • όοΫΤϯυʹλΠϜκʔϯґଘͷ ࣮૷͸࣋ͨͳ͍ • i18n͸ϑϩϯτΤϯυͰରԠ͢Δ Vue I18n
 (Vueͷi18nରԠ༻Plugin) ΄΅Vue.jsͰ࣮૷͞Ε͍ͯΔͷͰ
 @intlify/vue-i18n Λ࢖ͬͯi18nରԠ ϓϨΠυʹ͓͚Δi18nରԠ
  21. 30 ɹɹʛɹɹ© 2021 PLAID Inc. 2021.07.13ɹʛɹʲPLAID×SmartHR×Uzabase×OPEN8 ʳSaaSϓϩμΫτͷϑϩϯτΤϯυ࠷લઢɹʛɹ Single File ComponentͷରԠྫ

    <template> <Button>{{ $t('save') }}</Button> </template> <script> // ... </script> <i18n> { "en": { "save": "Save" }, "ja": { "save": “อଘ" } } </i18n> <style> /* ... */ </style> ϓϨΠυʹ͓͚Δi18nରԠ
  22. ຊ೔ͷςʔϚ 31 ɹɹʛɹɹ© 2021 PLAID Inc. 2021.07.13ɹʛɹʲPLAID×SmartHR×Uzabase×OPEN8 ʳSaaSϓϩμΫτͷϑϩϯτΤϯυ࠷લઢɹʛɹ SaaSϓϩμΫτͷi18n ࿩͢͜ͱ

    👉 i18nͷ໨తͱ੍໿
 Softwareͷi18nରԠͷجຊ
 ϓϨΠυʹ͓͚Δi18nରԠ ຋༁ϑϩʔɾi18nରԠνΣοΫ
 ·ͱΊɾࠓޙͷऔΓ૊Έ
  23. 33 ɹɹʛɹɹ© 2021 PLAID Inc. 2021.07.13ɹʛɹʲPLAID×SmartHR×Uzabase×OPEN8 ʳSaaSϓϩμΫτͷϑϩϯτΤϯυ࠷લઢɹʛɹ εϐʔυΛམͱ͞ͳ͍ͨΊʹ • ຋༁͢ΔείʔϓΛߜΔ

    • PMFΛ໨ࢦ͢։ൃதͷϓϩμΫτ • Beta൛ػೳ
 →είʔϓ֎ͷϓϩμΫτ͸೔ຊޠҎ֎Ͱͷར༻ ࣌ʹάϩʔόϧφϏήʔγϣϯ͔Βඇදࣔʹ͢Δ
 • Developer͕຋༁ͷΫΦϦςΟʹ ͍ͭͯؾʹͤͣ։ൃͰ͖ΔΑ͏ʹ ͢Δ ຋༁ϑϩʔɾi18nରԠνΣοΫ
  24. 34 ɹɹʛɹɹ© 2021 PLAID Inc. 2021.07.13ɹʛɹʲPLAID×SmartHR×Uzabase×OPEN8 ʳSaaSϓϩμΫτͷϑϩϯτΤϯυ࠷લઢɹʛɹ ख໭ΓɾରԠ࿙ΕΛ
 ๷͙ͨΊʹ eslint-plugin-vue-i18n

    RuleΛద༻ • no-raw-text: HTMLʹจݴΛ௚ॻ͖͍ͯ͠ΔՕॴΛݕ஌ ʢi18nະରԠՕॴʣ • no-missing-key: Ϧιʔεʹkey͕ଘࡏ͠ͳ͍ՕॴΛݕ஌ • no-unused-keys: ಉ͡Ωʔ͕ॏෳͯ͠ଘࡏ͢ΔՕॴΛݕ஌ • e.t.c. ্هϧʔϧΛద༻ͯ͠ɺCIͰࢭΊΔ ຋༁ϑϩʔɾi18nରԠνΣοΫ IUUQTFTMJOUQMVHJOWVFJOJOUMJGZEFW
  25. 35 ɹɹʛɹɹ© 2021 PLAID Inc. 2021.07.13ɹʛɹʲPLAID×SmartHR×Uzabase×OPEN8 ʳSaaSϓϩμΫτͷϑϩϯτΤϯυ࠷લઢɹʛɹ ରԠෆཁͳՕॴ͸ignore͢Δ e.g .

    • ProductD͸։ൃதͷͨΊରԠෆཁ • ProductBͷBetaػೳ͸ରԠෆཁ είʔϓ֎ͷՕॴΛݕ஌͠ͳ͍Α͏ʹ͢Δ .git/ node_modules/ build/ builds/ dist/ _dist/ # WIP src/productD # Beta features src/ProductB/components/some_functions/aaa/ .eslintignore-i18n Ignore fileΛఆٛͯ͠ɺoptionͰ౉͠ɺ
 ର৅֎ͷcomponentؚ͕·Ε͍ͯΔ
 σΟϨΫτϦΛlintର৅͔Β֎͢ ຋༁ϑϩʔɾi18nରԠνΣοΫ
  26. ຊ೔ͷςʔϚ 38 ɹɹʛɹɹ© 2021 PLAID Inc. 2021.07.13ɹʛɹʲPLAID×SmartHR×Uzabase×OPEN8 ʳSaaSϓϩμΫτͷϑϩϯτΤϯυ࠷લઢɹʛɹ SaaSϓϩμΫτͷi18n ࿩͢͜ͱ

    👉 i18nͷ໨తͱ੍໿
 Softwareͷi18nରԠͷجຊ
 ϓϨΠυʹ͓͚Δi18nରԠ ຋༁ϑϩʔɾi18nରԠνΣοΫ
 ·ͱΊɾࠓޙͷऔΓ૊Έ
  27. 39 ɹɹʛɹɹ© 2021 PLAID Inc. 2021.07.13ɹʛɹʲPLAID×SmartHR×Uzabase×OPEN8 ʳSaaSϓϩμΫτͷϑϩϯτΤϯυ࠷લઢɹʛɹ ·ͱΊ • Ձ஋୳ࡧϑΣʔζͷελʔτΞο

    ϓͱͯ͠ͷɺi18nͷऔΓ૊Έ • i18nରԠͷείʔϓΛߜΔ • LintͰi18nରԠͷ࿙ΕΛແ͘͢ • νΣοΫෆཁͳՕॴ͸ద੾ʹignor e • ඇಉظతͳ຋༁ϑϩʔ ·ͱΊɾࠓޙͷऔΓ૊Έ
  28. 40 ɹɹʛɹɹ© 2021 PLAID Inc. 2021.07.13ɹʛɹʲPLAID×SmartHR×Uzabase×OPEN8 ʳSaaSϓϩμΫτͷϑϩϯτΤϯυ࠷લઢɹʛɹ ࠓޙͷऔΓ૊Έ • I18nରԠͷํ਑Λ·ͱΊͯ։ൃνʔϜ

    ʹshar e • ϓϩμΫτʹৄ͍͠ਓ͔͠຋༁͕ࠔ೉ ͳ໰୊Λղܾ • ຋༁πʔϧʹը໘ΩϟϓνϟΛఴ͑Δ࢓૊Έ • ຋༁ࣙॻ • ຋༁ϑϩʔͷݕূ • ֎෦຋༁ऀʹΑΔ຋༁ ·ͱΊɾࠓޙͷऔΓ૊Έ