OperaでWeb MIDI APIが動いてびっくり。x-webmidiもOK

 ChromeでいつものようにWeb MIDI APIをいろいろテスト。ふと気になって立ち上げていたOperaで作成中のWebアプリを開くと、MIDIデバイスを認識していることに気づく。
Operawebmidiapi あれ、対応してるんだっけ?
 と、思いつつ、さらに操作してみると普通に鳴る。システムエクスクルーシブ(SysEx)もOK。
 画面を見るとわかるとおり、現在作成中のWebアプリはいつものように、Polymerエレメントのx-webmidiを使っている。普通にこれがいけるのか。楽だな。
 すげー。いつの間に?
 でもって、開いているURLを見ると、Google App Engine SDKが起動しているローカルのウェブサーバーを参照している。じゃあ、appspot.comにアップしたやつはどうなのか? と、ページを開くとエラー。あらら。
 開発ツールを見ると、コンソールにこんなのが。

 [ERROR] DOMException: An attempt was made to break through the security policy of the user agent.

 このメッセージはx-webmidirequestaccess.htmlが出してる。
 セキュリティポリシーの問題らしい。
 あれ、ちゃんと「https://」で始まるURLなのになあ。と思ってよくみたら「http://」で始まるやつにアクセスしてた。凡ミス!
 というわけで、システムエクスクルーシブを使う場合は、HTTPSが使えるサーバーが必須というのはChrome 43以降と同じようだ。
 そのへんの話は、AMEIのFacebookのページに出てた。


 そこにはこうあった。

System Exclusive(SysEx)を利用する際はHTTPSが使えるサーバからの配信が必須(localhostではHTTPでも可)となりました。少しハードルが上がったように感じるかもしれませんが、次に挙げるようなサービスを利用して「静的サイトを作成」することで今まで通り気軽に公開できますので用途に合わせてご検討ください。
(a) Google App Engine(https://goo.gl/XYS9hQ )
(b) Github page( https://pages.github.com/ )
(c) Dropbox( https://www.dropbox.com/ )
http://gigazine.net/news/20150521-google-chrome-43/

 今年の春頃は、これを知らずにいろいろ試行錯誤していたのだなあ。当時書いたのがこれ。
 Chrome 43 BetaでWeb MIDI APIがデフォルトでONになったのだけど
 このエントリに、かわいさんがこんなコメントを残してくれたのだった。

SysExを使う場合はHTTPSなサーバからDocumentをサーブすることが必須になります。SSL証明書を買う以外の方法法で公開される場合HTTPSでサーブできるGoogle App Engine、github pages、DropboxのPublicを利用する等の方法がありますよ^^

 ということで、それ以来、Google App Engineを使っている。
 静的ファイルばっかり(Web MIDI APIのメインはJavaScriptだからね)使ってたのだけど、やりたいことが、それだけでは足りなくなってきたので、Google App Engine for PHPにも手を出した。
 昨年から始まったらしいGoogle App Engine for PHP。現在は申請なしでもすぐ使える。意外なほどに簡単に動かすことができた。まあ、データベースもライブラリも使わない簡単なやつだからというのもある。
 さらに、x-webmidiの最新版も試したいので、Polymerも1.0を使うように。0.5から0.9の時はバージョンアップでエラー出まくりになって面倒になってあきらめたりしたのだけど、今回は大丈夫だった。導入用のドキュメントがちゃんとあったというのが大きい。
 Web MIDI API (with x-webmidi)
 これで再入門。上記記事にはないのだけど、デバイス名を指定して自動接続とか、いったん切り離しても再接続とか新しい便利な機能にしびれた。なんとすばらしい! ありがとうございます!
 このへんの話はまた後で別に書こうかと思う。
 ということで、このへんを使ったWebアプリをもうすぐ公開。できればいいなあ。現在、足したい機能が増えてる状況なので、まだもう少し先になるかなあ。という現状をここに記録。メモ。

コメント

タイトルとURLをコピーしました