Tender Surrender


On January 18th 2014, Google cooperated with a community Web Music Developers JP and held the second Web Music Hackathon at Google Tokyo office.
MIDIappy designed by g200kg
This hackathon is aimed to hack:
and build something within a day.

The first hackathon was a blast with quite a few fantastic apps built. Read details on this blog article (in Japanese).

This hackthon again, was with cooperation from AMEI (Association of Musical Electronics Industry), YAMAHA, Korg, Roland and Crimson Technology brought instruments to hack on, as well as NTT Communications brought equipments to make WebRTC environment easier.

The demo Mr. Watanabe from Roland shows off at the beginning of the event represented the potential of this area quite well.

It turned out we had 30+ attendees with many observers from each instrument manufactures etc, 60+ people packed in the venue.

The demos

Hack started before noon, finished around half past 4 PM then we moved to the demo time. More than 20 fantastic works were done. There's a video recording available online. You can watch it along with other photos and comments at Google+ event.

I've picked up several notable presentations here since the video is very long lasting nearly 3 hours. Each photos are linked to relevant starting time of the video.

A browser keyboard utilizing @mohayonao's CoffeeCollider. Your code in the form is recognized in realtime.

Let browser sing with eVY1 which has YAMAHA's new sound module NSX1 on it. You can find the app here (requires eVY1)

Leave 2 second message associated with your Twitter account at My-hi.net. You can listen to others' voice by hovering cursor over Twitter icons.

Tins as MIDI instruments.

"MIDIappy" is a mascot character designed by gaito a.k.a g200kg. He made it dance as a 3D modeled figure on WebGL and controllable using a MIDI controller.

The most flashy demo at this hackathon was this one. Multiple demos together including a Leap Motion controllable mirror ball via DMX, a visual effects demo using WebRTC, WebGL with music analysis + MIDI controller, etc.

This one got the second prize. The presenter played music using gesture over Leap Motion and visualized the sound to touch pads on Ableton Push. Check out his fancy gesture.

The winner of the hackathon was a music sequencer using Google Spreadsheet + Chrome Extension. It's amazing to see how effective to use spreadsheet as a sequencer platform. Note that the referencing feature of spreadsheet is used to represent chords.


Actually, half of attendees at this hackathon had attended the last one as well. I can tell because it was so much fun! Unfortunately I missed the after party but this one was also a great event.
I'm hoping we can continue holding this event and gradually shift our focus on something more musical rather than sound oriented.

If you are interested in this event, please subscribe to our mailing list or join Google+ community. Ryoya Kawai who is the main organizer of this event will give you updates.

We're looking forward to your attendance.

Read on...

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


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

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

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

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

Read on...