東北デベロッパーズコミュニティ                  Sendai.html5 #2スマートフォンサイト製作とHTML5+CSS3               有限会社ノヴァトレード                    ...
有限会社ノヴァトレード若林 怜帆人(わかばやし れおと)東京出身亘理で5年間ウェブシステム開発HTML+CSS約12年LAMP 6年@rw_nueFB : reoto.wakabayashi
アジェンダ・概要・スマートフォンサイト基礎・HTML5とスマートフォンサイト・CSS3とスマートフォンサイト・CSS3ジェネレータの使い方・まとめ
本編の前に・・
トルコ語講座
トルコ共和国    トルコ共和国(トルコきょうわこく、トルコ語: TürkiyeCumhuriyeti)、通称トルコは、西アジアのアナトリア半島(小アジア)と東ヨーロッパのバルカン半島東端の東トラキア地方を領有する、アジアとヨーロッパの2つの大...
世界三大料理ドンドゥルマドネルケバブ ヨーグルトトロイの木馬
トルコ語・・・アルタイ諸語 定説には至っていないが 日本語もアルタイ諸語に   含めることがある   (wikipedia アルタイ諸語)
発音練習
日本語にない母音Ö      Ü      İ      
日本語にない母音Ö おの口でえÜ うの口でいİ いの口でう
スマートフォンサイト基礎
スマートフォンサイトの特徴     画面が小さい      タッチ操作     縦横比が可変      回線が遅い製作においてHTML5+CSS3前提
対応状況を調べるhttp://www.findmebyip.com/litmus/       http://caniuse.com/
スマートフォンならではの     コンテンツSPからの利用を想定したコンテンツ    PCと利用機会が異なる       SNSとの連携
PCサイトのスマートフォン閲覧対応  元々PC向けだったコンテンツを スマートフォンからの閲覧も考慮して       最適化を行う
PCサイトのスマートフォン閲覧対応1.専用コンテンツに振り分ける2.@mediaルール(CSS3 Media Queries)3.そのまま
専用コンテンツに振り分ける  .htaccessでディレクトリをアプリケーションでテンプレートを          振り分ける
.htaccessというよりはmod_rewrite
UAにSPぽいものが含まれていたら/sp/アクセスしたファイル名に転送 RewriteEngine On RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|iPad|Android|BlackBerry) ...
アプリケーションで          テンプレート切り替え例) CakePHPAppController.phpのbeforeFilter(必ず通る処理)if(preg_match(!iPhone|iPod|Android|BlackBerry...
@mediaルール(Media Queries)    @media ルールで  適用させるcssファイルを      振り分ける    http://m.yahoo.co.jp/
そのままタッチ操作やズームを考慮して SPからも使いやすいように   一部要素を最適化する
スマートフォンサイトの特徴に沿った施策 画面が小さい・・UI、表示コンテンツ タッチ操作・・UI、リンク、メニュー 縦横比が可変・・リキッドデザイン 回線が遅い・・リクエストやファイル サイズを減らす
題材の紹介
HTML5とスマートフォンサイト
DOCTYPE宣言<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">            ...
文字コード指定<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">                           ↓                <meta...
section要素<div id=”header”></div><div id=”main_article”></div><div id=”footer></div>↓<header></header><article></article><f...
ソースコードの確認
Web Storage  ブラウザにデータを蓄積する  欲しいデータが保存済みなら   リクエストが発生しないそのセッションのみのSession Storage    永続的なLocalStorage
CSS3とスマートフォンサイト
level3セレクタ         属性セレクタ          擬似クラス           擬似要素http://www.w3.org/TR/selectors/
CSS3プロパティ           CSS Gradients           Text Shadow           Border Radius            など・・・http://meiert.com/en/indic...
CSS3ジェネレータの使い方
表示速度の違い
おまけですが    Data URI schemeWebStorage使ってみました
まとめ  HTML5+CSS3を使うと簡潔な記述でリクエストの少ない スマートフォンサイト向けの  コーディングができる
     東北デベロッパーズコミュニティ              Sendai.html5 #2ご清聴ありがとうございました           有限会社ノヴァトレード                 若林 怜帆人              ...
Upcoming SlideShare
Loading in …5
×

Sendai.html5#2

937 views
889 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
937
On SlideShare
0
From Embeds
0
Number of Embeds
57
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Sendai.html5#2

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

×