TANITAの体重計からhakatterにデータを自動入力!

ダイエットを志す人なら誰もが抱く「体重計に乗るだけで、自動的に体重が記録されればいいのに…」という夢。そんな夢を実現してくれる機械が……実はすでにあるんです。まずは、次の動画をご覧ください。

[youtube:http://www.youtube.com/watch?v=Q-tjg91iBm8 425 350]

線をつないだり外したりボタンを押したりする手間は必要ありません。体重をはかるだけで自動的にデータが送信されます。これぞまさに夢の体重計!!


■タニタさんからお借りした体重計。乾電池4本で動くふつうの体重計です。

機器の設定も簡単です。ワイヤレス通信レシーバーに電源ケーブルとLANケーブルをつなげるだけ。体重計とレシーバーは40〜50メートルほど離して設置できるそうです。

実は、タニタ様のご協力をいただいて、この体重計をhakatterに接続する実験を行っています。進み具合はこのブログでもご報告します。お楽しみに。

……しかし残念なことに、この素晴らしい機械をお店で買うことはできないんですよね。タニタが運営する会員制サイト「からだカルテ」のみで販売されているようです。歩数計や血圧計にも対応しているそうですが、検索しても製品情報が出てきません。うーん、もったいないなあ。

Award on Rails 2007 大賞をいただきました!

2007年10月27日、有楽町でプログラミングコンテストAward on Rails 2007の表彰式が行われ、なんと「hakatter」が大賞をいただきました! (審査結果発表はこちら) 

こちらが賞金のパネル。テレビ番組などでよく目にするヤツですね。立派なパネルなので、ぜひにといただいて帰りました。台風が近づいている中、大きなパネルを持って歩くのは少し大変でした(笑)。どこに飾ろうかな。

hakatterは「体重をもっと簡単に記録したい。ひとりでPCに記録するだけじゃ続かない。Webを使ってみんなで記録できるようなサイトが欲しい」という思いから生まれました。特に目新しい技術を使っているわけではありませんが、明確なニーズのある分野に対して、シンプルで使いやすいサービスを提供した点が評価されたのかもしれません。

コンテスト主催者の皆さん、懇親会でお話をさせていただいた皆さん、hakatterを利用しているユーザーの皆さん、そしてRuby on Railsというフレームワークの開発に携わっている世界中の開発者の皆さんに、感謝の気持ちでいっぱいです。ありがとうございました。

自分が欲しいものを作って、他の人にも使ってもらえて、喜んでもらえて、ほめてもらえるなんて、開発者冥利につきるとはこのことですね~。

hakatter モチベーター機能を仮搭載

先日公開した体重管理サービス hakatter、おかげさまでたくさんの方にご利用いただき、感謝しています。

みんなで! はかるだけダイエット 「hakatter」
僕のページ http://hakatter.com/electricdoc

モチベーター機能(お気に入り機能)を搭載

昨日、モチベーター機能を仮に搭載し、これで一通りの実装が完了しました。twitterやmixiのような相互交流の機能を持たせると、会社内のアクセス基準ルールに違反するおそれがあるので、単純にブックマークするだけの機能にしました。

他の人の様子を見ることで、自分自身のモチベーションも高まるのではないかと考えています。みなさん、それぞれのペースでがんばってますね。

今後のToDo

  • トップページにhakatterの説明を追加
  • ドキュメントの整備
  • hakatterのfaviconをデザイン
  • 現在の会員数、新規登録数、昨日の更新数などの集計情報を表示するように。
  • 運営者からのメッセージを表示できるように。
  • 背景グラフィックの改善
  • 各ユーザーのページにアクセスカウンターのようなものを設置する?
  • 最後に、携帯端末用の画面を作る

Ruby on Railsでの開発でつまづいたこと(メモ)

体重管理サービス「hakatter」を開発中です。プログラミングをしていると、たくさんの「なんかよくわからないけど、動かない」という場面に遭遇します。そんなとき、ネットや書籍も参考になるのですが、自分の環境に合った答えをみつけるまでに、とても苦労します。そんなわけで、簡単にメモ。

検索などでこのページにたどりついた方のために、僕の環境を書いておきます。

■開発環境と実行環境

  • Mac OS X 10.4
  • Apache / 1.3.33
  • ruby 1.8.6
  • Rails 1.2.3

■CSS関連

  • デフォルトではフォームの下端に余白ができるのでCSSで消す。
  • 全ての要素の余白を“ * {margin:0; padding:0;} と初期化できる。
  • フォームのテキスト入力欄の幅はブラウザの種類によって変わるが、CSSでピクセル単位で指定するとそろう。
  • 同じようなものを並べるときは、tableタグでレイアウトするのではなく、ulやliなどの箇条書きをCSSでレイアウトする。
  • WindowsのIEとMacのSafariとは、文字表示やフォントが全く違うので、どちらの表示も満足させるCSSの指定は難しい。
  • CSSを無効にしたとき、平文でも構造化されたHTMLが出てくるとうれしい。
  • view/layoutにあるレイアウト用のrhtmlファイルの先頭行を次のようにする。 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”ja” lang=”ja”>

■Ruby on Railsの動きについて

  • ブラウザからアクセスがあると、新しくコントローラのインスタンスが作られる。コントローラの処理によって、表示するデータを用意して、ビューやヘルパーに渡してHTMLを描画する。
  • コントローラ > ビュー (ヘルパー) の流れまでは、インスタンス変数(@で始まる変数)の内容は保持される。1つのアクセスに対する処理が終わったらすべて消えてしまう。
  • 次の画面(Ajax含む)へ情報を渡したいときは、フォームやリンクに情報を埋め込むか、セッション情報を使う。
  • ファイルのアップロードを行うと、10KB以下のものはStringIOオブジェクトとして、10KB以上だとTempFileオブジェクトが生成される。StringIOオブジェクトの場合は、localpathメソッドが使えないため、画像ファイルの変換など、ファイル名が必要なときは自分で保存しておく。

■Ajax関連

  • タグの正しい入れ子の順番は<div><form><table><tr><td>。

■ページめくりの処理を自前で行う

  • ページめくりの処理を自分で書くには、1ページの項目数 > 全体の項目数 > 最終ページ番号 > 表示するページ番号 > 表示する最初の項目の位置、の順に求める。

■Ruby on RailsをApacheで動かす

  • デバッグに多用する p メソッドは、Apacheサーバーでは Malformed header というCGIのエラーになるので、公開時にはすべて消しておくこと。
  • 何かエラーが起きたとき、ブラウザ画面上には「サーバーエラー」としか表示されない。詳細はApacheのログファイルを見ないと分からない。
  • Apacheのエラーログは /var/log/httpd/errorlog にある。
  • 公開前に、tmpフォルダ、logフォルダの中身はすべて消しておくこと。中身が残っているとエラーの原因になる。
  • tmp、logフォルダに対して、wwwユーザーが読み書きできるようにしておくこと(“chmod -R a+w tmp”“chmod -R a+w log”)。

■Rubyの日本語処理

  • environment.rb に ”$KCODE=’u’と設定してUTF-8環境で動くよう明示しておく。ターミナル画面への出力や、正規表現ライブラリなどはここを参照して動く。
  • UTF-8の日本語文字は1文字が3バイト

体重管理サービス hakatter 開発中

以前も少しお話しましたが、夏休みを利用して、はかるだけダイエットを支援するWebサービスを開発中です。その名も「hakatter」。大人気のtwitterにあやかったというわけではありませんが、同じようなシンプルさを目指しています。

開発に使っている言語はRuby on Railsフレームワークです。Railsには豊富なプラグインがあり、ユーザー認証にはLoginEngine、グラフ表示にはGruffを使っています。ずいぶんと助けられています。

今のところ、ユーザー認証と、体重データの記録、グラフ表示の部分ができあがりました。スクリーンショットではわかりませんが、複数のデータをまとめて登録する機能や、CSV形式のファイルのインポートやエクスポートにも対応しています。

Kaihatu1-1

動くものができあがってくると、最初は漠然としていたイメージがだんだん形になってきます。完成像の外観イメージをPhotoshopで作ってみました。

Hakarudake1

おー、だんだんイメージがわいてきましたね! ま、画面デザインも、twitterをかなり参考にしてます(笑)。ただ、あまりSNSっぽくすると、社内のアクセス禁止フィルターにひっかかってしまうので、ユーザー同士のメッセージ機能などは作らない方針です。

グラフを動的に表示する方法には、サーバー側で画像を自動生成する方法と、データを受信してFLASHなどで描画する方法があります。それぞれのデータ転送量を比べてみると、約90日分のグラフでは、PNG画像 = 40KB、JPEG画像 = 36KB、GIF画像 = 12KB、CSV形式 = 8KB、XML形式 = 12KBとなりました。GIF画像がよさそうですね。

8月中にはアルファ版が公開できるといいなあ。