管理i18n的好幫手 — phrase
一直以來處理i18n對於工程師來說是一件有點繁瑣的事情,不只是要建立語系的json檔,還有後續的翻譯文字更換需求,想必大家都有過以下的情境,假設有個網頁有多國語系(i18n)的需求,第一版的翻譯已經完成了,工程師也開發完畢,但這時候pm想要調整翻譯的文字該怎麼做,以往都會是把要改的文字內容傳給工程師,請他調整對吧?
但通常會面臨到一些問題
1.要調整的地方有好多,工程師要一一核對
2.因為版面的關係,造成特定語系跑版,需要反覆的調整翻譯字句
而且這類型修改i18n的工作對於工程師來說真的很累人,這就是為什麼我們需要phrase來輔助處理i18n的原因,接下來會介紹phrase有那些功能
phrase特點
1.提供了Microsoft translate、Google translate、Amazon translate等工具,不過這類型的翻譯工具通常翻出來的語句沒那麼通順,實務上可能還是需要翻譯人員協作
2.在phrase的網站調整完翻譯之後,自動同步最新的i18n檔案到程式碼的repo,再也不用透過工程師修改
3.可以針對單一字詞上傳截圖,讓翻譯人員知道這個翻譯的字句會用在哪裡,好比說有一個網頁的按鈕很小顆,若翻譯給的單詞太長的話就可能會有跑版的問題,所以如果有附加截圖,就可以給翻譯做個參考
4. 轉換語系檔很方便,可以將import的語系檔轉export 任何格式
phrase是需要付費的服務,但是有提供幾天的試用,可以先試試看是否符合自身的需求
開始實作
本次練習使用 Phrase string ,註冊完畢後會進入projects overview的頁面,先點擊右上角的add project,就會出現新增的彈窗,名稱輸入phrase-test
main format可以選擇要建立的語系檔案格式,不限於json,還有很多類型的格式可以選擇,main technology這邊選擇javascript
建立好project之後會進到這個頁面,引導你先設定這個project支援哪些語系
可以一次設定多個語系
第二個步驟是要上傳語系json檔案,如果今天只是單純要協作修改i18n檔案,並沒有要和repo連動,可以選擇自行上傳json檔,不過我們要設定與github的json同步,所以該步驟可以省略
接下來我們要聯動phrase和github,首先要先把本機的i18n json push到phrase的平台,完成第一次的初始化之後,翻譯者就能在phrase平台編輯翻譯的字句了,等待完成編輯之後再以發pr的方式,更新github上i18n json,可參考下面的流程圖
如何將本機的i18n上傳到phrase
透過brew 安裝 phrase cli (使用windows的朋友請用其他方法安裝
$ brew install phrase-cli
執行phrase init生成phrase.yaml,會要求你輸入phrase token
這時我們回到phrase的網站,在settings裏面可以建立token
建立token讓我們等一下可以有權限把本地的i18n json push到phrase,這裡可以把phrase想像成是多國語系界的github,只是放的不是程式碼,是i18n的檔案
建立成功之後就可以複製這段token
回到terminal 把剛剛的phrase token貼上,就能夠讀取現在phrase上面現有的所有專案,並且詢問你要連結的專案是哪一個,這邊我要選擇剛剛建立的phrase-test專案,所以輸入數字3
接著會詢問你要使用的檔案格式為何,我選擇simple JSON,因此輸入空白鍵
這邊要設定想要上傳到phrase的json路徑為何,我習慣將i18n的檔案放在assets底下,因此設定為 ./src/assets/i18n/<locale_name>.json
最後phrase cli會自動生成一個yml檔,我們需要將這個yml檔push到github上面,不然後續設定會有問題
phrase:
access_token: 1ab5526613db5e21c2f6?????????????????????
project_id: 379cf3c441e59bd95a1106b504acd091
push:
sources:
- file: ./src/assets/i18n/<locale_name>.json
params:
file_format: simple_json
pull:
targets:
- file: ./src/assets/i18n/<locale_name>.json
params:
file_format: simple_json
將本機的i18n json與phrase網站的連動前置作業已經完成了,假設我們現在需要將json檔上傳到phrase,只要執行 phrase push即可
push成功之後就可以在phrase的網站裡看到語系檔拉!
日後如果有新增其他語系,只要執行phrase push就能夠輕鬆上傳了
當phrase有異動時,如何更新github的i18n
先到phrase的project setting啟用github同步功能
必須先到github生成一組token給phrase使用,這樣之後語系檔案有異動,phrase才能夠發pr給github
設定過期時間和授權的scope,這邊的scope我只勾選了repo
把剛剛生成好的github token貼到phrase的personal access token欄位裡面,等候一下下就會長出github repository的列表,選擇要連動的repository名稱
選好repository,就會顯示出該repository有哪些branch,
(注意:選定的branch必須有phrase yml,不然就會出現錯誤 .phrase.yml configuration file does not exist in the selected branch of your repository.
到這裡設定就算是告一段落了,接下來就來測試如果修改phrase的翻譯字句,是否能夠自動幫我們更新到github
在phrase的日文翻譯上加上一個顏文字
然後回到languages的頁面,按右上角的github sync按鈕,選擇export to Github as pull request
回到github就會看到phrase發的pull request拉
pr的內容的確就是我剛剛修改的部分
按下merge就大功告成了
結論:雖然phrase設定的流程有點繁瑣,但後續的維護真的方便很多,至少工程師可以減少很多次的copy & past,真的非常推薦大家有機會可以導入看看phrase!