Your SlideShare is downloading. ×

Sendai.html5#2

721

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
721
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1.      東北デベロッパーズコミュニティ Sendai.html5 #2スマートフォンサイト製作とHTML5+CSS3 有限会社ノヴァトレード 若林 怜帆人 2012年6月30日
  • 2. 有限会社ノヴァトレード若林 怜帆人(わかばやし れおと)東京出身亘理で5年間ウェブシステム開発HTML+CSS約12年LAMP 6年@rw_nueFB : reoto.wakabayashi
  • 3. アジェンダ・概要・スマートフォンサイト基礎・HTML5とスマートフォンサイト・CSS3とスマートフォンサイト・CSS3ジェネレータの使い方・まとめ
  • 4. 本編の前に・・
  • 5. トルコ語講座
  • 6. トルコ共和国 トルコ共和国(トルコきょうわこく、トルコ語: TürkiyeCumhuriyeti)、通称トルコは、西アジアのアナトリア半島(小アジア)と東ヨーロッパのバルカン半島東端の東トラキア地方を領有する、アジアとヨーロッパの2つの大州にまたがる共和国。首都 はアナトリア中央部のアンカラ。 http://ja.wikipedia.org/wiki/%E3%83%88%E3%83%AB%E3%82%B3
  • 7. 世界三大料理ドンドゥルマドネルケバブ ヨーグルトトロイの木馬
  • 8. トルコ語・・・アルタイ諸語 定説には至っていないが 日本語もアルタイ諸語に 含めることがある (wikipedia アルタイ諸語)
  • 9. 発音練習
  • 10. 日本語にない母音Ö      Ü      İ      
  • 11. 日本語にない母音Ö おの口でえÜ うの口でいİ いの口でう
  • 12. スマートフォンサイト基礎
  • 13. スマートフォンサイトの特徴 画面が小さい タッチ操作 縦横比が可変 回線が遅い製作においてHTML5+CSS3前提
  • 14. 対応状況を調べるhttp://www.findmebyip.com/litmus/ http://caniuse.com/
  • 15. スマートフォンならではの コンテンツSPからの利用を想定したコンテンツ PCと利用機会が異なる SNSとの連携
  • 16. PCサイトのスマートフォン閲覧対応 元々PC向けだったコンテンツを スマートフォンからの閲覧も考慮して 最適化を行う
  • 17. PCサイトのスマートフォン閲覧対応1.専用コンテンツに振り分ける2.@mediaルール(CSS3 Media Queries)3.そのまま
  • 18. 専用コンテンツに振り分ける .htaccessでディレクトリをアプリケーションでテンプレートを 振り分ける
  • 19. .htaccessというよりはmod_rewrite
  • 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. アプリケーションで テンプレート切り替え例) CakePHPAppController.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. HTML5とスマートフォンサイト
  • 27. DOCTYPE宣言<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//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><div id=”footer></div>↓<header></header><article></article><footer></footer>http://www.w3.org/TR/2011/WD-html5-20110525/sections.htmlhttp://www.w3.org/WAI/GL/wiki/Using_HTML5_section_elements
  • 30. ソースコードの確認
  • 31. Web Storage ブラウザにデータを蓄積する 欲しいデータが保存済みなら リクエストが発生しないそのセッションのみのSession Storage 永続的なLocalStorage
  • 32. CSS3とスマートフォンサイト
  • 33. level3セレクタ 属性セレクタ 擬似クラス 擬似要素http://www.w3.org/TR/selectors/
  • 34. CSS3プロパティ CSS Gradients Text Shadow Border Radius など・・・http://meiert.com/en/indices/css-properties/
  • 35. CSS3ジェネレータの使い方
  • 36. 表示速度の違い
  • 37. おまけですが Data URI schemeWebStorage使ってみました
  • 38. まとめ HTML5+CSS3を使うと簡潔な記述でリクエストの少ない スマートフォンサイト向けの コーディングができる
  • 39.      東北デベロッパーズコミュニティ Sendai.html5 #2ご清聴ありがとうございました 有限会社ノヴァトレード 若林 怜帆人 2012年6月30日

×