· glotstack.ai

言語

開発者に優しい設計

yarn

でglotstackをインストール

yarn install glotstack

Reactアプリにglotstackプロバイダーを追加します

アプリのトップレベルで一度コンテキストプロバイダーを追加するだけで簡単です。追加後はロケールに応じて自動的に翻訳が適用されます。

<GlotstackProvider initialLocale='en-US' importMethod={importMethod}>
  <YourApp/>
</GlotstackProvider>

importMethod

の詳細はreact i18n クイックスタートを参照してください。

いつでも必要なときに翻訳を取得できます —

yarn glotstack get-translations

言語の専門家を待つ必要はもうありません。CLIを使っていつでも翻訳を取得できます。翻訳ファイルの

context

を使えば、意図に合った翻訳が得られます。yamlファイルを使いたい場合はYAMLについてを参照し、

--yaml

を利用してください。

GlotstackはシンプルなフックベースのAPIを提供します

const { t } = useGlotstack()

<>
  {t('YourKey', {
    assigns: {
      Component: <Component prop="f"></Component>,
      insertNode: <Icon name="icon-set"/>,
      mdash: <>&mdash;</>
      another: <>{t('OtherKey', {locale: 'en-US'})}
    },
  })}
</>

assigns

オプションを使用して任意の

React.Node

を翻訳に差し込むことができます。

<Component>something</Component>

記法をインラインで使用する場合は、assignsに適切なコンポーネント名を渡してください。新しい翻訳キーを作成したくない場合に便利です。

{{substitution}}

記法を使用すると、任意のノードを直接差し替えることができます。

YourKey:
  value: |
    This is an example source text. We want to <Component>do this</Component.
    We also want to demonstrate {{insertNode}} and {{mdash}}.
    We can even nest other translated things {{another}}.

料金

早期アクセス開発チーム向けに特別な特典を提供中です。詳細は料金プランをご確認ください。

近日公開

新機能が続々登場。ローカリゼーションを開発者にとってより簡単にします。

新機能

コードからすべての翻訳を自動抽出

yarn glotstack extract-translations

CLI

を使って、ネイティブ言語で書いた文字列を自動的に抽出できます。これにより、翻訳ファイルを意識せずにコードを書くことができます。ローカライズを気にせずにコードを書くと、glotstackが自動で処理します。

GlotstackはReact向けの開発者主体のローカライズワークフローです。 YAML/JSONで翻訳管理、ロケールの同期、新言語の対応をAI支援で加速します。