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 アプリケーションについて
このツールは、以下のサイトを見ながら作りました。
iPod touch 上で動くアプリケーションには、「Web アプリケーション」と「ネイティブアプリケーション」があります。「ネイティブアプリケーション」はまだ開発できないので、勝手に作れるのは「Web アプリケーション」だけになります。このツールは HTML と JavaScript だけで作られているのでツールと書きましたが、「Web アプリケーション」と呼んだ方が分かりやすいのかもしれませんね。うーん、でもそれはやっぱりおかしいかな。まいいや。
上記の Apple のサイトでは、画面サイズから推奨される各項目のサイズや文字の色などが書かれているので、とても作り易かったです。また、Wi-Fi なので動作確認が携帯用サイトよりも楽でした。
ところで、小さい画面でサイズや色などの指示をされたら表現の範囲が狭まじゃないかとも考えられますが、Twitter では限られた文字数だからこそおもしろい発言が飛び出すように、制限にはそれなりのおもしろさがあるのではないかと思います。
最後になりますが、本体を傾けると画面が横になる機能は結構やっかいでした
Award on Rails で協賛企業賞を頂きました
今日は Award on Rails の表彰式に行ってきました。そこでなんと hightime.jp が、協賛企業賞のクックパッド賞を受賞しました。クックパッドさんありがとうございました。
表彰式の後の懇親会で、クックパッドのかたとお話したのですが、サービスのアイデアを褒めてもらえたのが嬉しかったです。iPod touch にも対応してと言われたので、まずは明日 iPod touch を買いに行こうかと思います。
副賞ということで、料理本を 4 冊とトートバックをもらいました。パスタ好きなのでこれは嬉しい賞品です。ありがとうございます。
審査結果はこちら。大賞は http://fooo.name/ かと思っていたのですこし驚きました。残念ながらまつもとゆきひろさんは来れず、ムービーでのコメントだったのですが、プログラミングできるツールに惹かれるということで、アドベンチャーゲーム共有サイトを選んでいたのが印象的でした。
懇親会では他の応募者のかたなどといろいろ話せて楽しかった。みんないい人でしたね。懇親会中にGigazinize Tools の noriaki さんと よいさいと の koress.jp さん と hakatter の 作者のかた がデモしてました。koress.jp さんの発表がおもしろかった。
ひとり Award on Rails 反省会 / 他の人の応募作を見た
今週末に表彰式が行われる Award on Rails ですが、他の人の応募作を全部見てみました。
感想
当たり前なことも多々ありますが、好き勝手な感想です。たくさんのサービスを試してみるという行為ならではの感想もあるかもしれません。
- サービス名は分かりやすい方がいい
- 日本語の方がいいかどうかは微妙
- 審査・投票画面のサムネイル写真は重要
- サムネイルとサービス名だけでめちゃくちゃ気になるサービスもあった→http://rails.drecom.jp/entry147
- 作品紹介の最初の 1 行は重要
- それだけで「おもしろそうなサービスだな」というのもあった
- デモユーザ(ゲストユーザ)があると試しやすい
- 目立つところに情報があるとさらによい
- ログイン画面にテスト用のユーザ名とパスワードが書いてあるのはさらによさげ
- 作品紹介の所にも書いてあるのもよい
- ログインの必要がないとさらに試しやすい
- ユーザ登録に email の必要がないと試しやすい
- ユーザ登録後はログイン状態になっていると使いやすい
- 流行っているサービスには当てはまらないだろうけども
- URL は www から始まらないほうが目立つ、というか URL から思い出しやすい
- サービス名と似た URL というのも思い出しやすい
- ブックマークレットが用意されているとなんか格好いい
- Comet 賞があるのに Comet を使ったサービスがあまりなかった
- テキストボックスのフォントとかを大きくして、最近のサービス風(?)というのはあまりなかった
- マッシュアップは地図を使うのが多かった
- 携帯連携は位置情報を使うのが多かった
- 何かのテーマについて投稿しあうようなサービスがいくつかあった
- 日々記録してグラフにするサービスがいくつかあった
- はてなと livedoor の認証を利用したサービスが結構あった
- OpenID はあまりなかった。fooo.name だけ？
- 異様に本格的でたまげたサービスがいくつかあった
- 「新規登録」リンクが右上だけというのは分かりにくいかもしれない
- 開発ブログがサイドに表示されているのはいいかもしれない
- サービス自体のソーシャルブックマークの登録数や登録リンクを表示するのもいいかもしれない
- トップページで盛り上がってる感が分かるといい
- 「最近登録された〜」など
気になった作品
なんか気になったサービスをいくつか列挙します。僕の作っているサービスも取り入れられるものは取り入れたいと思ってます。
- http://2ch.jirox.net/
- http://9arrows.com/
- 9arrows という名前に惹かれた
- http://aor2007-8.drecom.jp:18007/
- Comet 使ったサービス
- ホワイトボード使いながらチャットというのが便利そう
- http://book.k65y.com/
- http://choigraph.minorapi.jp/
- CSV を渡してグラフを生成してくれる Web API
- 例→http://choigraph.minorapi.jp/line?d:data=1030,980,877,809,502
- 名前が分かりやすい
- http://cnx68000.aor2007.drecom.jp/
- ゲームブックみたいなストーリーを作って公開するサービス
- http://www.ey-office.com/tsuuji/
- 翻訳して欲しいサイトを登録して、他の人の要望でランキングされて、翻訳されたサイトを登録するサービス
- ヘルプ機能がよい
- http://onk.blog.drecom.jp/archive/112 で薦められてる UI
- メインページとサービスの説明が同じページなのもいいかも(下の方にサービス説明がある)
- http://fooo.name/
- Award on Rails 関係なく注目のサービス
- http://hakatter.com/
- 体重 SNS
- 使いたい
- 他人に体重見られるというのは女の人はどうなんだろうかという疑問が沸いた
- http://harigo.net/
- ユーザ登録して、メールを送信しました画面の後にリダイレクトして、これから何が起こるのかの説明画面を表示するのはいいなと思いました
- 登録に必要な情報は email アドレスだけ
- CAPTCHA があった
- http://ko.meadowy.net/bookscope/
- 蔵書を管理するサービス
- 貸し借りの支援もあるらしい
- 自宅で使っても便利そうだが、会社で個人で所有している書籍を登録すると貸し借りしやすそう
- ソーシャル図書館みたいなこともできるのでは
- http://cnx68000.aor2007.drecom.jp/
- 作品紹介 の書き方がかっこよかった
- http://logyou.ikomaru.com/
- シンプルなログサービス
- ログの入力画面で一つ前のログがスクロールするのがおもしろかった
- http://map.toshiaky.net/
- 携帯の位置情報を使って、携帯で Google Map を見れる
- 僕の携帯は地図サービスが有料なので便利そう
- http://muscovy.aor2007.drecom.jp/tates/
- 文章が縦に表示される
- http://osusu.adniss.jp/
- RSS リーダー
- サイトのオススメ箇所に落書きできる
- Ruby Business Commons の作品
- http://sztm.aor2007.drecom.jp/
- Web 上でかくれんぼ
- でもどうやるかよく分からなかった
- http://tamu.aor2007.drecom.jp/
- 旅行の計画から旅行後の写真共有までできるサービス
- 便利そう
- 問い合わせフォームがあるのはいいかも
- http://together.aor2007.drecom.jp/
- みんなで英語の問題を作ってみんなで解くサービス
- シンプルだけどおもしろい
- http://tsuki.yumenosora.net/
- トップにキャッチフレーズが書いてあるのがいい→「一歩先行く情報収集ツール。」
- http://twtg.zeg.in/
- 個人レベルの buzztter みたいなサービス
- 自分がどんな発言ばっかりしてるか分かる
- 自分と同じような発言している人が分かる
- リアルタイムに集計されたら同じテレビ番組を見てる人が分かったりしておもしろそう
- http://yois.jp/
- 携帯版のソーシャルブックマーク
ひとり Award on Rails 反省会 / デザイン本を読もう
作品がここで一覧になっています。
http://mala.nowa.jp/entry/3f2e8e7000
ここでは、はてなブックマークと一緒に一覧になっています。
http://polog.org/files/aor_hatena.html
僕の作ったサービスは、1 user となっていますが、僕自身です。やらせっぽいけど、そんなつもりはありませんでした。
他の人のサービスを見て思ったのは、ソーシャル的なサービスが多かったことです。僕は俗にいう LifeHacks に分類されるような、サービスを作ったつもりなのですが、そういうのはあまりなさそうでした。それから、もう一つ感じたのは、デザインのかっこいいサービスが多かったこと。みんなすごいですね。
そんなわけで、Web サイトのデザインに役立ちそうで、かつデザインを学んだことがない人向けの本を 2 冊読み始めました。
これらの本は、いつか読みたいと思っていたのですが、そう思わされたレビューは以下。
「Shibuya Perl Mongers テクニカルトーク #8」に行ってきました
10/1(月)に開催された Shibuya Perl Mongers テクニカルトーク #8 に行ってきました。早めに着いたので前の方にいたら、隣に座った人が id:swdyh さんだったので「AutoPagerize いつも使ってます」とわけの分からない挨拶をしていまいました。Perl を始めたのは今年に入ってからなのですが、YAPCの時よりはついていけたような気がしました。
当日、otsune さんと Yappo さんによって ustream で配信された動画を録画したものがここにあります。
http://ustream.tv/search/recorded/tag/shibuya.pm
スライドはここに上がるようです。
http://www.slideshare.net/group/shibuya-perl-mongers
インターネット便利すぎる。
ということで、各発表の感想を一言ずつ、復習とメモ代わりに書いておきます。
Main Talks
Gungho, Swarmage, POE::Component::MDBAによるデータ収集 - 牧さん
作成中の以下のモジュールのお話。
- http://search.cpan.org/dist/Gungho/ (データ収集)
- http://search.cpan.org/dist/Swarmage/ (データ格納)
- http://search.cpan.org/dist/POE-Component-MDBA/ (データ呼び出し)
細かいところは、ほとんど理解できませんでしたが、名前がかっこいいなと思いました。
MogileFSのplugin拡張 - ZIGOROuさん
分散ファイルシステムのお話。またしてもよく分からなかったが、plugin、hook というキーワードが並んでいておもしろそうだったので、時間を掛けて資料を読んでみようと思いました。
Software Design の 2006年 9,10,11 月号で記事を書いているとのことなので、そっちも見てみよう。
Class::Component - Yappoさん
クラスの拡張をプラガブルに行えるモジュールのお話。かっこいい。id:amachang のプレゼンツールを使っているんですね。gihyo.jp で連載が始まったとのこと。
Guest Talks
JavaScript::Writer - gugodさん
Perl で JavaScript のコードを出力するモジュールのお話のようでしたが、英語での発表のため、ほとんど分かりませんでした。
Practical Web Scraping with Web::Scraper - miyagawaさん
- 資料: http://blog.bulknews.net/mt/archives/002223.html
- Web::Scraper のお話。
- ruby の scrAPI を参考にした
- 正規表現でもできるが、デザインの変更の影響を受けて、壊れやすいしメンテしにくい
先頭の文字を見て XPath と CSS Selector を切り替える所と、自動でコードを生成する所がかっこよかった。
Lightning Talks
僕の夏休み？ - Emerson Millsさん
スクラムや S3 のお話。
６年前に作ったプログラムにテストコードを書きました ^^); 〜〜 テスト駆動開発の薦め - Yuumiさん
テストコードを活用して、アプリケーションのコア部分を書き換えたというお話。
Plagger。みんなで使えば恐くない。 - makotokagaさん
Plagger は便利だが、インストールとかレシピとか技術が必要なので、もっと広く使われるために、サーバで一括管理し、みんなで触って初心者でも使えるようにしようという話。CGS(Contents Generated Service)というのがおもしろいですね。サービスをみんなで生成していくからCGS。
Gungho と Web::Scraper で mashup - Keiichi Okabeさん
クライアントアプリケーションがネットワークを飛び回るという話が気になったが、ちょっとよく分かりませんでした。
Flash with perl - typesterさん
Flash おもしろいよ！というお話。僕はいまだに Flash はブラックボックスで憧れています。話に出てきた http://ttyshare.com/ という typ を録画したものを共有するサービスは初めて知りました。
Pushmi の話 - mizzyさん
Subversion のレプリケーションツール Pushmi のお話。SVK がベースらしい。mizzy さんの利用例として、東京と福岡にいるチームの話をしていました。作業の自動化などのコードは共通なので、1 つのレポジトリで管理したいが、ネットワーク障害等によりアクセスできなくなると困る、コミットはいいとしても参照はしたいので Pushmi を使用しているとのこと。
続イメージファイト - TAKESAKOさん
凄かった。以下のアドレスにアクセスすると、使用しているブラウザの画像が表示されるのだが、JavaScript を使ってるのではなく、ブラウザごとの画像表示のバグとか実装の違いを利用しているらしい。
http://wafful.org/~takesako/html20hacks/browser-detect3.html
各ブラウザのソースコードを読みながら作ったのかな。凄すぎる。
higitime.jpについて
先日のエントリの通り、ドリコムの Award on Rails への応募作品として作成しました。
僕が前から欲しかったものでもあるので、自分で使ってみてそこそこ便利なアプリケーションになったと思います。（僕と同じように、この種のアプリケーションを使いたいという人がいるかどうかはかなり疑問ですが。）
URL
PC: http://hightime.jp/
携帯: http://hightime.jp/mobile/login/
携帯からのユーザ登録はできません。携帯版は、PC でユーザ登録してから利用可能になります。
サンプルユーザ
ユーザ名: testing
パスワード: testing
上記のユーザ名、パスワードでログインすれば、ユーザ登録なしに、どのようなアプリケーションか試すことができます。是非お使い下さい。
ログインはこちらから
http://hightime.jp/login
どういうアプリケーション？
ストップウォッチで計った時間を記録していく、というシンプルなアプリケーションです。
(この計った時間を、以下「ベル」と呼びます。)
画面構成は、twitter のようにユーザごとのホームで「ベル」の一覧が表示され、「ベル」ごとに個別のページがあります。タイムラインはありません。
サンプル: http://hightime.jp/satoship
何ができるの？
例えば、
- 本を 1 冊読むのにどのくらいの時間が掛かるかを計ることができる
- ブログを読んでいる時間を計っておいて、「へー、自分で感じているよりも時間を割いていないんだな」と新たな発見があるかもしれない
- やりたくないこと（風呂掃除とか）の時間を毎回計っておいて、「今日は前回よりも早く終わらせてやる」とつまらないことを少しだけ楽しくやれるようになるかもしれない
- お茶の水-新宿間などで、「みんな快速に乗ってるけど、実際どれだけ違うんだろうか」という疑問の答えが簡単に出る(もちろん、実際に計ってみれば分かることですが、快速で計って、次に各駅に乗った時には快速の時の時間を忘れているという事態にも対応可能)
- 会社から自宅までの時間を計ることができる
- 朝起きて携帯から「スタート」し、会社について PC から「ストップ」し、ベッドからデスクまでの時間を計れるかもしれない
- 帰省時間を記録しておいて、毎回「ええと、実家までどれくらい掛かるんだったかな」という記憶の呼び出しをしなくてよくなるかもしれない
- ブログを書く時間を計っておいて、「ブログを書くと時間がかかるから今日はやめよう」と考えるところ、なんとなく時間が掛かるというのではなく、前回はどのくらい掛かったか、というのを元に判断することができるかもしれない
などなど
注意すること
- プライベート機能がないため、誰かに見られて困る情報は書き込まないようにして下さい。
- 携帯のURLは、利便性のため、毎回ログインの必要ない「非公開 URL」を使用しています。よって、誰にも教えないように気をつけて下さい。また、「非公開 URL」は、アクセス不可能な URL ではないので、他の誰かにアクセスされる可能性があります。
その他の機能
タグ機能
タグによる絞り込みができます。
複数タグによる絞り込みは、ディレクトリ構造ではなく、以下のようにアンダースコア("_")で繋げて使用します。
http://hightime.jp/satoship/reading_feed
http://hightime.jp/satoship/from_company_to_home
AutoPagerize に対応
class に指定しただけですが、いい感じの位置に挿入されるように、フッターとページネーションを調整しました。
参考: http://d.hatena.ne.jp/swdyh/20070701/1183239979
作成の動機
僕は記憶力が悪い上に面倒くさがりです。
なので、例えばブログを書こうとか家計簿を書こうとか思った時に、「待てよ、今それをやったら今日は終わってしまうんじゃないだろうか」という考えが脳裏に浮かび、そんなことを考えている内に、無駄な時間を過ごしてしまうというようなことが多々あります。
そこで、そういう時間を毎回計っておいて、平均値を出しておけば、予定も立てやすくなるんじゃないかなと思いました。また、「何ができるの？」で箇条書きにしたことを実際にやりたい、というのも動機になりました。
とはいうものの、単純に何をするのにどのくらい時間が掛かるか、という情報を記録するのもおもしろいんじゃないかなと思ったのが 1 番の動機です。
技術的な話
- RubyKaig2006 の DHH の発表を参考に、「ベル」の操作は RESTful にしたつもりです。
使用したプラグインやサービス
レンタルサーバ
初めさくらインターネットを予定していましたが、rails アプリは CGI になってしまい、あまり早くなかったので、ここにしました。当然、レンタルサーバなので、TextDrive もそれほど早くはありませんでした。ただ、ActionMailer をほぼ設定なしで使えるというメリットがあります。
rails プラグイン
タグ機能を追加するプラグインです。
Railsレシピ には、acts_as_taggable が説明されていましたが、acts_as_taggable_on_steroids の方がいいよと書いてあったので、こちらを使いました。
携帯電話関連のプラグインです。
全角カタカナを半角にし、文字コードを Shift_JIS に変換する処理にしか使用していませんが、他にもたくさん便利な機能があります。
画像生成サービス
今後
Award on Rails の審査中はアップデートできないと思いますが、その後の予定。
- プライベート機能
- タグで絞り込んだ一覧の、合計時間や平均時間を表示したい
- 「ベル」同士の時間を計算して次のようなことが分かる表示をしたい
- いつも 3 ヶ月おきに髪を切ってるから、そろそろ髪を切るころだな
Ruby on Rails で開発した感想
*1:例えば http://d.hatena.ne.jp/elm200/20070724/1185282738 から引用 > "get post put delete head と5種類しかリクエストがないのだから普通に def でメソッド定義してもよさそうなものだが、潔癖なまでに繰り返しを嫌う Rails の特徴がよく現れている"
ドリコムの Award on Rails にエントリーしました。
エントリーは参加表明で、完成したら応募するという流れのようなので、とりあえずエントリーだけ。とはいっても、締め切りは 9/25 なので、あと少しいじって応募するつもりです。
ちなみに作ってるのはこれす。
http://hightime.jp/
ストップウォッチの結果を記録して行くというシンプルなサービスです。
