TacoTranslate
/
ドキュメンテーション価格情報
 
記事
5月04日

Reactアプリのための最高の国際化（i18n）ソリューション

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キーが盗まれるのを防ぎ、悪意のある文字列の追加によって翻訳プロジェクトが膨れ上がるのを防止できます。

必ずGitHubのプロフィールで完全な例をチェックしてください。問題が発生した場合は、お気軽にお問い合わせください。喜んでお手伝いいたします。

TacoTranslateは、Reactアプリケーションをどの言語にも迅速に自動ローカライズできるようにします。無料で翻訳しましょう！

Nattskiftet の製品