『子供とプログラミング』ー おしゃべりするWebサイトを作る ー プログラミングしながらいろんな外国語を勉強してみよう！
「子供と１分間プログラミング」の第３弾は、日本語だけではなく英語やスペイン語、中国語、韓国語など、様々な外国語を「オウム返し」してくれるウェブサイトを作りながらWebの仕組みをもうちょっと詳しく理解していきます。前回はURLの仕組みを勉強しました。Visual Studio Codeを使って簡単に音声合成でしゃべるウェブページを作り、そのページにブラウザからアクセスする仕組みをIPアドレスの情報とともに解説しました。詳しくは前回記事をご覧ください。
今回はウェブサイトに話しかけると、同じことを音声合成でしゃべり返す、いわゆる「オウム返し」の機能を作り、それをURLパラメータを使って他の言語に自由に切り替える仕組みを理解します。ただ単にウェブサイトを開くだけではなく、自らが指定した情報やデータをもとにサイトの振る舞いが変わってくるところから、ウェブサーバーと交信している感覚を掴むことができると思います。
今回の作業の流れはこんな感じです。
❶ 「おしゃべりウェブサイト」をJavaScriptとWeb Speech APIを使って作成する。
❷ まずは日本語でサイトに話しかけ、そのまま認識された通りの日本語をサイトがしゃべるという仕様を理解する。
❸ URLパラメータを使って多言語のオウム返しに変更。ちょっと知っている英語や中国語などをしゃべって、きちんとした発音を確認する。
作業を始める前に
Visual Studio CodeでJavaScriptを書く環境は前回記事にツールのインストール方法などを詳しく解説していますのでそちらをご覧ください。必要なものは、
● Visual Studio Code（日本語環境にするのはオプションです）
● VSCodeの拡張ツール、Preview on Web Server
● Chrome ブラウザ（Windows、MacOS)
今回注意が必要なのは、ブラウザは必ずChromeを使うという点です。Web Speech APIの音声認識機能は残念ながらChromeでのみサポートされています（一部FireFoxでも動作するようですが確認していません）。また、iOSではChromeでも動作しませんんので、PCかMacのマシンを使ってください。
ステップ１：プロジェクトフォルダを作る
ではさっそくサイトを作っていきましょう。まずは各種のファイルを入れておくプロジェクトフォルダを作ります。名前と場所はどこでも構いません。例えばWebSiteSRという名前でデスクトップに保存します。
次にVisual Studio Codeを開き、「ファイル」メニューから「フォルダを開く」を選択し、WebSiteSRというフォルダを選びます。
そして前回もやった通り、新規ファイルとして次の３つを作ってください。
● index.html
● speech.js
● style.css
エクスプローラーはこんな感じになります。
ステップ２：スタイルシートを作る
style.cssはスタイルシートで、前回とほぼ同じですが、多少変更していますので、次のものをそのまま全部コピペしてください。前回同様、ここではCSSの解説は省きます。
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap');
:root {
--primary-color: #3a4052 ;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Open Sans', sans-serif;
line-height: 1.5;
}
h1 {
font-weight: 300;
font-size: 40px;
line-height: 1.2;
margin-bottom: 15px;
}
.wholesecion {
height: 100vh;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
color: rgb(200, 226, 151);
padding: 0 20px;
}
.video-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.rounded-corner {
margin: 10pt;
padding: 5pt;
padding-left: 8pt;
background-color: #0a458a ;
width: 220px;
height: 120px;
color: #FFFFFF ;
font-size: 24px;
outline:none;
}
.video-container video {
min-width: 100%;
min-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: cover;
}
.header {
z-index: 2;
align-items: center;
}
.content {
z-index: 2;
align-items: center;
}
.output {
z-index: 2;
align-items: center;
}
.btn {
display: inline-block;
padding: 10px 30px;
background: var(--primary-color);
color: #fff ;
border-radius: 5px;
border: solid #fff 1px;
margin-top: 25px;
opacity: 0.7;
}
.btn:hover {
transform: scale(0.98);
}貼り付けたらCntl+Sでファイル変更を保存することを忘れないでください。
ステップ３：ウェブページのHTMLを作成する
次はメインのHTMLです。同様に全コピペして保存します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>おしゃべりウェブサイト</title>
</head>
<body>
<section class="wholesecion">
<div class="video-container">
<video src="https://traversymedia.com/downloads/video.mov" autoplay muted loop></video>
</div>
<div class="content">
<h1>ボタンを押して何か話してみてね</h1>
<button class="rounded-corner" onclick="RecognizeLocal();">話す</button>
<div id="output"></div>
</div>
</section>
<script src="./speech.js"></script>
</body>
</html>「えっ、これだけ？」と思うかもしれませんがこれだけです。今回はJavaScripは外部ファイルにまとまたので、HTMLはとてもすっきりしています。JavaScriptはこのような形で外部参照されています。
<script src="./speech.js"></script>まずはこの段階でウェブサイトをPreview on Web Serverで見てみましょう。index.htmlを選択した状態で、Cntl+Shift+Lで簡易ウェブサーバーが立ち上がり、作ったウェブページを開いてくれます。
サイトにある通り、「話す」ボタンを押して何か話すと、同じことをウェブサイトが”しゃべり返し”ます。ただ、今はボタンをクリックしても何も起きません。これからその仕組みをJavaScriptで書いていきます。まずはこのサイトをブラウザ内で見られるようにしてください。
ここで、お使いのマシンでEdgeなどがデフォルトのブラウザになっているとChromeではなくEdgeで開かれると思います。Visual Studio Code内の設定から開くブラウザを変更できますが、最も簡単なのはOSでデフォルトブラウザをChromeにすることです。Windowsの場合は、検索ボックスに「ブラウザ」とタイプすると次のように「既定のWebブラウザを選ぶ」という項目が出てくるので、それを選んでChromeを指定してください。次回からは自動的にChromeでウェブページが開かれます。
もしくは、Edgeが立ち上がったら裏でサーバーが稼働しているので、そこからChromeを自分で開いて、デフォルトのアドレス、
http://localhost:8080/index.html
をURLで開いても構いません。
ステップ４：JavaScriptを作成する
最後はJavaScriptです。同じようにspeech.jsにコピペしてください。
var lang_p;
//URLからlangのパラメータがあったらその言語を設定。デフォルトは日本語：ja-JP
window.onload = function onLoad() {
param = GetURLParameters();
lang_p = param["lang"];
if ( typeof(lang_p) == "undefined" || lang_p == null || lang_p == '') {
lang_p = "ja-JP";
}
}
//URLからパラメータのKeyValuePairを取得する関数
function GetURLParameters() {
var querystr = document.location.search.substring(1);
var parameters = querystr.split('&');
var keyvals = new Object();
for (var i = 0; i < parameters.length; i++) {
var kv = parameters[i].split('=');
var key = decodeURIComponent(kv[0]);
var val = decodeURIComponent(kv[1]);
keyvals[key] = val;
}
return keyvals;
}
//====================================================
// Web Speech APIを利用した音声認識と音声合成の関数
//====================================================
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
//音声認識
function SpeakLocal (text) {
let voice = new SpeechSynthesisUtterance();
voice.text = text;
voice.volume = 1;
voice.rate = 1;
voice.pitch = 1;
voice.lang = lang_p;
window.speechSynthesis.speak(voice);
}
//音声合成
function RecognizeLocal() {
var recognition = new SpeechRecognition();
recognition.continuous = false;
recognition.lang = lang_p;
recognition.interimResults = false;
recognition.maxAlternatives = 1;
recognition.start();
recognition.onresult = function(event) {
var recoText = event.results[0][0].transcript;
target = document.getElementById("output");
target.innerHTML = recoText;
SpeakLocal(recoText);
}
}同様にコピペしたら必ず保存してください。ではボタンをクリックしたらどんなことが起きるのか、まずは確かめてみましょう。
注意：HTMLやJavaScriptファイルを変更したら、Cntl + Sを押した段階でウェブページは自動的に変更されるので、再度Serverを立ち上げる必要はありません。ただ、一つのブラウザに複数のタブが開いている場合はJavaScriptがうまく動かない場合があるので、動作がおかしいと思ったら一度すべてのブラウザタブを閉じ、さらにブラウザも閉じ、再度Preview on Web Serverを立ち上げてみて下さい。
今度はボタンをクリックして何かパソコンに向かってしゃべってみてください。上の例では「皆さんこんにちは」と話しかけました。するとブラウザに音声認識の結果が表示され、それと同じことを音声でしゃべります。これで「オウム返し」と言った理由がよくわかると思います。
これで準備が完了です。ではさっそくお子さんとやってみましょう。
デモ１：基本サイトの使い方を教える
まずはお子さんにこのサイトがどう動くかを説明します。今回はお母さんとみきちゃんのやりとりとして説明します。
お母さん：みきちゃん、また新しいウェブページ作ったんだけど見てみる？
みきちゃん：なに、なに？
お母さん：あのさ、この「話す」ボタンを押して、何か日本語を話してみて。
みきちゃん：日本語？「おはよう」とかでいいの？
お母さん：じゃあさ、「今日のごはんななに？」って言ってみたら？
みきちゃん：(ボタンクリック）今日のごはんはなに？
パソコン：「今日のごはんは何」
みきちゃん：あっ、しゃべった。
お母さん：同じことしゃべるでしょ。
みきちゃん：(ボタンクリック） ラーメン食べたい
パソコン：「ラーメン食べたい」
みきちゃん：面白いね！
しばらくオウム返しで遊んでみてください。まあ、あまり長くは続かないでしょうが、ウェブサイトと何かやりとりしている感じがつかめてくると思います。とりあえずはそこが狙いなので、そんなに長く遊ぶ必要はありませんん。
ポイント：Webサイトに「隠しコマンド」を渡す
ウェブサイトのURLというのはまずはwww.asahi.comのようにドメイン名から始まります。その後、
www.xyz.com/directory1/directory2/page.html
のようにスラッシュで区切られたディレクトリ名と、最後にhtmlなどのファイル名が来ます。もちろんディレクトリだけ指定する場合もあります。いずれにしてもスラッシュで区切られているのが普通のURLです。これは皆さんも普段ブラウザでウェブサイトを開いていて気が付いている点だと思い餡巣。
ところが、次のように？や＝、&が入ったURLを見たことがありませんか？
www.xyz.com/page.html?name=abc&length=100
なんとなくわかりますよね。nameという名前の値にabcというデータ、lengthという値に100というデータを指定している感じです。
これを実際に体験してみます。お好きなYouTubeビデオを開いてみて下さい。ここでは拙著、『今すぐ書ける １分間プログラミング』を紹介したビデオを使ってみます。
このビデオのURLはこうなっています。
https://www.youtube.com/watch?v=g6aKrNZetYY
"v"というのはnideo、そしてこのビデオのIDが"g6aKrNZetYY"ということです。このIDをもとにYouTubeはこのビデオを表示させています。そこで、このURLに次のテキストを追加して入れてみて下さい。
https://www.youtube.com/watch?v=g6aKrNZetYY&t=14
この最後にt=14と入れてEnterを押すと、ビデオは14秒後からスタートします。この14秒後というのは、著者である私の紹介が始まるところです。
この"t"というのはtimeのことで、数字は秒数です。つまり、この値をURLに加えることで、ビデオを好きな時点からスタートさせることができます。まさに”隠しコマンド”のような感じですよね。
このA=Bで指定するところをURLパラメータ(クエリパラメータとも言います）と言います。どのようなパラメータがあるかは外からは分かりませんが、知っているとウェブサイトの動作を大きく変えることができます。
「おしゃべりウェブサイト」に英語をしゃべらせる
今回のサイトにはlangというパラメータが設定されています。何も指定しないと日本語なのですが、他にもいくつもの言語がサポートされています。
日本語：ja-JP
英語：en-US（米国）
英語：en-GB（英国）
スペイン語：es-ES（スペインのスペイン語）
中国語：zh-CN（簡体）
中国語：zh-TW（繁体）
韓国語：ko-KR
他の言語は次のようなサイトを参照してみてください（マイナーな言語はサポートされていません）。ただし、コードは必ずaa-BBのように2文字X2文字で、後ろの方は大文字にしてください。
では韓国語を試してみましょう。
http://localhost:8080/index.html?lang=ko-KR
?の後にlang=[文字コード]を入れます。韓国語はko-KRです。これでEnterを押してください。画面は何も変わりませんが、裏では韓国語が理解できるようになっています。
そこで「あんにょんはせよ」など知っている韓国語を話してみてください。
するときちんとした発音でアンニョンハセヨとしゃべってくれます。
他に片言で十分ですので、いくつか言語を試してみて下さい。中国語なら「しぇーしぇー」、スペイン語は「コモエスタ」、ドイツ語は「グーテンテーグ」など、発音は気にせずしゃべってみてください。うまく認識されたら、きちんとした発音でオウム返ししてくれるので、次回からは正しい発音で言うことができますよ。
デモ２：英語を話してみる
お母さん：このウェブサイトは英語とか中国語とか、外国語もわかるんだよ。
みきちゃん：そうなの？
お母さん：例えばね、このウェブサイトのアドレスの後ろに?lang=en-USって入れてみるよ。（Enterを押す）じゃあさ、何か英語話してみて。
みきちゃん：ハローとか？
お母さん：うん、やってみて。
みきちゃん：（ボタンクリック）ハロー
パソコン：Hello
みきちゃん：おおっ、英語しゃべった！
お母さん：マイ・ネーム・イズ・ミキって言ってみたら？
みきちゃん：（ボタンクリック）マイ ネーム イズ ミキ
パソコン：My name is Mickey
みきちゃん：ミキがMickeyになってる。
お母さん：ミッキーマウスのMickeyだね。
皆さん、もしくはお子さんがもし英語など外国語の勉強をしている場合、自分の発音を確認（うまく音声認識されるかどうか）したり、正しい発音を確認したりするのにちょっとは使えそうですよね。ここはいろいろな外国語でのフレーズを調べて、試してみるのも楽しいでしょう。いろいろな言語のコード（lang）をウェブページに対して指定すると、サイトの動作ががらっと変わることを体験させてあげてください。
このサイトの発展形
いまのところ、このサイトは開発マシン上のChromeでしか動きません。前回の音声合成でやったように、他のマシンや携帯、タブレットからIPアドレスを指定してやっても、残念ながらセキュリティーの問題から音声認識は動きません。
もしお子さんが自分の携帯やPCなどでこのサイトを使ってみたいとしたら、実際のサーバーに展開する必要があります。これはこれで一つの大きな作業になるので、次回にしたいと思います。
では！
この記事が気に入ったらサポートをしてみませんか？