HTML5でteratailが喋った！

第四回 集まっtail LT:5分

HTML5のWeb Speech API(Speech Synthesis API)でteratailのQAやタグをブラウザに喋らせてみました。
QAやタグの取得はteratail APIを使用しています。

http://tech-style.info/lab/web-speech-api/

※スライドの動作デモ用に表示しているURLは変更される可能性があります。また、対応ブラウザが少ないため正しく動作しない場合があります。

Transcript

1. HTML5でteratailが喋った！ 泰昌平 @ShoheiTai
2. 自己紹介 泰昌平 スパイスファクトリー株式会社 メディアインテグレーション事業部 事業部長 ・平成生まれ ・ペチパー。CakePHP、Phalconなど ・フロントエンドの開発、最適化が好き ・趣味はダーツ（ハード・ソフト）とバイク
3. スパイスファクトリーという会社を始めました
4. 今日お話したいこと teratail API + HTML5
5. teratail API
6. teratail API • 昨年リリースされたAPI • 質問やタグ、ユーザ情報を取得できる • アクセストークン発行で1時間に300リクエスト • これでツールを作ればエンジニア生活が捗る！
7. teratail APIの活用
8. teratail APIを試してみる
9. ユーザがteratailに もっと親しみやすくなるもの を作ろう
10. 喋ると親しみやすい？ • Microsoftのcortana • AppleのSiri • SoftbankのPepper
11. Speech Synthesis API • Web Speech APIの一つ • 音声認識や、文字の読み上げを行ってくれる • 簡単なjavascriptの実装で利用可能
12. Speech Synthesis API var voices = speechSynthesis.getVoices(); var speech = new SpeechSynthesisUtterance(); speech.voice = voices[11]; // Google 日本語（環境依存） speech.volume = 1; // 声量 speech.rate = 1.1; // 早さ speech.pitch = 1; // 声の高さ speech.lang = 'ja-JP'; // 言語 speech.text = 'ハローワールド'; // 喋る内容 speechSynthesis.speak(speech);
13. Speech Synthesis API • 長い文字列になると最後まで読めない？ ◦ 正規表現で文を取り出して対応。 • speechSynthesis.getVoices()が取れない？ ◦ 非同期？タイミングをずらしても何故か初回だけ取れない。 ◦ speechSynthesis.onvoiceschangedで対応。
14. teratail × Speech API タグと質問を喋らせてみた。 http://tech-style.info/lab/web-speech-api/
15. 最後に • Web Speech APIで音声入力も可能なので 質問検索を音声入力でできたら面白そう！ • 質問を聞いたら音声で返してくれる、 teratailアシスタントが作れるかも？
16. ご清聴ありがとうございました
17. Credits Special thanks to all the people who made and released these awesome resources for free: ✘ Presentation template by SlidesCarnival ✘ Photographs by Unsplash