IT戦記

プログラミング、起業などについて書いているプログラマーのブログです😚

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

はじめに

みなさん、こんばんわ!
さてさて最近のことですが、 Google の検索結果にイベントや予定へのリンクが表示されるようになりましたね!(まだ、英語版だけですけどね^^;)
ASCII.jp:Google、リッチスニペットでイベントの日時や場所表示に対応
以下のような感じで表示されるみたいです!

ウェブページの中に書かれた「予定」や「イベント」などを 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
(IE8、Google 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 の予定ページを表示しています。)

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

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 というファイルがダウンロードされます。

それを実行してみてください。
すると…

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

このように

予定が hCalendar という形式で表現されていれば、 Google の検索結果に出るだけではなく、様々なシーンでそのデータを生かせます!
もちろん、個人的な予定でも hCalendar で表現されていれば、そのデータを別の場所で管理したくなった場合に移行が楽になったりします。
いいことずくめです!
これは hCalendar を使わない手はない!

まとめ

というわけで、 hCalendar についていろいろ書いてみました。
hCalendar 楽しいです!
皆さんも hCalendar 使ってみてはいかがでしょうか!

追記

あ。手前味噌ですが、さっきの例で出てきたサイボウズ Live ですが絶賛招待受付中です!
招待して欲しいとか使ってみたいという人がいましたら Twitter@amachang に言ってくださいー。
ではでは

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