Windows 7 コミュニティ勉強会 with Tech Fielders 北陸編でのライトニングトークの資料です。

1. Webスライスから始めるmicroformats
- Learning microformats from Web Slices -
2009-07-18

2. 自己紹介
id : t32kでっす
26歳Webデザイナーっす
warikiru ってブログ書いてまっす
1

3. Webスライスとは
IE8新機能のひとつ
ＭＳＮスポーツ
2

4. Webスライスとは
お気に入りバーから更新を確認できる！
（更新が通知されると太字になる）
3

5. Webスライスとは
microformatsのhAtomを基に、単純なHTML
マークアップ（class属性やrel属性）を使用して、
Web ページの一部だけを購読可能にする。
HTML ページ内のコンテンツに直接適用でき
るため、個別にフィードファイルを用意しなくて
もいい。
4

6. Webスライスとは
簡単なWebスライスの例
（天気予報の更新情報）
<div class="hslice" id=“hogehoge">
<h2 class="entry-title">金沢 天気予報</h2>
<p class="entry-content">16時 現在：晴れ </p>
</div>
5

7. Webスライスとは
価格.comやYahoo!オークションでも採用
価格.com Yahoo! オークション
6

8. Webスライスとは
アドオンを使えばFirefoxでも利用可能！
WebChunks 0.20
7

9. Webスライスとは
Webスライス対応サイトも続々！
アドオンギャラリー: Web スライスの追加
8

10. でも、それってIE独自仕様じゃね？
( ﾟдﾟ)ﾊｯ!
9

11. そこで、hAtom～♪
( ´∀｀)つ
10

12. microformatsとは
Webサイトで人やイベント、ブログ記事、レ
ビュー、タグのような共通して公開されている
ものを記述する際に用いるマークアップパ
ターン
オープンな仕様（ここ重要 !）
11

13. hAtomとは
フィード配信コンテンツをHTMLで論理的に
マークアップして、コンテンツのアーカイブや
購読をしやすくするmicroformats
やりたいことはWebスライスとほぼ一緒！
12

14. WebスライスとhAtomの違い
Web Slice 0.9 役割 hAtom 0.1
- フィード全体 hfeed (optional)
hslice + id (required) ルートクラス hentry (required)
entry-title (required) 記事タイトル entry-title (required)
entry-content (optional) 記事の全内容 entry-content (optional)
- 記事の要約 entry-summary (optional)
- 更新日時 updated (required)
- 公開日時 published (optional)
endtime (optional) 有効期限 -
ttl (optional) 更新間隔 -
- 著者 （hCardを利用） author (required)
bookmark (optional) パーマリンク (rel属性) bookmark (optional)
- タグ (rel属性) tag (optional)
feedurl (optional) 代替更新ソース -
13

15. hAtomとは
簡単なWebスライスの例
（天気予報の更新情報）
<div class="hslice" id="hogehoge">
<h2 class="entry-title">金沢 天気予報</h2>
<p class="entry-content">16時 現在：晴れ </p>
</div>
14

16. hAtomとは
WebスライスとhAtomに対応した例
（天気予報の更新情報）
<div class="hslice hentry" id="hogehoge">
<h2 class="entry-title">金沢 天気予報</h2>
<p class="entry-content"><abbr class="updated"
title="20090718T16:00+09:00"> 16時 </abbr>現在：晴れ </p>
<p class="vcard author"><span class="fn">気象庁
</span></p>
</div>
15

17. これで、パーペキ！
（*´ω｀*）ゞキラッ☆
16

18. でも、hAtomに対応したツール・
サービスが少ない。。
（これめっちゃ便利！ってゆうようなキラーアプリケーションがない）
(´・ω・｀)ｼｮﾎﾞｰﾝ
17

19. その他のmicroformats
hCard - 連絡先情報
hCalendar – イベント情報
hReview - 書評などのレビュー
hResume - 履歴書
XFN - 友人関係など社会的ネットワーク
XOXO - リストとアウトライン
geo, adr - 位置情報
などなど
18

20. プログラマーさんへお願い
僕らデザイナーはμFを埋め込んでいくので、
μFを利用したツール・サービス作って！
第２のWebスライスみたいなん作って！
よりセマンティックなWebにしていきましょう！
19

21. Microsoft ++
(Webスライスの技術にmicroformatsを使ってくれてありがとう)
ヽ( ・∀・)ノ
20

22. 参考リソース
Web Slice を使用するコンテンツの購読 – MSDN
WebChunks :: Firefox Add-ons
Microformats Wikiにようこそ！ · Microformats Wiki
Microformats Icons -- The brilliant work of Wolfgang Bartelme
Microformats x SwapSkills 個人的まとめ « Study « Forest.Kの徒然日記
マイクロフォーマット – Wikipedia
マイクロフォーマット ~Webページをより便利にする最新マークアップテクニック~ : John Allsopp
セマンティック HTML/XHTML: 神崎 正英
Web開発者のためのRSS & Atomフィード: ベン ハンマースリー, Ben Hammersley, 菅野 良二
21