Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

GitHubと翻訳支援ツールで多言語サイトの更新を超速にする

5,305 views

Published on

Cybozu Meetup #19 ヘルプサイトについて語る会での発表です
https://cybozu.connpass.com/event/128938/

Published in: Technology
  • Be the first to comment

GitHubと翻訳支援ツールで多言語サイトの更新を超速にする

  1. 1. GitHubと翻訳⽀援ツールで多⾔語サイトの 更新を超速にする サイボウズ 澤井 真佑⼦
  2. 2. ⾃⼰紹介 ▌澤井 真佑⼦  ヘルプサイトのコンテンツや製品UI⽂⾔のライティング、翻訳、 ⽂書校正の⾃動化などを担当  通信会社、AIベンチャーなどを経て2018年中途⼊社
  3. 3. こんな内容を話します ▌多⾔語展開しているヘルプサイトの悩み  内容の同期が⼤変 ▌悩みを解決したヘルプ新基盤  GitHub+翻訳⽀援ツール(Memsource)  旧基盤と⽐べてどこが効率化された︖ ▌基盤変更の苦労話  周囲の説得  マークダウンの⽅⾔
  4. 4. 多⾔語展開しているヘルプサイトの悩み
  5. 5. 他の⾔語への反映が⼤変 ⽇本語版 更新 差分を翻訳者 に連絡 翻訳 翻訳結果を CMSに反映 ⽇本語版に フィードバック反映︕ ⾚字の部分が 今回変えたところです ⾚字の部分を 翻訳... 翻訳結果を CMSに反映
  6. 6. 差分はPDFに書いて連絡していた 原稿作成 翻訳 作業 確 認 公 開 PDF 記録 CMS ⼊⼒ PDF 確認
  7. 7. 販売地域ごとの書き分け ▌地域ごとに販売製品が異なる ⽇本 中国 アメリカ 販売製品 kintone kintone モバイル Garoon Office メールワイズ KUNAI kintone kintone モバイル Garoon KUNAI kintone kintone モバイル
  8. 8. 販売地域ごとの書き分け ▌⾔語ごとに、CMSに⼿作業で書き分けを設定する 原稿作成 翻訳 作業 確 認 公 開 PDF 記録 CMS ⼊⼒ PDF 確認
  9. 9. 「原稿作成」と「翻訳」以外の ルーチン作業に時間がかかる 原稿作成 翻訳 作業 確 認 公 開 PDF 記録 CMS ⼊⼒ この時間を減らしたい︕ PDF 確認
  10. 10. アジアと北⽶を中⼼に⽇英中の3ヶ国語でヘルプサイトを公開 今後も対応⾔語が増えていく想定 さらに・・・
  11. 11. コンテンツの管理基盤から抜本的に⼊れ替えた GitHub Memsource P G P G P G +70 / ヘルプ制作チーム プルリクエスト プルリクエストを レビュー レビュアー ⽇本語版 mdファイル 他⾔語版 mdファイル 社内翻訳チーム 社外翻訳チーム 翻訳 翻訳 更新された mdファイルをアップ HTMLに 変換して公開 P G ▌刷新後のシステム Hugo
  12. 12. 説明︓マークダウン GitHub Memsource P G P G P G +70 / ヘルプ制作チーム プルリクエスト プルリクエストを レビュー レビュアー ⽇本語版 mdファイル 他⾔語版 mdファイル 社内翻訳チーム 社外翻訳チーム 翻訳 翻訳 更新された mdファイルをアップ HTMLに 変換して公開 P G
  13. 13. マークダウンとは ▌マークアップ⾔語のひとつ  シンプルな記法で 「覚えやすい」 「読みやすい」 「書きやすい」  HTML に簡単に変換できる # レベル1の⾒出し ## レベル2の⾒出し ### レベル3の⾒出し * 番号無し箇条書きの1つめの項⽬ * 番号無し箇条書きの2つめの項⽬ ⾒出し︓ 箇条書き︓
  14. 14. マークダウンとは (ブログ Cybozu Inside Out 編集画⾯)
  15. 15. マークダウンでのコンテンツ管理に変える ▌テキストファイルでコンテンツを管理 することで︓  GitHubなどでのバージョン管理が容易  マークダウンだと、GitHubでレビュー するときに差分もわかりやすい  ⽂字列の⼀括置換(Grep置換)が 容易  リンクのURLを⼀括置換したいこと とかよくある
  16. 16. 説明︓静的サイトジェネレーター HUGO GitHub Memsource P G P G P G +70 / ヘルプ制作チーム プルリクエスト プルリクエストを レビュー レビュアー ⽇本語版 mdファイル 他⾔語版 mdファイル 社内翻訳チーム 社外翻訳チーム 翻訳 翻訳 更新された mdファイルをアップ HTMLに 変換して公開 P G • Netlifyに組み込まれている • マークダウンをHTMLに変換
  17. 17. マークダウンをHTMLに 変換するツール Hugoを採⽤  ページ数が多くても⾼速変換 ※ヘルプサイトは1万ページ超  ショートコードが便利  {{%disabled CN%}} のようなタグで、地域ごとに 表⽰を制御できる  Goでテンプレートを書ける ※書ける⼈が⽐較的多い https://www.staticgen.com/
  18. 18. 説明︓ホスティングサービス Netlify GitHub Memsource P G P G P G +70 / ヘルプ制作チーム プルリクエスト プルリクエストを レビュー レビュアー ⽇本語版 mdファイル 他⾔語版 mdファイル 社内翻訳チーム 社外翻訳チーム 翻訳 翻訳 更新された mdファイルをアップ HTMLに 変換して公開 P G
  19. 19. Netlifyでホスティング ▌Netlifyの特⻑  静的サイトのホスティングサーバー  Hugoなど、マークダウンをHTMLに変換する各種ツールがあらかじめ 組み込まれてる  GitHubとの連携が強い  CDNによって世界各地からサイトに⾼速にアクセス可能 こちらも参考︓ https://blog.cybozu.io/entry/2019/03/11/170000
  20. 20. 説明︓翻訳⽀援ツール Memsource(メムソース) GitHub Memsource P G P G P G +70 / ヘルプ制作チーム プルリクエスト プルリクエストを レビュー レビュアー ⽇本語版 mdファイル 他⾔語版 mdファイル 社内翻訳チーム 社外翻訳チーム 翻訳 翻訳 更新された mdファイルをアップ HTMLに 変換して公開 P G
  21. 21. 翻訳⽀援ツール(CATツール)とは︖ ▌CATツールの提供する機能  翻訳メモリ  過去に翻訳した⽂をそのまま使いまわせる  過去に翻訳した、似ている訳⽂を参照できる  前回からの差分だけを翻訳対象にできる
  22. 22. 代表的なCATツール ▌サイボウズではMemsourceを採⽤  有料ツールは、翻訳メモリーを共有して複数の翻訳者が 同時翻訳可能  SaaSで提供されているのでセットアップが楽  翻訳会社と環境を共有できる  翻訳者も使い慣れている  マークダウン形式に対応 有料 無料 SDL Trados Memsource MemoQ Croudin など OmegaT Google Translator Toolkit
  23. 23. Memsourceの画⾯イメージ 翻訳対象の⽂ 翻訳メモリ
  24. 24. サイト更新の流れ ⽇本語原稿作成 レビューを受ける 公開︕ • GitHubのプルリクエスト 機能でレビュー • システムが差分を表⽰ • GitHubでマージすると、 Netlifyが⾃動的に Webページを公開 • マークダウンで、記事を 作成
  25. 25. 翻訳の流れ 翻訳 • Memsourceに⽇本語マークダウン を読み込み、更新された部分のみを 翻訳 公開︕ • GitHubに翻訳結果を保存すると、 Netlifyが⾃動的にWebページを 公開
  26. 26. 稼働削減効果 原稿作成 PDF 作成 翻訳作業 ⽇本語ヘルプ担当者 翻訳者 ⽇本語ヘルプ担当者 ⽇本語ヘルプ担当者 翻訳者 ヘルプ基盤 変更前 ヘルプ基盤 変更後 PDF 確認 CMS ⼊⼒ 確認 公開 原稿作成 翻訳 作業 確 認 公開
  27. 27. 稼働削減以外の効果 ▌⼿作業による差分連絡、確認を⾃動化したことで、漏れを防⽌ ▌翻訳メモリーの活⽤による表現の統⼀(⽂書品質の向上) ▌ヘルプサイトの細やかな改善がやりやすい  「表現を⾒直したほうが分かりやすいけど、翻訳フローをまわすのが⼤ 変だな・・」がなくなった
  28. 28. おまけ︓苦労話
  29. 29. 苦労話 ▌周囲の説得 ▌システムごとのマークダウン⽅⾔の違い
  30. 30. 変更前に使⽤していたCMSの編集画⾯ ▌直感的にわかりやすい
  31. 31. 変更後︓ ▌慣れるまでは、(⼈によっては)書きにくい  「これまでと同じペースで記事を書けるか不安」という声も ▌ページ数や変更頻度の少ない製品のサイトから先に移⾏ ▌更新と翻訳を問題なく回せることを確認してから次の製品サイトへ
  32. 32. システムごとのマークダウン⽅⾔の違い ▌HugoとMemsourceで、マークダウンの解釈が異なる ▌たとえば・・・  ⾒出し前後の空⾏  HUGOは問題なし(Webページで⾒出しとして表⽰できる)  Memsourceでは、⽂の区切りが認識できず翻訳に⽀障
  33. 33. マークダウン⽅⾔への対処 ▌Markdownlintというツールを使った  VS Codeのプラグイン  マークダウンの記法が正しくないと警告 ▌しかし、Markdownlintはとても厳格なので、HUGOとMemsourceが ともに許容する書き⽅ならば、Markdownlintのエラーを無効化した  エラーを精査して特定のエラーを無効化したり、警告にしたがって 原稿を修正したりする作業が地味に⼤変だった

×