フレームの言語でテキストを表示する

ウィジェットをインストールした人は、フレーム設定でフレームの言語を選べます。ウィジェットの日付や数値は、何もしなくてもその言語で表示されます。また、usePreferredLanguageフックでどの言語が選ばれているかがわかるので、ウィジェット独自の文言もその言語で表示できます。

import { usePreferredLanguage } from "~lib/use-preferred-language";

export const Widget = () => {
  const language = usePreferredLanguage();

  return <div>{language}</div>;
};

languageは"en"、"fr"、"de"、"it"、"es"、"ja"のいずれかです。自動のままのフレームと、ウィジェットスタジオのプレビューでは"en"になります。

日付と数値

日付と数値については、特に何もする必要はありません。toLocaleDateString、toLocaleString、Intlのフォーマッターで言語を指定しなければ、フレームの言語で表示されます。オプションを渡すときは、言語を指定する位置にundefinedを入れます。

import { useScheduledDate } from "~lib/use-scheduled-date";

export const Widget = () => {
  const scheduledDate = useScheduledDate();

  return (
    <div>
      {scheduledDate.toLocaleDateString(undefined, {
        weekday: "long",
        day: "numeric",
        month: "long",
      })}
    </div>
  );
};

"en-GB"のように言語を名指しするのは、どのフレームでもその言語で表示したい場合だけにしましょう。

ウィジェット独自の文言

ウィジェットが表示するテキストごとに翻訳を用意し、翻訳していない言語では英語で表示するようにします。

import { usePreferredLanguage } from "~lib/use-preferred-language";

const GREETINGS: Record<string, string> = {
  en: "Good morning",
  fr: "Bonjour",
  ja: "おはようございます",
};

export const Widget = () => {
  const language = usePreferredLanguage();

  return <h1>{GREETINGS[language] ?? GREETINGS.en}</h1>;
};