Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5でteratailが喋った!

1,715 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

HTML5でteratailが喋った!

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

×