クイックスタート

Svelte 5が必要です。SDKはSvelteKitのサーバーサイドレンダリングに対応しています。 GitHub のソース

プロジェクトを作成

Langsys でプロジェクトを作成します。プロジェクト ID と API キーが必要になります。 早期アクセスをリクエスト

インストール

npm install langsys-js-svelte

初期化

ルートレイアウトでLangsysを一度だけ初期化します。設定オブジェクトと、ユーザーのロケールを保持する書き込み可能なストアを受け取ります。

// src/routes/+layout.svelte
<script lang="ts">
    import { writable } from 'svelte/store';
    import { onMount } from 'svelte';
    import { LangsysApp, type iLangsysInitConfig } from 'langsys-js-svelte';

    const userLocale = writable('en-US');

    onMount(async () => {
        const config: iLangsysInitConfig = {
            projectid: import.meta.env.VITE_LANGSYS_PROJECT_ID,
            key: import.meta.env.VITE_LANGSYS_API_KEY,
            UserLocaleStore: userLocale,
            baseLocale: 'en-US',
            ssrTokenStrategy: 'client', // 'client' | 'server' | 'auto'
        };

        const res = await LangsysApp.init(config);
        if (!res.status) console.warn(res.errors?.join(', '));
    });
</script>

APIキー

書き込みキー

開発用です。SDKは、アプリ内に新しいフレーズやコンテンツブロックが現れると、それらを登録します。

読み取り専用キー

本番環境向け。SDKは翻訳を取得するだけで、フレーズを作成することはありません。

SDKは、保持しているキーの種類を検出し、それに応じて動作します。

フレーズを翻訳する

個々の文字列には t ストアを使います。フレーズ自体がルックアップキーであり、基本言語のテキストでもあるため、別途キーファイルは不要です。波かっこで囲んだプレースホルダーは、コンパイル時に型チェックされます。

<script lang="ts">
    import { t } from 'langsys-js-svelte';
</script>

<h1>{$t('Welcome to my app', 'UI')}</h1>
<p>{$t('Hello, {name}!', 'UI', { name: 'Sarah' })}</p>
<p>{$t('You have {count} new messages', 'Notifications', { count: 3 })}</p>

同じフレーズでも場所によって意味が異なる場合は、カテゴリを使用します：

<strong>{$t('Home', 'Main menu')}</strong>
<strong>{$t('Home', 'Home repairs')}</strong>

コンテンツブロックを翻訳する

構造が重要な大きめのブロックには、Translate コンポーネントを使用してください。翻訳者にはスタイル適用後の結果が表示され、それを1つの単位として翻訳しますが、その中では引き続きフレーズごとに作業します。

<script lang="ts">
    import { Translate } from 'langsys-js-svelte';
</script>

<Translate category="Blog" tag="article">
    <h1>My article title</h1>
    <p>My content <strong>reads best</strong> in the reader's own language.</p>
</Translate>

その他の SDK と API

React

npm install langsys-js-react

Vue

npm install langsys-js-vue

TypeScript (any framework)

npm install langsys-js-typescript

REST API

APIリファレンス

お困りですか? メッセージを送信する