# General Translation Integrations: React と Node.js による Databricks Apps のローカライゼーション URL: https://generaltranslation.com/ja/docs/integrations/databricks/quickstart.mdx Docs index: https://generaltranslation.com/llms.txt Description: AppKit で構築した Databricks App を、React のインターフェースからクエリ結果まで、gt-react と gt-node で翻訳します。 AppKit は、Databricks Apps を構築するための Databricks 製 TypeScript SDK です。AppKit アプリは、Vite でビルドされた React クライアントを備えた Express サーバーです。そのため、テキストは 2 つのレイヤーに分かれ、それぞれ別の場所で翻訳されます。 * **インターフェースのテキスト。** `client/` 内の見出し、ボタン、ラベルなどです。[`gt-react`](/docs/react/react-spa-quickstart) が CLI で事前に翻訳し、翻訳をビルドに同梱して配信します。 * **データ。** クエリ結果、Genie の回答、エージェントの出力など、ランタイムにしか存在しないデータです。[`gt-node`](/docs/node/quickstart) がリクエストを受け取るたびにサーバー側で翻訳します。 どちらのレイヤーも同じロケールを参照するため、スペイン語を選んだ訪問者には、ラベルもデータもスペイン語で表示されます。 ## 始める前に [#before-start] 以下が必要です： * AppKit アプリ (`databricks apps init` で作成したものなど) * [プロジェクト](/docs/platform/dashboard/get-started)と CLI ([`gt login`](/docs/cli/reference/commands/login) でサインイン済みのもの) ## クイックスタート [#quickstart] ### 1. パッケージをインストールする アプリのルートディレクトリで、次のコマンドを実行します： ```bash npm i gt-react gt-node npm i -D gt ``` ### 2. ロケールを定義する アプリのルートに `gt.config.json` を作成します。AppKit ではクライアントコードを `client/src/` に配置するため、CLI がそのディレクトリを参照するよう設定します： ```json title="gt.config.json" { "defaultLocale": "en", "locales": ["es", "ja"], "src": ["client/src/**/*.{ts,tsx}"], "files": { "gt": { "output": "client/src/_gt/[locale].json" } } } ``` このファイルはクライアントとサーバーの両方からインポートされるため、ロケールの一覧を1か所で管理できます。 ### 3. クライアントを初期化する 翻訳を生成する前でもインポート文を解決できるよう、対象ロケールごとに空の JSON ファイルを作成します： ```bash mkdir -p client/src/_gt echo '{}' > client/src/_gt/es.json echo '{}' > client/src/_gt/ja.json ``` 翻訳ファイルを読み込むローダーを追加します： ```ts title="client/src/loadTranslations.ts" export default async function loadTranslations(locale: string) { const translations = await import(`./_gt/${locale}.json`); return translations.default; } ``` アプリのレンダリング前に `gt-react` を初期化するブートストラップファイルを作成します： ```ts title="client/src/index.ts" import { initializeGTSPA } from 'gt-react'; import gtConfig from '../../gt.config.json'; import loadTranslations from './loadTranslations'; await initializeGTSPA({ ...gtConfig, loadTranslations }); await import('./main'); // 翻訳の読み込みが完了してからアプリをレンダリングする ``` 次に、`client/index.html` が新しいファイルを参照するように変更します： ```html title="client/index.html" ``` ([Vite SPA の設定](/docs/react/guides/spa/configuring-vite-spa)を参照してください) ### 4. インターフェースを翻訳する インターフェースのテキストを [``](/docs/react/reference/components/t) でラップし、[``](/docs/react/reference/components/locale-selector) を追加します。 ```tsx title="client/src/components/Header.tsx" import { T, LocaleSelector } from 'gt-react'; export function Header() { return (

Sales dashboard
); } ``` これをアプリのルートコンポーネントでレンダリングします： ```tsx title="client/src/App.tsx" import { Header } from './components/Header'; export default function App() { return ( <>
{/* アプリのその他の部分 */} ); } ``` 訪問者が言語を選択すると、`gt-react` はその言語を `generaltranslation.locale` クッキーに保存し、ページを再読み込みします。次のステップでは、サーバー側でこのクッキーを読み取ります。 ### 5. サーバーでデータを翻訳する `gt-node` を初期化し、リクエストごとにロケールを関連付けてから、[`tx`](/docs/node/reference/functions/tx) でランタイムテキストを翻訳します。 ```ts title="server/server.ts" import type { Request } from 'express'; import { createApp, server } from '@databricks/appkit'; import { initializeGT, withGT, getRequestLocale, tx } from 'gt-node'; import gtConfig from '../gt.config.json' with { type: 'json' }; initializeGT(gtConfig); // 言語選択で選ばれた値を優先し、なければブラウザの言語を使用 function resolveLocale(req: Request) { const picked = req.headers.cookie?.match(/(?:^|;\s*)generaltranslation\.locale=([^;]+)/)?.[1]; return picked ?? getRequestLocale(req); } createApp({ plugins: [server()], onPluginsReady(appkit) { appkit.server.extend((app) => { app.use('/api', (req, _res, next) => withGT(resolveLocale(req), () => next())); app.get('/api/regions', async (_req, res) => { const rows = [{ region: 'North America', note: 'Revenue grew in every quarter' }]; // ここに独自のクエリを記述 const translated = await Promise.all( rows.map(async (row) => ({ ...row, note: await tx(row.note, { $context: 'Analyst note in a sales dashboard' }), })) ); res.json(translated); }); }); }, }).catch(console.error); ``` アプリですでに登録しているプラグインはそのまま残し、`onPluginsReady` だけを追加するか、既存の `onPluginsReady` を拡張してください。サポート対象外のロケールは `defaultLocale` にフォールバックします。 ### 6. 認証情報を追加する **実行時翻訳**権限 (`project:translations:generate`) を付与したプロジェクトAPIキーを作成し、プロジェクトIDとあわせて `.env` に追加します。 ```bash echo "GT_PROJECT_ID=" >> .env echo "GT_API_KEY=$(npx gt api-key create --project-id --name 'Databricks app' --permission project:translations:generate)" >> .env ``` [`gt api-key create`](/docs/cli/reference/commands/api-key-create) は新しいキーだけを出力するため、出力をそのままファイルに書き込めます。AppKit は開発時に `.env` を読み込み、CLI も同じファイルを読み取ります。 **警告:** `.env` はバージョン管理に含めないでください。また、これらの値は `client/` 内で絶対にインポートしないでください。`client/` 配下のコードはすべてブラウザに配信されます。 ### 7. 翻訳を生成して実行する インターフェースのテキストを、すべての対象ロケールに翻訳します。 ```bash npx gt translate ``` CLI は `client/src/_gt/es.json` と `client/src/_gt/ja.json` を書き出します。UI のテキストを変更したら、その都度再実行してください。 `npm run dev` でアプリを起動し、言語選択で **español** を選択します。ページが再読み込みされると見出しがスペイン語に切り替わり、`/api/regions` もメモをスペイン語で返すようになります。 ## よくある質問 [#faqs] ### どのテキストを gt-react で処理し、どのテキストを gt-node で処理しますか？ 見出しやラベルなど、コード内に記述されたテキストは `gt-react` で処理します。これらは CLI で一度だけ翻訳されるため、ランタイムのコストはかかりません。一方、テーブル、Genie、エージェントなど、データから取得されるテキストは、リクエストが実行されるまで内容が確定しないため、サーバー上で [`tx`](/docs/node/reference/functions/tx) を使って処理します ([データの翻訳](/docs/integrations/databricks/guides/translating-data)を参照) 。 ### Databricks 用のプラグインは必要ですか？ いいえ、必要ありません。`gt-react` と `gt-node` は通常の npm パッケージなので、AppKit では他の依存関係と同じように動作します。 ### Databricks の ai_translate とはどう違いますか？ [`ai_translate`](https://docs.databricks.com/aws/en/sql/language-manual/functions/ai_translate) は Public Preview 段階の SQL 関数で、クエリで指定した対象言語にテキストを翻訳します。SQL 上でテーブルデータを、同関数のドキュメントに記載されている言語へ翻訳する用途に適しています。 一方、このセットアップでは、訪問者一人ひとりに合わせてアプリ自体を翻訳します。訪問者の言語は言語選択またはブラウザから決まり、`gt-react` がインターフェースを事前に翻訳し、`gt-node` がランタイムのコンテンツをリクエストごとに同じ言語へ翻訳します。両者は併用も可能です。たとえば、SQL では `ai_translate` で列を翻訳し、アプリは `gt-react` と `gt-node` で翻訳するといった使い方ができます。 ## Next steps - /docs/integrations/databricks/guides/translating-data - /docs/integrations/databricks/guides/deploying ## Sitemap See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.