iPod touchでBPMを測るツールを作りました

デモ動画(約 10 秒)

先日、Leopard 旋風の吹き荒れる中、iPod touch を購入したので習作しました。

使い方は簡単で、以下の URL にアクセスして数字の上あたりをとんとんタップすると BPM が表示されます。電子式のメトロノームによく付いている機能です。ブラウザからも見れます。

http://lab.satoship.org/pocket/bpm/

内部的にタップした時間を保持しておいて、連続した 4 回のタップの間隔の平均値を表示しています。注意点としては、指で触れるタイミングではなく、指を上げるタイミングの時間を保持しているので、数字の切り替わりが予想したタイミングと違うかもしれません。裏でリズムをとるような感じでタップするとそこそこ予想通り使えるのではないかと思います。また、あまり速すぎると測りきれませんでした。だいたい 180 を越えると処理速度か何かが付いていってないような感じがします。

ちなみに、BPM とは Beats per Minute の略です(ウィキペディア)。曲の速さを表す単位で、数値は 4 分音符が 1 分間に刻まれる回数になります。使い道があるのかどうかはよく分かりませんね。暇な時に目をつむって 120 BPM を刻むゲームをするとか、緊張している時に 120 BPM を刻んでいるつもりが 300 BPM で「やっぱり緊張してる！！」と感じる遊びをするなんていうところでしょうか。

以下、技術的な話。

本当は、指で触れるタイミングで測定したかったのですが、JavaScript で onclick、onmousedown のどちらのイベントを拾っても指を上げるタイミングで測定されたので、そういう仕様なのだと思い諦めました。初めは JavaScript の処理が追いつかずに更新が遅れているのかと思い、id:amachang の これ を試したりしたのですが、何も変わってるようには思えずだめだなこりゃと諦めた後、タイミングが違うことに気づきました。コツをつかむとそれなりに正確な値が表示されてると思います。(もちろん JavaScript で高速化する余地は多分にあると思います。)

それから、値を更新する度に画面がちらつきます。再描画する範囲を狭くしたりしてみたのですがこれまた何も変わらず、なんだろうなと思いながら何度か試してみると選択範囲が薄暗くなることに気づきました。なのでタップする範囲を狭くすればちらつく範囲も狭くなるのでしょうが、親指でさっさっと隅の方をタップしたかったのでこのままにしました。iPod の Safari は指を触れた時に選択範囲が薄暗くなって離した時にイベントが発生するという仕様なんですね。

iPod touch 用 Web アプリケーションについて

このツールは、以下のサイトを見ながら作りました。

• iPhone向けWebアプリケーションとコンテンツの最適化
• livedoor Readerサービス終了のお知らせ
• iPhone - Apple

iPod touch 上で動くアプリケーションには、「Web アプリケーション」と「ネイティブアプリケーション」があります。「ネイティブアプリケーション」はまだ開発できないので、勝手に作れるのは「Web アプリケーション」だけになります。このツールは HTML と JavaScript だけで作られているのでツールと書きましたが、「Web アプリケーション」と呼んだ方が分かりやすいのかもしれませんね。うーん、でもそれはやっぱりおかしいかな。まいいや。

上記の Apple のサイトでは、画面サイズから推奨される各項目のサイズや文字の色などが書かれているので、とても作り易かったです。また、Wi-Fi なので動作確認が携帯用サイトよりも楽でした。

ところで、小さい画面でサイズや色などの指示をされたら表現の範囲が狭まじゃないかとも考えられますが、Twitter では限られた文字数だからこそおもしろい発言が飛び出すように、制限にはそれなりのおもしろさがあるのではないかと思います。

最後になりますが、本体を傾けると画面が横になる機能は結構やっかいでした