POS UIエクステンションのローカライゼーション対応

Shopify POS 10.19以降、海外のマーチャント、スタッフ、および顧客向けにPOS UIエクステンションをローカライズできるようになりました。今回はその実装方法と注意点、そして、そのパフォーマンスやコスト効果について詳しく解説していきます。

技術的課題と現状分析

以前までのShopify POSでは、エクステンションのテキスト翻訳、通貨や数値の書式設定、複数形の扱いなどを手動で管理する必要がありました。これは、言語や地域によって異なる表示要件を満たすための多大な労力を必要としていました。

技術的ソリューションの提案

新機能では以下の3つの主要な機能が提供されています。

1. エクステンションテキストの翻訳: 顧客とショップのロケールに基づいて自動的に解決する翻訳文字列を定義するロケールファイルを作成します。
2. 通貨と数値の書式設定: formatCurrencyとformatNumberを使用して、ロケールに適した形式で値を表示します。
3. 複数形の扱い: Intl.PluralRules仕様を使用して、言語間で複雑な複数形ルールをサポートします。

実装手順とコード例

まず、翻訳文字列を含むロケールファイルを作成します。このファイルは、ショップのロケール設定に基づいて読み込まれます。例えば、「Hello, world!」を日本語に翻訳したい場合、ja.jsonというファイルを作り、以下のように記述します。

{
  "Hello, world!": "こんにちは、世界！"
}

次に、通貨と数値の書式設定についてです。ここでは、formatCurrencyとformatNumber関数を使用します。これらの関数は、ロケールに適した形式で値を表示するためのものです。例えば、以下のように使用できます。

formatCurrency(1234567.89, 'JPY', 'ja-JP'); // "¥1,234,568"
formatNumber(1234567.89, 'ja-JP'); // "1,234,567.89"

最後に、複数形の扱いです。ここではIntl.PluralRulesを使用して、複数形のルールを定義します。以下に、英語と日本語の例を示します。

const rules = new Intl.PluralRules('en');
console.log(rules.select(1)); // "one"
console.log(rules.select(2)); // "other"

const rules = new Intl.PluralRules('ja');
console.log(rules.select(1)); // "other"
console.log(rules.select(2)); // "other"

パフォーマンス・コスト分析

新機能の採用により、翻訳作業や表示形式の調整にかかる作業時間が大幅に削減されます。これは、開発者がより重要なタスクに集中できる時間を増やすだけでなく、エラーの発生可能性も低減します。

実装時の注意点・ベストプラクティス

各機能の実装にあたっては、以下の点に注意してください。

• ロケールファイルは、各言語ごとに別々に管理することを推奨します。これにより、言語ごとの翻訳作業を効率化することができます。
• 通貨と数値の書式設定については、ロケールに応じて適切な書式を使用するように注意してください。
• 複数形の扱いについては、言語ごとに複数形のルールが異なるため、適切なルールを使用することが重要です。

次のステップ・発展案

今後は、これらの新機能を活用して、さらに多言語対応の強化を図ることが期待されます。また、新たなローカライゼーション要件が出てきた場合にも、これらの機能を基盤として迅速に対応することが可能となります。

参考記事: Localization support for POS UI extensions