Reactアプリケーションのための手間のかからないローカリゼーション

仕組み

npmを使ってTacoTranslateパッケージをインストールします：

npm install tacotranslate

モジュールをインストールしたら、TacoTranslateのアカウント、翻訳プロジェクト、および関連するAPIキーを作成する必要があります。こちらでアカウントを作成できます。 無料で、クレジットカードの登録も不要です。

TacoTranslateアプリケーションのUI内でプロジェクトを作成し、そのAPIキーのタブに移動します。 readキーを1つと、read/writeキーを1つ作成してください。それらを環境変数として保存します。readキーはpublicと呼ばれ、read/writeキーはsecretと呼ばれます。例えば、プロジェクトのルートにある.envファイルに追加することができます。

さらに、あと2つの環境変数 TACOTRANSLATE_DEFAULT_LOCALE と TACOTRANSLATE_ORIGIN を追加する必要があります。

• TACOTRANSLATE_DEFAULT_LOCALE：デフォルトのフォールバックロケールコードです。この例では、英語のenに設定します。
• TACOTRANSLATE_ORIGIN：文字列が保存される「フォルダ」で、ウェブサイトのURLなどを指します。オリジンについてはこちらをご覧ください。

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

クライアント側の本番環境に秘密の read/write API キーを絶対に漏らさないようにしてください。

TacoTranslateの設定

TacoTranslateコンテキストプロバイダーでアプリケーションをラップして、Reactアプリケーション内でTacoTranslateを初期化します：

import React, {useState} from 'react';
import TacoTranslate, {Translate} from 'tacotranslate/react';

const tacoTranslate = createTacoTranslateClient({
	apiKey: 'YOUR_API_KEY',
});

export default function App() {
	const [locale, setLocale] = useState('en');

	return (
		<TacoTranslate client={tacoTranslate} locale={locale}>
			<Translate string="Hello, world!"/>
		</TacoTranslate>
	);
}

アプリケーション内のどこでも Translate コンポーネントを使って翻訳されたテキストを表示できるようになりました！詳細やご自身の環境に合わせた実装ガイドについては、ぜひ ドキュメント をご覧ください。

import {Translate} from 'tacotranslate/react';

export default async function Component() {
	return (
		<Translate string="Hello? This is TacoTranslate speaking." />
	);
}

TacoTranslateを使用する利点

• 時間の節約: ローカリゼーションと文字列の収集という面倒なプロセスを自動化し、貴重な時間を節約します。
• コスト効果: 手動翻訳の必要性を減らし、ローカリゼーションコストを削減します。
• 精度の向上: AIによる翻訳が、文脈に適した正確かつ高品質な結果を保証します。
• 拡張性のあるソリューション: アプリケーションと顧客基盤の拡大に伴い、新しい言語のサポートを容易に追加できます。

今すぐ始めましょう！

あなたのReactアプリケーションは、文字列を Translate コンポーネントに追加すると自動的に翻訳されます。APIキーに対して read/write 権限を持つ環境のみが、新しい翻訳対象の文字列を作成できることにご注意ください。

本番環境に移行する前に新しい文字列を追加しながらテストできる、閉鎖的かつ安全なステージング環境を用意することをお勧めします。これにより、秘密のAPIキーが盗まれたり、不正な文字列が追加されて翻訳プロジェクトが膨れ上がるのを防ぐことができます。

ぜひGitHubのプロフィールにある完全なサンプルをご覧ください。問題が発生した場合は、遠慮なくお問い合わせください。喜んでサポートいたします。

TacoTranslateは、Reactアプリケーションをあらゆる言語間で迅速に自動ローカライズできるツールです。無料で翻訳を始めましょう！