翻訳テスト02 要約
次は **GAS (Google Apps Script)** を使った方法ですね！
この方法の最大のメリットは、Chromeの特別な設定（Built-in AIの設定）が不要で、**iPhoneやAndroidのブラウザ、Edgeなど、どのブラウザでも動く**点です。Google翻訳の強力なエンジンを無料でAPIとして叩けるので、非常に安定しています。
以下の2ステップで作成します。
---
## ステップ1：GASで「翻訳API」を作成する
1. [Google Apps Script](https://script.google.com/) にアクセスし、「新しいプロジェクト」を作成します。
2. もともとあるコードを消して、以下のコードを貼り付けます。
```javascript
function doGet(e) {
const text = e.parameter.text;
const source = e.parameter.source || 'ja';
const target = e.parameter.target || 'en';
// Google翻訳を実行
const translatedText = LanguageApp.translate(text, source, target);
// 結果をJSON形式で返す
return ContentService.createTextOutput(JSON.stringify({
translatedText: translatedText
})).setMimeType(ContentService.MimeType.JSON);
}
```
3. 右上の **「デプロイ」>「新しいデプロイ」** をクリックします。
4. 種類の選択で **「ウェブアプリ」** を選びます。
* **次のユーザーとして実行:** 自分
* **アクセスできるユーザー:** 全員（Anyone） ※ここを「全員」にしないとアプリから呼べません。
5. デプロイボタンを押し、表示された **「ウェブアプリのURL」** をコピーしておきます。
---
## ステップ2：翻訳アプリ（HTML）の作成
以下のコードの `const GAS_URL = "ここにコピーしたURLを貼る";` の部分を、先ほどコピーしたURLに書き換えて、`index.html` として保存してください。
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GAS無料通訳アプリ</title>
<style>
body { font-family: sans-serif; text-align: center; padding: 20px; background: #f0f2f5; }
.card { background: white; padding: 20px; border-radius: 15px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); max-width: 500px; margin: auto; }
button { background: #1a73e8; color: white; border: none; padding: 15px 30px; border-radius: 50px; font-size: 16px; cursor: pointer; margin-bottom: 20px; }
button:disabled { background: #ccc; }
.result-label { font-weight: bold; color: #555; margin-top: 15px; text-align: left; }
.result-text { background: #eef; padding: 10px; border-radius: 8px; min-height: 40px; text-align: left; }
</style>
</head>
<body>
<div class="card">
<h2>GAS無料通訳アプリ</h2>
<button id="btn">声を出す（日 → 英）</button>
<div class="result-label">あなたの声:</div>
<div id="origin" class="result-text">...</div>
<div class="result-label">翻訳結果:</div>
<div id="target" class="result-text">...</div>
</div>
<script>
// ★ここにデプロイしたURLを貼り付けてください
const GAS_URL = "ここにウェブアプリのURLを貼り付け";
const btn = document.getElementById('btn');
const originDiv = document.getElementById('origin');
const targetDiv = document.getElementById('target');
// 1. 音声認識の設定
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = 'ja-JP';
btn.onclick = () => {
recognition.start();
btn.innerText = "聞き取り中...";
btn.disabled = true;
};
recognition.onresult = async (event) => {
const text = event.results[0][0].transcript;
originDiv.innerText = text;
btn.innerText = "翻訳中...";
try {
// 2. GASに翻訳をお願いする
const response = await fetch(`${GAS_URL}?text=${encodeURIComponent(text)}&source=ja&target=en`);
const data = await response.json();
const translatedText = data.translatedText;
targetDiv.innerText = translatedText;
// 3. 音声読み上げ
const uttr = new SpeechSynthesisUtterance(translatedText);
uttr.lang = 'en-US';
window.speechSynthesis.speak(uttr);
} catch (e) {
targetDiv.innerText = "エラー: URLが正しいか確認してください。";
} finally {
btn.innerText = "声を出す（日 → 英）";
btn.disabled = false;
}
};
recognition.onerror = () => {
btn.innerText = "声を出す（日 → 英）";
btn.disabled = false;
};
</script>
</body>
</html>
```
---
## 🌟 この方法のすごいところ
* **Google翻訳の精度:** `LanguageApp.translate` はGoogle翻訳そのものなので、精度が非常に高いです。
* **スマホでも動く:** Webブラウザ（ChromeやSafari）で動くので、このHTMLをスマホに送れば、簡易的な携帯通訳機になります。
* **多言語対応が楽:** コード内の `source=ja&target=en` を変えるだけで、100以上の言語に対応可能です。
**もしURLの貼り付けでつまづいたり、「別の言語（例えば韓国語や中国語）にも一気に翻訳したい」などの要望があれば教えてください！**