Zenn
Open7

LWCとApexの多言語化対応メモ

i18n
Salesforce
APEX
LWC
#
sfdx
ninoishninoish

選択リスト項目のAPI名は最初から英語にした方がいい。多言語プロジェクトのコード中に日本語はキモい。

ninoishninoish

LWC HTML内の多言語化する内容に、インラインHTMLやスタイルを使いたい時は、
カスタムラベル + テンプレフォーマット関数 + インラインCSS + <lightning-formatted-text /> を使う方針が現時点で一番無難。

カスタムラベル

文字色は &lt;span style="font-weight: bold;color: #ff0000;"&gt;赤&lt;/span&gt;です。変数は&lt;span &gt;フォーマッター {0} , {1}, {2}&lt;/span&gt; で対応します

LWC (.js)

import MyLabel from "@salesforce/label/c.MyLabel";


const format = (str, ...args) => {
  for (const [i, arg] of args.entries()) {
    const regex = new RegExp(`\\{${i}\\}`, "g");
    str = str.replace(regex, arg);
  }
  return str;
};

myLabel = format(MyLabel, new Date().getTime(), "ここに別のラベルとか", "処理の値など");

LWC (html)

<lightning-formatted-text value={myLabel}></lightning-formatted-text>

HTMLレンダリングには lightning-formatted-text が必要。しかし class 属性は lightning-formatted-text の shadow DOMでカスタムLWCからアクセスできなくなってしまうので、やむを得ずinline css。

ninoishninoish

SFDX プロジェクトで翻訳管理したいけど、Metadata APIのKnown Issueで ReportType が翻訳に含まれると名前空間関連のエラーでデプロイに失敗する。
カスタムラベルだけ管理している。ただし1つのxmlファイルのため、別プロジェクトとの競合には注意。

ninoishninoish

日本語炙り出し正規表現
[ぁ-んァ-ヶｱ-ﾝﾞﾟ一-龠ー]+

ninoishninoish

Custom Label作成補助のVSCodeのExtension

Salesforce Custom Label Generator

Apex内の選択したテキストを、カスタムラベルに置き換えてくれる。さらに CustomLabels.labels-meta.xml にも定義を追加してくれる。LWCには対応していない。

Salesforce Custom Labels Creator

VSCode上で新規タブが開いて、カスタムラベル作成フォームより作成。CustomLabels.labels-meta.xmlに追加。

ninoishninoish

インラインのカスタムLWCなど含む場合の多言語化は悩ましい。

lightning-formatted-rich-text に 子LWCは (c-, lightning- 名前空間どちらも)、無視され表示されない。

<lightning-formatted-rich-text value={inlineHtml}></lightning-formatted-rich-text>

    url = "https://salesforce.com";
    name = "こんにちは";
    get inlineHtml() {
        return `<span>123! <c-inline-component url="${this.url}" name="${this.name}"></c-inline-component>  : ABC</span>`;
    }

結果
結果

=======

テンプレートごと分けるべきか？

ninoishninoish

インラインのHTMLが少ない場合は、文を分ける方法もある。柔軟性はないので良い解法ではない。

<span>Hello I'm <lightning-formatted-name
                first-name="John"
                last-name="Doe"
        ></lightning-formatted-name></span>

を以下のように前中後に分けてカスタムラベルを挿入する。

<span>{Label1}<lightning-formatted-name
                first-name={valueFirstName}
                last-name={valueLastName}
        ></lightning-formatted-name>{Label2}</span>

これで {わたしは} {ドー}{ジョン} {です} と対応させる。
場合によっては lightning-XXXXXXX の <slot> にラベルを入れることもある。