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いじってても、画面が縮小されて表示されてしまい、厄介だった。
WEBではテーブルっぽく見せつつ、iPhoneではこのようにリストっぽく見せております。結構見やすいよ。
Safariなので、jQuery UI Datepickerも動作します！
いやあもう楽しくてしょうがない。
加藤 康祐 / 企画・設計
プランナー、デザイナー。加藤康祐企画設計代表。Webデザインを入り口に、2005年よりフリーランスとしてのキャリアスタート。主な仕事としてベンチャー企業でのサービスのUXデザイン、独法との防災メディアの運営、社会的養護の子どもたちの自立を支援するNPOのサポート。ラグビーと料理、最近イラスト。
是非、フォローしてください！
Twitter / Instagram
売り上げランキング: 14,705
100円
フリーランスとして働き始めるってどういうことだったのか？フリーランスとして働くってどういうことなのか？フリーランスが目指すことってなんなのか？5年間の自分の経験から書きました。（2010年執筆）
