Hatena::ブログ(Diary)

IT戦記 このページをアンテナに追加 RSSフィード

2010-01-27

hCalendar を使って予定を公開しよう!

はじめに

みなさん、こんばんわ!

さてさて最近のことですが、 Google の検索結果にイベントや予定へのリンクが表示されるようになりましたね!(まだ、英語版だけですけどね^^;)

ASCII.jp:Google、リッチスニペットでイベントの日時や場所表示に対応

以下のような感じで表示されるみたいです!

f:id:amachang:20100125231011p:image

ウェブページの中に書かれた「予定」や「イベント」などを Google 先生が理解して表示しているんですね!

この予定やイベントはどうやって探してるの?

Google は hCalendar という形式のデータを読んで、予定やイベントを探しているようです。

というわけで、今日はこの Google が使っている hCalendar というものが「どういうもので」「どうやって活用すればいいか」を実例を交えながら紹介したいと思います。

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>

どうですか?

  1. 予定全体を class="vevent" な要素で囲んで
  2. 予定の開始日時を class="dtstart" な要素で囲んで
  3. 予定のタイトルになりそうな部分を class="summary" な要素で囲んで
  4. はい!完成です!

簡単でしょ?

もう少し詳細な例

あれだけじゃ、ちょっと寂しいのでもっともっといろいろな情報を含めてみましょう。

<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">石川工業高等専門学校(石川県河北郡津幡町字北中条タ1)</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

IE8Google ChromeFirefox、で動作確認をしています)

使い方

まず、このライブラリ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 の予定ページを表示しています。)

f:id:amachang:20100127233141j:image

2. 次に、ブックマークレットをロケーションバーにコピペ!してエンターキーを押す!

f:id:amachang:20100127233124j:image

3. そうすると…

f:id:amachang:20100127234229p:image

おおおお、ちゃんとデータを扱えているのが分かります!

というわけで、次にもっと実用的な例を紹介していきたいと思います。

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. すると…

f:id:amachang:20100127234331p:image

今度は Yahoo カレンダーに取り込む画面があらわれました!

Google カレンダーに取り込む

こんどは、以下のブックマークレットを試してみましょう!

javascript:(function(s){ s.src = 'http://amachang.sakura.ne.jp/misc/calendar/hcalendar.google.js'; document.body.appendChild(s) })(document.createElement('script'))

すると

f:id:amachang:20100127234521p:image

今度は、 Google カレンダーに取り込める画面が出てきました!

hCalendar のデータがあれば、ウェブの様々なカレンダーサービスにすぐに登録することが分かりますね!

Outlook に取り込む

今度は、ウェブ以外も試してみましょう!

javascript:(function(s){ s.src = 'http://amachang.sakura.ne.jp/misc/calendar/hcalendar.outlook.js'; document.body.appendChild(s) })(document.createElement('script'))

これを実行すると、 schedule.ics というファイルがダウンロードされます。

f:id:amachang:20100127234855p:image

それを実行してみてください。

すると…

f:id:amachang:20100127235003p:image

なんと Outlook の登録ダイアログが開きました!

おおお!すごい!

このように

予定が hCalendar という形式で表現されていれば、 Google の検索結果に出るだけではなく、様々なシーンでそのデータを生かせます!

もちろん、個人的な予定でも hCalendar で表現されていれば、そのデータを別の場所で管理したくなった場合に移行が楽になったりします。

いいことずくめです!

これは hCalendar を使わない手はない!

まとめ

というわけで、 hCalendar についていろいろ書いてみました。

hCalendar 楽しいです!

皆さんも hCalendar 使ってみてはいかがでしょうか!

追記

あ。手前味噌ですが、さっきの例で出てきたサイボウズ Live ですが絶賛招待受付中です!

招待して欲しいとか使ってみたいという人がいましたら Twitter@amachang に言ってくださいー。

ではでは

*1:厳密な仕様では、abbr 以外の title 属性には書けないが、様々な問題により、今は span 要素の title 属性に書かれることが多い気がする

2009-10-06

たぶん Flash は無くならない

Flash vs HTML5 という記事をよく見かける

楽しいので僕も未来を予想してみる

たぶん、 Flash はなくならない。理由は二つ

  • 未来には今では予想できないブームが出現するから
  • Youtube, ニコニコ動画 は無くならないから
未来には今では予想できないブームが出現するから

たとえば脳で PC を操作するデバイスが出来たら。

そのデバイスマウス以上に多彩な操作が、マウスより簡単に出来たら。

そうなると、当然既存の HTML & JavaScript は使いにくいものになる。

ブラウザベンダーは当然新しい仕様を策定しようとする。また、独自仕様を作って実装する。

でも、その仕様が行き渡るまでに Flash が先にそれに対応する。

つまり、仕様策定後におこる様々なブームによって Flash は支えられる。

Youtube, ニコニコ動画 は無くならないから

Youtubeニコニコ動画のようなことは HTML5 で出来るようになる。

しかし、 Youtubeニコニコ動画は無くならないし、Flash をやめて HTML5 にするメリットがあまりない(YoutubeGoogleマーケティングに乗っかって変えることはあるかも)。

既存の人気サイトがあるかぎりは、 Flash は使われ続ける。

まとめ

個人の願望としては Flash なサイトは減って欲しい。

けど、ブラウザがある限り Flash は滅びない。たぶん。

あ、言い忘れてた!

まあ、そもそも HTML5RIA 的な面だけ注目されすぎ。

video, canvas

そんなことより、セクションの話しようぜ (inspired: no title)

または、 Microdata の話s(ry

2009-09-15

HTML5 のセクションアウトラインを生成してみよう!

f:id:amachang:20090915145809p:image

昨日

HTML5 のセクションアウトラインを取得する JavaScript - IT戦記 という記事で、以下の JavaScript ファイルを公開しました

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 で紹介されているページ

f:id:amachang:20090915160340p:image

次に、 404 Not Found で紹介されているページ

f:id:amachang:20090915160407p:image

次に、 404 Not Found - Rewish で紹介されているページ

f:id:amachang:20090915160426p:image

次に、 HTML5で組んでみた | CSS-EBLOG で紹介されているページ

f:id:amachang:20090915160442p:image

次に、 HTML5 で試しに Web ページを組んでみた (改訂版) – VERSIONFIVE で紹介されているページ

f:id:amachang:20090915160541p:image

おおお。同じ HTML5 でも書く人によってセクションの形も千差万別ですね!

で、雑感

「どのようにセクションを構成するか」は人の好みによって大きく変わってくるもので結構性格が出るのかなーって思います

ですが、「ただ囲うだけ」のようなセクションは無駄にアウトラインが深くなるだけなので、むしろ div にすればいいのにとも思います。

「div 廚」という言葉を嫌って section を使う人も多いのではないかと思いますが、セクションアウトラインを「文章の構造を HTML の構造(DOM の構造)から分離するための概念」と考えれば、文章の構造を壊さないため、むしろ積極的に div を使っていくべきではないでしょうか*1。(キリッ

というわけで

セクションアウトラインが見えて来ると今まで見えなかったものが見えてくる・・・かも!

(追記)あ、一個言い忘れてた!

セクションは、 section, article, aside, nav で囲われていなくても h1 や h2 などの「重み(ランク)」によって暗黙的に生成されますよ!

なので、既存の HTML も割と奇麗なアウトラインを生成します!これってセクションアウトラインが使われるようになるのには、重要なことですよね!

ちなみに、このページのアウトラインは以下のような感じ、はてな記法で書いても割と奇麗なアウトラインができてます!

f:id:amachang:20090915165708p:image

*1:section を使うぐらいなら

2009-09-14

HTML5 のセクションアウトラインを取得する JavaScript

id:vantguarde さんが HTML5 のセクション 3 箇条を書かれて紹介しています

  • スタイルシートやスクリプトの都合には使わないこと。それらにはdivを使うこと。
  • article, aside, navが適切な場合には、そちらを使こと。
  • セクションの先頭に見出しが自然に存在してない場合には使わないこと。
sectionの使い方とセクション三箇条 - vantguarde - web:g

すばらしいですね!

便乗して

セクションのアウトラインを求める 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)