Embed Size (px)
DESCRIPTION
Mu seminor2014 01b
Citation preview
マークアップ講座
HTML
1. HTMLとは 2. 『HTML5』とはなにか 3. HTML5規格 4. HTML5要素の役割 5. HTML5実装 6. Microdataの役割と実装 7. HTML運用の効率化
1. HTMLとは 2. 『HTML5』とはなにか 3. HTML5規格 4. HTML5要素の役割 5. HTML5実装 6. Microdataの役割と実装 7. HTML運用の効率化
1. HTMLとは
1. 世界初・最古のHTML
2. 歴史
3. W3C
4. JavaScript
5. JSON
6. HTMLの基本構造
1. HTMLとは
世界初・最古のHTML
『The World Wide Web project』 http://info.cern.ch/hypertext/WWW/TheProject.html
1. HTMLとは
世界初・最古のHTML
1991年8月6日 Sir Timothy John Berners-Lee （ティム・バーナーズ＝リー） !
CERN ： 欧州原子核研究機構 数千人に効率よく情報を行き渡らせるためのシステム開発の一貫
1. HTMLとは
歴史• 1991年8月6日 ： 初公開
• 1993年4月30日 ： WWW技術の無償化
• 1994年 ： World Wide Web Consortium（W3C）設立
1. HTMLとは
W3C
• HTML • CSS • DOM ： JavaScriptのInterface
※ 日本ホスト ： 慶応SFC 萩野達也 環境情報学部教授
1. HTMLとは
JavaScript
Ecma International（ECMAScript - ECMA-262） ： JavaScriptのObjectやMethod !
Mozilla Foundation ： DOMとEcmaを結合、とりまとめ役的 !
※ ステークホルダーが複数
1. HTMLとは
JSON
IETF（Internet Engineering Task Force） RFC 4627 !
W3Cの親組織
1. HTMLとは
HTMLの基本構造
!<span id="id-name">text</span> !<start-tag attribute="value">content</end-tag> !<開始タグ 属性="属性値">コンテンツ</終了タグ> !<!--コメント-->
1. HTMLとは
HTMLの基本構造
!<img type="path"> !（<img src="path" />）
Empty-Element Tags （空要素、空要素タグ）
1. HTMLとは 2. 『HTML5』とはなにか 3. HTML5規格 4. HTML5要素の役割 5. HTML5実装 6. Microdataの役割と実装 7. HTML運用の効率化
2. 『HTML5』とはなにか
HTMLマークアップの仕様のみにとどまらずWeb全体の枠組みを刷新する新しい規格群を表す用語 HTMLのメジャーアップデート第５版2014年正式勧告目標（現在未勧告）
1. HTMLとは 2. 『HTML5』とはなにか 3. HTML5規格 4. HTML5要素の役割 5. HTML5実装 6. Microdataの役割と実装 7. HTML運用の効率化
• セマンティック ・・・ ① • CSS3 ・・・ ② • メディア、グラフィック、ストレージ、
API、通信、パフォーマンス
3. HTML5規格
HTML5規格
1. HTMLとは 2. 『HTML5』とはなにか 3. HTML5規格 4. HTML5要素の役割 5. HTML5実装 6. Microdataの役割と実装 7. HTML運用の効率化
セマンティックWebに則ったHTML5要素 !
『HTML5』 http://www.w3.org/TR/html5/
4. HTML5要素の役割
HTML5要素の役割
1. コンテンツモデルによる要素分類
2. 要素タイプによる分類
• ブロックレベル、インラインという観点は抹消
4. HTML5要素の役割
要素分類
4-1. コンテンツモデルによる要素分類
1. メタデータ・コンテンツ（Metadata content） 2. フロー・コンテンツ（Flow content） 3. セクショニング・コンテンツ（Sectioning content） 4. ヘッディング・コンテンツ（Heading content） 5. フレージング・コンテンツ（Phrasing content） 6. エンベッディッド・コンテンツ（Embedded content） 7. インタラクティブ・コンテンツ（Interactive content）
コンテンツモデル（Content models） による要素分類
4-1. コンテンツモデルによる要素分類
1. メタデータ・コンテンツ（Metadata content）
http://www.w3.org/TR/html5/dom.html#metadata-content http://www.html5.jp/tag/models/index.html#metadata-content-0
設定系要素 !
base link meta noscript script style template title
4-1. コンテンツモデルによる要素分類
2. フロー・コンテンツ（Flow content）
http://www.w3.org/TR/html5/dom.html#flow-content http://www.html5.jp/tag/models/index.html#flow-content-1
本文格納系 a abbr address area (if it is a descendant of a map element) article aside audio b bdi bdo blockquote br button canvas cite code data datalist del dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hr i iframe img input ins kbd keygen label main map mark math meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong sub sup svg table template textarea time u ul var video wbr text
4-1. コンテンツモデルによる要素分類
3. セクショニング・コンテンツ（Sectioning content）
http://www.w3.org/TR/html5/dom.html#sectioning-content http://www.html5.jp/tag/models/index.html#sectioning-content-0
構成系 !
article aside nav section
4-1. コンテンツモデルによる要素分類
4. ヘッディング・コンテンツ（Heading content）
http://www.w3.org/TR/html5/dom.html#heading-content http://www.html5.jp/tag/models/index.html#heading-content-0
見出し系 !
h1 h2 h3 h4 h5 h6 hgroup
4-1. コンテンツモデルによる要素分類
5. フレージング・コンテンツ（Phrasing content）
http://www.w3.org/TR/html5/dom.html#phrasing-content http://www.html5.jp/tag/models/index.html#phrasing-content-1
文章系 !
a abbr area (if it is a descendant of a map element) audio b bdi bdo br button canvas cite code data datalist del dfn em embed i iframe img input ins kbd keygen label map mark math meter noscript object output progress q ruby s samp script select small span strong sub sup svg template textarea time u var video wbr text
4-1. コンテンツモデルによる要素分類
6. エンベッデッド・コンテンツ（Embedded content）
http://www.w3.org/TR/html5/dom.html#embedded-content http://www.html5.jp/tag/models/index.html#embedded-content-2
外部リソース系 !
audio canvas embed iframe img math object svg video
4-1. コンテンツモデルによる要素分類
7. インタラクティブ・コンテンツ（Interactive content）
http://www.w3.org/TR/html5/dom.html#interactive-content http://www.html5.jp/tag/models/index.html#interactive-content-0
インタラクション系 !
a audio (if the controls attribute is present) button embed iframe img (if the usemap attribute is present) input (if the type attribute is not in the hidden state) keygen label object (if the usemap attribute is present) select textarea video (if the controls attribute is present)
4-2. 要素タイプによる分類
1. ルート要素 （The root element） 2. メタデータ要素 （Document metadata） 3. セクション要素 （Sections） 4. グルーピング要素 （Grouping content） 5. セマンティックテキスト要素 （Text-level semantics） 6. エディット要素 （Edits） 7. 組み込み要素 （Embedded content） 8. テーブル要素 （Tabular data） 9. フォーム要素 （Forms） 10. スクリプト要素 （Scripting） 11. インタラクティブ要素 （Details content）
要素タイプによる要素分類http://www.html5.jp/tag/elements/index.html
1. ルート要素 （The root element）
html
4-2. 要素タイプによる分類
2. メタデータ要素 （Document metadata）
head title base link meta style
3. セクション要素 （Sections）
body article section nav aside h1～h6 header footer address
4-2. 要素タイプによる分類
4. グルーピング要素 （Grouping content）p hr pre blockquote ol ul li dl dt dd figure figcaption div main
5. セマンティックテキスト要素 （Text-level semantics）
a em strong small s cite q dfn abbr data time code var samp kbd sub sup i b u mark ruby rb rt rtc rp bdi bdo span br wbr
4-2. 要素タイプによる分類
6. エディット要素 （Edits）
ins del
4-2. 要素タイプによる分類
7. 組み込み要素 （Embedded content）
img iframe embed object param video audio source track map area
8. テーブル要素 （Tabular data）
table caption colgroup col tbody thead tfoot tr td th
4-2. 要素タイプによる分類
9. フォーム要素 （Forms）
form label input button select datalist optgroup option textarea keygen output progress meter fieldset legend
10. スクリプト要素 （Scripting）
script noscript template canvas
4-2. 要素タイプによる分類
11. インタラクティブ要素 （Details content）
details summary dialog
HTML属性
グローバル属性 （Grobal attributes）
accesskey class contenteditable contextmenu dir draggable dropzone hidden id lang spellcheck style tabindex title
4. HTML5要素の役割
1. HTMLとは 2. 『HTML5』とはなにか 3. HTML5規格 4. HTML5要素の役割 5. HTML5実装 6. Microdataの役割と実装 7. HTML運用の効率化
xhtml1.0のコード!<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>[title値]</title> <meta name="copyright" content="[コピーライト]" /> <meta name="description" content="[ページ概要]" /> <meta name="keywords" content="[キーワード],[キーワード],[キーワード]・・・" /> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="canonical" href="[正規化フルパス URL]" /> <!--css--> <link rel="stylesheet" href="[スタイルシートパス]" /> <!--/css--> </head> <body>
5. HTML5実装
!<p>contents here.</p> !<!--JavaScript--> <script src="[JavaScriptパス]"></script> <script> /*[ローカル JavaScript]*/ </script> <!--/JavaScript--> </body> </html>
http://codepen.io/sekiyaeiji/pen/Kryxm?editors=100
xhtml1.0のコード5. HTML5実装
変化
html5のコード!<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>[title値]</title> <meta name="author" content="[コピーライト]"> <meta name="description" content="[ページ概要]"> <meta name="keywords" content="[キーワード],[キーワード],[キーワード]・・・"> <link rel="shortcut icon" href="/favicon.ico"> <link rel="canonical" href="[正規化フルパス URL]"> <!--css--> <link rel="stylesheet" href="[スタイルシートパス]"> <!--/css--> </head> <body>
5. HTML5実装
!<p>contents here.</p> !<!--JavaScript--> <script src="[JavaScriptパス]"></script> <script> /*[ローカル JavaScript]*/ </script> <!--/JavaScript--> </body> </html>
http://codepen.io/sekiyaeiji/pen/CarpA?editors=100
5. HTML5実装
html5のコード
html5のコード 解説!<!DOCTYPE html> ：
HTML5にて「DOCTYPE」の役割は薄い、DTDなどのスキーマは設定されない
!<html lang=“ja"> ：
一般的には「lang属性」のみ指定 （※ manifest属性 ： アプリオフライン動作向け）
!<meta charset=“utf-8"> ：「charset属性」が新設
!<meta name="author" content=“[コピーライト]"> ：
「meta name="copyright"」は廃止
5. HTML5実装
コード比較!<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>[title値]</title> <meta name="copyright" content="[コピーライト]" /> <meta name="description" content="[ページ概要]" /> <meta name="keywords" content="[キーワード],[キーワード],[キーワード]・・・" /> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="canonical" href="[正規化フルパス URL]" /> <!--css--> <link rel="stylesheet" href="[スタイルシートパス]" /> <!--/css--> </head> <body>
5. HTML5実装
コード比較!<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>[title値]</title> <meta name="author" content="[コピーライト]"> <meta name="description" content="[ページ概要]"> <meta name="keywords" content="[キーワード],[キーワード],[キーワード]・・・"> <link rel="shortcut icon" href="/favicon.ico"> <link rel="canonical" href="[正規化フルパス URL]"> <!--css--> <link rel="stylesheet" href="[スタイルシートパス]"> <!--/css--> </head> <body> !
5. HTML5実装
利用頻度の高い要素5. HTML5実装
要素 役割
div − （汎用ブロック） divisionspan − （汎用インライン） spanp 段落 paragrapha ハイパーリンク anchorimg 画像 imagebr 改行 breakehr 水平線 horizontal ruleul 順序なしリスト unordered listli リスト listdl 定義リスト difinition listdt 定義リストタイトル difinition list titledd 定義リストデータ difinition list datah1〜6 見出し heading
※ 上記以外にtable、form系要素など機能的な要素群
利用頻度の高いhtml5新設要素5. HTML5実装
要素 役割
header ヘッダー header
footer フッター footer
nav ナビゲーション navigation
article 記事 article
section 章 section
aside その他 aside
main メイン main
要素利用サンプル5. HTML5実装
http://codepen.io/sekiyaeiji/pen/gGcHs?editors=100
1. HTMLとは 2. 『HTML5』とはなにか 3. HTML5規格 4. HTML5要素の役割 5. HTML5実装 6. Microdataの役割と実装 7. HTML運用の効率化
『HTML Microdata』 http://www.w3.org/TR/microdata/ !
『microdata について - ウェブマスター ツール ヘルプ』 https://support.google.com/webmasters/answer/176035?hl=ja
6. Microdataの役割と実装
6. Microdataの役割と実装
Microdataでなにができる？
『Google検索 ： iPad Air Wi-Fiモデル 16GB』 http://goo.gl/LHjUrr
6. Microdataの役割と実装
Microdataでなにができる？
6. Microdataの役割と実装
Microdata属性
itemscope itemprop itemtype itemref itemid
6. Microdataの役割と実装Microdataのサンプルコード
『価格.com - APPLE iPad Air Wi-Fiモデル 16GB MD788J/A [シルバー] 価格比較』 http://kakaku.com/item/K0000587933/
6. Microdataの役割と実装Microdataのサンプルコード
!<div itemscope itemtype="http://schema.org/Product"> <span itemprop="name">iPad Air Wi-Fiモデル 16GB</span></a> <span itemprop="name">iPad Air Wi-Fiモデル 16GB MD788J/A [シルバー]</span> <img itemprop="image" alt="iPad Air Wi-Fiモデル 16GB MD788J/A [シルバー] 製品画像">! <div itemprop="offers" itemscope itemtype="http://schema.org/AggregateOffer"> <span itemprop="lowPrice">¥46,190</span> <span itemprop="highPrice">¥65,664</span> <span itemprop="offerCount">24</span> <meta itemprop="priceCurrency" content="JPY" /> </div> <li itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> <span itemprop="ratingValue">4.52</span> <span itemprop="reviewCount">47</span> </li> <span itemprop="name">iPad Air Wi-Fiモデル 16GB</span> </div>
6. Microdataの役割と実装
itemscope
包含する要素がitemであることを定義
6. Microdataの役割と実装
itemtypeitemtypeで囲まれた情報が「何を」表す情報のグループかを定義 !microformats.org Facebookが一部利用歴あり data-vocabulary.org Googleの検索エンジンが一部利用 schema.org Google、Microsoft、Yahoo!の検索大手3社が策定中
6. Microdataの役割と実装
itemtype
schema.orgの例 !
『Full Hierarchy - schema.org』 http://schema.org/docs/full.html !
大量なtype定義あり
6. Microdataの役割と実装
itemprop
情報１つ１つの意味属性を定義 !
『Article - schema.org』 http://schema.org/docs/schemas.html !
膨大（!!）なproperty定義あり
6. Microdataの役割と実装
itemのネスト
上記の例の通り、itemはネストすることができる !
ネストすると、情報の親子関係を明確にし、情報階層をより詳細に表現することができる
6. Microdataの役割と実装
itemのネスト
!<div itemscope itemtype="http://schema.org/Product"> <div itemprop="offers" itemscope itemtype="http://schema.org/AggregateOffer"></div> <li itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"></li> </div>
なぜ ”セマンティック”？
5. HTML5実装
ここで振り返り
なぜ ”セマンティック”？
5. HTML5実装
• どこに何が書いてある？ • 意味を伝達できる文書にする • データ伝達、交換、収集・分析を効
率化したり標準化できる
1. HTMLとは 2. 『HTML5』とはなにか 3. HTML5規格 4. HTML5要素の役割 5. HTML5実装 6. Microdataの役割と実装 7. HTML運用の効率化
7. HTML運用の効率化
1. モジュール指向マークアップ
2. ループオブジェクト
3. id属性とclass属性
4. id属性やclass属性の役割分離
5. a要素の指定範囲
6. 本文ブロックの定常テスト
7-1. モジュール指向マークアップ
7-1. モジュール指向マークアップ
Sample http://codepen.io/sekiyaeiji/pen/mlBon?editors=100 !
✕ Anti-pattern http://codepen.io/sekiyaeiji/pen/jbvil?editors=100
7-2. ループオブジェクト
『レディースファッション通販トップ - Yahoo!ショッピング - Ｔポイントが貯まる！使える！ネット通販』 !
http://goo.gl/tq71p5 !
「カテゴリグリッド」
7-2. ループオブジェクト
!<ul id="pc02_cr_2494" class="exCfx"> <li></li> <li></li> <li></li> <li></li> </ul> <ul id="pc02_cr_2494" class="exCfx"> <li></li> <li></li> <li></li> <li></li> </ul> <ul id="pc02_cr_2494" class="exCfx"> <li></li> <li></li> <li></li> <li></li> </ul>
7-2. ループオブジェクト
『トップスファッション通販 - ZOZOTOWN』 !
http://zozo.jp/category/tops/ !
「商品グリッド」
7-2. ループオブジェクト
!<ul id="searchResultList" class="goodsResult clearfix"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
7-2. ループオブジェクト
上記の例の場合、汎用性が高いのはZOZOTOWNのコード !
マルチカラムグリッドレイアウトは、inline-blockやfloatを利用して、 同型のマークアップのループになるように設計する
7-3. id属性とclass属性
id属性の特長
• １文書に１箇所のみ記述できる • JSセレクタにおいて高パフォーマンス
7-3. id属性とclass属性
class属性の特長
• １文書に複数記述できる • JSセレクタにおいて低パフォーマンス
7-3. id属性とclass属性
CSS要件におけるid属性と class属性の使い分け
HTML要素のセマンティック性が向上した影響もあり、 CSSセレクタとしての、id属性の役割はあまりなくなった現状では、 スタイル定義はなるべくclassのみで設定すべきである
7-3. id属性とclass属性
JavaSdript要件における id属性とclass属性の使い分け
JSセレクタとしてのid属性は、パフォーマンスにおいて存在価値が高い "文書に一意"という特性により、DOM走査において発見次第処理を中断する仕様になっているためである
7-4. id属性やclass属性の役割分離!<style> #sample {} </style> !<div id="sample">sampleを一意に定義</div> !<a href="#sample">sample</a> !<script> $('#sample'); </script>
7-4. id属性やclass属性の役割分離
この例では、 「sample」idにかかる役割が CSS、JS、idアンカーにまたがり、 id「sample」を変更した場合の影響範囲が大きい !
このようなコードは、 運用コストの上昇とバグのリスクを招く
7-4. id属性やclass属性の役割分離!<style> #sample {} </style> !<div id="sample js-sample link-sample">役割毎にsample、js-sample、link-sampleのようにidを分離する</div> !<a href="#link-sample">sample</a> !<script> $('#js-sample'); </script>
7-4. id属性やclass属性の役割分離
上記はJSセレクタとアンカー用のidに それぞれ命名規則「js-」「link-」を付与した例 !
「sample」、 「js-sample」、 「link-sample」の 機能的な役割が分離されており、 修正時に他機能への影響がなく シンプルな運用が可能
7-4. id属性やclass属性の役割分離
!<style> .sample {} </style> !<div class="sample js-sample">役割毎にsample、js-sampleのようにclassを分離する</div> !<script> $('.js-sample'); </script>
class属性においても、以下の通り分離する
7-5. a要素の指定範囲
Sample http://codepen.io/sekiyaeiji/pen/DlHsA?editors=100
どちらにも対応できるようにしておく
7-6. 本文ブロックの定常テスト
!テキストテキスト１０テキストテキスト２０テキストテキスト３０テキストテキスト４０テキストテキスト５０テキストテキスト６０テキストテキスト７０テキストテキスト８０テキストテキスト９０テキストテキスト００ !texttext10texttext20texttext30texttext40texttext50texttext60texttext70texttext80texttext90texttext00
以下を挿入して レイアウトが崩れないことを確認
※ インデントのお話
現在のコード内の集計結果 !
『Popular Coding Convention on Github』 http://sideeffect.kr/popularconvention#javascript
※ インデントのお話
さまざまな役割のメンバーが さまざまなエディタを通して 編集を行う !
→ より汎用的な可読性が求められている
