ラベル microformats の投稿を表示しています。 すべての投稿を表示
ラベル microformats の投稿を表示しています。 すべての投稿を表示

2008-09-21

『マイクロフォーマット Webページをより便利にする最新マークアップテクニック』

Microformats をどう使うかにもフォーカスしている『Microformats: Empowering Your Markup for Web 2.0』
Microformats wiki は、リファレンスとしての要素が強く、具体的にどう使ってよいのかが弱かったり、見つけにくいという印象があります。また、たくさんの情報が集まっていますが、その情報が多すぎて、必要な情報を見つけにくく、見落としてしまう実感があります。『Microformats: Empowering Your Markup for Web 2.0』という洋書は、前述の欠点を補ってくれるものですので、その内容を簡単に紹介します。
以前に紹介した洋書を翻訳したものが発売されていました。2008年7月末ころの発売だったようです。知らなかった。

マイクロフォーマット Webページをより便利にする最新マークアップテクニック (Web Designing BOOKS)

マイクロフォーマット ~Webページをより便利にする最新マークアップテクニック~ (Web Designing BOOKS)

2008-06-08

Picasa ウェブアルバムの画像から The geo microformat を生成できるようにしました

Picasa Web Albums Data API を使って画像のジオタグを取得する
Picasa や YouTube のフィードは、Google Data API の上で成り立っているので、YouTube と同じく Picasa のフィードも、画像が位置情報を持つときは、GeoRSS を使ってその位置情報を表現します。
以前に Picasa ウェブアルバムの画像から位置情報を取得する方法を調べました。いずれどこかで使ってみようと考えていましたが、ちょうど時間ができたので、The geo microformat 生成ツール を改良し、Picasa ウェブアルバムの画像から位置情報を取得し、その位置情報から The geo microformat を生成できるようにしました。

http://picasaweb.google.co.jp/picasateam/CambridgeUK/photo#5114585391693704978 といった Picasa ウェブアルバムの URL を入力し、目的地を検索するボタンをクリックすると、次のように、その画像から位置情報を取得できるようにしました。



続けて The geo microformat を生成するボタンをクリックすると、HTML コードが生成されるのは、今までどおりです。

次のように、Picasa ウェブアルバムから生成した The geo microformat は、Picasa のアイコンから判断できるようにしてあります。



なお、今回は picasaweb.google.co.jp の URL からなる画像からのみ、位置情報を取得するようにしてあります。picasaweb.google.com など、多くの別名があるのですが、その品揃えが把握できていないというのが理由です。

また、http://lh5.ggpht.com/picasateam/RvqoUMVOLxI/AAAAAAAAQQk/rOLsH7RnldQ/s288/DSC_0027.JPG といった画像(サムネイルを含む)の URL からも位置情報が取得したいところなのですが、この URL から Picasa ウェブアルバム もしくは Picasa Web Albums Data API の URL に変換できないため、今のところ実現の見込みはありません。

Picasa ウェブアルバムと Picasa Web Albums Data API のリソース仕様(URL パターン)が明示されていないか調べたのですが、まだ見つけるに至っていません。もうしばらくアンテナをハッてみて発見できないようなら、Picasa チームのフォーラムで質問することも考えます。

このエントリで使った画像は、Picasa チームの公開アルバムの画像です。位置情報が付いた画像がいくつかありますので、参考になるでしょう。

2008-04-22

The geo microformat 生成ツールをアップデートしました

The geo microformat 生成ツール をアップデートして、新バージョンを公開しましたので、その主な改良点や変更点をお伝えします。

旧バージョンでは、Google マップをスクロールして、その中央を目的地の位置として扱っていましたが、新バージョンでは、矢印のアイコン(マーカー)をドラッグして、目的地の位置を指定できるようにしました。これで、ビミョウな位置の調整ができ、かつ直感的になったという印象があります。↓こんな感じです。



旧バージョンでは、検索ボックスに入力したテキストを The geo microformat のテキストとして扱っていましたが、新バージョンでは、そのテキストを、噴出し風のウィンドウの中で再編集できるようにしました。これで、目的地を表す適切なテキストを指定できますね。↓こんな感じです。



旧バージョンでは、The geo microformat を生成したらそれきりでしたが、新バージョンでは、その過去に生成した The geo microformat の一覧を見れるようにしました。小さな Google マップをタイル状に並べて表現しています。↓こんな感じです。



また、そのタイル状の Google マップをクリックすると、その位置の The geo microformat を再生成するようにもしています。

ジオタグ付きの画像の URL を指定して生成した The geo microformat は、Google マップと画像を一定間隔で交互に表示するようにしました。flickr のアイコンが目印です。↓こんな感じです。



新バージョンは、サーバサイドのプログラムを使っていますが、旧バージョンは JavaScript のみで作成しています。100% JavaScript という特質が何かに役立つかもしれませんので、旧バージョン は、公開先の URL を変更して存続しておきます。マッシュアップのサンプルなどとして使ってください。

2008-04-09

ジオタギングのためのアイコン The Geotag Icon Project

フィードアイコンと同じように、次のようなピンをイメージしたジオタギングのための標準アイコンがあります。



次のサイトから様々な大きさとファイル形式のアイコンがダウンロードできます。また、このアイコンを使うためのガイドラインとその実例を解説しています。

The Geotag Icon Project
http://www.geotagicons.com/

私が見ている範囲では、このアイコンに出会ったことはありませんが、標準アイコンという取り組みということで、一足先に使えるところでは、使っていくことにします。

2008-04-06

PlaceEngine API を使って現在地の The geo microformat を生成できるようにしました

The geo microformat 生成ツールを公開しました
郵便番号、住所、場所、または画像の URL を入力すると、自動的に位置情報を取得します。そして、その結果から、ブログやホームページに貼り付けるための HTML を生成します。
先週公開した The geo microformat 生成ツール に PlaceEngine API を使って、現在地を取得できる機能を追加しました。

これにより、PlaceEngine をインストールした環境があれば、現在地を取得ボタンをクリックすることで、無線 LAN (Wi-Fi) の電波から現在位置を取得して、今いるその位置の HTML を生成できます。



PlaceEngine とは?
PlaceEngine は、Wi-Fi機器を使って簡単に現在位置を推定し、周辺の関連情報を提供しやすくするサービスです。 Wi-Fiを装備している機器であれば、GPSを搭載していなくても簡単に現在の位置を取得することができます。アクセスポイントからの電測情報を用いますので、屋内や地下街のように、GPSが機能しない場所でも位置を求めることが可能です。
PlaceEngine 対応のサイトを使うときは、あらかじめ PlaceEngine クライアントソフトをインストール しておく必要があります。PlaceEngine クライアントソフトに対応したプラットフォームは、次のとおりです。
  • Windows Vista
  • Windows XP
  • Windows Mobile (機種条件あり)
  • MacOS X 10.4
PlaceEngine クライアントソフトは、ブラウザ固有のプラグインではなく JavaScript の仕組みを応用した PlaceEngine API という形で実現しているため、その仕組みを満たすブラウザであれば、どのようなブラウザでも動作することになりそうです。が、あくまでも想像です。

実際に試した範囲だと、次のブラウザで動作しました。
  • Windows XP Firefox2
  • Windows XP Firefox3 beta
  • Windows XP IE6
  • Windows XP IE7
  • Windows XP Opera9
  • Windows XP Safari3
また、PlaceEngine は、上記の PC プラットフォームに加えて、次のような、目的性の高いデバイスに組み込んだ使い方も広がっているよう(きそう)です。iPod touch の Safari から使えるようになれば、PlaceEngine 対応のサイトがグンと増えるんじゃないかという予感がします。ただ、無線 LAN (Wi-Fi) の電波を使うという新しい仕組みからくるプライバシーに関する話題もあるようです。ざっとネットで調べた範囲だと、次のエントリが話題の中心になっているように見えました。

高木浩光@自宅の日記 - PlaceEngineのプライバシー懸念を考える

このような懸案を抱えていることを理解しつつも、既存のリソースをうまく活用したアプローチに感心するところがあるし、これが広がりを見せると、どんなサービスが生まれてくるかの期待が大きいので、(絶対に問題ないという自信はありませんが)今のところは積極的に使ってみようという結論です。

2008-04-04

Dreamweaver Microformats Extensions はどんなもので何ができるのか

Dreamweaver Microformats Extensions という Microformats を生成する Dreamweaver の拡張機能がツールとしてよく紹介されているのですが、実際にどんなもので、どんなことができるのか、あまり説明がないので、この機会にまとめてみました。

この拡張機能をインストールすると、Dreamweaver のツールバーに Microformats タブが追加されます。そして、そのツールバーのボタンをクリックすると、ダイアログが表示され、ダイアログの項目を入力して OK ボタンをクリックすると、Microformats が生成されるといったものです。

次のページに、ダイアログのスクリーンキャプチャと、生成された Microformats をまとめてみました。

Dreamweaver Microformats Extensions - with Microformats

2008-04-03

Microformats をどう使うかにもフォーカスしている『Microformats: Empowering Your Markup for Web 2.0』

Microformats wiki は、リファレンスとしての要素が強く、具体的にどう使ってよいのかが弱かったり、見つけにくいという印象があります。また、たくさんの情報が集まっていますが、その情報が多すぎて、必要な情報を見つけにくく、見落としてしまう実感があります。

Microformats: Empowering Your Markup for Web 2.0』という洋書は、前述の欠点を補ってくれるものですので、その内容を簡単に紹介します。

Microformats: Empowering Your Markup for Web 2.0

まず、著者である John Allsopp のサイト です。Microformats の直接的な関係者ではないのでしょうかね。John Allsopp と Microformats との関係は把握できていません。

この本で扱っているフォーマットは、次のとおりです。
  • rel-license
  • rel-tag
  • rel-nofollow
  • VoteLinks
  • XFN
  • geo
  • adr
  • hCard
  • hCalendar
  • hReview
  • hAtom
フォーマットの仕様も解説していますが、それに加えて、どういった使い方ができるのか(するのか)を実例を交えて説明しています。その説明は、単なるマークアップに留まらず、CSS によるスタイリングまで含んでいます。

また、そのフォーマットに関連するツールや実装しているサービスの紹介もあるので、(仕様への準拠や使い方の良し悪しは除いて)具体的にイメージしながら Microformats を実感できます。

ケーススタディがあり、実際のサービスでどのように Microformats を使っているか、その解説があります。扱っているサービスは、次のとおりです。
  • Cord'd
  • Yahoo
付録も重宝します。

Microformats Specification Reference は、各フォーマットの仕様がコンパクトにまとまっています。わたしは記憶に定着していない範囲がたくさんある状況なので、すぐに引き出せるようにまとまっているのは助かります。また、各フォーマットの実例、関連するツールやサービスも一緒にまとまっています。

People, Tools, Services, and Publishers は、この本で紹介したものも含む様々な情報源をリストアップしているので、こんなところで、こんなフォーマットを使っているのかとか、わたしの関心領域と重なる部分はどんなところかとか、違った形での発見があります。さらに詳しく調査してみようというときに役立ちそうです。

2008-04-02

The geo microformat 生成ツールを公開しました

The geo microformat の作成を手助けする The geo microformat 生成ツール を公開しました。

郵便番号、住所、場所、または画像の URL を入力すると、自動的に位置情報を取得します。そして、その結果から、ブログやホームページに貼り付けるための HTML を生成します。



例: 160-0021

郵便番号を入力したときは、Postal Search Ajax API を使って、郵便番号から緯度経度を検索して、その結果から HTML を生成します。

例: 新宿区 歌舞伎町

住所を入力したときは、GoogleMaps API のジオコーダを使って、住所から緯度経度を検索して、その結果から HTML を生成します。

例: 新宿コマ劇場

場所を入力したときも同上です。

例: ↓クリック


画像の URL を入力したときは、Flickr API を使って、画像に付与された緯度経度を取得して、その結果から HTML を生成します。ですので、指定できる URL は、Flickr の画像、かつ緯度経度(geoタグ)が付与された画像に限ります。

上記の例のリンクのとおり、本ツールは、外部パラメータも受け取りますので、他のページやツールからリンクして活用することもできます。

本ツールは、The abbr design pattern と The class design pattern を使って、2通りの The geo microformat の HTML を生成します。また、リンクなしと Google マップのリンクありの 2通りの HTML を生成します。

The abbr design pattern は、abbr タグを使います。IE6 は abbr タグに対応していないため、期待どおりの HTML が生成されず表示もできませんので、注意してください。

本ツールが生成した geo microformat が妥当かどうかは、Firefox Operator (Addon) が検出することをもって OK としています。

どのような条件から、どのような HTML を生成するのが有益なのか、まったく実感がありません。Microformats の理解が浅いところがありますので、気づくことや要望がありましたら、コメントしてください。

The hCard format を使って連絡先の情報を埋め込んでみました

Postal Search APIs & Solutions サイトのフッタに The hCard format を使って連絡先の情報を埋め込んでみました。

hcard を埋め込む前の HTML は、次のとおりでした。
<div id="footer">
Copyright&copy; 2007 <a href="http://www.lrlab.to/">LEARNING RESOURCE LAB</a> and
the <a href="http://postal-search-apis-and-solutions.blogspot.com/">Postal Search APIs &amp; Solutions team</a>.
</div>
そして、hcard を埋め込んだ HTML は、次のとおりです。ここでは fn, org, url を使っています。
<div id="footer">
<span class="vcard">
Copyright&copy; 2007 <a class="fn org url" href="http://www.lrlab.to/">LEARNING RESOURCE LAB</a> and
the <a class="url" href="http://postal-search-apis-and-solutions.blogspot.com/">Postal Search APIs &amp; Solutions team</a>.
</span>
</div>
このページを Firefox で表示して、Operator の連絡先から書き出した vcard は、次のとおりです。
BEGIN:VCARD
PRODID:-//kaply.com//Operator 0.8//EN
SOURCE:http://developmentor.lrlab.to/postal/
NAME:Postal Search APIs & Solutions
VERSION:3.0
N:;;;;
ORG;CHARSET=UTF-8:LEARNING RESOURCE LAB
FN;CHARSET=UTF-8:LEARNING RESOURCE LAB
UID:
URL:http://www.lrlab.to/
URL:http://postal-search-apis-and-solutions.blogspot.com/
END:VCARD

2008-03-20

microformats 関連のFirefox Addon と対応するデータ形式のまとめ

Firefox Addon Operator のユーザスクリプトを作ってみました
Operator 0.8 は、(X)HTML コンテンツ中の Microformats というメタデータ記述を検出し、そのメタデータを使って、利用者にアクションを導くための Firefox Addon です。なお、Operator は、次期バージョンである Firefox 3 の標準機能になるといわれています。
次のとおり、Operator 以外にも Microformats を検出して表示してくれる Firefox Addon があります。

Operator 0.9.1

ここ数日の間に 0.8 から 0.91 にバージョンアップしました。

Tails Firefox Extension 0.3

Tails Export 0.3.2

Firefox Addon によって、インストール時点で、対応する Microformats のデータ形式に違いがあります。前述のリンク先から読み取れる範囲で、各 Addon が対応するデータ形式を、次のとおり、表にしてみました。

Operator 0.9.1Tails 0.3Tails Export 0.3.2
adr
hCard
hCalendar
geo
tag
xFolk
RDF
hReview
hAtom
hResume
Rel-license


Microformats: Empowering Your Markup for Web 2.0Microformats: Empowering Your Markup for Web 2.0
John Allsop

Prototype and Scriptaculous in Action Programming Collective Intelligence: Building Smart Web 2.0 Applications Bulletproof Ajax (Voices That Matter) Restful Web Services Visualizing Data

by G-Tools

2008-03-16

Firefox Addon Operator のユーザスクリプトを作ってみました

Operator 0.8 は、(X)HTML コンテンツ中の Microformats というメタデータ記述を検出し、そのメタデータを使って、利用者にアクションを導くための Firefox Addon です。なお、Operator は、次期バージョンである Firefox 3 の標準機能になるといわれています。

例えば、このブログを Operator を組み込んだ Firefox 2 で表示すると、次のように、エントリの投稿者(連絡先)を検出し、その投稿者の情報を使って、様々なアクションを実行できます。



さらに、次のように、エントリのタグ(タグ空間)を検出し、そのタグを使って、様々なアクションを実行できます。



このブログ(Blogger)のコンテンツは、連絡先とタグ空間のメタデータ記述を含みますが、Operator はもっと多くの Microformats のメタデータ形式をサポートしていますので、Microformats 対応のサイトやサービスを試してみるとよいでしょう。

Operator のアクションは、あらかじめ用意されたものを使うほかにも、自らアクションを開発たり、第三者が開発したアクションを登録できます。そのアクションは、ユーザスクリプトと呼ばれ、JavaScript を使って記述します。

そこで、そのユーザスクリプトとやらを、さっそく開発してみました。

ここでは、タグ空間を題材としました。(X)HTML コンテンツから検出したタグから BLOGRANGER TG を開いて、そのタグに関連するタグとブログを探すというアクションを開発しました。

ユーザスクリプトは、次のとおりです。次のリンクからユーザスクリプトをダウンロードして、Operator のオプションダイアログから登録してください。Firefox を再起動してから使えるようになります。

operator.ranger.labs.goo.ne.jp.js

次のように、タグ空間から "BLOGRANGER TG でブログを探す" というアクションが実行できるようになります。



また、Operator のオプションを変更して、"BLOGRANGER TG でブログを探す" というアクションからタグ空間を選択する使い方もできます。



"BLOGRANGER TG でブログを探す" というアクションをクリックすると、次のように BLOGRANGER TG を表示します。このとき、仮想地図の中心が、タグ空間で選択したタグになります。



ユーザスクリプトのソースコードを簡単に説明しておきます。
SemanticActions.add('operator.ranger.labs.goo.ne.jp', {
description: 'BLOGRANGER TG \u3067\u30D6\u30ED\u30B0\u3092\u63A2\u3059',
shortDescription: 'BLOGRANGER TG',
icon: 'http://ranger.labs.goo.ne.jp/favicon.ico',
scope: {
semantic: {
tag : 'tag'
}
},
doAction: function(semanticObject) {
return 'http://ranger.labs.goo.ne.jp/TG/?MT=&tag='
+ encodeURIComponent(semanticObject.tag);
}
});
まずはじめに、ユーザスクリプトは JavaScript ファイルとして提供するのですが、そのファイル名は、他のユーザスクリプトと重ならない名前にしておくのが無難です。

というのは、ユーザスクリプトのファイルは、Operator のオプションダイアログから登録するのですが、そのとき、同じファイル名を登録しようとすると、上書きしてもよいですか?というメッセージが表示されるためです。ユーザスクリプトを上書きする(されない)ようにという心配りです。

登録したユーザスクリプトのファイルは、C:\Documents and Settings\nakajiman\Application Data\Mozilla\Firefox\Profiles (環境によって違います) といったように、Firefox が管理するディレクトリにコピーして保存されるので、ダウンロードしたオリジナルのファイルは削除しても大丈夫です。

JavaScript 自体はとってもシンプルです。前述のスクリーンキャプチャと比較するだけで、大部分の意味がわかると思いますので、いくつかポイントだけ説明しておきます。

SemanticActions.add メソッドの第1引数は、ユーザスクリプトの識別子を表すものです。ですので、この識別子は、他のユーザスクリプトと必ず異なるものを指定しなければなりません。

どのメタデータ形式を扱うのか、そのメタデータをどのようにアクションにマッピングするのかは、scope プロパティで決まります。

詳しくは Mike’s Musings » Operator User Scripts を見てください。Operator のユーザスクリプトの開発方法や実例がたくさん掲載されています。

Microformats: Empowering Your Markup for Web 2.0Microformats: Empowering Your Markup for Web 2.0
John Allsop

Prototype and Scriptaculous in Action Programming Collective Intelligence: Building Smart Web 2.0 Applications Bulletproof Ajax (Voices That Matter) Restful Web Services Visualizing Data

by G-Tools