みんなのコード Tech Blog

NPO法人みんなのコードのエンジニアによる技術ブログです。

公倍数コースの最終ステージでグラミンがしゃべるようになりました(Chrome限定)


こんにちは。 みんなのコードのエンジニアの板東です。

この度、プログル 公倍数コースの最終ステージ(ステージ15)にて、
「〇〇と言います」ブロック実行時に音が出るようになりました!(Chrome限定です)

(実は5月からこの機能は追加されたのですが…お知らせが遅くなってしまいました)

下に示すような、音声ON/OFF切り替えボタンをONにすることで、グラミン(吹き出しが出ているロボット)が「〇〇と言います」の「〇〇」を喋ってくれるようになります。
下に示している場合だと、1から10まで数を数える毎に、「プロ!」と読み上げてくれるようになります。

f:id:hanawasakuyon:20200618144357p:plain
公倍数コース 最終ステージ(ステージ15)

f:id:hanawasakuyon:20200618144538g:plain
公倍数コース 最終ステージ(ステージ15)にある音声ON/OFF切り替えボタン

本記事では、この音声読み上げ機能について

  • どのように開発が進んで行ったのか
  • どのような技術を使っているのか

等について書かせていただきます。


開発のきっかけ

使っていただいた様々な方からのフィードバック・感想の中で

先生方から

「公倍数コースで〜〜と言いますブロックがありますが、この時グラミンがほんとにしゃべったら絶対おもしろいですよね!子どもたちも喜ぶと思います!」

という声をいただいたり、実際の子どもたちからも

「グラミンにしゃべってほしい!」

という感想をもらったことが、一番のきっかけです。

開発チームとしても、「〇〇と言います」の「〇〇」を、グラミンの吹き出しに表示するだけでなく、「〇〇」を実際に喋ってくれるようになれば、プログルを使ったプログラミング学習が、もっと面白くなりそうだなと思い、この機能を開発するに至りました。


用いた技術

音声を再生する方法はいくつかありますが、今回は、Web Speech API の構成要素の一つである、 SpeechSynthesis を用いました。

developer.mozilla.org

SpeechSynthesis とは、音声合成機能を利用するためのインターフェースです。
SpeechSynthesisUtterance インターフェースに読み上げてほしい文字列を渡すことでできたインスタンスを、SpeechSynthesis の speak メソッド の引数に渡してあげることで、
ブラウザはその文字列を読み上げてくれます。

例として、以下のようなコードを挙げます。
以下の2行を実行することで、ブラウザは「あいうえお」と読み上げてくれます。
ブラウザのコンソールを開いて、そこに以下の2行を打ち込んでみると、(IE以外の)ブラウザは「あいうえお」と読み上げてくれると思います。

const utterance = new SpeechSynthesisUtterance("あいうえお");
speechSynthesis.speak(utterance)

プログルでは、「〇〇と言います」の「〇〇」を SpeechSynthesis に渡してやることで、この音声読み上げ機能を実装しました。


Chrome限定とした理由

まず、Web Speech API の SpeechSynthesis はIE未対応であるようです。

f:id:hanawasakuyon:20200618160003p:plain
Web Speech API の SpeechSynthesis は IE未対応

また、音声読み上げ機能をONにして、SafariやEdgeで動作を検証してみたところ、 プログルでのブロックプログラミングの処理が時々止まってしまうという不具合が発生してしまいました。

現在、Web Speech API実験的な機能であるということなので、 この不具合に起因するものがプログルのプログラムなのか、Web Speech APIの仕様なのか、調べきれてはいないのですが、まずはリリースを優先して、不具合が確認されなかったChromeのみの機能とすることにしました。

Chrome以外のブラウザではそもそも音声ボタンが表示されないようになっています。


開発を振り返って

プログルに音声読み上げ機能が追加されたということで、この機能を楽しんでくださる方々がいらっしゃればとても嬉しいなと思います。

また、自分はこの開発をする前は主にバックエンドの開発をしており、フロントエンドの開発は実務であまりしたことがなかったのですが、
この開発を経て、実務でのフロントエンド開発に慣れてき始めた感じがあり、良い機会だったなと思います。


We Are Hiring!

特定非営利活動法人みんなのコードでは一緒に働く仲間を募集しています

最後に、みんなのコードでは、一緒にプログラミング教材「プログル」を開発してくれる方を募集しています。この記事を読んで興味を持っていただいた方、ぜひお気軽にご応募ください🙂

www.wantedly.com