TacoTranslate
/
ドキュメント料金
 
記事
5月04日

Reactアプリケーションのローカライズを手間なく実現

Reactアプリケーションを新しい市場に展開したいですか？TacoTranslateを使えば、Reactアプリのローカライズが非常に簡単になり、面倒な手間なくグローバルなユーザーにリーチできます。

React に TacoTranslate を選ぶ理由は？

  • シームレスな統合：Reactアプリケーション向けに設計されており、TacoTranslateは既存のワークフローに容易に統合できます。
  • 文字列の自動収集：もうJSONファイルを手動で管理する必要はありません。TacoTranslateはコードベースから文字列を自動で収集します。
  • AIによる翻訳：AIの力を活用して、アプリケーションのトーンに合った、文脈に即した正確な翻訳を提供します。
  • 即時の言語サポート：ワンクリックで新しい言語を追加でき、アプリを世界中で利用可能にします。

仕組み

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.

.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のセットアップ

Reactアプリケーション内で、TacoTranslateのコンテキストプロバイダーでアプリケーションをラップすることで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!

提供元： Nattskiftetノルウェー製