teratail Meetup 集まっtailでのLTスライドです。 HTML5のWeb Speech API(Speech Synthesis API)でteratailのQAやタグをブラウザに喋らせてみました。 QAやタグの取得はteratail APIを使用しています。 ※スライドの動作デモ用に表示しているURLは変更される可能性があります。また、対応ブラウザが少ないため正しく動作しない場合があります。 teratail API https://teratail.com/api teratail API documentation http://docs.teratailv1.apiary.io/ Web Speech API https://developer.mozilla.org/ja/docs/Web/API/Web_Speech_API

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