WebAudio-Controls

HTML5な活動

● HTML5Experts.jp #55● Web Music Developers JP 管理人

Ryoya Kawai

google.com/+RyoyaKawai@ryoyakawai

得意技

● Web Audio/MIDI API● Polymer (Web Components)● Web Bluetooth はじめました

みでゃっぴー by @g200kg

(W3C Unofficial Web MIDI API Mascot)

本日のコードはこちら：

https://goo.gl/MEEcrS

男の子ならワクワクする

つまんで、回せる丸いヤツ！！

スライドさせるヤツ！！

ツマミってカッコイイ！　

ノブは不可欠！

実装に時間が必要。

ノブ部

by @aike1000さん

http://knob.hatenablog.com/

稀に困るんです。

▶ 動作、デザイン

いろいろ崩れる。

崩れる原因：スコープがない

Web Components

○ 構成要素技術

■ Custom Elements■ HTML Imports■ Template■ Shadow DOM

HTML, CSS, JavaScriptをセットでスコープ化し、独自のHTMLタグにカプセル化する技術の総称

PolymerWeb Componentsの煩雑な部分をいい感じにラップして、更に強力な機能を提供してくれる。

WebAudio-Controls5分以内にノブ、スライダ、スイッチ、鍵盤を実装が可能なPolymerのElement

またまた、ご冗談を...

ということで Live Codingします。

https://github.com/WebMusicDevelopersJP/webaudio-controls

独自のノブ画像を作りたい場合：

WebKnobManhttp://www.g200kg.com/en/webknobman/

ご清聴ありがとうございました！