ET withwithをiPhoneに対応させました

Posted on | 2009/10/19 18:32:57

いやあ、昨日で打ち止めの予定が、やっぱりやりたいこととか出てくるのですね。できあがってみたら、これ本格的に使えそうなので、iPhoneでも閲覧や入力したいなあと思い、最初iPhoneアプリか？とも思ったのですが、iPhone SDKはIntel Macでしか動かないそうで、僕のMac Miniじゃできなさそうだし、そもそも面倒くさそう。というわけで、CSSで対応することにしました。

ただ問題は、ET withwithは基本的にデータベースに蓄積されたものをテーブルに吐き出しているので、iPhoneで見るには不向きなんですね、テーブル組み。というわけで、ソースを組み替えてulをネストした擬似テーブルに組み替えることで、iPhoneでも見やすくCSSで調整できるようにしました。

default.ctp

<link href="/who/css/cake.generic.css" rel="stylesheet" type="text/css" media="screen and (min-device-width: 481px)">
<link href="/who/css/iphone.css" rel="stylesheet" type= "text/css" media="only screen and (max-device-width: 480px)">
<!–[if IE]>
<link href="/who/css/cake.generic.css" rel="stylesheet" type="text/css" />
<![endif]–>
<meta name="viewport" content="width=380" />

調べましたところ、iPhone用のCSSを適用するのは、画面解像度でやるみたい。これあんまりスマートではないなあと思いつつ、特に直近iPhoneの解像度が変わるわけでもないし、そもそも僕しか使わないわけなので、採用。なんかmetaのviewportって記述が大事みたいです。これ忘れてCSSいじってても、画面が縮小されて表示されてしまい、厄介だった。

WEBではテーブルっぽく見せつつ、iPhoneではこのようにリストっぽく見せております。結構見やすいよ。

Safariなので、jQuery UI Datepickerも動作します！

いやあもう楽しくてしょうがない。

• 

  意外と知らない、「ヒトリシゴト」。案外、愉快で、楽しいです。気軽に読める、ビジネスエッセイ。

• 

  プランナー、加藤康祐のブログ、kosukekato.com : the idea espressoに掲載したコラム、2006/7/20「歴史は作られている」から2010/5/23「行為が流通するプラットフォームに新しい時代を感じる」を一冊の本にしました。

• 

  今話題のInstagramを使った写真集です！あなたもInstagramするきっかけになれば！68点の写真を収録。