HTML5xChromeなら音声認識を10分でつくれる

　HTML5を使って何かできないかと考えて、まずはゲームを作ったところ、私の作るゲームのつまらなさに絶望したので、もう少し実用的なものとして音声認識を扱ってみることにした。
　Androidアプリ「虚無ログ」から始まって、どんだけ音声認識が好きなんだと思われるかもしれないが、
　私が音声認識を好きな理由は、スマートフォンのように入力性が貧弱な端末なら実用的になるのも理由だが、本当は何よりも未来的な気分に浸れるからである（おぃ

　本題に入ろう。
　Chromeブラウザ限定だが、HTML5の音声認識は少し調べただけであっさり実現できて、音声でYahooやWikipediaの検索をできるようになった。
　この辺を見て10分くらいでつくれた。

　しかし、インラインフレームにGoogleの検索結果が表示できない。
　どうも無理なようだ。
　理由としてX-FRAME-OPTIONなる設定が云々と怒られており、クリックジャッキングという詐欺を防ぐために他のドメインからHTMLに埋め込まれることを拒否する設定がGoogle検索のWebのヘッダに書かれている。
　残念だが、安心には代えられないようだ。仕様がないので、Googleだけはサブウィンドウとして新しいタブで開くことにする。UIがチグハグなのはジョークアプリということで勘弁。

【参考】サブウインドウを開く

　なお、下記はそのサンプルソースである。
　適当なファイル名をつけてから拡張子を".html"、文字コードをUTF8で保存すれば、Chrome限定の音声認識アプリの出来上がりである。

HTMLの構文がおかしいとか、コーディングがへぼいという苦情は一切受けません（おぃ

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Speech </title>
  <script>
    function speechInput() {
      var text = document.getElementById("textPart").value;
      if("yahoo" == document.getElementById("mode").value){
        document.getElementById("browserPart").src = "http://search.yahoo.co.jp/search?p=" + text;
      }else if("wikipedia" == document.getElementById("mode").value){
        document.getElementById("browserPart").src = "http://ja.wikipedia.org/wiki/" + text;
      }else if("google" == document.getElementById("mode").value){
        window.open("http://www.google.co.jp/search?q=" + text);
      }
    }
    function onClick() {
      var text = document.getElementById("textPart").value;
      if("yahoo" == document.getElementById("mode").value){
        document.getElementById("browserPart").src = "http://search.yahoo.co.jp/search?p=" + text;
      }else if("wikipedia" == document.getElementById("mode").value){
        document.getElementById("browserPart").src = "http://ja.wikipedia.org/wiki/" + text;
      }else if("google" == document.getElementById("mode").value){
        window.open("http://www.google.co.jp/search?q=" + text);
      }
    }
  </script>
</head>
<body>
<header>
  <select id="mode">
    <option value ="yahoo">Yahoo!</option>
    <option value ="wikipedia">Wikipedia</option>
    <option value ="google">Google</option>
  </select>
  <div style="text-align:center">
    <input type="text" id="textPart" x-webkit-speech lang="ja" style="font-size:24px" onwebkitspeechchange="speechInput();" />
    <button onclick="onClick()">実行</button>
    <hr>
  </div>
</header>
<article>
  <iframe id="browserPart" src="http://www.yahoo.co.jp/" width="100%" height="570px"></iframe>
</article>
</body>
</html>

errand softのブログ

Androidのアプリ開発に関する記事を書いていきます。

HTML5xChromeなら音声認識を10分でつくれる