2xup.org

CSS Nite LP Disk 1 で行った microformats に関するセミナーの資料などを公開

本日 CSS Nite LP DIsk 1 が行われました。現在会場の Opera ブースから更新しています。今回もたくさんの方にご来場いただいたようで、確かに会場はものすごい熱気でした。無料版の CSS Nite もそうですが、みなさんお熱い。『とったらんかい!』と言わんばかりの熱心な姿勢の方が多く、このような雰囲気の中、お話できて本当に良い経験になります。今回は長谷川恭久さんとのジョイントセッションでした。

今回はこれまでの経験から、いくら簡単なことでも難しく伝えられると手を付けるのが遅くなったり、その簡単さに気づくのに時間がかかったりしてしまうので、microformats の魅力をできるだけ楽しく伝えられるように努力してみましたが、反省点は多いです。しかし、会場の反応の良さからも、microformats への興味の高さが伺えました。これをきっかけに、まずはご自分のプロフィールや、次回の CSS Nite のイベント情報をブログなどに書いてみてくださると良いなあ。

もちろん、資料も公開します。資料の中に登場しているウェブサイトや、お役立ちページへのリンクも用意しておきます。また、コード生成ページでも作成できますが、サンプルとして、hCard と、hCalendar のコードを用意しておきます。音声などの資料も後日 CSS Nite の公式サイトで公開予定です。また、資料に登場する写真は goodpic の金子さんに撮影していただきました。素晴らしい写真を本当にありがとうございます。

資料 (公開用)

ファイルは全て共有します。ウェブサイトだけでなく、様々な媒体で利用いただいてかまいません。念のため、ライセンスを明示しておきます。

また、この資料の続きとなる、未来のお話をいただいた、長谷川恭久さんの資料も公開されています。hConnect という架空のソフトウェアを元に microformats の可能性を面白く話してくださいました。

hCard サンプル

hCard の簡単なサンプルです。より詳細なコードは、hCard Creator でも作成できます。

<div class="vcard">
  <h3 class="n"><span class="family-name">上ノ郷谷</span> <span class="given-name">太一</span></h3>
  <img src="http://2xup.org/common/img/kaminogoya.png" class="photo" alt="Taichi Kaminogoya" width="50" height="50" />
  <ul>
    <li>ウェブサイト: <a class="url" href="http://2xup.org/" title="2xup">http://2xup.org/</a></li>
    <li>メール: <a class="email" href="mailto:mail&#64;2xup.org" title="上ノ郷谷にメエル送信">mail&#64;2xup.org</a></li>
  </ul>
</div>

hCalendar サンプル

hCalendar の簡単なサンプルです。より詳細なコードは、hCalendar Creator でも作成できます。次回の CSS Nite の内容になっているので、見出しレベルなど調整いただき、そのままお使いいただくこともできます。

<div class="vevent">
  <h3 class="summary"><a href="http://cssnite.jp/vol13/" class="url">CSS Nite vol.13</a></h3>
  <dl>
    <dt>日時<dt>
    <dd>
      <abbr class="dtstart" title="20061019T190000">2006年10月19日(木曜日)19時</abbr>〜
      <abbr class="dtend" title="20061019T210000">21時</abbr>
    </dd>
    <dt>場所</dt>
    <dd class="location">アップルストア銀座</dd>
    <dt>概要</dt>
    <dd class="description">遂に今回、Mozilla japan の gen kanai さんが登場!</dd>
  </dl>
</div>

サンプルソースや、コードクリエイターで作成したコードを利用して、実際にブログなどに導入してみてください。そしてリンク集にある、Firefox 機能拡張を利用したり、technorati の提供する各サービスを利用してみたりしてみると良いかもしれません。

また、資料などへのフィードバックも随時募集しております。