Langsys ラーニングセンター
Langsys をアプリに組み込む開発者向けです。リアルタイムで継続的なローカライズを実現します。コード内のフレーズがそのままキーとデフォルト値になるため、キーファイルも抽出の手順も不要です。解説動画を見て、5つのコンセプトを読み、プロジェクトをセットアップしたら、お使いのスタックを選んでください。
パス
3つのステップを、この順番で進めます。SDK のページは、最初の2つが完了していることを前提としています。
コンセプト
Langsysの背後にある考え方：フレーズがキーになる仕組み、トークン検出、ロケールストア、キー、そしてロケールの追加。それぞれ動画付きの5つの短いページです。
ステップ 2 · 2 分クイックスタート
プロジェクトを作成し、書き込みキーと読み取り専用キーを発行して、環境変数に設定します。
ステップ 3お使いのスタックを選択
6つのSDK、共通のインターフェース。各ページはインストールから始まり、ライブデモとそれぞれのバインディング特有の書き方を紹介します。
フロントエンド — JavaScript
処理を担うのは1つのベースSDKで、各フレームワーク用バインディングはその薄いラッパーです。
TypeScript
フレームワークに依存しないベース SDK — langsys-js-typescript。すべてのバインディングがこれをラップしています。
React
フックとコンポーネント — langsys-js-react。
Vue
コンポーザブルとコンポーネント — langsys-js-vue。
Svelte
ストアとコンポーネント — langsys-js-svelte。プリミティブごとのデモを掲載したページです。
バックエンド — サーバーレンダリング
テンプレートはサーバー側で翻訳されるため、ページは最初からローカライズされた状態で届きます。
PHP
ベース SDK の langsys/langsys-php です。素の PHP、フレームワーク、ワーカー、CLI など、あらゆる PHP アプリで使えます。
Laravel
@t Blade ディレクティブと t() ヘルパー — langsys/langsys-php-laravel。
ガイド — サーバーサイドレンダリング
各ガイドは同じパターンに従います。サーバー側でカタログを取得し、それを使ってクライアントバインディングを初期化します。これにより、カタログは 1 回だけ取得され、サーバーキーはサーバー上にとどまります。
Next.js
App Router — サーバーコンポーネントで取得し、'use client' で初期化します。
Nuxt
Nitroルート+useAsyncDataでVueバインディングに初期データを渡します。
SvelteKit
+layout.server.ts の load と、ロケールストアとしての標準の writable。
問題を見つけて、すぐ修正
並べて比較
React、Vue、Svelte、素の TypeScript が、1 つの共有プロジェクトから足並みをそろえて翻訳します。
ダッシュボード
コード不要の画面で使える Translation Manager:レビュー、メモリ、組織、クレジット、請求を管理できます。
動画
すべてのデモを 1 か所に集約。コンセプトトラック、API ごとの Svelte 解説、そして翻訳マネージャーを紹介します。
トラブルシューティング
翻訳されないフレーズ、CORSによるブロック、気づきにくい読み取り専用ミスなどの症状と対処法。
APIリファレンスや導入ガイドをお探しですか?Langsysドキュメントをご覧ください。