導入ガイド
Blaid Translatorをあなたのウェブサイトに組み込んで、自動翻訳機能を追加する方法を説明します。
必要な準備
1. API Keyの取得
CMSダッシュボード（cms.html）でAPI Keyを確認してください。
2. ページのスキャンと翻訳
CMSで対象ページをスキャンし、プレ翻訳を実行しておいてください。
基本的な組み込み方法
ステップ1: 設定スクリプトを追加
ウェブサイトのHTMLの<head>セクションに以下を追加：
<script>
window.blaidTranslatorConfig = {
apiKey: 'your-api-key-here', // CMSで確認したAPI Key
apiUrl: 'https://your-app.vercel.app', // VercelのURL or localhost:3000
targetLanguages: ['en', 'ko', 'zh-CN', 'zh-TW'], // 対応言語
defaultLanguage: 'ja' // デフォルト言語（通常は'ja'）
};
</script>ステップ2: Blaid Translatorスクリプトを読み込み
</body>タグの直前に以下を追加：
<script src="https://your-app.vercel.app/js/blaid-translator.js"></script>設定オプション
| オプション | 説明 | デフォルト |
|---|---|---|
apiKey |
CMSで生成されたAPI Key（必須） | - |
apiUrl |
Blaid TranslatorサーバーのURL | localhost:3000 |
targetLanguages |
対応する翻訳言語の配列 | ['en', 'ko', 'zh-CN', 'zh-TW'] |
defaultLanguage |
デフォルト言語コード | 'ja' |
完全な実装例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<!-- Blaid Translator 設定 -->
<script>
window.blaidTranslatorConfig = {
apiKey: 'your-api-key-12345',
apiUrl: 'https://your-app.vercel.app',
targetLanguages: ['en', 'ko', 'zh-CN', 'zh-TW'],
defaultLanguage: 'ja'
};
</script>
</head>
<body>
<h1>ウェブサイトのタイトル</h1>
<p>このテキストは自動翻訳されます。</p>
<button>ボタンのテキストも翻訳されます</button>
<!-- Blaid Translatorスクリプト -->
<script src="https://your-app.vercel.app/js/blaid-translator.js"></script>
</body>
</html>UI カスタマイズ
言語切り替えUIは右上に自動的に表示されます。CSSでカスタマイズ可能：
<style>
#blaid-translator-switcher {
top: 10px !important; /* 位置調整 */
left: 20px !important; /* 左側に移動 */
right: auto !important;
}
#blaid-translator-current {
background: #your-brand-color !important;
color: white !important;
}
</style>JavaScript API
プログラムで制御することも可能です：
// 言語を手動で切り替え
BlaidTranslator.switchLanguage('en');
// 現在の言語を取得
const currentLang = BlaidTranslator.getCurrentLanguage();
// 対応言語一覧を取得
const supportedLangs = BlaidTranslator.getSupportedLanguages();
// 初期化状態を確認
const isReady = BlaidTranslator.isInitialized();
// 言語変更イベントをリスン
window.addEventListener('blaidTranslatorLanguageChanged', (event) => {
console.log('Language changed to:', event.detail.language);
});よくある問題と解決方法
翻訳が表示されない
- API Keyが正しく設定されているか確認
- CMSでページがスキャン済みか確認
- プレ翻訳が実行済みか確認
- ブラウザのコンソールでエラーメッセージを確認
一部のテキストが翻訳されない
- JavaScript等で動的に追加されたテキストは対象外
- CMSで「再スキャン」を実行してから「プレ翻訳」を再実行