Upload
kawai-ryoya
View
600
Download
3
Embed Size (px)
DESCRIPTION
Web Componentsを使った、Web Audio、Web MIDIのコレボレーションツール、開発環境、Playground。
Citation preview
Web Music 開発環境
かわい りょうや
突然ですが、「自宅で手っ取り早くラーメン!」な気分のときどうしますか?
小麦粉買ってきて麺を作って、ガラ、とんこつ買ってきてスープ...
険し過ぎ.....(´・ω・`)これは考えないですよね。。。
思いつくのは、きっとこっち。
袋入り生ラーメン!
インスタントラーメン!
トッピングに、
もやし!ハム!たまご!
完 成 !
では、「自前で手っ取りWebMusic!」な気分のときどうしますか?
Soundtrap!!!
詳しくは HTML5Expert JP!
「html5experts soundtrap」で 検索
DTMStationでもどうぞ!
「DTM Station soundtrap」で 検索
もう少しDeveloper寄りで行きますね。。
Web Musicなアプリを書きたい!
例えばこんなの、
インタラクティブにフィルターをいじれるアプリ
&操作はMIDIコントローラで!
XHRでゴニョゴニョ、
Web Audioでフィルターを書いて
Web MIDIでMIDI入力で....
(*´Д`)ハァハァ
険し過ぎ.....(´・ω・`)でも、それしか手段が、、、
そこで、作りました!
Web Music PlatformDemo
● Web Audio/MIDI を使ってCustom Element Node同士をGUIを接続することのできるPlatform
● それぞでのNodeはPolymer Element
Web Music Platform
Polymer
movie
● Web Componentsに便利機能を追加○ 詳細は、
「Polymer と Web Components の違い9選」
とかで 検索!!
● Web Components?○ HTMLタグを自由に作成できる○ HTMLタグ内に CSS / JavaScript を埋め込める○ 外部要素を汚さない○ 再利用可能
Polymer
構成に関して
Web ブラウザ
Web ComponentsWeb Audio / MIDI API
Web Music Platform
Polymer
Custom Element Node
Custom Element NodeCustom Element
NodeCustom Element
NodeCustom Element
NodeCustom Element
Node
movie
デザイン
Material Design 使ってます!出来る限り
すぐに使えるの?
ヤマハの公式Githubアカウントで
公開済です!
https://github.com/yamaha-webmusic/webmusicplatform
Polymer● Web Music Platformはお手軽な環境です
○ Web Musicをハックできる○ Web MusicのPlaygroundともなる○ すでに公開されている
● 自宅でラーメンに例えると○ 袋入り生ラーメン、インスタントラーメン○ トッピングは、
■ 公開されてるのをそのまま使うもよし■ 自分でハックするもよし
movie
まとめ
お手軽に Web Music ハックしませんか?
● 主催 Google、Web Music Developers JP● 日程 2014年9月13日(土) 10:00〜● 場所 Google Japan オフィス● 共催 AMEI Web MIDI WG● コラボレーション http://jsfest.berlin/● 詳細はこちら http://goo.gl/h1XIQy
Web Music ハッカソン #3
村井 純先生 及川 卓也さん
● Special Guest
● さらにORF(SFC Open Research Forum2014)のW3Cのセッションにて、優秀作品を紹介する予定です!!!