【つまづき】加速度センサーを使ったアレの問題点いくつか

　どうも！LSSです！！

初めて、加速度センサーをJavaScriptから読む事に挑戦してみたのですが、下書き段階では問題なさそうに思えたものの、公開してみると色々と出てきましたｗ

f:id:little_strange:20210412224854p:plain

iPhoneで動作しない

そもそも、加速度センサー＋WebAudioAPIを使用したサンプルで、どっちかがコケても鳴らないのでどっちに問題があるか分かり辛い、という状況でした。

WebAudioAPIについては、タッチイベントで開始しないと、クリックイベントからはiPhoneで鳴らない…らしい？というところまで掴んでいたので、タッチで開始するようにしていましたが、それでもダメ。

公開後に少し手を加えて、フルスクリーン部分を開いた時点でも別に鳴るようにしたところ、「そちらは鳴るが振っても鳴らない」という状態になりました。

という事は、WebAudioAPIの問題ではないのかも？

で、ググってみたところ、

の情報が見つかりました。

なるほど、先にスクリプトからユーザーに「加速度センサーを読んでいいか？」と許可を求める問い合わせをして、さらにユーザーにOKしてもらわないといけないんですね^^;

これ、スクリプト作る側にもユーザーにもひと手間増えるけど…まぁそういう事なら仕方ない。

（作る前には、許可の設定とか要らないのかな？と思っていましたが、Andoroidでは問い合わせもなくすんなり動作しました。）

作ってる途中でのテストは、PCで作った記事を下書き保存し、Andoroidスマホのはてなアプリから下書きを開いて試す、という事を繰り返していました。

その時には発生しなかった問題なんですが…

「がんがん振ってるうちに、画面の縦横が切り替わり、その際に自動的に再読み込みされてしまうのでフルスクリーン状態が解除されてしまう（音鳴らしが中断される）」

…という、なんとも残念な問題が出てきました^^;

画面縦横が切り替わらない範囲でそっと振ってる分には使えますが、それも興ざめだなぁ、と。

で、テスト中はどうだったかというと…今回初めて分かった、Andoroid版はてなアプリの仕様ですが、
「下書きプレビュー中は、縦横切り替わっても再読み込みしない。公開済みの記事の表示中は縦横切り替わると再読み込みになる。」
という違いがあるようです！

再読み込みにならないなら、フルスクリーン状態が維持されるので気にせずぶんぶんできますが、さてどうしたものか…。
（画面の縦横切り替えをJavaScriptから制御できるか？についてはWeb上では「できない」という話と「できる」という話が両方ありました。要実験、かな。）

あと、簡単な解決策（？）としては、
「Chromeで開くと、縦横切り替わっても再読み込みにならない！」
という事が分かっています。

はてなアプリが特殊なのかな？

もちろん、加速度センサーを使ってる以上は、普通のＰＣは対象外になります。

でも、それを言ったら、前作

も、スマホ・タブレットの「マルチタッチ」を基準に作っていたものを後からマウス操作でも鳴るようにしたので、加速度センサーの代わりに「マウスの移動量」を使っても良かったかな？

って後から思いましたｗ

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^