HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会〜先行事例紹介／交流会〜

HTML5を用いた
セマンティックな文書作成

株式会社サイバード
大曽根圭輔

12年12月14日金曜日

自己紹介

• 氏名
大曽根圭輔

• 経歴
茨城県に生まれる
筑波大学大学院を卒業
2012年度に新卒として(株)サイバードに入社


自己紹介

• 学生時代の研究
HAI、人工知能、感性工学、人間中心システム

• Twitter
@dr_paradi

• Facebook
本名


現在の業務

• スマホ向けのWebサイトを作ったり
• iOSのアプリ作ったり
• Facebookアプリ作ったり。。。


現在の業務

•
業務でもHTML5！
-> スマートフォン対応


はじめての外部発表！


発表の流れ
• 自己紹介
• HTML5とは？
• セマンティックとは
• テキストレベルの意味付け
• アウトラインの構造化
• まとめ

ここで一旦質問

http://www.ﬂickr.com/

HTML5といえば？

ググってみた


HTML5とは


もっとセマンティックな文書を

もっとリッチなWebアプリを

= もっと標準化された技術で

もっと扱いやすく
（互換性, 有用性, 相互運用性, ユニバーサル・アクセス）

これらを実現するための仕様

もっとセマンティックな文書を！


セマンティック
データの意味, 意味規則
つまり・・・

HTML5では、文書が持つデータの意味をよ
り明確に表すことができるようになる


セマンティック
HTML5では、文書が持つデータの意味を
より明確に表すことができるようになる

逆に言うと

「文書の中身」を理解しないといけない
「表現の方法」を理解しないといけない

ということ

今まで(HTML4)
<div>ヘッダー</div>

<div> <div> <div>
ナビゲーシサイドバー
記事
ョン広告
</div> </div> </div>

<div>フッター</div>


これから(HTML5)
<header>ヘッダー</header>

<nav> <article> <aside>
ナビゲーサイドバー
記事
ション広告
</nav> </article> </aside>

<footer>フッター</footer>


これから(HTML5)

<nav>
<article> <aside>
ナビゲー
ション
記事サイドバー
広告
</nav> </aside>
</article>


メインコンテンツを
これから(HTML5)
機械的に抽出できる
＝
SEO対策になる

<nav>
<article> <aside>
ナビゲー
ション
広告
</nav> </aside>
</article>


メインコンテンツを
これから(HTML5)
機械的に抽出できる
音声読み上げ機能
＝
SEO対策になる

<nav>
<article> <aside>
ナビゲー
ション
広告
</nav> </aside>
</article>


リッチな表現に注目がいきがちな
(広義の)HTML5


見た目も重要(HTML5+CSS3)


「セマンティック」
にマークアップすることも
大事にしませんか？


HTML (というかWorld Wide Web)は
もともと学術的な情報交換のために
開発された


環境に左右されることなく文章の内容を
読者に「正しく」伝えることが重要


テキストの意味を正しく伝える


いくつかを紹介
• <em>
• <b>
• <cite>
• <q>
• <br>

<em>
・emphasisの略
・そのコンテンツの強調
・重要であることを表現したい場合


突然ですが


剛力彩芽はかわいい


<em>剛力彩芽</em>はかわいい

剛力彩芽は<em>かわいい</em>


文章の内容(意図)を正しく伝えられる


<b>
・通常の文章や言葉との区別を表す
・記事のリード文
・レビューの中での商品名
・文章内のキーワード


剛力彩芽の写真集
<b>『 AYAME GOURIKI 』</b>
が発売しました。


<q>
・quotationの略

・他のソースから引用された短文

・ダブルクォーテーションが自動的に表示


<cite>
・作品（小説、新聞、ゲーム等）のタイトル
・人の名前をcite要素で囲んではいけない

・人の名前を装飾する場合span要素で囲み
CSSを使用


私は、ノルウェイの森に出てくる
春の熊くらいに好きだよ
という表現が好きです


<p>
私は、
<cite> ノルウェイの森 </cite>
に出てくる
<q> 春の熊くらいに好きだよ </q>
という表現が好きです
</p>


間違った例


<p>
私は,
<cite> スティーブ・ジョブズ </cite> の
<q> STAY HUNGRY. STAY FOOLISH. </q>
という言葉が好きです。
</p>


<br>
・breakの略

・改行を表す


見た目を整えるためには使わない


どういうときに使うかというと


<p>
ちはやぶる<br>
��神代も聞かず<br>
��龍田川<br>
��からくれなゐに<br>�
��水くくるとは<br>
</p>


正しくマークアップすれば

文章の内容を正しく伝えることができるように


articleとsectionの
違いって？


HTML5
<article>,
今まで <section>,
<div> <nav>,
<header>,
<footer>...

<article>
文書やサイトの独立して完結する部分

内容だけ抜き出しても違和感がないもの

ブログやニュースの記事など


<section>
文書内の章や節を表す

意味や機能のひとまとまりの区切り


• 或阿呆の一生
芥川龍之介
一時代
それは或本屋の二階だつた。二十歳の彼は書棚にかけた
西洋風の梯子に登り、＜中略＞彼は暫く梯子の上からかう
云ふ彼等を見渡してゐた。……

二母
狂人たちは皆同じやうに鼠色の着物を着せられてゐた。
＜中略＞しかしそれは薄い苔をまだらにぼんやりと白しら
ませてゐた。


• 或阿呆の一生 <article>
芥川龍之介
一時代

二母
ませてゐた。


• 或阿呆の一生 <article>
芥川龍之介
一時代 <section>

二母 <section>
ませてゐた。


• 一時代
それは或本屋の二階だつた。二十歳の彼は書棚にかけた西
洋風の梯子に登り、新らしい本を探してゐた。モオパスサ
ン、ボオドレエル、ストリントベリイ、イブセン、シヨウ、
トルストイ、……

そのうちに日の暮は迫り出した。しかし彼は熱心に本の背
文字を読みつづけた。そこに並んでゐるのは本といふよりも
寧ろ世紀末それ自身だつた。ニイチエ、ヴエルレエン、ゴン
クウル兄弟、ダスタエフスキイ、ハウプトマン、フロオベエ
ル、……


• 一時代 <section>

ル、……


• 一時代 <section>
<p>

<p>
ル、……


あくまで一例
人の主観による場合も


• 一時代それは或本屋の二階だつた。二十歳の彼は書
棚にかけた西洋風の梯子に登り、新らしい本を探してゐ
た。モオパスサン、ボオドレエル、ストリントベリイ、
イブセン、シヨウ、トルストイ、……そのうちに日の暮
は迫り出した。しかし彼は熱心に本の背文字を読みつづ
けた。そこに並んでゐるのは本といふよりも寧ろ世紀末
それ自身だつた。ニイチエ、ヴエルレエン、ゴンクウル
兄弟、ダスタエフスキイ、ハウプトマン、フロオベエ
ル、……


機械(ブラウザ)からみてわかりやすい

ソースコードをみれば人間もわかりやすい


<article>
• 河童・或阿呆の一生
大導寺信輔の半生
玄鶴山房
蜃気楼
河童
或阿呆の一生
歯車


<article>
• 河童・或阿呆の一生
大導寺信輔の半生 <article>
玄鶴山房 <article>
蜃気楼 <article>
河童 <article>
或阿呆の一生 <article>
歯車
<article>


きちんと構造化するとわかりやすい


発表の流れ
• 自己紹介
• HTML5とは？
• セマンティックとは
• アウトラインの構造化
• テキストレベルの意味付け
• まとめ

ご清聴ありがとうございました。


参考文献

• HTML5マークアップガイドブック
• html5.jp
• 理系発想の文章術
• 20歳の自分に受けさせたい文章講座


HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会〜先行事例紹介／交流会〜

Recommandé

Recommandé

Contenu connexe

Similaire à HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会〜先行事例紹介／交流会〜

Similaire à HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会〜先行事例紹介／交流会〜 (20)

Plus de 圭輔大曽根

Plus de 圭輔大曽根 (12)