前回と今回は、「Hello World」プログラムを通じて、コーディング作業における実践的なノウハウを解説しています。
1. Hello Worldを作ってみよう！
2. 時間に応じて、挨拶を変えてみよう
3. 挨拶をしゃべってもらおう（WebSpeechAPIを利用してみよう）
4. 作成済みのUI部品を適用してみよう（再利用のための部品化を検討してみよう）
1と2が前回、3と4が今回です。
3. 挨拶をしゃべってもらおう（WebSpeechAPIの利用）
動画の再生や、音声出力など、多彩な表現も、HTML5の魅力の一つです。「WebSpeechAPI」を利用すると指定した文字列を読み上げることができます。ただし、iOSは7以降、Androidはバージョンによっては非対応です。 先ほどの例に、挨拶を読み上げるボタンを追加してみましょう。
図1●挨拶をしゃべってもらおう（WebSpeechAPIの利用）
3-1. 最初の実装
HTMLに読み上げ機能を呼び出すボタンを設置します（図2）。また、実際に読み上げを行う関数は別ファイルに記述し、HTMLから読み込みます（speak.js、図3）。 読み上げ処理を呼び出す際は、音声のスピードや音量、ピッチなどを指定できます。ここで定義した関数は名前空間（itpro.sample.util）を指定して公開します。
図2●コード例：WebSpeechAPI利用版（index.html）
[画像のクリックで拡大表示]
図3●コード例：WebSpeechAPI利用版（speak.js）
[画像のクリックで拡大表示]
