Download as PDF, PPTX
![UAにSPぽいものが含まれていたら
/sp/アクセスしたファイル名に転送
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|
iPod|iPad|Android|BlackBerry)
RewriteRule ^sp - [L]
RewriteCond %{HTTP_USER_AGENT} (iPhone|
iPod|iPad|Android|BlackBerry)
RewriteRule ^(.*)$ /sp/$1 [R]](https://image.slidesharecdn.com/sendai-html52-120630110301-phpapp01/85/Sendai-html5-2-20-320.jpg)
Sendai.html5#2
- 1. 東北デベロッパーズコミュニティ Sendai.html5 #2 スマートフォンサイト製作とHTML5+CSS3 有限会社ノヴァトレード 若林 怜帆人 2012年6月30日
- 2.
- 3.
- 4.
- 5.
- 6. トルコ共和国 トルコ共和国（トルコきょうわこく、トルコ語: Türkiye Cumhuriyeti）、通称トルコは、西アジアのアナトリア半島（小ア ジア）と東ヨーロッパのバルカン半島東端の東トラキア地方を領 有する、アジアとヨーロッパの2つの大州にまたがる共和国。首都 はアナトリア中央部のアンカラ。 http://ja.wikipedia.org/wiki/%E3%83%88%E3%83%AB%E3%82%B3
- 7.
- 8. トルコ語・・・アルタイ諸語 定説には至っていないが 日本語もアルタイ諸語に 含めることがある （wikipedia アルタイ諸語）
- 9.
- 10.
- 11.
- 12.
- 13. スマートフォンサイトの特徴 画面が小さい タッチ操作 縦横比が可変 回線が遅い 製作においてHTML５＋CSS３前提
- 14. 対応状況を調べる http://www.findmebyip.com/litmus/ http://caniuse.com/
- 15. スマートフォンならではの コンテンツ SPからの利用を想定したコンテンツ PCと利用機会が異なる SNSとの連携
- 16. PCサイトのスマートフォン閲覧対応 元々PC向けだったコンテンツを スマートフォンからの閲覧も考慮して 最適化を行う
- 17.
- 18.
- 19.
- 20. UAにSPぽいものが含まれていたら /sp/アクセスしたファイル名に転送 RewriteEngine On RewriteCond %{HTTP_USER_AGENT} (iPhone| iPod|iPad|Android|BlackBerry) RewriteRule ^sp - [L] RewriteCond %{HTTP_USER_AGENT} (iPhone| iPod|iPad|Android|BlackBerry) RewriteRule ^(.*)$ /sp/$1 [R]
- 21. アプリケーションで テンプレート切り替え 例） CakePHP AppController.phpのbeforeFilter （必ず通る処理） if(preg_match('!iPhone|iPod|Android|BlackBerry!' , $ua)) { $this->layout = 'smartphone'; }
- 22. @mediaルール（Media Queries) @media ルールで 適用させるcssファイルを 振り分ける http://m.yahoo.co.jp/
- 23. そのまま タッチ操作やズームを考慮して SPからも使いやすいように 一部要素を最適化する
- 24. スマートフォンサイトの特徴に沿った施策 画面が小さい・・UI、表示コンテンツ タッチ操作・・UI、リンク、メニュー 縦横比が可変・・リキッドデザイン 回線が遅い・・リクエストやファイル サイズを減らす
- 25.
- 26.
- 27. DOCTYPE宣言 <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ↓ <!DOCTYPE html>
- 28. 文字コード指定 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> ↓ <meta charset="UTF-8">
- 29. section要素 <div id=”header”></div> <div id=”main_article”></div> <divid=”footer></div> ↓ <header></header> <article></article> <footer></footer> http://www.w3.org/TR/2011/WD-html5-20110525/sections.html http://www.w3.org/WAI/GL/wiki/Using_HTML5_section_elements
- 30.
- 31. Web Storage ブラウザにデータを蓄積する 欲しいデータが保存済みなら リクエストが発生しない そのセッションのみのSession Storage 永続的なLocalStorage
- 32.
- 33. level3セレクタ 属性セレクタ 擬似クラス 擬似要素 http://www.w3.org/TR/selectors/
- 34. CSS3プロパティ CSS Gradients Text Shadow Border Radius など・・・ http://meiert.com/en/indices/css-properties/
- 35.
- 36.
- 37. おまけですが Data URI scheme WebStorage使ってみました
- 38. まとめ HTML5＋CSS3を使うと 簡潔な記述でリクエストの少ない スマートフォンサイト向けの コーディングができる
- 39. 東北デベロッパーズコミュニティ Sendai.html5 #2 ご清聴ありがとうございました 有限会社ノヴァトレード 若林 怜帆人 2012年6月30日