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も動作します!

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

ひとり仕事: フリーランスという働き方
(2012-10-5)
売り上げランキング: 14,705
100円

加藤 康祐 / 企画・設計

1980年1月12日生まれ。1998年よりデザイン会社のパートタイムアシスタントとしてWeb制作を経験。2005年に独立、フリーランスとして、企業、個人、NPO、独立行政法人など、様々な領域でのITやデザインによるサポート業務に携わる。2018年、加藤康祐企画設計を開業。これまでの経験を活かし、より広い視野でクライアントの問題解決に取り組み、クライアントと一緒になって新しい価値創出をし、平静な社会の実現を目指す。

加藤康祐企画設計

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