社内勉強会の資料を公開します
社内で HTML の勉強会がありましたので
その資料を公開いたします。
Google Slides - create and edit presentations online, for free.
ではでは、良い週末を
hCalendar を使って予定を公開しよう！
はじめに
みなさん、こんばんわ！
さてさて最近のことですが、 Google の検索結果にイベントや予定へのリンクが表示されるようになりましたね！（まだ、英語版だけですけどね＾＾；）
ASCII.jp：Google、リッチスニペットでイベントの日時や場所表示に対応
以下のような感じで表示されるみたいです！
ウェブページの中に書かれた「予定」や「イベント」などを Google 先生が理解して表示しているんですね！
hCalendar って何？
hCalendar とは「カレンダーに登録出来るような情報（イベントなど）を HTML 上に置くときはこういう書き方に揃えようよ！」という提案です。
書き方が揃っていれば Google さんも読みやすいですよね！ただそれだけのことです。
ちなみに、その提案の日本語訳は以下のページで見れます！
hcalendar-ja · Microformats Wiki
この記事では、だいたいどんな感じで書けばいいかを紹介したいと思います。
一番簡単な例
たとえば、以下のような HTML があったとします。
<p> 2012年1月7日は amachang の三十路の誕生日＞＜ </p>
ただの文章ですね。
これを hCalendar の書き方にしてみましょう！
<p class="vevent"> <span class="dtstart" title="2012-01-07">2012年1月7日</span>は <span class="summary">amachang の三十路の誕生日</span>＞＜ </p>
どうですか？
- 予定全体を class="vevent" な要素で囲んで
- 予定の開始日時を class="dtstart" な要素で囲んで
- 予定のタイトルになりそうな部分を class="summary" な要素で囲んで
- はい！完成です！
簡単でしょ？
もう少し詳細な例
あれだけじゃ、ちょっと寂しいのでもっともっといろいろな情報を含めてみましょう。
<div class="vevent"> <h2 class="summary">北陸案カンファレンス 2009</h2> <p>2009/11/01 <span class="dtsart" title="20091101T020000Z">11:00</span> 〜 <span class="dtend" title="20091101T020000Z">16:00</span></p> <p>会場： <span class="location">石川工業高等専門学校（石川県河北郡津幡町字北中条タ１）</span></p> <p class="description"> 石川県津幡町の石川工業高等専門学校を会場として、IT/Web系を中心とした(でも比較的テーマの自由な)、 アンカンファレンス形式のカンファレンスを行います。 うんぬんかんぬん </p> </div>
これは、以下のような感じで書いています。
- vevent
- イベント全体を要素で囲む（必須）
- summary
- イベントのタイトル的な部分を要素で囲む（必須）
- dtstart
- title 属性に開始日時を書く*1（必須）
- dtend
- title 属性に終了日時を書く
- location
- 開催場所を要素で囲む
- description
- 詳細な説明を要素で囲む
他にも関連 URL を指定できたり、情報の更新日時や作成日時を指定できたりします。
という訳で
だいたい hCalendar というものがどういうものか伝わりましたでしょうか
hCalendar の情報を活用して見よう
では、次に hCalendar で書かれた情報を実際に使ってみましょう！
という訳で
さっそく JavaScript でライブラリを書いてみました！
以下のリンクから、ダウンロードできます！
http://amachang.sakura.ne.jp/misc/calendar/hcalendar.js
（IE8、Google Chrome、Firefox、で動作確認をしています）
使い方
まず、このライブラリを HTML 上に読み込みます。
あとは、以下のように使うことができます。
// 以下のようにすると hCalendar の情報を取得できます。 var calendars = HCalendar.createHCalendarsByDocument(document); // calendars にはカレンダー情報が配列として入っています。 // 一つとりだしてみます。 var calendar = calendars[0]; // カレンダー情報は、複数のイベントを含みます。 // 最初のイベントを取得します。 var event = calendar.events[0]; alert(event.data.summary); // イベントのタイトル alert(event.data.dtstart); // イベントの開始日時（ Date 型 ) alert(event.data.dtend); // イベントの終了日時（ Date 型 ) alert(event.data.location); // イベントの開催場所 alert(event.data.description); // イベントの詳細 // 他にも 'class', 'status', 'uid', 'dtstamp', 'last-modified', 'duration', 'url', 'category' なども含む場合があります。 // 情報がない場合には null が入ってます。
さっそく使ってみましょう！
例だけ見ても、実際にこのライブラリで何が出来るのか良くわからないと思いますので、実際に例を見てみましょう！
予定を JavaScript の alert で表示してみる
ページ内のイベント情報を alert で表示できるブックマークレットを作って見ました。
javascript:(function(s){ s.src = 'http://amachang.sakura.ne.jp/misc/calendar/hcalendar.alert.js'; document.body.appendChild(s) })(document.createElement('script'))
hCalendar の取得には上で紹介したライブラリを使っています。
ちなみにブックマークレットとは、ブラウザのロケーションバー（URL の書いてある箇所）に特定のコマンドを与えて、何かを実行させる仕組みです。
たいていのブラウザには、この機能が入っていますので、自分の使っているブラウザで試してみてください！
では、さっそくブックマークレットを使ってみましょう。
1. まず、 hCalendar で書かれたページに行きます。（以下の例では、 サイボウズ Live の予定ページを表示しています。）
2. 次に、ブックマークレットをロケーションバーにコピペ！してエンターキーを押す！
3. そうすると…
おおおお、ちゃんとデータを扱えているのが分かります！
というわけで、次にもっと実用的な例を紹介していきたいと思います。
Yahoo カレンダーに取り込む
1. 先ほどと同じように予定のページに行きます。
2. こんどは、以下のブックマークレットを実行してみます
javascript:(function(s){ s.src = 'http://amachang.sakura.ne.jp/misc/calendar/hcalendar.yahoo.js'; document.body.appendChild(s) })(document.createElement('script'))
3. すると…
今度は Yahoo カレンダーに取り込む画面があらわれました！
Google カレンダーに取り込む
こんどは、以下のブックマークレットを試してみましょう！
javascript:(function(s){ s.src = 'http://amachang.sakura.ne.jp/misc/calendar/hcalendar.google.js'; document.body.appendChild(s) })(document.createElement('script'))
すると
今度は、 Google カレンダーに取り込める画面が出てきました！
hCalendar のデータがあれば、ウェブの様々なカレンダーサービスにすぐに登録することが分かりますね！
このように
予定が hCalendar という形式で表現されていれば、 Google の検索結果に出るだけではなく、様々なシーンでそのデータを生かせます！
もちろん、個人的な予定でも hCalendar で表現されていれば、そのデータを別の場所で管理したくなった場合に移行が楽になったりします。
いいことずくめです！
これは hCalendar を使わない手はない！
まとめ
というわけで、 hCalendar についていろいろ書いてみました。
hCalendar 楽しいです！
皆さんも hCalendar 使ってみてはいかがでしょうか！
追記
あ。手前味噌ですが、さっきの例で出てきたサイボウズ Live ですが絶賛招待受付中です！
招待して欲しいとか使ってみたいという人がいましたら Twitter で @amachang に言ってくださいー。
ではでは
*1:厳密な仕様では、abbr 以外の title 属性には書けないが、様々な問題により、今は span 要素の title 属性に書かれることが多い気がする
たぶん Flash は無くならない
楽しいので僕も未来を予想してみる
たぶん、 Flash はなくならない。理由は二つ
未来には今では予想できないブームが出現するから
たとえば脳で PC を操作するデバイスが出来たら。
そのデバイスでマウス以上に多彩な操作が、マウスより簡単に出来たら。
そうなると、当然既存の HTML & JavaScript は使いにくいものになる。
ブラウザベンダーは当然新しい仕様を策定しようとする。また、独自仕様を作って実装する。
でも、その仕様が行き渡るまでに Flash が先にそれに対応する。
つまり、仕様策定後におこる様々なブームによって Flash は支えられる。
あ、言い忘れてた！
まあ、そもそも HTML5 も RIA 的な面だけ注目されすぎ。
video, canvas？
そんなことより、セクションの話しようぜ （inspired: http://www.ichigobbs.net/cgi/15bbs/lobby/2077/
または、 Microdata の話s（ry
HTML5 のセクションアウトラインを生成してみよう！
昨日
HTML5 のセクションアウトラインを取得する JavaScript - IT戦記
Outliner.js
で
公開したのはいいのですが、
@amachang 使い方がわからんです…。見てるページで試せるように、Bookmarkletになっていると嬉しいです。
http://twitter.com/os0x/status/3972339847
…肝心の使い方を書くのを忘れていました＞＜
＞＜
というわけで簡単に使い方を解説したいと思うます。
手順は 2 ステップ
1. まず outliner.js を読み込む
<!DOCTYPE html> <html> <head> <title>hoge<title> <script type="text/javascript" src="http://amachang.sakura.ne.jp/misc/outliner.js"></script> </head> : :
2. createOutline を呼び出す
<script type="text/javascript"> var outline = createOutline(document); // outline はセクションの情報の配列になっている for (var i = 0; i < outline.length; i ++) { var section = outline[i]; alert(section.headElement); // セクションに見出しがある場合、 headElement に見出し要素 (h1-6, hgroup) が入っている alert(section.element); // element にはセクションを作った要素（explicit なセクションでは section, article, aside, nav 、implicit なセクションでは見出し要素 (h1-6, hgroup) が入っている） alert(section.childs); // そのセクションの子セクションの情報が配列として入っている } </script>
ね、
簡単でしょう？
というわけで
このライブラリを使ってページのアウトラインを表示する Bookmarklet を書いてみました
javascript:(function(s){ s.src = 'http://amachang.sakura.ne.jp/misc/outline/check.js'; document.body.appendChild(s) })(document.createElement('script'))
これをいろんな HTML5 なページで実行してみましょう！
まずは、 HTML5が話題になっているので試しに書いてみた。 - CSS HappyLife
次に、 http://gamuratwist.jp/blog/web/entry-96.php
次に、 http://rewish.org/etc/transition
次に、 HTML5で組んでみた | CSS-EBLOG
次に、 HTML5 で試しに Web ページを組んでみた (改訂版) – VERSIONFIVE
おおお。同じ HTML5 でも書く人によってセクションの形も千差万別ですね！
で、雑感
「どのようにセクションを構成するか」は人の好みによって大きく変わってくるもので結構性格が出るのかなーって思います
ですが、「ただ囲うだけ」のようなセクションは無駄にアウトラインが深くなるだけなので、むしろ div にすればいいのにとも思います。
「div 廚」という言葉を嫌って section を使う人も多いのではないかと思いますが、セクションアウトラインを「文章の構造を HTML の構造（DOM の構造）から分離するための概念」と考えれば、文章の構造を壊さないため、むしろ積極的に div を使っていくべきではないでしょうか*1。（ｷﾘｯ
というわけで
セクションアウトラインが見えて来ると今まで見えなかったものが見えてくる・・・かも！
（追記）あ、一個言い忘れてた！
セクションは、 section, article, aside, nav で囲われていなくても h1 や h2 などの「重み（ランク）」によって暗黙的に生成されますよ！
なので、既存の HTML も割と奇麗なアウトラインを生成します！これってセクションアウトラインが使われるようになるのには、重要なことですよね！
ちなみに、このページのアウトラインは以下のような感じ、はてな記法で書いても割と奇麗なアウトラインができてます！
*1:section を使うぐらいなら
HTML5 のセクションアウトラインを取得する JavaScript
id:vantguarde さんが HTML5 のセクション 3 箇条を書かれて紹介しています
sectionの使い方とセクション三箇条 - vantguarde - web:g
- スタイルシートやスクリプトの都合には使わないこと。それらにはdivを使うこと。
- article, aside, navが適切な場合には、そちらを使こと。
- セクションの先頭に見出しが自然に存在してない場合には使わないこと。
すばらしいですね！
便乗して
セクションのアウトラインを求める JavaScript（YAPC 前夜祭で紹介したやつ）を公開します
http://amachang.sakura.ne.jp/misc/outliner.js
この JavaScript は
以下のアルゴリズムをそのまま JavaScript で実装したものになっています
4.4.11.1 Creating an outline
また
以下のように、仕様との対応関係を記述してありますのでそちらも見てみてくださいね！
// http://amachang.sakura.ne.jp/misc/outliner.js function createOutline(document) { // Let current outlinee be null. (It holds the element whose outline is being created.) var outlinee = null; // Let current section be null. (It holds a pointer to a section, so that elements in the DOM can all be associated with a section.) var section = null; // Create a stack to hold elements, which is used to handle nesting. Initialize this stack to empty. var stack = []; var nextSectionId = 1; // As you walk over the DOM in tree order, trigger the first relevant step below for each element as you enter and exit it. (function (element) { var elementInfo = { element: element, outline: null }; if (trigger(elementInfo, true)) { return true; (snip)
新はてなブックマーク件数取得 API を使って自分のページに件数を埋め込む最も簡単な方法
はてなブックマークから新しい件数取得 API が提供されているようです！
(開発者さま向け)はてなブックマーク件数取得APIに新しいAPIを追加 - はてなブックマーク日記 - 機能変更、お知らせなど
というわけで、
HTML だけで、件数を埋め込む例を書いてみたよ！
やり方は簡単
callback パラメータに document.write を指定するだけ！
<script src="http://api.b.st-hatena.com/entry.count?url=http%3A%2F%2Fwww.example.com%2F&callback=document.write"></script>件のブックマークがあります。
あとは、適当にリンクとか張って
<a href="http://b.hatena.ne.jp/entry/www.example.com/"> <script src="http://api.b.st-hatena.com/entry.count?url=http%3A%2F%2Fwww.example.com%2F&callback=document.write"></script>件のブックマークがあります。 </a>
完成です！
わお
これなら JavaScript を書けない人でも HTML の知識あがあれば OK ですね！
ラクチンですね！
Mozilla 台湾の audio 要素のデモが超カッコいい
百聞は一見にしかず
Firefox 3.5 （現状 Beta 4）で見てみてください
http://moztw.org/demo/audioplayer/
