0
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」で「ほんやくコンニャク」アプリは作れるのか？

Last updated at Posted at 2026-01-28

「ほんやくコンニャク」はあらゆる言語を翻訳

　世界には 7,159 の言語が存在すると言われています。←Copilotさんが教えてくれました。
（Ethnologue　世界最大級の言語データベースより　https://www.ethnologue.com/）
　1つの言語について他に 𝑛−1通りの相手があり、それが𝑛 言語分あります。よって全言語を互いに翻訳するためのプログラム数は、7,159 × 7,158 = 51,244,122 になります。
　7,159語すべての言語を相互に翻訳するプログラムを作るのは、私の知識と技術力、私に残されている寿命から考えると絶対にムリです。そこで、ほんやくコンニャクの 2 / 51,244,122の機能にして、世界で話者人口が3番目に多い言語の「英語」と、世界で8番目の「日本語」の相互の翻訳を作ることにします。

翻訳は双方向ですよね

　前回作成した、Chromeの翻訳API「Translator API」利用のプログラムは、「日本語→英語」または、「英語→日本語」の一方向の翻訳ができるプログラムでした。これを1つのプログラムで処理をさせたいと思います。英語を話す人と、日本語を話す人との間にコンピュータを置いて、そこで動かすイメージです。

言語の判定

まず、言語を判定します。
参照サイト　https://qiita.com/degudegu2510/items/a4612847e1ae2bff4a62

    const detector = await LanguageDetector.create();
    const detectResult = await detector.detect(myText);   
    if (!detectResult || detectResult.length === 0) {
      console.log( '言語を特定できませんでした。');
    };
    const sourceLang = detectResult[0].detectedLanguage;
    let targetLang = 'ja';
    // もし日本語なら、英語に翻訳
    if (sourceLang === 'ja') {
      targetLang = 'en';
    };

日本語、英語を判別して翻訳します

　日本語、英語を判別できたら、あとは翻訳をするだけです。 サンプルプログラムはこちらです。
https://kaihatuiinkai.jp/ar/141.html
　音声認識は「ja-JP」にして聞き取りをしています。英語の文章を話すと、英文で聞き取ってくれます。
「en-US」にすると、日本語を聞き取ってくれません。両方を同時に動かすこともやってみましたが、動きませんでした。「ja-JP」だとカタカタ英語になる場合があります。その場合は、「自分の英語の発音が正しくない」と思って発音練習をしてください。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>日本語,英語判別</title>
</head>
<body>
<h1>日本語、英語を判別して翻訳します</h1>
<h3>「スタート」ボタンを押してから、話しかけてください。<br>
  話している言葉が、日本語または英語かを自動判別し、翻訳して表示します。</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}%`);
        });
      },
    });
    const translator2 = await Translator.create({
      sourceLanguage: 'en',
      targetLanguage: 'ja',
      monitor(monitor) {
        monitor.addEventListener('downloadprogress', (e) => {
          console.log(`ダウンロード済み: ${e.loaded * 100}%`);
        });
      },
    });
  };

  funcInitialize();

  // 英語 => 日本語　翻訳　（非同期処理）
  async function funcTranslate(myText) {
    //言語を判定する
    const detector = await LanguageDetector.create();
    const detectResult = await detector.detect(myText);   
    if (!detectResult || detectResult.length === 0) {
      console.log( '言語を特定できませんでした。');
    };
    const sourceLang = detectResult[0].detectedLanguage;
    let targetLang = 'ja'; // 基本は日本語
    // もし日本語だったら、英語へ切り替える
    if (sourceLang === 'ja') {
      targetLang = 'en';
    };    
    const translator = await Translator.create({
      sourceLanguage: sourceLang,
      targetLanguage: targetLang
    });
    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>

話した言葉を翻訳してPCに発話させたい

　同時翻訳をする人は、聞きながら翻訳してすぐ話してくれますよね。アレを実現したい。
音声認識 → 英語・日本語の言語判定 → 「英語⇔日本語」翻訳 → 翻訳した言語で発話
を行う自動判別翻訳プログラムを作りました。
https://kaihatuiinkai.jp/ar/142.html
スピーカーの音を大きくすると、発話が音声認識され、何度も同じ言葉を繰り返す場合があります。ハウリングのような現象です。プログラムの中で聞き取りを遅延して開始する対策をしています。でも、この時間を長くすると、話しかけても反応しない時間ができてしまいます。短いとハウリングするし。これを防ぐには、スピーカーの音を小さくする、マイクとスピーカーの位置を離すなどの方法を行ってください。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>音声認識言語自動判別=>翻訳</title>
</head>
<body>
<h1>音声認識 → 日本語英語判別 → 翻訳 → 発話</h1>
<h3>「スタート」ボタンを押してから、話しかけてください。<br>
  話している言葉が、日本語または英語かを自動判別し、翻訳して発話します。</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（非対応）
    });
    // 言語パック、初回使用時に自動でダウンロード
    const translator = await Translator.create({
      sourceLanguage: 'ja',
      targetLanguage: 'en',
      monitor(monitor) {
        monitor.addEventListener('downloadprogress', (e) => {
          console.log(`ダウンロード済み: ${e.loaded * 100}%`);
        });
      },
    });
    const result2 = await Translator.availability({
      sourceLanguage: 'en',
      targetLanguage: 'ja',
      // available（使用可能）,downloadable,downloading,unavailable（非対応）
    });
    console.log(result,result2);
    const translator2 = await Translator.create({
      sourceLanguage: 'en',
      targetLanguage: 'ja',
      monitor(monitor) {
        monitor.addEventListener('downloadprogress', (e) => {
          console.log(`ダウンロード済み: ${e.loaded * 100}%`);
        });
      },
    });
  };

  funcInitialize();

  let targetLang = 'ja'; 

  // 英語 => 日本語　翻訳　（非同期処理）
  async function funcTranslate(myText) {
    //言語を判定する
    const detector = await LanguageDetector.create();
    const detectResult = await detector.detect(myText);   
    if (!detectResult || detectResult.length === 0) {
      console.log('言語を特定できませんでした。' );
    };
    let sourceLang = detectResult[0].detectedLanguage;
    // もし日本語だったら、英語へ切り替える
    if (sourceLang === 'ja'){
      targetLang = 'en';
    } else {
      sourceLang = "en";
      targetLang = 'ja';    
    };
    console.log(sourceLang,targetLang);  
    const translator = await Translator.create({
      sourceLanguage: sourceLang,
      targetLanguage: targetLang
    });
    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();
        }, 500);
    };

    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 =  "  "; // 話す内容
        if(targetLang === 'ja'){
          speak.lang = 'ja-UP'; // en-US or ja-UP
        } else {
          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>

　Chromeの翻訳API「Translator API」はローカルで動くので、反応がとても速いです。中国語や韓国語にも翻訳をしてみたいですが、言語セットがまだ出されていません。新しく追加されたらまた作りたいと思います。
　これでやっと、ほんやくコンニャクの能力の「2500万分の１」です。

0
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
0
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?