「英語学習にプログラミングを活用！」パート❹ －自分が持っている単語帳でトレーニングする－ JavaScriptでブラウザに自作単語リストを保存する

2020年10月18日 06:55

前回のコーディングのおさらい

パート３では「発音トレーニング」機能を実装するため、いくつかの関数をJavaScriptに加えました。発音トレーニングがどのような機能かは次のツイートのビデオを参考にしてみてください。

【英語学習にプログラミングを活用】第3弾

「TOEIC英単語1000本ノック」に👄発音トレーニング機能を追加します

詳細なデザインやコーディングアプローチについて初心者向けに解説しましたhttps://t.co/2BMeUMu6pI

👇デモ#プログラミング #プログラミング初心者 #プログラミング学習 #英語学習 pic.twitter.com/jJm71wsmBb
— １分間プログラミング (@IppunkanProgram) October 11, 2020

また、パート３の記事はこちらです。

恐らくサンプルコードをコピペしながら変更を加えていった方が多いかと思います。全体の変更の流れがどうなっているかよく理解できなかった方のために、追加した関数の呼び出しの流れをまとめてみます。

まず青いボックスです。

これはindex.htmlで、発音を音声認識させる「発音テキストボックス」をHTMLに加えるところから始めました。ただ、このテキストボックスはindex.htmlファイル内に最初からあるHTMLコードには存在せず、training.jsの中のDisplaySample関数で、各例文を表示する際に動的にHTMLを生成していました。その生成の中で発音ボックスを追加したわけです。

具体的には次のDIV要素生成をDisplaySample関数内に追加しました。

【発音テキストボックスのDIV要素】

+ "<div class=pron-sentence id=recoText" + SampleIndex + " onclick=\'Recognize(\"en-US\", \"" + SampleIndex + "\", \"" + engsentence + "\", DisplayRecoText);\'>ここをクリックして発音チェック</div>"

ここが加えられたDisplaySample関数の全体をもう一度表示します。

//サンプル文章をDIVに表示させるメソッド
function DisplaySample () {
  //サンプル英文
  var engsentence = SamplesJSON.samples[SampleIndex].sentence;       
  //サンプル翻訳：翻訳データがない場合はnullになる
  var translation;
  if (document.getElementById("show-trans").checked == true)
      translation = SamplesJSON.samples[SampleIndex].locsentence;
  else 
      translation = "";
 //表示テキストの作成：英文をクリックすると音声で読み上げる
 document.getElementById("sample-box").innerHTML 
     += "<div class=eng-sentence onclick='Speak(\"" + engsentence + "\", \"en-US\");'>" + engsentence + "</div>" 
     + "<div class=pron-sentence id=recoText" + SampleIndex + " onclick=\'Recognize(\"en-US\", \"" + SampleIndex + "\", \"" + engsentence + "\", DisplayRecoText);\'>ここをクリックして発音チェック</div>" 
     + "<div class=jpn-sentence>" + translation + "</div>"
     + "<a href=" + SamplesJSON.samples[SampleIndex].url + " target=_blank>" 
     + SamplesJSON.samples[SampleIndex].siteName + "</a><br/>";     
 //音声で読み上げる
 Speak(SamplesJSON.samples[SampleIndex].sentence, "en-US");

 SampleIndex++;
}

次に緑のボックスです。ここから前回パート３の最後に述べたリファクタリング作業の解答です。

リファクタリング課題：発音テキストをクリックした後、「例文を読んでください・・・」を表示する

動的に作られた発音テキストを表示するボックスをクリックすると音声認識がスタートします。ここはonclickイベントとしてTestPronunication関数を指定し、その中で音声認識のスタート処理を書いてください。

もともとこのonclickにはRecognize関数が指定されていました。しかし、音声認識する前にテキストボックスの文字を「例文を読んでください・・・」という指示文に変更したわけです。こうすることでユーザーが何をすべきかが明確になります。

そこで、パート２の基礎アプリでやっていたように、onclickではRecognize関数ではなく、新たにTestPronunciationという関数を作り、まずはそれを呼ぶようにします。次の関数をtraining.jsに加えてみてください。

//発音トレーニングを開始するメソッド
function TestPronunciation (CorrectText, index) {
   //例文と、そのインデックスをパラメータに入れる
   var params = [CorrectText, index];
   //UI操作：表示テキストと背景色を変える
   document.getElementById("recoText" + params[1]).innerHTML = "例文を読んでください・・・";
   document.getElementById("recoText" + index).style.backgroundColor = "rgb(222, 228, 228)";
   //音声認識メソッドを呼び出す（パラメータとコールバック関数を渡す）
   Recognize("en-US", params, DisplayRecoText);
}

この中でまず、テキストボックスの文字列を「例文を読んでください・・・」に変更し、さらに背景色も変化させ、「何かしないといけないんだな」ということをユーザーにはっきり伝えます。そうしてからRecognize関数を呼び出すようにします。

メモ：この10000本ノックアプリをAndroidのChromeで開くと、音声認識が始まると「ピー」っと音が鳴るようになっています。これはブラウザの仕様であって、コーディングでやっているものではなりません。このように音がなるのであれば今回やったようなテキストを変更するような処理は不要ですよね。ただしPCでのブラウザではそうなっていないため、やはりテキスト変更はやっておいたほうがよいです。

【AndroidのChromeでのアプリ画面】

では緑のボックスの説明に戻りますが、新しく作ったTextPronunciation関数で、発音テキストボックスの文字を「例文を発音してください・・・」に変えた後、音声認識のRecognize関数を呼びます。

そこでオレンジのボックスに移ります。

ここでspeech.jsにあるRecognize関数が呼ばれ、マイク入力から音声認識が始まります。認識テキストが出てきたら例のコールバック関数を呼び出します。どの関数を呼ぶかというとtraining.jsにあるDisplayRecoText関数です。

ここからまた緑色のボックスに戻ります。

DisplayRecoText関数では、発音テキストを表示させると同時に、例文との差をチェックして「発音スコア」を計算します。そのスコアによって緑、黄色、赤と背景色を変え、ユーザーに発音結果を伝えます。

これが一連の流れでした。

最終的なコードは後程お見えしますが、まずは関数の呼び出しの流れを理解してください。その上で一つ重要な変更をしないといけません。それがRecognize関数のリファクタリングです。

Recognize関数を”きれい”にする：リファクタリング

ここから先は

24,787字 / 9画像

¥ 100

ログイン

この記事が気に入ったらサポートをしてみませんか？