Reactアプリケーションのローカライズを簡単に

Reactアプリケーションを新しい市場へ展開したいとお考えですか？TacoTranslateを使えば、Reactアプリのローカライズが非常に簡単になり、面倒な手間をかけずに世界中のユーザーにリーチできます。

React向けにTacoTranslateを選ぶ理由は？

シームレスな統合：React アプリケーション向けに特別に設計されており、TacoTranslate は既存のワークフローに簡単に組み込めます。
自動文字列収集：手動で JSON ファイルを管理する必要はもうありません。TacoTranslate がコードベースから文字列を自動で収集します。
AIによる翻訳：AIの力を活用して、アプリケーションのトーンに合った文脈的に正確な翻訳を提供します。
即時の言語サポート：クリック一つで新しい言語を追加でき、アプリケーションをグローバルに対応させます。

仕組み

npm を使って TacoTranslate パッケージをインストール:

npm install tacotranslate

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

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

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

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

.env

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 キーが第三者に盗まれるのを防ぎ、不正な文字列が追加されて翻訳プロジェクトが膨れ上がる可能性を減らせます。

Be sure to check out the complete examples over at our GitHub profile. If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Translate for free!