動画

すべてのデモ動画を、最初から最後までナレーション付きで収録しています。ほとんどは、その内容を解説しているセクションにも対応しており、各動画の下のリンクから移動できます。まずは解説動画から始め、次にコンセプトのトラックを順に進めてください。残りはリファレンスとしてご覧いただけます。

はじめに

Langsys とは何か、セットアップの全手順をワンテイクで、そしてあらゆる言語に欠かせない考え方である「フラットな文」について解説します。

視聴 · 1:17 Langsys とは? アプリに組み込む SDK と、ホスト型の翻訳マネージャー。フレーズが実行されるだけで自動的に登録される仕組み、翻訳の入手元、そして 9:00 に公開したブログ記事がマドリードの読者に 9:03 にはスペイン語で届く流れを紹介します。ビルドも書き込みキーも不要です。ページ上では: /learn

視聴 · 4:13 はじめ方を最初から最後までプロジェクトとロケールを作成し、読み取り/書き込みキーを発行して、SDKをインストールし初期化します。続いて、t()、<Translate>、<Phrase>、<DontTranslate>がフレーズを登録し、アプリがリロードなしでスペイン語とフランス語に切り替わる様子をご覧ください。ページ上では: /learn/quickstart

視聴 · 1:14 複数形の処理数によって文が変わる理由、それを解決する if (count === 1) が実は英語の文法をコードに持ち込んでいる理由、そして文をフラットに書くだけですべての言語のあらゆる分岐に対応できる仕組みを解説します。ページ上では: /learn/concepts/locale-store

コンセプトトラック

順番に進む5つの短いモジュールで、それぞれ前のモジュールの内容を前提としています。画面にSDK固有の構文は出てきません。コンセプトのページにも同じ内容の動画があります。

視聴 · 0:30 ワークフロー問題点 — 翻訳がパイプラインを行き来する往復処理を、Langsys はなくします。ページ上では: /learn/concepts/how-it-works

視聴 · 0:42 主要ファイルプロジェクトの出発点、他のi18nでは自分で考案しなければならないキー、そしてそれに代わるもの。ページ上では: /learn/concepts/token-discovery

視聴 · 0:36 ロケールストアアクティブなロケールの保持と切り替えの仕組み。ページ上では: /learn/concepts/locale-store

視聴 · 1:30 キーと環境登録できるキーを公開してはいけない理由、読み取り専用では行き詰まる理由、そしてどのキーをどこで使うか。続いて 09:00 公開のブログ記事では、ブラウザから送信される内容と、直接登録を行うのは誰かを解説します。ページ上では: /learn/concepts/keys-and-environments

視聴 · 0:30 ロケールの追加新しい言語への対応はプロジェクト設定だけで完了します。新しいフレーズは到着と同時に翻訳され、1回の実行で残りも一括で埋まります。ページ上では: /learn/concepts/adding-a-locale

Svelte、API別に徹底解説

langsys-js-svelte のプリミティブごとに 1 カットずつ紹介します。他のバインディングも同じインターフェースを共有しており、違うのは構文だけです。

視聴 · 1:00 Svelte：ウォークスルー他のi18nでは、1回の呼び出し、ロケールの切り替え、そして、なぜ画一的なスペイン語ではユーザーの半数にとって不適切なのか、さらにICU selectがその問題をどう解決するのかを、常に把握しておく必要があります。ページ上では: /learn/sdk/svelte

視聴 · 1:09 t(phrase, category, params) キーファイルの問題から始まり、3つの引数、ICUプレースホルダー、複数形へと進みます。ページ上では: /learn/sdk/svelte

視聴 · 1:06 <Phrase> マークアップを含む文を1つのフレーズとして保持する方法と、そのパラメーターが %name% になる理由。ページ上では: /learn/sdk/svelte

視聴 · 1:04 <Translate> 1つのタグで領域全体を登録する方法と、1行ごとの呼び出しよりブロックが優れている理由。ページ上では: /learn/sdk/svelte

視聴 · 0:34 <DontTranslate> ブランド名や識別子を文中から切り離さず、そのままの形で保持します。ページ上では: /learn/sdk/svelte

視聴 · 0:42 コンテンツブロックコンテンツブロックとは — 1 つの単位として登録されるセクションでありながら、個別に再利用できるフレーズで構成されています。ページ上では: /learn/sdk/svelte

視聴 · 0:34 カテゴリ i18nがキーを生み出した理由と、それに代わるもの。同じ単語でも意味が2つあるケースと、それが分かれてできるペアについて。ページ上では: /learn/sdk/svelte

視聴 · 0:39 性の一致他のi18nがコンポーネント内に残す条件分岐と、代わりにLangsysが生成する分岐について。ページ上では: /learn/sdk/svelte

視聴 · 1:07 属性一部だけ翻訳されたフォームがユーザーの目にどう映るのか、そして 1 つの <Translate> がプレースホルダー、代替テキスト、aria ラベルにも一度で対応する仕組み。ページ上では: /learn/sdk/svelte

視聴 · 0:46 数値と日付 CLDRに沿った数値と日付。桁区切りが区切り文字ではなく「形」である理由と、注文番号を文字列として渡す必要がある理由。ページ上では: /learn/sdk/svelte

翻訳マネージャー

画面にコードは登場しません。コピー、言語、キー、請求を管理する方のための app.langsys.dev です。

視聴 · 3:02 翻訳の管理原稿を管理する担当者向けに、Manager だけを使った流れを紹介します。機械翻訳の下訳の修正、Update Memory、キューを順に処理する Auto-next 付きの AI Translate、Never Translate、スペイン語のみに招待された Translator を取り上げます。ページ上では: /learn/dashboard

視聴 · 2:47 翻訳メモリ 2つ目のプロジェクトは、最初から翻訳が揃った状態で立ち上がります。修正済みのカート行は作成者のバッジごと引き継がれ、モデルの呼び出しも不要です。組織全体で、1文・1言語につき1エントリになります。ページ上では: /learn/dashboard

視聴 · 2:24 AI 翻訳の設定タブ上のすべてのスイッチを紹介:プロジェクトごとのカスタム設定、AI翻訳を使用、自動翻訳のオン/オフ、すでにスペイン語で届いたフレーズを保持する自動検出。ページ上では: /learn/concepts/keys-and-environments

視聴 · 1:49 言語の追加稼働中のプロジェクトにドイツ語を追加:最初に確認するポリシーの設定、既存カタログの料金を正確に見積もるダイアログ、そしてビルドもデプロイも不要でストアをドイツ語に切り替えるまで。ページ上では: /learn/concepts/adding-a-locale

視聴 · 1:30 言語の遅れを取り戻す翻訳が遅れた言語に対する Manager の一括操作です。1 つのロケール、続いてプロジェクト全体に対して AI Translate Pending を実行します。ページ上では: /learn/concepts/adding-a-locale

視聴 · 1:38 コンテンツブロックを翻訳する Manager 上で 1 つのブロックとして表示された <Translate> 領域:原文と未翻訳のイタリア語を並べて表示し、AI 翻訳が各セグメントを埋めていき、1 つのセグメントを手作業で言い換え、<DontTranslate> の文は翻訳せずそのまま保持しています。ページ上では: /learn/concepts/token-discovery

視聴 · 1:30 本番環境での API キーリリース後のキー：実際の 1 週間分の読み取りを示すアクティビティページ、キーを削除せずに一時停止する方法、そしてローテーションの実演。ページ上では: /learn/concepts/keys-and-environments

視聴 · 1:48 1つの組織、複数のプロジェクトすべてのプロジェクトの出発点としての組織:デフォルトロケール、AI 翻訳と請求の設定、そしてそれらの継承に戻したプロジェクト。ページ上では: /learn/dashboard

視聴 · 2:22 使用量とクレジット 2つのメーターと、プロジェクトに資金を割り当てる仕組み:プランに対するAPI使用量、プリペイドクレジットと無料クレジット、プロジェクトへの振替、月間上限、自動チャージ。ページ上では: /learn/dashboard

視聴 · 1:26 プランとお支払い登録内容のひととおりの確認: プランと請求サイクル、プラン変更、支払い方法、住所、請求書 — すべてのダイアログはキャンセルしています。ページ上では: /learn/dashboard

視聴 · 1:13 通知受信トレイとそのフィルター、続いてアプリ内通知とメールごとのアカウント既定値、そしてプロジェクト単位の上書き設定をオンにしてからオフに戻す手順です。ページ上では: /learn/dashboard

視聴 · 1:47 AI アシスタントを接続するホスト型 MCP サーバー経由で AI アシスタント内から Langsys を利用: claude mcp add、アクセス許可の画面、ストアの言語に関する実際の回答、そしてセキュリティ画面での接続の取り消しまで。ページ上では: /learn/dashboard

カットはlangsys-demo-videosのマスターからレンダリングされ、langsys-demosリポジトリで公開されています。各SDKのページでStackBlitzに開くデモアプリと同じものです。