Rancher UIの日本語対応と i18nによるOSS貢献

Transcript

1. Rancher UIの日本語 対応と i18nによるOSS貢献 SUSE Rancher Support Philip Fischbacher (フィリップ） 1
2. 本日の発表目標 • OSSプロジェクトに新しい言語の追加可能性の判断方法（i18n、l10n） • Rancher UIへの日本語追加を実演 • 日本語のメンテナンスに対するRancher日本コミュニティの関心を高める
3. i18nとl10nとは？ i18n (国際化) • 複数言語に対応する機能 • ローカライズされたコンテンツを追加するためのプロジェクトの機能 l10n (ローカライズ ) • ローカル言語内容 • 国際化機能によって解析されるローカルコンテンツのこと
4. 新しい言語を追加できるOSSプロジェクトの特定 何を探すのでしょうか i18n、l10nに対する既存のファイル、ディレクトリ 検索用語 ”i18n”、”l10n”、”translation”、”en-us”、 ”ja-jp”など
5. Rancherの仕組 Rancher Rancher Dashboard Rancher API バックエンド フロントエンド Rancher Dashboard (ロカール) github.com/rancher/rancher github.com/rancher/dashboard (UI) github.com/pfischbacher/rancher-dashboard
6. 前提条件 始める前に、以下のものをご用意ください。 https://extensions.rancher.io/internal/getting-started/quickstart • Node.js ◦ 現在バージョンはNode.js 20が推奨されます ◦ Node.jsのインストールと管理にはnvmの使用を推奨いたします • yarn • git • GitHubアカウント • 実行中のRancherクラスタ
7. 手続き 1. ローカル環境を設定します（前提条件をご参照ください） 2. Rancher ダッシュボードリポジトリを forkし、ローカルマシンに cloneします 3. yarnを使用してコンポーネントをインストールします a. yarn install 4. ローカルダッシュボードを起動します。 a. API=<rancher_url> b. yarn dev 5. https://localhost:8005にアクセスします 6. 対応するRancher認証情報でログインします ローカルマシンにダッシュボードの設定
8. 必要な変更 ファイル 日本語の有効のため • shell/store/i18n.js • shell/assets/translations/en-us.yaml 日本語の内容 • shell/assets/translations/ja-jp.yaml （新ファイル） https://github.com/rancher/dashboard/compare/master...pfischbacher:rancher-dashboard:add-japanese?expand=1 モックテスト • cypress/e2e/tests/pages/user-menu/preferences.spec.ts • shell/pages/__tests__/prefs.test.ts
9. Troubleshooting ERROR Failed to compile with 1 error 11:44:45 AM error in ./shell/assets/translations/ja-jp.yaml Syntax Error: Final loader (./node_modules/js-yaml-loader/index.js) didn't return a Buffer or String ERROR in ./shell/assets/translations/ja-jp.yaml Module Error (from ./node_modules/js-yaml-loader/index.js): can not read an implicit mapping pair; a colon is missed at line 9139, column 57: ... phrase :Secretからのクライアント秘密鍵パスフレーズ ^ @ ./shell/assets/translations/ lazy ^\.\/.*\.yaml$ chunkName: [request] namespace object ./ja-jp.yaml @ ./shell/utils/dynamic-importer.js 109:9-94 …
10. Rancher UIの日本語追加に貢献する理由 • OSSへの貢献や支援に興味がある方に最適なプロジェクト • OSS/Kubernetes/Rancherへの貢献の第一歩としていいエントリ ◦ ジュニアエンジニアやコミュニティ初心者など • 一度セットアップすれば、大きな労力はかかりません ◦ Rancher V2にはすでにi18n機能が備わっているため、 l10nコンテンツを保守するだけで済みます • 高い価値貢献 ◦ 日本の企業からもRancher UIの日本語化への要望があり、貢献方法を模索している現状がありま す • 学んだことを活かして他のプロジェクトに日本語を追加しましょう
11. 参考 • https://github.com/rancher/dashboard • https://extensions.rancher.io/internal/getting-started/quickstart • https://github.com/pfischbacher/rancher-dashboard/tree/add-japanese • https://github.com/rancher/dashboard/compare/master...pfischbacher:rancher-dashboard:add-japa nese?expand=1