1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@mvm43236(奥田 昌夫)

Chromeの翻訳API「Translator API」で「ほんやくコンニャク」アプリは作れるのか？

1
Last updated at Posted at 2026-01-27

食べるとあらゆる言語を自国語として理解できるようになる

　「ほんやくコンニャク」とは、

外観や食感はまさにコンニャクそのもの。これを食べると、あらゆる言語を自国語として理解できるようになる。自分が話す言語は、相手が使用する言語に自動的に翻訳されるため、言葉の通じなかった相手と自由に会話できる。いわば食べる翻訳機。

ウィキペディア（Wikipedia）より
https://ja.wikipedia.org/wiki/%E3%81%BB%E3%82%93%E3%82%84%E3%81%8F%E3%82%B3%E3%83%B3%E3%83%8B%E3%83%A3%E3%82%AF
　食べるだけで「あらゆる言語を理解できる」ということは、脳の働きや記憶に影響を与えている？　ある意味危険な食品です。さすがにこんな危険なモノを作ることはできません。そこで、プログラムで翻訳機能を作成することにします。
　Chromeでは最新機能として翻訳API「Translator API」が使えるようになりました。辞書をダウンロードしてローカルで翻訳機能が動くため、変換がとても速いです。

「ほんやくコンニャク」は無理だけど、翻訳はさせたい

　「日本語 → 英語」の翻訳機能をブラウザ（Javascriptプログラム）で動くようにします。
　Chrome「Translator API」の使い方の基本については、こちのQiita記事を参考にさせていただきました。
https://qiita.com/nao_t/items/1dda101fe4515f8839e2

作動のための準備

　Google Chromeのアドレスバーに

chrome://flags/#translation-api

を入れて、アクセスします。
・Enabled
・Enabled without language pack limit
のどちらかを選択します。

作動要件（引用　https://qiita.com/minimabot/items/e445d07609b26e8124dd）
ブラウザGoogle ChromeのAI翻訳APIは現在、Chromeデスクトップ版のみ対応しています。
以下の条件を満たす必要があります
・対応OS: Windows 10 / 11、macOS 13以上、Linux
・GPU: VRAMが4GB超のもの
・ストレージ: Chromeプロファイルが保存されているドライブに22GB以上の空き容量
・ネットワーク: 無制限または非従量制回線（Wi-Fiや有線推奨）
・ ダウンロード後、空き容量が10GB未満になると、自動的にモデルが削除されます。条件を再度満たすと再ダウンロードされます。

サンプルプログラムを動かしてみましょう

　サンプルプログラム→　https://kaihatuiinkai.jp/ar/131.html
　初めて作動させるときには、翻訳のためのデータがダウンロードされます。
　テキストボックスに英文を入れると日本文に訳します。

<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<meta charset="utf-8">
<title>翻訳</title>
<style>
</style>
</head>
<body>
<div style="font-size: large;font-weight: bold;">
  英語 => 日本語　翻訳
</div>
<div>
  〇ブラウザは、PC版のChromeでのみ作動します。<br>
  × Edge、Safariは不可です。iPadも不可です。<br>
  <form id="header">
  <br>
  ↓英語の文章を入れてください。日本語に翻訳します。<br>
  <input id="inputText" size=80 type="text" value="Hello, my name is Doraemon.  What do you want?  This is convenient.">
  <br>
  　<input type="button"  value="翻訳します" onclick="funcTranslateDisplay()">
  </form>
</div>
<div id="kiroku">
  <div id="content"></div>
</div>
<script>
  var myText ="";
  var kirokuText ="";
  const kiroku = document.getElementById('kiroku');
  // Translator API 初期化
  async function funcInitialize() {
    // Translator APIに対応しているか
    if ('Translator' in self) {
      kiroku.insertAdjacentHTML("beforeend","翻訳可能です。<br>");
    } else {
      kiroku.insertAdjacentHTML("beforeend","このブラウザは作動不可です。<br>");
    };
    // 対応している言語ペアのチェック
    const result = await Translator.availability({
      sourceLanguage: 'en',
      targetLanguage: 'ja',
      // available（使用可能）,downloadable,downloading,unavailable（非対応）
    });
    // console.log(result);
    // 言語パック、初回使用時に自動でダウンロード
    const translator = await Translator.create({
      sourceLanguage: 'en',
      targetLanguage: 'ja',
      monitor(monitor) {
        monitor.addEventListener('downloadprogress', (e) => {
          console.log(`ダウンロード済み: ${e.loaded * 100}%`);
        });
      },
    });
  };

  funcInitialize();

  // 英語 => 日本語　翻訳　（非同期処理）
  async function funcTranslate(myText) {
    const translator = await Translator.create({
      sourceLanguage: 'en',
      targetLanguage: 'ja'
    });
    const transResult = await translator.translate(myText);
    return transResult;
  };

  // 英文と翻訳した日本語を表示　（非同期処理）
  async function funcTranslateDisplay(){
    myText = document.getElementById('inputText').value;
    kiroku.insertAdjacentHTML("beforeend",myText + "<br>");
    const myTranslateText = await funcTranslate(myText);
    kiroku.insertAdjacentHTML("beforeend",myTranslateText + "<br><br>");
  };
</script> 
</body>
</html>

話した日本語を英語に訳したい

　話した言葉を音声認識して、「日本語→英語」に翻訳して英文も表示します。「丁寧に、正確に話す」ことで日本語の認識率はかなり向上します。アナウンサーのように滑舌良く話すようにしてください。方言で話すと認識率が下がります。コンピュータに「おだづな」と話しても意味を正しく訳してくれません。
　サンプルサイト→　https://kaihatuiinkai.jp/ar/132.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>日本語音声認識=>英語翻訳</title>
</head>
<body>
<h1>日本語 音声認識 → 英語翻訳 → 表示</h1>
<h3>「スタート」ボタンを押してから、話しかけてください。日本語を英語に変換して表示します。</h3>
  〇ブラウザは、PC版のChromeでのみ作動します。<br>
  × Edge、Safariは不可です。iPadも不可です。<br>
 <button id="btn" style="font-size: 140%;">スタート</button>
<div id="content" style="font-size: 120%;"></div>
<script>
  var myText ="";
  const content = document.getElementById('content');
  // Translator API 初期化
  async function funcInitialize() {
    // Translator APIに対応しているか
    if ('Translator' in self) {
      content.insertAdjacentHTML("beforeend","翻訳可能です。<br>");
    } else {
      content.insertAdjacentHTML("beforeend","このブラウザは作動不可です。<br>");
    };
    // 対応している言語ペアのチェック
    const result = await Translator.availability({
      sourceLanguage: 'ja',
      targetLanguage: 'en',
      // available（使用可能）,downloadable,downloading,unavailable（非対応）
    });
    // console.log(result);
    // 言語パック、初回使用時に自動でダウンロード
    const translator = await Translator.create({
      sourceLanguage: 'ja',
      targetLanguage: 'en',
      monitor(monitor) {
        monitor.addEventListener('downloadprogress', (e) => {
          console.log(`ダウンロード済み: ${e.loaded * 100}%`);
        });
      },
    });
  };

  funcInitialize();

  // 英語 => 日本語　翻訳　（非同期処理）
  async function funcTranslate(myText) {
    const translator = await Translator.create({
      sourceLanguage: 'ja',
      targetLanguage: 'en'
    });
    const transResult = await translator.translate(myText);
    return transResult;
  };

  // 英文と翻訳した日本語を表示　（非同期処理）
  async function funcTranslateDisplay(autotext){
    myText = autotext;
    content.insertAdjacentHTML("beforeend",myText + "<br>");
    const myTranslateText = await funcTranslate(myText);
    content.insertAdjacentHTML("beforeend",myTranslateText + "<br><br>");
    // 画面全体を最下部までスクロール
    window.scrollTo({
        top: document.documentElement.scrollHeight,
        behavior: 'smooth' // スムーズにスクロールさせたい場合
    });
  };

  //// 音声認識
  const listen = new webkitSpeechRecognition();
    listen.lang = 'ja-JP';
    const btn = document.getElementById('btn');

    btn.addEventListener('click' , function() {
        listen.start();
    });

    listen.onresult = function(e) {
      listen.stop();
      if(e.results[0].isFinal){
        var autotext =  e.results[0][0].transcript
        funcTranslateDisplay(autotext);
      };
    };

  listen.onend = () => {
    listen.start();
  };

</script>
<body>
<html>

日本語を翻訳して英語で話させる

　日本語で話しかけたら、英語で答えるようにしたいですよね。
音声認識（日本語）→翻訳→音声合成（英語）　のプログラムを作ってみました。
「スタート」ボタンを押して、日本語で話しかけてください。
日本語で話すと英語に翻訳して、英語で発話をします。
きちんと聞き取ってくれないときには、ページを閉じてもう一度表示させてください。
　サンプルプサイト→https://kaihatuiinkai.jp/ar/133.html
　コンピュータが自分で話した言葉を聞き取って、何度も同じことを話す、いわゆるハウリングのような現象が起きてしまうことがあります。特に短い文章や単語を話した後には出てします。例えば「オッケー」と話すと、「Ok」を何度も繰り返して止まらなくなります。その時には、スピーカーのボリュームを下げるか、マイクとスピーカーの位置を離してください。「ストップ」と言っても「Sopt」の繰り返しが止まりません。遅延をかけて聞き取り再開始をしていますが、この辺の調整が難しいですね。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>日本語音声認識=>英語翻訳</title>
</head>
<body>
<h1>日本語 音声認識 → 英語翻訳 → 英語発話</h1>
<h3>「スタート」ボタンを押してから、話しかけてください。日本語を英語に変換して、発話します。</h3>
  〇ブラウザは、PC版のChromeでのみ作動します。<br>
  × Edge、Safariは不可です。iPadも不可です。<br>
 <button id="btn" style="font-size: 140%;">スタート</button>
<div id="content" style="font-size: 120%;"></div>
<script>
  var myText ="";
  const content = document.getElementById('content');
  // Translator API 初期化
  async function funcInitialize() {
    // Translator APIに対応しているか
    if ('Translator' in self) {
      content.insertAdjacentHTML("beforeend","翻訳可能です。<br>");
    } else {
      content.insertAdjacentHTML("beforeend","このブラウザは作動不可です。<br>");
    };
    // 対応している言語ペアのチェック
    const result = await Translator.availability({
      sourceLanguage: 'ja',
      targetLanguage: 'en',
      // available（使用可能）,downloadable,downloading,unavailable（非対応）
    });
    // console.log(result);
    // 言語パック、初回使用時に自動でダウンロード
    const translator = await Translator.create({
      sourceLanguage: 'ja',
      targetLanguage: 'en',
      monitor(monitor) {
        monitor.addEventListener('downloadprogress', (e) => {
          console.log(`ダウンロード済み: ${e.loaded * 100}%`);
        });
      },
    });
  };

  funcInitialize();

  // 英語 => 日本語　翻訳　（非同期処理）
  async function funcTranslate(myText) {
    const translator = await Translator.create({
      sourceLanguage: 'ja',
      targetLanguage: 'en'
    });
    const transResult = await translator.translate(myText);
    return transResult;
  };

  // 英文と翻訳した日本語を表示　（非同期処理）
  async function funcTranslateDisplay(autotext){
    myText = autotext;
    content.insertAdjacentHTML("beforeend",myText + "<br>");
    const myTranslateText = await funcTranslate(myText);
    content.insertAdjacentHTML("beforeend",myTranslateText + "<br><br>");
    playSpeech(myTranslateText);
    // 画面全体を最下部までスクロール
    window.scrollTo({
        top: document.documentElement.scrollHeight,
        behavior: 'smooth' // スムーズにスクロールさせたい場合
    });
  };

    //// 音声認識
    const listen = new webkitSpeechRecognition();
    listen.lang = 'ja-JP';
    const btn = document.getElementById('btn');

    btn.addEventListener('click' , function() {
        listen.start();
    });

    listen.onresult = function(e) {
        listen.stop();
        if(e.results[0].isFinal){
            var autotext =  e.results[0][0].transcript
            funcTranslateDisplay(autotext);
        }
    }
    listen.onend = () => { 
        setTimeout(() => {
        listen.start();
        }, 300);
    };

    function playSpeech(myTranslateText){
        var speak = new SpeechSynthesisUtterance();	
        mySpeakText = myTranslateText;
        speak.voiceURI = 'native';
        speak.volume=   1;  // 音量 min 0 ~ max 1
        speak.rate =  0.8;  // 速度 min 0 ~ max 10
        speak.pitch=    1;  // 音程 min 0 ~ max 2
        speak.text =  "  "; // 話す内容
        speak.lang = 'en-US'; // en-US or ja-UP
        speechSynthesis.speak(speak);     // 発話実行
        setTimeout(() => {
            speak.text =  myTranslateText; // 話す内容
            speechSynthesis.speak(speak);     // 発話実行
        }, 100);

    };

    var  mySpeakText = "";

    speechSynthesis.onvoiceschanged = () =>{
        console.log("Speak Ok");
    };

</script>
<body>
<html>

　それにしても、約120行で「日本語聞き取り、英文翻訳、英語発話」のプログラムができる時代です。AIの力はすごいと思います。「ほんやくコンニャク」のように、考えている内容を直接翻訳はできませんが、話した言葉を翻訳してコンピュータに代理で話させることがきました。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?