b2c-localization

ローカライズスキル

このスキルでは、B2C Commerce のストアフロントを複数の言語や地域向けにローカライズする方法を説明します。

概要

B2C Commerce では、次の方法でローカライズに対応します。

コンポーネント	方法
テンプレート	単一のテンプレートセット＋リソースバンドル
フォーム	共有定義＋ロケール固有のラベル
静的コンテンツ	ロケール固有のフォルダー
商品データ	ローカライズ可能な属性

ロケール形式

ロケールには ISO 標準の {language}_{country} 形式を使用します。

形式	例	説明
en	英語	言語のみ
en_US	英語／米国	言語＋国
fr_CA	フランス語／カナダ	言語＋国
de_DE	ドイツ語／ドイツ	言語＋国

リソースバンドル

ディレクトリ構造

/cartridge
    /templates
        /resources
            account.properties          # Default (English)
            checkout.properties
            /fr
                account.properties      # French
                checkout.properties
            /de
                account.properties      # German
                checkout.properties
            /fr_CA
                account.properties      # French Canadian

プロパティファイルの形式

account.properties（デフォルト）：

##############################################
# Account Pages
##############################################
account.title=My Account
account.greeting=Welcome back
account.logout=Sign Out

# Account Dashboard
dashboard.title=Dashboard
dashboard.orders=Order History
dashboard.addresses=Address Book
dashboard.wishlist=Wishlist

# Profile
profile.title=Profile
profile.firstName=First Name
profile.lastName=Last Name
profile.email=Email Address
profile.save=Save Changes

account_fr.properties（フランス語）：

account.title=Mon compte
account.greeting=Bon retour
account.logout=Se déconnecter

dashboard.title=Tableau de bord
dashboard.orders=Historique des commandes
dashboard.addresses=Carnet d'adresses
dashboard.wishlist=Liste de souhaits

profile.title=Profil
profile.firstName=Prénom
profile.lastName=Nom
profile.email=Adresse e-mail
profile.save=Enregistrer les modifications

テンプレートでのリソースの使用

<h1>${Resource.msg('account.title', 'account', null)}</h1>


<p>${Resource.msg('account.greeting', 'account', 'Welcome')}</p>


<p>${Resource.msgf('cart.items', 'cart', null, cartCount)}</p>

Resource.msg() のパラメーター：

1. キー名
2. バンドル名（拡張子を除いたファイル名）
3. デフォルト値（null = 見つからない場合にキーを使用）

パラメーター化されたメッセージ

プロパティ：

cart.itemCount=You have {0} items in your cart
greeting.personalized=Hello, {0} {1}!
order.confirmation=Order #{0} placed on {1}

テンプレート：

${Resource.msgf('cart.itemCount', 'cart', null, itemCount)}
${Resource.msgf('greeting.personalized', 'common', null, firstName, lastName)}

ロケールのフォールバック

B2C Commerce では、次のフォールバック順序を使用します。fr_CA → fr → default

例： fr_CA をリクエストした場合：

1. /resources/fr_CA/account.properties を確認します
2. 見つからない場合は、/resources/fr/account.properties を確認します
3. 見つからない場合は、/resources/account.properties を確認します

静的ファイル

ディレクトリ構造

/cartridge
    /static
        /default
            /css
                style.css
            /images
                logo.png
                buttons/
                    submit.png
            /js
                main.js
        /fr
            /images
                buttons/
                    submit.png      # French text on button
        /de
            /images
                buttons/
                    submit.png      # German text on button

静的ファイルの参照

<img src="${URLUtils.staticURL('/images/buttons/submit.png')}" alt="Submit"/>


<link rel="stylesheet" href="${URLUtils.staticURL('/css/style.css')}"/>

フォームのローカライズ

フォーム定義

<?xml version="1.0" encoding="UTF-8"?>
<form xmlns="http://www.demandware.com/xml/form/2008-04-19">
    <field formid="email" label="form.email.label" type="string"
           mandatory="true"
           missing-error="form.email.required"
           parse-error="form.email.invalid"/>
</form>

リソースバンドル

forms.properties：

form.email.label=Email Address
form.email.required=Email is required
form.email.invalid=Please enter a valid email address

forms_fr.properties：

form.email.label=Adresse e-mail
form.email.required=L'email est requis
form.email.invalid=Veuillez entrer une adresse e-mail valide

URL のローカライズ

ロケール対応 URL

<a href="${URLUtils.url('Product-Show', 'pid', 'ABC123')}">View Product</a>


<a href="${URLUtils.url(new URLAction('Product-Show', 'MySite', 'fr'))}">
    Voir le produit
</a>

言語切り替え

<isscript>
    var Site = require('dw/system/Site');
    var URLAction = require('dw/web/URLAction');
    var URLUtils = require('dw/web/URLUtils');
    var Locale = require('dw/util/Locale');
</isscript>

<ul class="language-switcher">
    <isloop items="${Site.current.allowedLocales}" var="localeId">
        <isscript>
            var locale = new Locale(localeId);
            var url = URLUtils.url(new URLAction('Home-Show', Site.current.ID, localeId));
        </isscript>
        <li class="${request.locale == localeId ? 'active' : ''}">
            <a href="${url}">${locale.displayLanguage}</a>
        </li>
    </isloop>
</ul>

コントローラーのローカライズ

現在のロケールへのアクセス

var Locale = require('dw/util/Locale');

server.get('Show', function (req, res, next) {
    var currentLocale = Locale.getLocale(req.locale.id);

    res.render('mytemplate', {
        locale: req.locale.id,
        language: currentLocale.language,
        country: currentLocale.country,
        displayLanguage: currentLocale.displayLanguage,
        displayCountry: currentLocale.displayCountry
    });
    next();
});

ロケール固有のロジック

server.get('Checkout', function (req, res, next) {
    var locale = req.locale.id;

    // Locale-specific date format
    var dateFormat = locale.startsWith('en_US') ? 'MM/dd/yyyy' : 'dd/MM/yyyy';

    // Locale-specific content
    var termsContentId = 'terms-' + locale.replace('_', '-').toLowerCase();

    res.render('checkout', {
        dateFormat: dateFormat,
        termsContentId: termsContentId
    });
    next();
});

メールテンプレート

ロケールの設定

var Template = require('dw/util/Template');
var HashMap = require('dw/util/HashMap');
var Mail = require('dw/net/Mail');

function sendOrderConfirmation(order, locale) {
    var template = new Template('mail/orderconfirmation', locale);
    var model = new HashMap();
    model.put('order', order);

    var content = template.render(model).text;

    var mail = new Mail();
    mail.addTo(order.customerEmail);
    mail.setFrom('[email protected]');
    mail.setSubject(Resource.msg('email.order.subject', 'email', null));
    mail.setContent(content, 'text/html', 'UTF-8');
    mail.send();
}

通貨の書式設定

通貨はロケールに関連付けられています。

var Money = require('dw/value/Money');
var StringUtils = require('dw/util/StringUtils');

// Format with locale
var price = new Money(99.99, 'USD');
var formatted = StringUtils.formatMoney(price);  // Uses current locale

// In template
<isprint value="${product.priceModel.price}" style="CURRENCY"/>

日付の書式設定

var StringUtils = require('dw/util/StringUtils');
var Calendar = require('dw/util/Calendar');

var date = new Calendar();
var formatted = StringUtils.formatCalendar(date, 'yyyy-MM-dd');  // ISO format
var localized = StringUtils.formatCalendar(date, 'MMMM d, yyyy');  // Locale-aware

ベストプラクティス

1. すべてのプロパティファイルに UTF-8 を使用します（ASCII 以外の文字に必須です）
2. バンドルは言語別ではなく、ページ／機能別に整理します
3. キー名は説明的にします。label1 ではなく account.profile.firstName を使用します
4. 動的な値には パラメーターを使用し、文字列を連結しないでください
5. すべてのロケールをテストし、フォールバックが正しく機能することを確認します
6. テンプレートやスクリプトにテキストをハードコードしないでください

詳細なリファレンス

• ローカライズのパターン - パターンと例の詳細