Tender Surrender

2014 年 1 月 18 日(土)、Web Music Developers JP と Google の共催で Web Music ハッカソン #2 を開催しました。
g200kg さんがデザインした Web MIDI API のゆるキャラ「みでゃっぴー」
近年のウェブ技術の発展の中で生まれたブラウザ上で利用できる各種 API:
  • Web Audio API:オーディオをシンセサイズできる API
  • Web MIDI API: MIDI を扱うことができる API
  • WebRTC: P2P でオーディオ、ビデオ、データをやりとりできる API
  • Web Speech API: 音声認識できる API
などを使って、丸一日で何か作り上げよう、という趣旨です。

前回は初回にも関わらず、素晴らしい作品がたくさん生まれました。その時の様子はこちらのブログポストからご覧頂くことができます。
ウェブはどこまで楽器と融合できるか? 〜 Web Music ハッカソンを開催しました

今回も AMEI(一般社団法人 音楽電子事業協会)の協力で ヤマハコルグローランドクリムゾンテクノロジー 各社から楽器を持ち寄って頂き、NTT コミュニケーションズ からも WebRTC の環境を用意して頂きました。

オープニングで披露された ローランドの渡邊さんのデモがこの分野のポテンシャルをよく表しています。ぜひご覧ください。


蓋を開けてみると、参加者数は前回を超える 30+ 名に加え、各メーカーからの見学者や取材(月刊 I/O)の方も多数集まり、会場である Google オフィス Hanabi は熱気に包まれました。







デモ

お昼前から始まったハッカソンは午後 4 時半で開発を終え、その後デモタイムに移りました。今回も発表されただけで 20 を超える素晴らしい作品が生まれました。デモの様子は動画で配信しましたので、他の写真なども含めこちらからアーカイブをご覧頂くことができます

とはいえこの動画、全部で約 2 時間 45 分あります。さすがに長過ぎますし、すべての作品を紹介するわけにはいかないので、個人的に印象に残った作品をいくつか (これでもかなり絞ってます) ピックアップして紹介していきます。(画像は動画のデモ開始位置にリンクしています)

@mohayonao さんの作られた CoffeeCollider のソースコードをリアルタイム演奏する楽器。作品はこちら by CCKB 制作委員会チーム

ヤマハの新音源 NSX1 を載せた eVY1 を使った初音ミクボイスの作品。オチが秀逸。作品はこちら (要 eVY1) by ひとりになっちゃったチーム

Twitter のアカウントで認証して 2 秒間の挨拶が残せるというサービス My-hi.net 。マウスオーバーで他の人の声を聞くことができます。 by aklaswad

缶を MIDI 楽器にしてしまった作品。 by こだま

今回のハッカソンでお披露目された g200kg こと gaito さんがデザインされた Web MIDI API のマスコットキャラクター「みでゃっぴー」の 3D モデルを WebGL 上で MIDI コントローラーで制御するというデモ。 by g200kg

今回一番派手だったデモがこちら。Leap Motion で制御するミラーボールや MIDI コントローラーと音楽に合わせて変化するビジュアライザを組み合わせた作品。 by 光の魔術師集団Xチーム

準優勝の作品。Leap Motion を使い、ジェスチャーで鳴らす楽器や音の大きさを調整するアプリです。アウトプットは Ableton Push のパッドを光らせることでビジュアライズ。動きが結構サマになってます。 by mtomasz

優勝作品はこちら。Google Spreadsheet をシーケンサーにして音楽を鳴らしてしまう Chrome Extension。表計算ソフトの参照機能を使うことでコードを表現できるところなどに注目。 by hirono

まとめ

今回実は半数くらいの方が二度目の参加でした。それだけ前回が楽しかったのだと思います。僕は残念ながら懇親会に参加できなかったのですが、おそらく今回もみなさん存分に楽しまれたのだと思います。
このハッカソンは今後も継続的にやって、徐々により音楽的な作品が作れる環境を整えられたらいいな、なんて話をしています。

次回以降の開催については、メーリングリスト か Google+ のコミュニティ にご参加頂ければ、前回・今回のイベントを中心となって企画してくれた Ryoya Kawai さんが、この分野の最新情報も含めて提供してくれることと思います。

みなさんの参加をお待ちしています。

Read on...

※この記事は 2012年5月2日に公開されたものを一部アップデートしたものです。

HTML5Rocks というサイトをご存知ですか?HTML5Rocks は、世界でも有数の HTML5 関連情報が集まったサイトで、チュートリアルやサンプル、スライド、動画などで構成されています。このサイトは Google の Chrome Developer Relations チームが中心になって作っているのですが、英語のみだったサイトが、2012 年 5 月に i18n ( internationalization = 国際化 ) を果たし 9 ヶ国語に対応、日本語のコンテンツも追加し始めました。

まだまだ量は多くありませんが、これまで英語を読むことに抵抗のあったディベロッパーの皆さんにも、まとまった情報源として利用して頂けるようになったのではないかと考えています。既に翻訳されている記事からいくつかご紹介しましょう。

JavaScript で File API を使用してファイルを読み取る

File / FileList / FileReader API を使用し、JavaScript でバイナリ ファイルの処理と読み取りを行うためのスタート ガイドです。

ネイティブ HTML5 ドラッグ&ドロップ

ドラッグ&ドロップも HTML5 の主要機能の 1 つです。この記事では、ネイティブ ドラッグ&ドロップ機能を追加してウェブ アプリケーションを強化する方法について説明します。

File System API について知る

File System API により、アプリケーションでは、ユーザーのローカル パソコン上の保護されサンドボックス化されたファイル システムに対してファイルやディレクトリの読み取り/書き込みを行うことができます。

Contribution 受付中!

この HTML5Rocks ですが、実はサイト自体がオープンソースで開発されているということをご存知でしたか?レポジトリは以下になります。

https://github.com/html5rocks/www.html5rocks.com

そして実は(ここからが本題なのですが) HTML5Rocks では記事の日本語訳を募集しています。多言語に翻訳されるドキュメントでは一般的に言われることですが、翻訳を常に最新の状態に保つのは、非常に難しいのが現実です。そこで HTML5Rocks では、オープンソースであるという利点を生かし、皆さんの翻訳を受け付けています。既に @kuuさん、@ukyoさん、@Layzieさん、@pikoteaさん、@iizukakさんといった方々から contribution 頂いていますが、新し目の記事に関してはまだまだ手が付けられていません。

少しでもご興味を持たれた方は、まずは Style Guide をお読み頂き、もし実際に翻訳をされた場合は、Pull Request を送って頂ければと思います。また、最近デザインが変わり、翻訳者のクレジットも入れられるようになりました。Style Guide の Translations の項を参考に、ご自分の名前を入れて下さい。

以前「他の人の翻訳とかぶってしまう可能性を考えると、翻訳していいものか迷ってしまう」という問い合わせがあったのですが、現在は github に移行しておりますので、翻訳を始めた段階で Issue を立てて頂ければ、Pull Request の受付はその順番を考慮させて頂きます。

何か質問などありましたら、Google+ や Twitter で気軽に話しかけて下さい。みなさんからの contribution をお待ちしております!

Read on...

去る 2013 年 10 月 19 日、Web Music ハッカソンというイベントを Google Japan オフィスで開催しました。これは @ryoyakawai ことヤマハの河合さん (ややこしい) を中心とした Web Music Developers JP という開発者コミュニティ主催のイベントで、初の試みです。

ブラウザは近年目覚ましい発展を遂げています。HTML5 というバズワードが非常に分かりやすくはありますが、現在は Chrome、Safari、Firefox といったブラウザで、オーディオを波形レベルから弄れる Web Audio API が利用可能になっています。


こちらは藍圭介さん (@aike1000) が作られたデモですが、各ツマミは実際に動かすことができ、本格的なアナログシンセサイザーとして音を鳴らすことができます。公開されてから 2 年以上経過していますが、まだ新鮮さは衰えません。

確かにすごい!・・・とはいえ、これだけだと何か足りないと思いませんか?
そう、どうせシンセ弄るなら、マウスやトラックパッドじゃなくて、フィジカルコントローラーだろうと。みんな考えることは同じだと思います。

そこで登場したのが、Web MIDI API というブラウザから直接 MIDI メッセージを送受信することができる API です。まだ標準化されていませんが、既に Chrome では flag 付きで実装されており、利用することができます。つまり、外部 MIDI 機器から Chrome 上のバーチャルシンセサイザーを実際に鳴らすことができるようになったのです。

ハッカソン開催


ここまで来れば、あとは盛り上げるだけ。まずはハッカソンだろうということで、今回は日本の MIDI 業界団体である AMEI に協力を仰ぎ、ヤマハ、KORG、クリムゾンテクノロジーの各社から楽器やスピーカーなどをご提供頂き、30名程度の参加者のみなさんと共に集まりました。

イベントの様子は主催の河合さんのブログに譲るとして、このイベントがいかに熱いものだったか、写真と動画を交えて紹介していきます。

このイベントのために用意された楽器の数々




製品化叶わず開発から 25 年の時を経て日の目を見た Dontata くん。MIDI メッセージに応じてドラムを叩きます。

マイオシロスコープを持ってきた方も。

勢い余って持ち込まれた半田ゴテ。

デモ

特に心に残った作品に絞っていくつか紹介。(画像をクリックでビデオの開始位置から見ることができます)

優勝はテノリオンと VJ を融合した作品。

こちらはちょっと意表をついた作品。マウスオーバーで効果音が鳴るブックマークレットです。

Dontata くんの勇姿。


他にもエレキ木魚ありーのテルミンありーの盛り沢山です。2 時間とちょっと長いですが、時間のあるときに飛ばし飛ばし見てみて下さい。


最後にチューターお二方のすごい作品。

@komasshu 先生はカメラに向かって口を開けるとスネアを鳴らしてくれます。

大御所 g200kg さんはホワイトボードにマグネットを置いて、自由にリズムシーケンスが組めるという作品。

今回のイベントは初回ということで、課題がたくさん残るだろうと予想していたのですが、正直楽し過ぎてびっくりしました。来年早々にも第二回を開催したいなんて話をしていますので、興味持たれた方はぜひ Web Music Developers JP に参加して下さい。忘年会とかもやるかも。

イベントの模様は Google+ イベントページにまとまっています。見れないビデオなどあったらこちらでどうぞ。

Read on...

canvas の DOM エレメント (コンテキストではない) から toBlob() を使う、というのが一番簡潔な回答です。が、これは Firefox には実装されているのですが、残念ながら Chrome にはまだ実装されていません。そこで下記の方法を使って png や jpeg など、任意の画像形式で Blob を作ることができます。

Read on...

知っている人は知っている方法だと思いますが、実際にやってみたのでメモ。
※ デモの画像はこちらからお借りしました。特にライセンスが記述されていなかったのですが、問題があれば差し替えます。





ライブラリは jsgif というのを使わせて頂きました。
手順はライブラリを読み込み、画像をひとコマ分ずつcanvasにロード、ライブラリに追加。終わったらバイナリからgifファイルを生成、という感じ。

もう少し詳しい解説は以下。
  1. LZWEncoder.js NeuQuant.js GIFEncoder.js を読み込む
  2. 適切なサイズの canvas を用意
  3. GIFEncoder からエンコーダを作る
    var encoder = new GIFEncoder();
  4. アニメーションの時間間隔などを encoder に設定
    encoder.setRepeat(0);
    encoder.setDelay(100);
    encoder.setSize(120, 120);
  5. 一コマずつ書き始める
    encoder.start();
    1. canvas に絵を書く
      canvas.drawImage(img);
    2. encoder に canvas のコンテキストを追加することで一コマを追加
      encoder.addFrame(ctx);
  6. 書き込み終了
    encoder.finish()
  7. encoder からバイナリを吐き出して、Blobを作る
    var bin = new Uint8Array(encoder.stream().bin);
    var blob = new Blob([bin.buffer], {type: ‘image/gif’});
  8. Blob から URL を作って表示 (revoke を忘れずに)
    var url = URL.createObjectURL(blob);
    var image = new Image();
    image.src = url;
    image.onload = function() {
     URL.revokeObjectURL(url);
    };
デモはこの辺に。

※ このデモは Firefox 推奨です。Chrome では img.onload で実際に画像が読み込まれない場合があるというバグのせいで、アニメーションが一部抜けたりしてしまいます。画像を読み込むのにAjaxを使うなどの回避方法はあるのですが、このデモでは可読性を優先して画像をsrcから読み込む方法を採りました。ただ、僕のコードにバグがある可能性もあるので、その場合はこっそり教えて下さい :)
こっそりじゃないけど Google+ で教えてもらいました。完全に僕の勘違いでした。お恥ずかしい・・・。


参考:

Read on...