2009/10/19

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

いやあ、昨日で打ち止めの予定が、やっぱりやりたいこととか出てくるのですね。できあがってみたら、これ本格的に使えそうなので、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いじってても、画面が縮小されて表示されてしまい、厄介だった。

ET withwith with iPhone

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

ET withwith with iPhone

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

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

加藤 康祐 / 企画・設計

プランナー、デザイナー。加藤康祐企画設計代表。Webデザインを入り口に、2005年よりフリーランスとしてのキャリアスタート。主な仕事としてベンチャー企業でのサービスのUXデザイン、独法との防災メディアの運営、社会的養護の子どもたちの自立を支援するNPOのサポート。ラグビーと料理、最近イラスト。

加藤康祐企画設計

是非、フォローしてください!
Twitter / Instagram

(2012-10-5)
売り上げランキング: 14,705
100円