シンセのつまみやスライダーを模したGUIを作るのに最適、個人的にはWeb MIDI APIでいろいろ作るのに欠かせないwebaudio-controlsがアップデートしていた。Polymer 1.4への対応がなされたそう。
webaudio-controlsをちょっと更新 | g200kg Music & Software
そして。
今回イメージファイルを割り当てずに使用した場合のデフォルト表示系をSVG化して、ついでに簡単な色指定ができるようにしてあります。
だそうです。小物的なプログラムを作るのがこれまで以上に楽になりそう。お世話になります。
っていうか、Polymer、ちょっと見ないうちにだいぶバージョンが上がってたのだなあ。
以下、これまで同ライブラリを使ってきての記録。
もうこれがなければ、なにもできないくらい便利に使っているのだけれども。
今回のバージョンアップ。昨日の時点で久々にGitHubで新しいのが出てることに気づいていろいろテスト（2日前に最新のが上がってた）。気になるところがあったので、ソースをいじってたら、今日になってさらにバージョンが上がっていた。
タッチデバイスでスクロールしてしまう？
（追記 2016/06/04）
本日、アップデートを確認（今日の日付になってる）。テストしてみたところ問題なく動きました。タッチデバイスのスクロール問題解決。従来出ていたエラーメッセージも出てきません。「touch device prevent scroll」とコメント（？）が書かれてました。
ということで、以下の文はそれ以前の記録ということでそのまま残します。
（追記終わり）
気になっていたのは、iOSやAndroidでノブをいじると、画面がスクロールしてしまうこと。マウスとタッチで動作が変わるという感じだ。ウチの環境だけかもしれないけど（使い方が間違ってるとか）。
サンプルをタッチデバイスで触ってみるとわかる。
WebAudio-Controls Test Page sample 2
Polymer 0.5ではそんなことはなかったはず。Polymer 0.8用ということでkawaiさんがリリースしていたバージョン（その後に1.0に対応とアナウンス）も試したのだけど、それも同様。外側の要素にイベントリスナを登録してキャンセルしたんだっけか（忘れた）。さらに以前と同じように書いてもノブが横並びにならないということもあった。縦にならんでしまうのを回避するために、スタイルシートを書き加えたんだったか。その時の記録動画がこれ。
で、今回もスクロールしているのであらためてソースを見る。サンデープログラマーには理解ができなかった。ぶー。
エラーメッセージをiOSやAndroidのブラウザ内に表示するようにしてみたのだけど、それだけではなにもわからず（やり方がまずかったのもあるのだろうけど）。しかし、WindowsタブレットでChromeを使ってみると、iOS、Androidと同じようにスクロールしてしまうし、エラーも出た。そして、デベロッパーツールでさらに詳しく見られる。おお、そりゃそうか。ということで問題がわかったっぽい（例によって勘違いの可能性大）。
e = e.touches[0];
たぶんこれ。e に preventDefaultした時にエラーが出ている。だからスクロールがキャンセルされないのだろう。代入前のeなら問題ないのだ。ということで、代入前の値を別の変数に取っておいて、preventDefault前に代入し戻すことにしてみた。そしたらOK。これをpointerdownとpointermoveに対して行った。sliderも同様っぽい。
ということで、そのへんをいじったものをアップしてみた。
サンプル 改造版
GitHubにアップしてPRしろとか、issue書け（？）いう話もあるかと思いますが、使い方がわからず断念（ついでに用語もわかってない）。そのへんは今後の課題ということで。
ちなみにテスト中はこんなのを作ってました。デスクトップではOKなのに、タッチデバイスではごんごんエラーが出るとか。エラーが出てもPolymer 0.5の時のやつは問題なく動く（というかスクロールがちゃんとキャンセルされる）のはなぜだろう？ というのはいまだわからず。もう少しわかったらちゃんとしかるべきところにお知らせしようかと思う。
以上、忘れないようメモ。
コメント