「英語学習にプログラミングを活用！」パート❸ － 発音トレーニング機能を追加する － 初心者でも分かるようにコーディングを詳細に解説！

前回まで、「TOEIC英単語1000本ノック」アプリの基礎バージョンを紹介し、HTML、CSS、JavaScriptでのコーディングの概要を解説してきました。

今回からは基礎バージョンをベースに機能拡張を通して、もう少し深くウェブアプリのコーディングをやっていきます。

どんな機能を追加していくか

具体的には次の機能拡張を進めていきます。

❶ 発音トレーニング機能
● 例文を自分でしゃべってみて、認識率をもとに発音スコアを表示する
● 見るだけではなく、実際にしゃべってみることで単語を覚えていく
❷ My単語帳の登録
● 任意の単語を入れて例文トレーニングができるようにする
● 自分で覚えたい単語リストに対してもトレーニングが可能
❸ 既知単語スキップ機能
● 覚えた単語はスキップできるようにする
❹ 全例文に翻訳表示
● クラウドの機械翻訳機能を利用して、訳文がない例文でも翻訳が読める
❺ 例文厳選アルゴリズム搭載
● 単語の意味が推測しやすい例文を選べるようにする

プログラミング初級者向けにコーディング作業の流れを詳しく解説します

今後は5回にわたって具体的なプログラミング方法を解説していきますが、ここからは有料記事とさせていただきます。そのため、各回で具体的に何をやるかを説明します。

各回、次の４点に焦点をあてて解説をしていきます。

ステップ1⃣ 追加機能の解説
ステップ2⃣ プログラミングでどうアプローチしたらよいかの解説
ステップ3⃣ JavaScriptとHTMLのコーディング解説
ステップ4⃣ 各作業でのデバッグや、検索サイトでの情報収集法の解説

一番の目的は、プログラミング経験があまりない方が、どうやって一つのアプリを作っていくか、その流れを理解してもらうことです。これまでプログラミングの初級本には触れたことはあるものの、今一つプログラミングで何ができるかがピンとこないという人には最適なプロジェクトだと思います。

さらに、これまで英語学習に力を入れてきて、プログラミングにも興味があるという方にもおすすめです。自分が最も興味を持つテーマでプログラミングに取り組むのが一番よいやり方です。プログラミングが全く経験のない方は次の準備作業に関するセクションを是非読んでからこのプロジェクトを始めてください。

Visual Studio CodeでHTMLやJavaScriptのコーディング経験がある方は準備セクションはスキップしても構いません。

初心者準備１：Visual Studio Codeに慣れる

開発ツールとしてVisual Studio Code（Windows、Macの両方に対応）を使います。まずはこのツールをインストールしてください。手っ取り早くなれるには、この記事を読んで音声合成と音声認識に挑戦してみてください。

この記事ではAzure（アジュール）というクラウドの無料アカウントを取得する必要がありますが、そのアカウントは今回の拡張機能でも利用します。上記の記事をこなせば準備は整いますので、是非トライしてみてください。

初心者準備２：HTMLファイルを手作業で作ってみる

HTMLを書いてウェブサイトを作った経験がゼロの方は、次の記事を参考に、メモ帳（エディタ）だけを使って、HTMLコードとWeb APIで音声合成をやるプログラミングに挑戦してみてください。

初心者準備３：VSCodeで簡単なウェブサイトを作ってみる

VSCodeとHTMLやJavaScriptをちょっとだけ理解してきたら、次の記事を参考に実際のウェブサイトを作ってみます（おしゃべりウェブサイト）。

これはシリーズの中の一つの記事ですが、もし時間の余裕があれば是非ほかの回も読んでプログラミングをやってみてください。ネットの仕組み、サイトホスティングの構築方法など、ウェブサイトを作る一連の流れがよくわかるはずです。

初心者準備４：パート１と２を読んで基盤アプリを準備する

あとは前回のパートを読んで、「TOEIC英単語1000本ノック」のベーシックなアプリを実際にVSCodeで作ってみます。パート２ではすべてサンプルコードをコピペするだけで基礎バージョンを作れるようになっていますので、詳しいコーディングの知識は不要です。

ではここから今回の機能拡張作業を進めていきます。がんばって取り組んでください！

ステップ１：「発音トレーニング」ってどんなもの？

基礎アプリでは、TOEICの単語帳からランダムに単語を選び、その単語が入った例文を次々と表示します。ユーザーはその例文を読みながら単語の意味を理解し、どのような文脈で使うものなのかも掴んでいきます。このように大量の例文を読みながら意味を推測するのが1000本ノックアプリの特徴です。

その際に、自分で例文を発音して、耳からも単語を覚えるようにすると効率がグンとアップします。そこで、次のような機能を追加します。

新機能のシナリオ：ユーザーが例文を見て、UI（ボタンやテキストなど）をクリックするとマイク音声入力状態になる。例文をそのまま読み上げ、それが音声認識され、テキストが生成される。例文と発音文を比較して「発音スコア」を計算。すべて正しく言えたら緑で、違いがある場合は黄色や赤で表示する。

だいたいどんな感じかわかりますよね。今回プログラミングして発音トレーニング機能を実装するとこんな感じになります。

発音結果が色で即わかるようになっています。ではどのようにプログラミングしていけばこのような機能ができるのでしょうか。

ステップ２：デザインアプローチを考える

まず現在の基礎アプリの画面を見てみましょう。

画面では例文がたくさん表示され、ユーザーはどの例文に対しても発音トレーニングができるようにしないといけません。簡単なのは、各例文のテキストボックスの隣にマイクの絵を入れたボタンみたいなのがあり、そこをクリックすると音声認識が始まるというアプローチでしょうか。

ユーザーが例文に沿って話したら、音声認識されたテキストをどこかに表示させないといけません。なので、そのためのテキストボックスが必要です。一番簡単なのは例文の下にまた別のテキストボックスを置くことです。

では実際にコーディングをやって認識テキストを表示させるテキストボックスを追加してみましょう。

ステップ３：発音テキストを入れるボックスをまずは置いてみる

そこで、training.jsのコードのDisplaySample関数の次の箇所を見てください。

//表示テキストの作成：英文をクリックすると音声で読み上げる
document.getElementById("sample-box").innerHTML 
    += "<div class=eng-sentence onclick='Speak(\"" + engsentence + "\", \"en-US\");'>" + engsentence + "</div>" 
    + "<div class=jpn-sentence>" + translation + "</div>"
    + "<a href=" + SamplesJSON.samples[SampleIndex].url + " target=_blank>" 
    + SamplesJSON.samples[SampleIndex].siteName + "</a><br/>";   

ここは、各例文を表示するエリア（DIV=Divisionタグで指定する部分）にsample-boxという名前がついていて、そこには次の三つの要素が加えられます。

１．例文のテキストボックス 
２．翻訳テキスト（表示がチェックされている場合）
３．辞書サイトへのリンク

そこで、例文ボックスの下に全く同じDIV要素をコピペしてみてください。onclickイベントなどは消して、次のような簡単な行を追加します。

+ "<div class=eng-sentence>ここに認識テキストを表示させる</div>"

//表示テキストの作成：英文をクリックすると音声で読み上げる
document.getElementById("sample-box").innerHTML 
    += "<div class=eng-sentence onclick='Speak(\"" + engsentence + "\", \"en-US\");'>" + engsentence + "</div>" 
    + "<div class=eng-sentence>ここに認識テキストを表示させる</div>" 
    + "<div class=jpn-sentence>" + translation + "</div>"
    + "<a href=" + SamplesJSON.samples[SampleIndex].url + " target=_blank>" 
    + SamplesJSON.samples[SampleIndex].siteName + "</a><br/>";   

するとこんな感じになります。

こうすると、例文の英語のすぐ下に自分が音声認識させた英語が表示されるので、簡単に２つを比較できます。

そこで、音声認識はどうやってトリガーしたらよいのでしょう。先ほど述べたようにボタンを追加してもよいのですが、このテキストボックス自体をクリックして音声認識をスタートさせることもできます。

先に追加したDIVのテキストを「ここをクリックして発音チェック」に変更してみてください。

こうするとユーザーはそこをクリックすればよいということが一発でわかります。さらに、ボタン用のスペースを考える必要がないのでUIもすっきりします。

音声認識をスタートさせる