トップ «前の日記(2010-12-16) 最新 次の日記(2010-12-25)» 編集

Route 477



2010-12-24

[rails] Railsアプリの携帯・iPhone対応についてWEB+DB PRESSに書きました

昨日発売のWEB+DB PRESS Vol.60に、jpmobileの記事を書きました。Ruby連載の第4回です。

Rails3で携帯電話・iPhone/Androidに対応したサイトを作りつつ、絵文字や位置情報の扱いについて解説するという感じです。

4774144606

雑誌掲載版のサンプルコードはこちらです。

これを拡張したものが http://chizumemo1.heroku.com/ で動いています。携帯やiPhone/Androidで見ると別デザインになります。主な変更点はdeviseを使うようにしたことで、編集・削除はログイン時のみ可能です。

これで分かったんですが、なんかauの一部機種にSJISのフォームなのにUTF-8でPOSTしてくる奴があるらしくて、その場合はjpmobileで絵文字がうまく変換できなくなります。あとで調べてパッチ送らないと…

絵文字

絵文字はキャリア各社でセットが違いますが、jpmobileがそれなりに相互変換してくれます。

PCでは絵文字は表示できないので*1、今回はTypeCastの絵文字画像に変換することにしました。*2

こちらのアイコン画像を使うといいよというのはこの本からの情報です。Rails 2.xの本ですが、携帯でのメールの扱いなどすごく濃いところまで載っています。

4797358785

位置情報

GPSや基地局の情報から、現在地の緯度経度を取る方法です。携帯とiPhone/Androidで取り方が違います。

原稿に書ききれなかったこと:

  • Android 2.xはGeolocation APIが使えるのでiPhoneと同じで良いですが、Android 1.6はGears経由で取得することになります。
  • というコードがこちら。https://github.com/yhara/chizu_memo/blob/master/app/views/memos/new_smart_phone.html.erb
  • navigator.geolocationがあるかないかで分岐しています。gearsはレイアウトの方で読み込んでいます。
  • 紙面ではgetCurrentPositionでやっていますが、上のコードのようにwatchPositionを使うと精度が良かったりするみたいです。

iPhone専用画面

紙面ではiWebKitというライブラリを使って、HTML+CSSでiPhone風な画面を作っています。 同様のライブラリにiUIやjQTouchがありますが、iWebKitは比較的シンプルなので動作が把握しやすいと思います。

jQueryを使うつもりなら、まだα版ですがjQuery Mobileが期待大です。

あとiPhone/iPod touchでは、特定のタグを入れることで「ホーム画面に追加」したときのアイコンとか起動画面を設定できるんですが、さすがに書ききれませんでした。

というわけで

書店で見かけたら手にとってみてください。今回は10周年記念号ということで、他の記事も気合いが入っているようです。

  • プログラマが知るべき言語設計の基礎知識
  • jQuery実践入門
  • 本番プロジェクト 運営ノウハウ大公開
  • これからの10年,どうサバイブするか

「圏外からのWeb未来観測」のゲストはWinny作者の金子さんです。47氏というハンドルネームで書き込んでいたのは実は金子さんだけではない、という話がちょっと面白かった。

4774144606

*1 iPhoneでも表示できないと思ってたんですけど、バージョンによっては表示できるそうですね…。

*2 こちらの絵文字セットに含まれているのはドコモの絵文字なので、必ず画像になるのはドコモの絵文字だけです

本日のツッコミ(全2件) [ツッコミを入れる]
トオルスガルモノノ (2010-12-25 07:31)

Heroku | No such app<br>ってでてつながりませぬ。

yhara (2010-12-25 23:39)

URLが間違ってました。ありがとうございます。