なぜ Web Components はウェブ開発に革命を起こすのか

ウェブアプリケーションのフロントエンドに関わる方なら、もう Web Components という言葉を全く聴いたことがない方は少ないのではないでしょか。
すでに関連記事も数多く出回っており、実際に触り始めている方も多いと思います。しかし、なぜこれが革命的技術なのか、周囲の人に簡潔に説明できる方はどれくらいいるでしょうか？この記事では、それを試みていきたいと思います。

デジタル部品の流通革命

ソフトウェア部品の流通に今、大きな変化が起きてきています。

数年前のオープンソース環境を覚えているでしょうか？レポジトリは集中管理型の subversion、リリースは zip、テストは手動。Issue の登録もプロジェクトごとにことなるバグ管理システムが使われていたため、とっつきづらかったでしょうし、パッチを送るのも面倒でした。

そんなオープンソースを取り巻く環境が、git や GitHub の登場を皮切りに、目覚ましく発展しています。ネットワークレポジトリの環境が整い、CI (Continuous Integration) によるテストやデプロイの自動化、必要な時に最新のソースコードを手軽にダウンロードできるパッケージマネージャーの充実など、すべてが楽に、しかもスピードを早めてきています。ソフトウェア部品の開発から再利用までのサイクルが分単位まで短縮されることで、コミュニティを介したフィードバックやコントリビュート (Patch / Pull Request) も活性化し、品質を高めていくための仕組みも今までになく効率化しています。オープンソースは、ついに真のエコシステムを手に入れつつあると入っても過言ではないでしょう。

この動きは、フロントエンド開発においても大いに役立てられています。特に grunt, npm, bower 等との組み合わせは、だいぶ浸透してきたのではないでしょうか？

UI コンポーネントのエコシステム

これまでに最も大きな成功を収めたフロントエンド向けソフトウェアに jQuery があります。DOM 操作だけでなく、簡単に複雑な UI を実現できる jQuery UI のようなプラグインを活用している開発者の方は多いと思います。カレンダーのUI (Datepicker) や、タブインターフェース、ダイアログといった、素の HTML が苦手とするユーザーインターフェースを実装する敷居を大きく下げてくれたのも、jQuery UI でした。

もちろん、その対抗馬となる UI ライブラリもたくさん登場しています。Kendo UI, ExtJS, Dojo, Bootstrap など、数え上げればキリがありません。しかしひとつ言えるのは、それぞれに独自の思想や作法があるということです。そのため、実際に使うには、API よりも、まずは思想と作法を学ぶところからスタートしなければなりません。
また、選択肢が多いということは、人それぞれに得意なライブラリや好みが別れてしまうため、プロジェクトでひとつを選択する必要に迫られた場合、誰かが妥協したり、新たな学習コストがかかってしまうことも、忘れてはいけません。

Web Components

それでは、UI ライブラリが同じ思想、作法で使えるようになるとしたらどうでしょうか？別に言い方をするなら、「UI コンポーネントの思想と作法が標準化されるとしたら」。

その答えが、 Web Components です。Web Components には以下のような特徴があります。

• ウェブ標準になる予定
• 既存の HTML / CSS / JavaScript の知識の延長で使える
• UI コンポーネントを HTML タグとして作ることができる
• コンポーネントはカプセル化されるため、外部を汚染しない
• 再利用が可能
• 分業がしやすい

理屈で説明されるより、実際に動くものを見たほうが話は早いでしょう。簡単な例をご紹介します。

画像をクリックすると実際に動作するデモを見ることができます。このデモのソースコードはこちら。
この見た目にかっこいいノブ類ですが、Web Components (Polymer) で作られています。
ドラッグして上下に動かすことで、パラメータを増減。Shift キーを押しながらドラッグすれば、1 ずつ動かすことができます。そして、変更したパラメータは value に設定されます。

<webaudio-knob diameter="64" max="100" sprites="100" src="img/LittlePhatty.png" step="1" style="left: 128px; position: absolute; top: 76px;" tooltip="Knob2 tooltip" value="50"></webaudio-knob>

何よりも、ソースを見てみると、これらの要素には、<webaudio-knob> というタグが使われていることに気付くと思います。ノブの見た目や値の範囲は、ネイティブな HTML 要素のお作法に則り、属性を使って変更することができます。

注目していただきたいのは、head タグ内にある

<link href="webcomponents/webaudio-controls.html" rel="import"></link>

の部分です。この一行が、<webaudio-knob> の利用を可能にしています (実際には Polyfill の platform.js も読み込んでいます)。JavaScript 一切なしで、HTML タグだけでこれが実現できるとしたら、お手軽だと思いませんか？

Web Components が主流になれば、ユーザーは UI コンポーネントを、思想や作法を気にせず、ネイティブの DOM 要素と同様に扱うことができるのです。

もう少し具体例が見たい

分かりやすい一例としては、Twitter Button なんていかがでしょうか？<twitter-button></twitter-button> として、必要な情報は属性として与えれば、Twitter ボタンを表示することができます。Twitter ボタンを実装したことがある方であれば、これがいかに楽な作業かわかると思います。

また、customelements.io というサイトでは、これも含めて、公開されている Web Components でできた UI コンポーネントを探すことができます。

うってつけのビデオもあります。先日 Google で開催された All About Polymer というイベントで Rob Dodson が Google Map を使ったアプリのライブコーディングを披露しました。ほとんどタグを追加するだけで派手なアプリが作り上げられていく様は圧巻です。ちなみに英語ですが字幕付きですので、英語の勉強も兼ねて、ぜひ見てみて下さい。

Web Components の構成要素

少し技術的な解説をします。Web Components は、大きく 4 つのテクノロジーで構成されています。

• Custom Elements
• HTML Imports
• Template
• Shadow DOM

各テクノロジーについて、簡単に説明してみましょう。

Custom Elements

独自タグをブラウザに認識させます。
このタグはプロパティやメソッド、イベントを持つことができるため、ネイティブな DOM 要素と同様な使い勝手を実現することができます。
上記 <webaudio-knob></webaudio-knob> の例で言えば

var knob = document.querySelectorAll('webaudio-knob')[0];
knob.setValue(100);

とすることで、JavaScript から 命令的 (declarative - 宣言的 の反対である imperative 的) に、value を変更することができます。

knob.value = 100;

とすることもできます。

実は Custom Elements は GitHub で既に使われてたりします。

DevTools で見てみると

• time タグを拡張 (is="relative-time") して、タグ中に表示される時間を相対的にしている
• title-format 属性を使って、ツールチップ表示の日時にフォーマットを指定している

なんて使い方をしているようです。

未対応ブラウザ向けには、Polymer の Custom Elements の Polyfill も使っているようです。なんか見てたらホレボレしてきました。

Template

標準のテンプレート機能を提供します。
template のコンセプトは長らく検討されてきました。最近では Handlebar.js や Backbone.js (Underscore), AngularJS のテンプレートが人気ですが、それのウェブ標準版と思って下さい。既存のハックと比べると

• どこに置いても template 内は DOM と認識されないので、それだけでは中の script を実行したり、画像を取りに行ったりといったことが起きない
• 取り込む際は文字列ではなく DOM として認識できるので、扱いやすい

など、できそうでできなかった機能が提供されています。なお、プレースホルダーやバインディングの機能はこれ自体提供していない点に注意してください。

HTML Imports

ひとつのタグで複数のリソースを読み込むことができます。
jQuery UI にしろ Bootstrap にしろ、JavaScript、CSS などを、それぞれ別々に取り込む必要がありました。import タグを使えば、これひとつで UI コンポーネントと、それに必要なリソースを取り込むことができるようになります。

Shadow DOM

カプセル化した HTML 要素を追加できます。
パッと見の効果は、見えないマークアップを追加できることですが、もっと大きな役割はカプセル化できることです。UI ライブラリでありがちな落とし穴は

• 同じクラス名を使って意図しない要素にスタイルが当てられてしまう
• 別の要素に当てたスタイルが意図しない箇所に影響を与えてしまう

ですが、Shadow DOM は外の世界と中の世界を分断することで、カプセル化を可能にします。

ブラウザベンダーのスタンス

標準化を目指していると言いましたが、ブラウザベンダーの足並みが揃わなければ標準化することはできません。しかし、各ブラウザベンダーは、いずれも Web Components に注目し、実装と仕様策定を同時並行で進めています。

Google

Google は Web Components で最も大きな役割を担っています。仕様作成者はいずれも Google エンジニアで、Google Chrome では既にほとんどの機能を実装しており、バージョン 36 では HTML Imports も取り込まれ、すべての機能が about:flags のフラグ無しで動く状態になる見込みです。
また、まだアルファ版ではありますが、Web Components をベースにした Polymer というフレームワークを開発しており、完成すれば、その上で様々なコンポーネントを動かせるよう準備を進めています。同時に、Polymer の開発に当たり、Web Components 未対応ブラウザでの動作が行えるよう platform.js という Polyfill (JavaScript で機能をエミュレートするライブラリ) の開発も進められています。

Mozilla

Google の次に積極的に Web Components に取り組んでいるのは、間違いなく Mozilla です。x-tag というフレームワークを開発しており、UI コンポーネント集 Brick も公開されています。

Apple

Blink が WebKit から fork された時点で Shadow DOM が削除されるなど、一時は Web Components への対応に否定的と見られましたが、先日別ブランチ上で開発を進めることが発表され、様子を伺いつつも興味を示しています。

Microsoft

Microsoft の Web Components 対応は、status.modern.ie を見る限り、いずれの機能も Under Consideration の状態ですが、HTML Templates の仕様に関わるなど、興味を示しています。

ユースケース

どのような場面で Web Components を使うことができるでしょうか？いくつか例を挙げてみます。

プロダクト専用の UI コンポーネントを作る

サービスを開発するに当たり、UI のコンポーネント化を想定して設計します。そうすることで、UI コンポーネントを作るチームは、その機能に集中することができますし、使うチームは、想定通りにインターフェースが使える前提で開発を進めることができます。分業が楽になるのも Web Components の利点のひとつです。

複数サービスで共有の UI コンポーネントを作る

ポータルサイトや、複数のサービスが統合されたサイトを運営している企業の場合、テーマや UI を統一したいケースが多いと思います。それこそ Web Components が威力を発揮するチャンスです。共通サーバーから CSS や画像を配信するインフラは既に整っているところが多いでしょうから、それを Web Components のものに差し替えることで実現できるでしょう。

公開されている UI コンポーネントを使う

ちょっとしたサービスを個人で作りたい場合、開発者がデザインまで手がけるのはなかなか大変です。Bootstrap のように、お手軽にできあいのデザインで UI が組めるのはありがたいですが、Web Components を使えば、もう少し複雑なことも比較的簡単に実現できます。公開されている Web Components のライブラリを customelements.io などで探し、再利用することで、開発の工数を大幅に減らすことができるようになるでしょう。まだまだ数は少ないですが、Web Components が広まれば、むしろ自分が必要なものを探す方が大変になるかもしれません。

どこで学べばいいのか

ここまで読んで、ぜひ Web Components を使いたい！と思った方は、どこで使い方を学べばいいのでしょう？仕様を読んで下さい…というと大変ですよね。仕様は仕様なので、使い方が書いてあるわけではありません。幸いなことに、HTML5Rocks にはすでにたくさんの記事が上がっています。これらの記事はメンテされていますので、最新の仕様 (実装) に則っていると思って大丈夫です。

でも HTML5Rocks の記事は英語だから読むのが大変・・・そんな方のために、日本語訳しておきました。

• Custom Elements - HTML に新しい要素を定義する
• HTML で利用可能になった Template タグ - クライアントサイドのテンプレートの標準化
• HTML Imports - ウェブのための #include
• Shadow DOM 101
• Shadow DOM 201 - CSS とスタイリング
• Shadow DOM 301 - 上級者向けコンセプトと DOM API

その他日本語資料

• Web開発者に革命をもたらす！「Web Components」超入門
  検索で一番にヒットする LIG の王さんの記事ですが、残念ながらこの時からだいぶ仕様が変わってしまっています。とはいえ大枠を把握するにはとてもよい資料だと思いますので、ぜひ目を通すとよいと思います。
• Web Componentsで行うHTMLのコンポーネント化
  サイバーエージェントの @1000ch の記事です。最近の記事ですので、仕様的にも新しいものに対応しており、安心して読めると思います。
• Web をまともにしたいので Shadow DOM と Web Components をつくってます
  Google Japan のエンジニアかつ、Shadow DOM 仕様のエディタであり、Blink 上での Shadow DOM の実装をリードしている Hayato Ito が昨年の HTML5 Conference で行った講演のビデオです。
• Polymer と Web Components
  Web Components 関連の Google エンジニアによる 2013 年の記事。Web Components はもちろんですが、Polymer のコンセプトなどについても書かれています。

質問はどこに？

日本語なら、html5j のメーリングリストで聞けば、誰かしら答えてくれると思います。英語であれば、StackOverflow で polymer タグを使うと良いと思います。

まとめ

僕なら、誰かに Web Components は何がそんなに素晴らしいのか？と聞かれたら、こう答えます：

Web Components はウェブの UI コンポーネントを標準化し、エコシステムに乗ることで、開発効率を飛躍的に向上する技術 だからであると。

みなさんが素敵な UI コンポーネントを公開してくださるのを楽しみにしています。

HTML を Markdown としてペーストできる MarkdownPastr

Test を書く練習ついでにバージョンアップしたのでご紹介。クリップボードにコピーしたリッチテキストを Markdown としてペーストできる Chrome Extension: MarkdownPastr の新バージョンを公開しました。

開発者の方ならご存知とは思いますが、Markdown は最近人気のある Wiki 的記法です。GitHub での採用で、爆発的に人気が出ました。プレインテキストとして見てもそれなりに把握しやすいということも、普及の理由のひとつと思われます。最近では Jekyll などを使ってブログを Markdown で書く人も出てきました。

そんな Markdown ですが、個人的に Google Docs で書いたテーブルを含む文章を Markdown 化したいケースが結構あり、そんな時に不便な思いをしていました。そこで作ったのが MarkdownPastr です。使い方は単純で、Markdown 化したい HTML をウェブページ上でコピー、textarea にペーストで貼り付けるだけ。

これが

こうなります。

Google Docs の場合、Courier New フォントで記述した部分が code として認識されます。また、行が丸々 Courier New フォントの場合はコードブロックとして認識されます。

Markdown ではなくシンプルテキストでペーストしたい場合は、Shift キーを押しながらペーストすれば OK。ウェブページ上で textarea にペーストをしない限りプロセスは止まってますので、余計なリソースを食わないところもポイントです (新しい Chrome Extension ではこれが推奨される動作です)。

ちなみに、個人的におすすめの Markdown 記述環境は

• wri.pe (by @masuidrive)
• Gists
• Online Markdown Editor
• Gitter

辺りです。

コードは GitHub で公開しています。一般的なフィードバックはこちらへどうぞ。

ぜひお試し下さい。

jsdocをbootstrapできれいに生成する

検索してもあまり日本語の情報が出てこなかったのでメモを残しておきます。

JSDoc

JSDoc は言うまでもないですが、JavaScript のソースコードに残したコメントから自動的にリファレンスドキュメントを生成してくれるコマンドラインツール。例えばこんな感じでソースにコメントを書いておくと

/**
 * Resolve url from `srcset` syntax http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/
 * @param  {string}           src    Default URL
 * @param  {string}           srcset `srcset` argument
 * @param  {number|undefined} dpr    Device pixel ratio
 * @param  {number|undefined} width  Viewport width
 * @return {string} Parsed and resolved URL
 * @private
 */
var resolveSrcset = function(src, srcset, dpr, width) {
  if (srcset === null) return src;
  ...
};

下記のような HTML を出力してくれます。

便利ですね。

Grunt

詳しくは公式ドキュメントを参考にして頂ければと思いますが、今時は Grunt を使って、これを自分のワークフローに手軽に組み込むことができます。例えば僕は Grunt でこんなことをしています。

• Bower で読み込んだソースコードを任意のパスに配置する (grunt-bower-task)
• 簡易サーバーを立ち上げる (grunt-contrib-connect)
• ソースコードを保存すると (grunt-contrib-watch)
• JS ファイルが複数ある場合は連結する (grunt-contrib-concat)
• 容量を圧縮する (grunt-contrib-uglify)
• ブラウザで開いているページを更新 (ライブリロード) する (grunt-contrib-watch)

ここに「JSDoc でリファレンスドキュメントを生成する (grunt-jsdoc)」も追加することができます。

この grunt-jsdoc ですが、見ての通り、そのまま出力してしまうと、かなりプレーンで寂しい感じになってしまうわけですが、ひと工夫加えると、下記のように素敵なデザインにすることができます。

docstrap

実は grunt-jsdoc には docstrap というものが dependency として含まれているのですが、これを使うことで、見た目を簡単に bootstrap を使ったコジャレたものにすることができるのです。デザインは bootswatch.com で提供されているものから選べます。

で、その使い方なのですが、ドキュメントも分かりづらいし検索してもあまり情報がなかったのでここに残しておきます。

まずは Gruntfile.js の記述ですが

    jsdoc: {
      dist: {
        src: ['src/*.js', 'README.md'], // JSDoc化したいソースコードへのパス
        options: {
          destination: 'doc', // 出力先パス
          configure: 'jsdoc-config.json' // docstrapの設定ファイル
        }
      }
    }
    ...
    grunt.loadNpmTasks('grunt-jsdoc');

こんな感じにします (Grunt の作法が分からない方は、まずはその辺りを先に修得する必要があります) 。ポイントは configure: 'jsdoc-config.json' の部分で、別のファイルに詳細を記述する必要があります。これは grunt-jsdoc の設定自体は Gruntfile.js に記述できるのですが、docstrap の設定は別ファイルにせざるを得ないためです。

ここでは、jsdoc-config.json というファイルを指定しているので、そういう名前のファイルを作りましょう。中身はこんな感じ。

{
  "plugins": [
    "plugins/markdown" // Markdownプラグインを入れるとコメントがMarkdownで書けます！
  ],
  "templates" : {
    "cleverLinks"     : false,
    "monospaceLinks"  : false,
    "default"         : {
      "outputSourceFiles" : true
    },
    "systemName"      : "PortableCache",
    "footer"          : "",
    "copyright"       : "Developed by Eiji Kitamura",
    "navType"         : "vertical",
    "theme"           : "united", // bootswatch.comのデザイン名を小文字で指定
    "linenums"        : true,
    "collapseSymbols" : false,
    "inverseNav"      : true
  },
  "markdown"  : {
    "parser"   : "gfm",
    "hardwrap" : true
  },
  "opts": {
    // ここがポイント
    "template": "node_modules/grunt-jsdoc/node_modules/ink-docstrap/template"
  }
}

ポイントは opts.template の部分で、これをそのまま記述する必要があります。そして、templates.theme に bootswatch.com で気に入ったデザインの名前を小文字で入力。後はタスクを走らせれば OK。のはず。

おまけ

実は JSDoc は README.md などの markdown で書かれたファイルをトップページに組み込むことができます。使い方は、上記の通り変換するソースの一覧に加えるだけ。
また、これも JSDoc 自体が持つ機能ですが、プラグインで markdown を入れておくとコメントにも markdown 記法が使えて大変便利です。

Web Music Hackathon #2 Report

日本語版はこちら

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:

• Web Audio API: API for audio synthesis
• Web MIDI API: Lets you control MIDI
• WebRTC: Transfer audio, video or data over P2P
• Web Speech API: Voice recognition API

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.

Conlusion

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.

Web Music ハッカソン #2 を開催しました

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 さんが、この分野の最新情報も含めて提供してくれることと思います。

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

ウェブはどこまで楽器と融合できるか？ 〜 Web Music ハッカソンを開催しました

去る 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+ イベントページにまとまっています。見れないビデオなどあったらこちらでどうぞ。