web music開発環境
DESCRIPTION
Web Componentsを使った、Web Audio、Web MIDIのコレボレーションツール、開発環境、Playground。TRANSCRIPT
![Page 1: Web music開発環境](https://reader034.vdocuments.site/reader034/viewer/2022052323/5585d68dd8b42a7c4a8b4792/html5/thumbnails/1.jpg)
Web Music 開発環境
かわい りょうや
![Page 2: Web music開発環境](https://reader034.vdocuments.site/reader034/viewer/2022052323/5585d68dd8b42a7c4a8b4792/html5/thumbnails/2.jpg)
突然ですが、「自宅で手っ取り早くラーメン!」な気分のときどうしますか?
![Page 3: Web music開発環境](https://reader034.vdocuments.site/reader034/viewer/2022052323/5585d68dd8b42a7c4a8b4792/html5/thumbnails/3.jpg)
小麦粉買ってきて麺を作って、ガラ、とんこつ買ってきてスープ...
![Page 4: Web music開発環境](https://reader034.vdocuments.site/reader034/viewer/2022052323/5585d68dd8b42a7c4a8b4792/html5/thumbnails/4.jpg)
険し過ぎ.....(´・ω・`)これは考えないですよね。。。
![Page 5: Web music開発環境](https://reader034.vdocuments.site/reader034/viewer/2022052323/5585d68dd8b42a7c4a8b4792/html5/thumbnails/5.jpg)
思いつくのは、きっとこっち。
![Page 6: Web music開発環境](https://reader034.vdocuments.site/reader034/viewer/2022052323/5585d68dd8b42a7c4a8b4792/html5/thumbnails/6.jpg)
袋入り生ラーメン!
インスタントラーメン!
![Page 7: Web music開発環境](https://reader034.vdocuments.site/reader034/viewer/2022052323/5585d68dd8b42a7c4a8b4792/html5/thumbnails/7.jpg)
トッピングに、
もやし!ハム!たまご!
![Page 8: Web music開発環境](https://reader034.vdocuments.site/reader034/viewer/2022052323/5585d68dd8b42a7c4a8b4792/html5/thumbnails/8.jpg)
完 成 !
![Page 9: Web music開発環境](https://reader034.vdocuments.site/reader034/viewer/2022052323/5585d68dd8b42a7c4a8b4792/html5/thumbnails/9.jpg)
では、「自前で手っ取りWebMusic!」な気分のときどうしますか?
![Page 10: Web music開発環境](https://reader034.vdocuments.site/reader034/viewer/2022052323/5585d68dd8b42a7c4a8b4792/html5/thumbnails/10.jpg)
Soundtrap!!!
詳しくは HTML5Expert JP!
「html5experts soundtrap」で 検索
DTMStationでもどうぞ!
「DTM Station soundtrap」で 検索
もう少しDeveloper寄りで行きますね。。
![Page 11: Web music開発環境](https://reader034.vdocuments.site/reader034/viewer/2022052323/5585d68dd8b42a7c4a8b4792/html5/thumbnails/11.jpg)
Web Musicなアプリを書きたい!
![Page 12: Web music開発環境](https://reader034.vdocuments.site/reader034/viewer/2022052323/5585d68dd8b42a7c4a8b4792/html5/thumbnails/12.jpg)
例えばこんなの、
インタラクティブにフィルターをいじれるアプリ
&操作はMIDIコントローラで!
![Page 13: Web music開発環境](https://reader034.vdocuments.site/reader034/viewer/2022052323/5585d68dd8b42a7c4a8b4792/html5/thumbnails/13.jpg)
XHRでゴニョゴニョ、
Web Audioでフィルターを書いて
Web MIDIでMIDI入力で....
![Page 14: Web music開発環境](https://reader034.vdocuments.site/reader034/viewer/2022052323/5585d68dd8b42a7c4a8b4792/html5/thumbnails/14.jpg)
(*´Д`)ハァハァ
![Page 15: Web music開発環境](https://reader034.vdocuments.site/reader034/viewer/2022052323/5585d68dd8b42a7c4a8b4792/html5/thumbnails/15.jpg)
険し過ぎ.....(´・ω・`)でも、それしか手段が、、、
![Page 16: Web music開発環境](https://reader034.vdocuments.site/reader034/viewer/2022052323/5585d68dd8b42a7c4a8b4792/html5/thumbnails/16.jpg)
そこで、作りました!
![Page 17: Web music開発環境](https://reader034.vdocuments.site/reader034/viewer/2022052323/5585d68dd8b42a7c4a8b4792/html5/thumbnails/17.jpg)
Web Music PlatformDemo
![Page 18: Web music開発環境](https://reader034.vdocuments.site/reader034/viewer/2022052323/5585d68dd8b42a7c4a8b4792/html5/thumbnails/18.jpg)
● Web Audio/MIDI を使ってCustom Element Node同士をGUIを接続することのできるPlatform
● それぞでのNodeはPolymer Element
Web Music Platform
![Page 19: Web music開発環境](https://reader034.vdocuments.site/reader034/viewer/2022052323/5585d68dd8b42a7c4a8b4792/html5/thumbnails/19.jpg)
Polymer
movie
● Web Componentsに便利機能を追加○ 詳細は、
「Polymer と Web Components の違い9選」
とかで 検索!!
● Web Components?○ HTMLタグを自由に作成できる○ HTMLタグ内に CSS / JavaScript を埋め込める○ 外部要素を汚さない○ 再利用可能
Polymer
![Page 20: Web music開発環境](https://reader034.vdocuments.site/reader034/viewer/2022052323/5585d68dd8b42a7c4a8b4792/html5/thumbnails/20.jpg)
構成に関して
Web ブラウザ
Web ComponentsWeb Audio / MIDI API
Web Music Platform
Polymer
Custom Element Node
Custom Element NodeCustom Element
NodeCustom Element
NodeCustom Element
NodeCustom Element
Node
![Page 21: Web music開発環境](https://reader034.vdocuments.site/reader034/viewer/2022052323/5585d68dd8b42a7c4a8b4792/html5/thumbnails/21.jpg)
movie
デザイン
Material Design 使ってます!出来る限り
![Page 22: Web music開発環境](https://reader034.vdocuments.site/reader034/viewer/2022052323/5585d68dd8b42a7c4a8b4792/html5/thumbnails/22.jpg)
すぐに使えるの?
ヤマハの公式Githubアカウントで
公開済です!
https://github.com/yamaha-webmusic/webmusicplatform
![Page 23: Web music開発環境](https://reader034.vdocuments.site/reader034/viewer/2022052323/5585d68dd8b42a7c4a8b4792/html5/thumbnails/23.jpg)
Polymer● Web Music Platformはお手軽な環境です
○ Web Musicをハックできる○ Web MusicのPlaygroundともなる○ すでに公開されている
● 自宅でラーメンに例えると○ 袋入り生ラーメン、インスタントラーメン○ トッピングは、
■ 公開されてるのをそのまま使うもよし■ 自分でハックするもよし
movie
まとめ
![Page 24: Web music開発環境](https://reader034.vdocuments.site/reader034/viewer/2022052323/5585d68dd8b42a7c4a8b4792/html5/thumbnails/24.jpg)
お手軽に Web Music ハックしませんか?
![Page 25: Web music開発環境](https://reader034.vdocuments.site/reader034/viewer/2022052323/5585d68dd8b42a7c4a8b4792/html5/thumbnails/25.jpg)
● 主催 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のセッションにて、優秀作品を紹介する予定です!!!