GTUG Girls Meetup #19 「Web Audio APIを使ってみよう」 でハンズオンをしてきました。お題はWeb Audioです。ハンズオンということで、ハッカソンで初心者の方にやってもらっているチュートリアルをそのまま使おうと思ったのですが、せっかくだからもっと楽しくやれるようにできないか？と思ったのと聞いてくださるのが全員 Girls なのでいろいろ考えました。
考えた結果 「もうちょっと使いやすく」 という方向で進むことにして、見た目をキレイにしてみました。そして、できたのがこちら。
内容は全く同じなんだけどガワをつけたら、よりそれっぽくなりました。機能的には、「メニューを選ぶとサンプルアプリを起動」、右上メニューの緑のボタンは「アプリのリロード」、青の鉛筆ボタンは「虫食いコード表示」、赤目玉ボタンは「完成したコード表示」という形にしました。また、アプリを表示すると左上に github のコードページへのリンクも表示するようにしています。(技術不足のためPrettyPrintでインデントを上手に表現できなかった為。。。)
そしてWeb Audioの開発はWebサーバが動いていたほうが何かと便利だったりします。例えば音声ファイルの再生だったり、getUserMedia()でのマイク・カメラの利用には必須だったりしますが、誰しもが短時間で作れるわけではないので Chrome Dev Editor が俄然便利です。Chroem Apps（つまりChrome上で動作）であって、Webサーバもお手軽に立てられて、 github からもボタン1つで clone することが可能です。ハンズオンが終わってから @toyoshim さんに教えてもらって気がつきました。。。次に機会があるときは最初から Chrome Dev Editor を使うことにします。
ということで結論、手っ取り早くWeb Audioを試したい方は Chrome をインストールして Chrome Dev Editor を Chromeにインストール。そして https://github.com/ryoyakawai/gtuggirls-webaudio.git を Clone しましょう！