on:2013年9月13日sponsorsユーザーの声をトリガーにしてウェブページのさまざまなインタラクションを実行できるスクリプトを紹介します。マイクなどで「Hello!」と話すとメッセージを表示したり、ネコの画像をFlickrから呼び出したり、エレメントをアニメーションで表示することもできます。jQueryなど他のスクリプトは必要なく、しかも超軽量の2KB!いろいろな可能性が広がるスクリプトですね。-GitHubannyang!のデモannyang!の使い方annyang!のデモデモはChromeで、マイクがある環境でご覧ください。Recognitionに対応したブラウザとのことで、現状デスクトップではChromeだけのようです。音声でコントロールするので分かりにくいかもしれませんが、静止画のキャプチャでデモを紹介します。デモまずは一番簡単なデモから。"Hello!"マイクに「Hello!」と言うと対応したメッセージが表示されます。Annyang!と表示されます。今度はFlickrから指定した画像を取得します。kittens!」と言うとネコの画像をFlickrから取得します。任意の言葉でも対応しており、「Japan」と言ってみたら芸者さんの画像を取得してきましたw最後は、ページ下部からエレメントをアニメーションで表示します。report」とマイクに向かって言います。外部ファイル当スクリプトを外部ファイルとして記述します。jQueryなどの他のスクリプトは必要ありません。JavaScriptスクリプトの基本書式は、トリガーとなる言葉をコマンドとして指定し、実行するスクリプトを記述します。下記は、最後のデモのエレメントをアニメーションで表示するスクリプトです。annyang.start();}</script>Flickrのデモのように任意の言葉にはワイルドカードを使用してコマンドを取得し、スクリプトを実行します。