27
Web MIDI meets DIY #0 イントロ 2015/09/04 @VilingVPインキュベーションオフィス

Web MIDI meets DIY #0

Embed Size (px)

Citation preview

Page 1: Web MIDI meets DIY #0

Web MIDI meets DIY #0イントロ

2015/09/04 @VilingVPインキュベーションオフィス

Page 2: Web MIDI meets DIY #0

かわい りょうや Web Music Developers JP 管理人

・Web Music ハッカソンやってます!

google.com/+RyoyaKawai@ryoyakawai

Page 3: Web MIDI meets DIY #0

では、さっそく・・・

Page 4: Web MIDI meets DIY #0

MIDIって知ってますか?

Page 5: Web MIDI meets DIY #0

Wikipedia によると...

出展:Wikipedia 2015/09/03 15:40

Page 6: Web MIDI meets DIY #0

電子楽器の演奏データを

機器間でデジタル転送!!!

Photo by Humusak ( pixabay: https://goo.gl/Yr0vC1 )

Page 7: Web MIDI meets DIY #0

続いて・・・

Page 8: Web MIDI meets DIY #0

Web MIDIって知ってますか?

Page 9: Web MIDI meets DIY #0

おいしいの?

Page 10: Web MIDI meets DIY #0

ブラウザがUSB-MIDI※

に対応しました!!!

※ Universal Serial Bus Device Class Definition for MIDI Devices

Page 11: Web MIDI meets DIY #0

MIDI

MIDIデイバイス Webブラウザ

こんな感じ

Page 12: Web MIDI meets DIY #0

一言で説明すると・・・

Page 13: Web MIDI meets DIY #0

ブラウザは楽器です

Page 14: Web MIDI meets DIY #0

Google Chromeは楽器です

出展: DTM Station 2015年06月09日11:00

Page 15: Web MIDI meets DIY #0

MIDI

MIDIデイバイス Webブラウザ

もう一度

Page 16: Web MIDI meets DIY #0

でも、難しいんでしょ?

Page 17: Web MIDI meets DIY #0

いぇいぇ、簡単ですよ!

CodeLab: x-webmidihttps://goo.gl/8d7Qck

Page 18: Web MIDI meets DIY #0

MIDIデバイス持ってない・・・

Page 19: Web MIDI meets DIY #0

デバイスなくても試せます!

デ モhttp://goo.gl/pAI1Qs

https://html5experts.jp/

実装方法の詳細はHTML5 Experts.jpで掲載予定!!

Page 20: Web MIDI meets DIY #0

どうやってるの?

Web MIDI Linkby @g200kg

Polymer

Web MIDI API : Output

KeyCode

Web MIDI API : Input

Polymer

Page 21: Web MIDI meets DIY #0

超お手軽!

MIDI対応Webアプリ開発

Page 22: Web MIDI meets DIY #0

そしたらやっぱり・・・

Page 23: Web MIDI meets DIY #0

ハードウェアも自作で作りたい!

Page 24: Web MIDI meets DIY #0

ユースケースが・・・

Page 26: Web MIDI meets DIY #0

そこで、

「Web MIDI meets DIY」

が企画されたのでした。

Page 27: Web MIDI meets DIY #0

どんな作品かのご紹介をお願いします!