サイバーガーデンbiz「スマートフォンサイト制作講座 名古屋」に参加しました！
スマートフォン
サイバーガーデンbiz 益子貴寛（ましこ たかひろ）さんによる「スマートフォンサイト制作講座 名古屋」に参加しました。とうとうセミナー３日目です。場所はベースキャンプ名古屋さんで行われました。今回はスマートフォンサイト制作講座ということで、実際にサイトを制作して学びました。
スマートフォンサイト制作のための知識
実際に手を動かす前にスマートフォンサイト制作にあたっての知識も教えてもらいました。全てではないですが、箇条書きにしておきます！
- スマートフォンサイトを制作する際にはiPhoneを基準に制作すると安定する
- 中でも縦のときの操作性を念頭に置いて制作する
- 検証するためには白ロムを買ってきてWi-Fiにつなぐと、契約するよりお財布に優しい
- Androidは画面サイズがバラバラなので、基本は320×480pxで考える
- レスポンシブデザインはすべてのデザインを読み込んでまうため、案件によっては別に作るのかどうかを考える
- iPhoneの場合はiOS5、6 Androidは2.3、4.0、4.1 Windows PhoneはIE9、IE10を気にして制作する
- IE8はHTML５をサポートしていないので「html５ shiv」を入れる(HTML5.JP | HTML5 を IE や Firefox 2 でも使えるようにする方法)
スマートフォンサイト制作
スクリーンショット
今回実際にスマートフォンサイトを制作する際にhtml5を使いました。といっても１から自分で書いた訳ではなく、もらったファイルにはすでにHTMLが書かれていました。始めはXHTMLで書かれていたのですが、html5に自分で直すことでより変更点がわかりやすくなっていました。html5で画像は実際にコードを書き換えたサイトです。
スマートフォンサイトの制作のコツ
- widthは「auto」で解除
- floatは「none」で解除
- スマートフォンに不要なUIは「display:none;」
- font-sizeは「medium」が便利！
- CSS3セレクタを使いまくる
- ベンダープレフィックスは心配なら全部書く
apple-touch-icon
apple-touch-icon
ホーム画面に追加ボタンの画像を設定できるようになります。114×114px無いといけません。iPhoneからみると角丸になっていますが、正四角形の状態でも自動的に角丸になってくれるそうです。これをクライアントさんに紹介すると、ちょっとできる人みたいに見えるかもしれません！
書き方：＜link rel="apple-touch-icon" href=""＞
なんか、詳しそうなサイトも見つけましたので貼っておきます。
Web担当者Forum 「iPhone/iPadのホーム画面用アイコンapple-touch-icon.pngをサイトに設定しよう」
とりあえず私もサイトのトップページだけ設定してみました〜！
jQuery mobile
最近よく聞くjQuery mobileに関してもお話がありました。簡単なものだと思っていたんですが、お話を聞くとどうやら難しいみたいですね。jQuery mobileとは、スマートフォンサイト用のフレームワークです。（＊フレームワーク→フレームワークが主。ユーザーが合わせる。ライブラリ→ユーザーが主。ライブラリが合わせる。）フレームワークが主となっているので、使うなら始めから入れておくこと。そして、jQuery mobileスマートフォンサイトのみに使うことができます。
jQuerymobile 本家サイト
