打造国际化产品：Strikingly的I18n实践

Strikingly 的用户遍及 200 多个国家和地区，这些用户来自不同的文化背景，熟悉不同的语言，如何使这些用户使用各自熟悉的语言访问我们的 Web 服务和移动应用，与我们的客服人员沟通，甚至将该语言的文化元素融入到产品设计中，是我们一直致力于解决的问题，在这个过程中我们也积累了不少经验，希望可以分享出来并帮助到有志于打造国际化产品的团队。

Transcript

1. 打造国际化产品 Strikingly 的 I18n 实践 龚凌晖, Strikingly Twitter: @danielglh Github: danielglh
4. • ⽤用户来⾃自200多个国家和地区 • ⽀支持Web端和移动端 • ⽀支持6种语⾔言的产品界⾯面和客户服务 • ! English • " ⽇日本語 • # Français • $ Español • % 简体中⽂文 • & 繁體中⽂文
5. • ⽤用户来⾃自200多个国家和地区 • ⽀支持Web端和移动端 • ⽀支持6种语⾔言的产品界⾯面和客户服务 • ! English • " ⽇日本語 • # Français • $ Español • % 简体中⽂文 • & 繁體中⽂文 • 2016年年4⽉月正式推出 • ⽤用户主要来⾃自中国⼤大陆 • 本⼟土化的产品特性 • 产品界⾯面和客户服务 • % 简体中⽂文 • 独⽴立于 Strikingly 的品牌 • 代码⾼高度重⽤用
6. i18n
7. i18n
8. -> internationalization i18n
9. 国际化(I18n) 设计和实现软件，使之⽆无需通过修改代 码即可适应不不同语⾔言和地区的需要。
10. 国际化 v.s. 本地化
11. 内容提要 • 本地化的益处 • Strikingly 的 i18n 解决⽅方案 • 上线了了带来的挑战
12. 为什什么需要本地化？
13. 本地化的益处
14. 本地化的益处 • 改善⽤用户体验
15. 本地化的益处 • 改善⽤用户体验 • 提⾼高付费转化率
16. 本地化的益处 • 改善⽤用户体验 • 提⾼高付费转化率 • 提⾼高访客注册转化率
17. 本地化的益处 • 改善⽤用户体验 • 提⾼高付费转化率 • 提⾼高访客注册转化率 • 扩⼤大市场占有
18. 本地化的益处 • 改善⽤用户体验 • 提⾼高付费转化率 • 提⾼高访客注册转化率 • 扩⼤大市场占有
19. Strikingly的i18n 解决⽅方案
20. I18n in Strikingly Platform Workflow People Technology
21. I18n in Strikingly Technology
22. Browser Mobile Server Angular jQuery Rails Ruby I18n Gettext React React Native iOS Android I18n: Technology
23. Browser Mobile Server Angular jQuery Rails Ruby I18n Gettext React React Native iOS Android Browser Mobile Server Angular jQuery Rails Ruby I18n Gettext React React Native iOS Android I18n: Server
24. Browser Mobile Server Angular jQuery Rails Ruby I18n Gettext React React Native iOS Android I18n: Server
25. Ruby I18n • Ruby i18n • Github repo: https://github.com/svenfuchs/i18n • Ruby Gem 提供 i18n ⽀支持的标准 • devise • doorkeeper • simple_form • Rails i18n • Rails i18n API: http://guides.rubyonrails.org/i18n.html • ⾃自Rails 2.2开始包含 Ruby i18n gem • Active Record • Active Support
26. I18n.translate I18n.t
27. I18n.t
28. I18n.t “plans.pro_yearly”
29. I18n.t “plans.pro_yearly”
30. I18n.localize I18n.l
31. I18n.l
32. I18n.l Date.today,format: :long
33. I18n.l Date.today,format: :long
34. I18n.l Date.today,format: :long “九⽉月 23, 2016”
35. I18n.l Date.today,format: :long “九⽉月 23, 2016”
36. I18n.l Date.today,format: :long “2016年年9⽉月23⽇日”
37. Browser Mobile Server Angular jQuery Rails Ruby I18n React React Native iOS Android Gettext Browser Mobile Server Angular jQuery Rails Ruby I18n Gettext React React Native iOS Android I18n: Server
38. Browser Mobile Server Angular jQuery Rails Ruby I18n React React Native iOS Android Gettext I18n: Server
39. Gettext
40. Gettext • gettext • 最初由 Sun Microsystems 开发 • 类 Unix 系统的 i18n 和 l10n ⽀支持
41. Gettext • gettext • 最初由 Sun Microsystems 开发 • 类 Unix 系统的 i18n 和 l10n ⽀支持 • GNU gettext • 由 GNU 在 1995 年年发布 • ⽬目前最常⻅见的gettext实现
42. Gettext • gettext • 最初由 Sun Microsystems 开发 • 类 Unix 系统的 i18n 和 l10n ⽀支持 • GNU gettext • 由 GNU 在 1995 年年发布 • ⽬目前最常⻅见的gettext实现 • 各种主流语⾔言都有gettext的实现 • Ruby Gettext: https://github.com/mutoh/gettext • Ruby FastGettext: https://github.com/grosser/fast_gettext
43. _(“RubyConf China”)
44. _(“RubyConf China”)
45. gettext v.s. fast_gettext
46. gettext + fast_gettext
47. city = “Chengdu, China” _(city)
48. city = “Chengdu, China” _(city) city = “Chengdu, China” _(city) => “Chengdu, China”
49. city = N_(“Chengdu, China”) city => “Chengdu, China” _(city)
50. city = N_(“Chengdu, China”) city => “Chengdu, China” _(city) => “中国成都”
51. _(“Order”)
52. _(“Order”)
53. s_(“Ecommerce|Order”)
54. s_(“Ecommerce|Order”) “订单” 中⽂文
55. s_(“Ecommerce|Order”) “订单” 中⽂文 “Order” ⽇日语
56. I18n的⼀一般流程
57. I18n的⼀一般流程 • ⽤用message id替换代码中需要本地化的⽂文本
58. I18n的⼀一般流程 • ⽤用message id替换代码中需要本地化的⽂文本 • 根据上下⽂文环境将message id翻译成⽬目标语⾔言⽂文本
59. I18n的⼀一般流程 • ⽤用message id替换代码中需要本地化的⽂文本 • 根据上下⽂文环境将message id翻译成⽬目标语⾔言⽂文本 • 将翻译结果保存成⽬目标语⾔言的词典
60. I18n的⼀一般流程 • ⽤用message id替换代码中需要本地化的⽂文本 • 根据上下⽂文环境将message id翻译成⽬目标语⾔言⽂文本 • 将翻译结果保存成⽬目标语⾔言的词典 • 程序运⾏行行时，根据词典将message id翻译为⽬目标语 ⾔言⽂文本
61. Ruby I18n v.s. Gettext Ruby I18n Gettext ID “errors.not_authorized” "Not authorized to complete the action." 提取 N/A ⾃自动提取 可读性 代码可读性⼀一般 代码可读性强 适⽤用场景 Rails组件，Ruby gem的i18n⽀支持 其他
62. Browser Mobile Server Angular jQuery Rails Ruby I18n Gettext React React Native iOS Android Browser Mobile Server Angular jQuery Rails Ruby I18n Gettext React React Native iOS Android I18n: Browser
63. Browser Mobile Server Angular jQuery Rails Ruby I18n Gettext React React Native iOS Android I18n: Browser
64. 为什什么 Javascript 代码⾥里里会⽤用到 Ruby i18n 的实现？
65. 为什什么我们要对两代架构采⽤用 不不同的 i18n 实现？
66. I18n: Browser • I18n-js • https://github.com/fnando/i18n-js • 遵循 Ruby i18n 的规范 • 类似 Ruby i18n 的API • 可以导⼊入和重⽤用 Ruby/Rails 的词典⽂文件
67. I18n: Browser • Gettext (jsxgettext + Jed) • jsxgettext • https://github.com/zaach/jsxgettext • 从 js ⽂文件及各种 js 模板⽂文件中提取字符串串 • Jed • https://slexaxton.github.io/Jed/ • Gettext 的⼀一个 Javascript ⾼高效实现
68. 服务器器端 浏览器器端 提取 gettext gem jsxgettext 翻译 fast_gettext gem Jed
69. Browser Mobile Server Angular jQuery Rails Ruby I18n Gettext React React Native iOS Android Browser Mobile Server Angular jQuery Rails Ruby I18n Gettext React React Native iOS Android I18n: Mobile
70. Browser Mobile Server Angular jQuery Rails Ruby I18n Gettext React React Native iOS Android I18n: Mobile
71. I18n in Strikingly Platform Workflow People Technology
72. I18n in Strikingly Platform
73. OneSky • 上传待翻译的词条 • 下载已翻译的词典 • 词条翻译管理理界⾯面 • 兼容不不同i18n标准 • 良好的API⽀支持 • 第三⽅方翻译⼈人员招募
74. I18n in Strikingly Platform Workflow People Technology
75. I18n in Strikingly People
76. I18n: People
77. I18n: People • 翻译⼈人员要求
78. I18n: People • 翻译⼈人员要求 • 以⽬目标语⾔言为⺟母语
79. I18n: People • 翻译⼈人员要求 • 以⽬目标语⾔言为⺟母语 • 对互联⽹网产品有所了了解
80. I18n: People • 翻译⼈人员要求 • 以⽬目标语⾔言为⺟母语 • 对互联⽹网产品有所了了解 • 了了解产品中需要翻译的特定部分
81. I18n: People
82. I18n: People • 众包翻译平台 • 上⼿手简单迅速，⽆无需培训 • 翻译质量量参差不不⻬齐
83. I18n: People • 众包翻译平台 • 上⼿手简单迅速，⽆无需培训 • 翻译质量量参差不不⻬齐 • ⾃自有翻译团队 • 客服团队兼任 • 从粉丝⽤用户中招募 • 客户服务＋翻译
84. I18n in Strikingly Platform Workflow People Technology
85. I18n in Strikingly Workflow
86. I18n: Workflow • 常⻅见场景 • 添加新产品特性 • 改进已有产品特性 • 添加新语⾔言⽀支持
87. 添加新产品特性 开发 发布给英 语⽤用户 翻译成 中⽂文 发布给中 ⽂文⽤用户 。。。
88. 改进已有产品特性 开发 翻译成所 有语⾔言 开放给所 有⽤用户
89. 添加新语⾔言⽀支持 招募 客服 培训 翻译 发布 新语⾔言
90. I18n in Strikingly Platform Workflow People Technology
93. “上线了了”带来的挑战
94. “上线了了”带来的挑战 • 99%的代码重⽤用 • 全新的本地化品牌 • 上线了了 ≠ Strikingly简体中⽂文版 • 品牌名称置换：Strikingly -> 上线了了 • 不不同⻛风格的⽤用词：“发布” v.s. “上线” • 上线了了未来可能⽀支持英语和其他外语
95. 解决⽅方案 • MultiI18n • 分离 Strikingly 和上线了了的 i18n 词典 • 在翻译平台上创建上线了了的 i18n 项⽬目 • 修改 rake task 分别处理理两个产品的数据上传／下载 • 系统启动时，根据环境变量量中设置的产品代号动态加 载对应的配置⽂文件和词典
96. 总结 • I18n是⼀一项系统性的⼯工程 • 软件设计 • I18n ⼯工具链（⾃自⼰己开发，第三⽅方提供） • 产品开发和发布流程 • 翻译团队招募和培训
97. 联系我们！
98. 联系我们！ • StrikinglyTeam公众号 • 技术 • 产品 • 创业
99. 联系我们！ • StrikinglyTeam公众号 • 技术 • 产品 • 创业 • [上海海] [成都] 我们在招聘！ • Email: jobs@strikingly.com • 如应聘成都职位，请在邮件标题注明