クイックスタート:プロジェクトとキー
このサイトのプレイグラウンドはすべて共有のデモプロジェクトで動作するため、アカウントがなくても自由に試せます。ご自身のアプリを翻訳するには、Langsysダッシュボードで3つのものを用意します。プロジェクト、書き込みキー、読み取り専用キーです。所要時間は最初の1回だけ、2分ほどです。
セットアップ
- app.langsys.dev でサインインしてください。アカウントをお持ちでない場合は、新規作成してください。
- プロジェクトを作成します。ベースロケール（ソースのフレーズを書く言語）と、翻訳が必要なターゲットロケールを選択してください。プロジェクトIDをコピーします。
- プロジェクト用にAPIキーを2つ発行します。書き込みキーと読み取り専用キーを1つずつです。この分離がセキュリティモデルの根幹であり、その理由はキーと環境で説明しています。
- キーを環境変数に設定し、お使いのスタック向けの SDK をインストールします。開発中は書き込み用キーを使うと、新しいフレーズが登録されて構築しながら機械翻訳されます。リリース時は読み取り専用キーを使用してください。
# .env.local — development (Vite-style names; adjust the prefix to your bundler)
VITE_LANGSYS_PROJECT_ID=your-project-id
VITE_LANGSYS_API_KEY=write-key # discovers + registers new phrases
# production
VITE_LANGSYS_PROJECT_ID=your-project-id
VITE_LANGSYS_API_KEY=read-only-key # only fetches — safe to ship in the browser# .env (Laravel, or your PHP app's environment)
LANGSYS_PROJECT_ID=your-project-id
LANGSYS_API_KEY=write-key # server-side, so the write key can stay —
# switch to read-only anywhere that must not
# register phrases (e.g. a public sandbox)どのキーをどこで使う? ブラウザに渡すのは読み取り専用キーだけです。翻訳の取得以外は何もできないため、公開バンドルに含めても安全です。書き込みキーは新しいフレーズを登録するので、開発環境とサーバーでのみ使用してください。
次に、使用する SDK を選択
各 SDK ページはインストールから始まり、環境変数にプロジェクト ID とキーを設定した、まさにこの状態を前提としています:
フロントエンド
TypeScript、React、Vue、Svelte に対応。それぞれ実際に試せるプレイグラウンド付きです。
バックエンド
PHPとLaravel:ページは最初からローカライズされた状態で届きます。
メタフレームワーク
Next.js、Nuxt、SvelteKit に対応 — サーバーでシードし、クライアントでハイドレートします。
基本的な考え方がまだ分からない場合は、まず コンセプト(フレーズがキーになること、トークンの検出、ロケールストア)をご覧になってから、こちらに戻ってください。