Re: yozik

レポート：SwapSkills 『誰でも出来るiPhoneのウェブサイト』

先週の金曜日にSwapSkillsの『誰でも出来るiPhoneのウェブサイト』というイベントに行ってきたので覚え書き。

iPod touch持ってないし、まったく予備知識なしで行ったので知らないことだらけでした。

iPhoneの基本

  • Portraitモード（縦画面）→幅320px
  • Landscapeモード（横画面）→幅480px
  • Viewport機能
    • Portraitモード時に自動的に縮小表示する機能。
    • この機能のデフォルト幅は980px。それを320px幅に収めようとするので、約1/3の大きさで表示される。
  • Pinch in/Pinch Out機能
  • 指とマウスは違う。指で操作できるように作るのがポイント
  • フロートを解除する
  • 1カラム、リキッド構成

iPhoneに対応している例

  • Facebook
    iPhone向けには、タブ化、リキッドレイアウト化、フォント･行間を大きめにしてある。

開発環境

  • 「SDK Aspen Simulator」がiPhoneそのままを再現できる。
    （このAspen Simulatorってのが見つけられなかったんだけど、iPhone SDKの中に入っているシミュレータのことでいいのかな？）
  • Style MasterのVer.5では、このシミュレータを組み込んでCSSの編集などができる。

マークアップについて

  • HTML4.01
  • XHTML1.0
    に対応

viewport

  • タテ・ヨコのモード変更で表示サイズが変わってしまう（ブレる）のは良くない（らしい）。
<meta name="viewport" 
id="iphone-viewport"
content="width=980,

initial-scale=1.0,

user-scalable=yes,

maximum-scale=3.0" />
  • 上記がデフォルト値
<meta name="viewport" 

id="iphone-viewport" 

content="width=480, 

user-scalable=no,

maximum-scale=0.6667" />
  • このように指定してブレるのを防ぐ
  • 480 x 0.6667 = 320.016
  • "Holy Grail"と呼ばれる手法

CSSの指定方法

<link media="handheld" href="ipodtouch.css" type="text/css" rel="stylesheet" />

<link media="screen" href="pc.css" type="text/css" rel="stylesheet" />
  • media="handheld"ではiPhoneには適用されない。
  • PHPで分岐させるなどもオススメしない。
  • 機種判別させるには今後もずっとUAの情報を追っていかなければならない。
  • 下記のようにCSS3のmediaqueryを使う
<link media="only screen and (max-device-width:480px)" href="ipodtouch.css" type="text/css" rel="stylesheet" />

<link media="screen and (min-device-width:481px)" href="pc.css" type="text/css" rel="stylesheet" />

<!--[if IE]>

<link href="ie.css" type="text/css" rel="stylesheet" />

< ![endif]-->
  • 480px以下（iPhone用）と481px以上（PC用）両方の指定が必要。
  • さらに、これだとIEで反映されないので、コンディショナルコメントでIE用を記述。

CSS3

a[href^="mailto:"] {

background-image:url(email.gif);

}
  • 正規表現の行頭（^）、行末（$）みたいなのが使える

その他

  • line-height値は（個人的な感覚では）1.8くらいがいいのでは？
  • margin,paddingを大きめに取る
  • :hoverは使えない。右クリックもない。
  • どこをタップしたか分かるように下記のような記述をする。 
a {

-webkit-tap-highlight-color: rgba(00,33,99,0.60);

}

参考リンク

iui – User Interface (UI) Library for Safari development on iPhone
http://code.google.com/p/iui/
iPhoneアプリ用のフレームワーク
Joe Hewitt
iUI、FacebookのiPhoneインターフェース、FirefoxのアドオンFirebugを作った人
iPhoneWebDev
http://groups.google.com/group/iphonewebdev
CSS3の対応比較表
http://westciv.com/iphonetests/

タテとヨコでサイズがブレるのは今まで気にしたことがなかった。
横にしたら文字サイズが大きくなって読みやすくなる、くらいにしか思ってなかったんだけど、使い込んでいくと違うのかな。

あとmetaタグでいろいろ書き込まないといけないのはどうなんだろう。サイズで振り分ける（480px以上か以下か）ってことは、そのサイズであればiPhone以外の端末にも適用されるってことだよね。そこらへんは作るときにきちんと考える必要がありそう。

実は今度出すサービスではぜひiPhoneに対応したいなぁと思って今回参加したんだけど、「よっしゃやるでー！」から「まぁできたらやろうかな」にテンションが下がった感じは否めない。

まあ、それはそれとしていろいろ知らなかったことが知れたので面白いイベントでした。

one more thing.
11月に”Web Directions East”という海外の著名な方を招いてのイベントが企画されていますが、そのお値段について言及がありまして、セッションが3万いくら？ハンズオンのが4万いくら？というお話でして（1日でね）、あら?という感じです。さすがに個人で気軽に出せる金額じゃないし。アンケートに回答したら抽選で招待とのことだったので、メールアドレスをしっかり書いときました。