日常的に Google を使っているわけですが、たまたまソースを見たら DOCTYPE の部分が HTML5 になっていました。
へー、と思っていろいろ見てみたのですが、DOCTYPE 以外は特にコレと言ったものは見つかりませんでした。
ちなみに他のサービスでは 画像検索 と 動画検索 で検索結果のページが HTML5 になっていました。
その流れで Google マップ を見てみたところ、こちらはトップページから DOCTYPE が HTML5 になっていました。
へー、と思っていろいろ見てみたのですが、DOCTYPE 以外は特n(ry
アップルも自身のサイトで DOCTYPE のみ HTML5 を利用していたりしますが、とりあえず DOCTYPE を書き換えた、というサイトはこれから増えて行くんですかね・・・?
続きを読む]]>Snow Leopard ではスリープから復帰時などに Expose のショートカットが効かなくなったりしてしまうときがあるようですね。
Snow Leopardで、Exposeのショートカットが効かなくなったら killall Dock
しかし、私に取っては致命的なバグが一つ。
ファンクションキーに割り当てている、Exposeのショートカットが突如として効かなくなる時があります。
私は、よく「F10」でデスクトップを表示してはファイルを掴んだりしているので、これが使えないのはかなりのストレス。
わかります。Expose をよく使う人ほど、コレが使えないというのはかなりのストレスですよね。
その対処法としてはターミナルを使うとの事。
で、いろいろ調べてみたところ、次の手順で解消することはできるようです。
・アプリケーション→ユーティリティ→ターミナル を起動する
・killall Dock と打ち込む
これで、Dockが一度消えたあと、再び表示されて使えるようになります。
と、これで大丈夫らしいのですが、毎回そのバグが出たときにターミナルを立ち上げたりするのは不便ですよね。普段から使ってる人なら良いのでしょうが。
これが自動化できればかなり楽そうです。
自動化と言えば Mac には Automator という便利なソフトが付属しています。
これを使えば自動化できそうです。
ということで唐突ですが、それが可能な Automation をアプリケーションにしました。以下からダウンロードできます。
著作権などは一切主張しないので自由に使ってやって下さい。(ブログなどで紹介してもらえると喜びますw)
中身については以下を参照で。
続きを読む]]>
こんな感じで数字を中心としたキーボードに切り替わります。
@ や . がデフォルトで表示されるようになり、メールアドレスが入力しやすくなります。
. や / , さらには .com なども表示され、URL が入力しやすくなります。
基本的には普通のキーボードですが、「Go」の代わりに「Search(もしくは検索)」と表示されるので、ここは検索ボックスだ、と明示する事ができますね。
キーボードが電話入力の形に変わります。これでどこから見ても電話番号の入力だとわかりますね。
これはすべて HTML の Form 要素に含まれており、一部は Opera や Webkit 系のブラウザが対応していたりもしていますね。(4.10 Forms — HTML 5)
今回紹介したフォームのサンプルを作りましたので、参考までにどうぞ。
「iPhone 3.1ソフトウェアで拡張されたフォーム」のサンプルを見る
iPhone 用サイトのフォームを作る際にはこの辺に気を使うとユーザに優しいかもしれないですね。
続きを読む]]>個人的にやりたかったのは以下の3つ。
ということでこんな感じになりました。ブログのコメント欄をイメージしています。尚、自分も jQuery を使用しています。
ツッコミなどなどお待ちしております。
「jQuery で placeholder をやってみる」のサンプルを見る
$(function () { var conf = { focusClass : 'focus', blurClass : 'blur' } $('input[placeholder], textarea[placeholder]').each(function(){ var placeholder = $(this).attr('placeholder'); $(this).val(placeholder).addClass(conf.blurClass) .focus(function() { if ( $(this).val() == placeholder ) { $(this) .val('') .removeClass(conf.blurClass) .addClass(conf.focusClass); } }) .blur(function() { if ( $(this).val() == '' ) { $(this) .val(placeholder) .removeClass(conf.focusClass) .addClass(conf.blurClass); } else { $(this).removeClass(conf.focusClass); } } ); }); $('form').submit(function(){ var input = $(this).find('input[placeholder], textarea[placeholder]'); $(input).each(function(){ if ( $(this).val() == $(this).attr('placeholder') ) { $(this) .val('') .removeClass(conf.blurClass) .removeAttr('placeholder'); } }); }); });
なんだかだんだん本筋とずれて来たのでこの辺で。
続きを読む]]>昨日(2008.3.27)開発者の古荘さんを招き、SOY CMS勉強会というものが開催され、お誘いを頂けたので参加してきました。
今回は SOY CMS の開発元である株式会社日本情報化農業研究所の代表取締役古荘貴司さんが直接教えてくださるという非常に贅沢なかたちでした。
このような機会を提供していただいた蒲生さん、古荘さん、そして今回参加された皆様、本当にありがとうございました。
少々長いエントリですので、今北産業ばりに簡単に3行でまとめました。
開発者の古荘さんよりご回答をいただけた部分を追記いたしました。
今回は SOY CMS の使い方を0から教えていただいたのですが、自分が書くよりも多分こちらを見ていただいた方が分かりやすいかと思います。:-P
としてしまうのも乱暴なので今回の勉強会で分かったことをいくつか書いておきます。
(インストールしたディレクトリ)/admin/にアクセスして初期のユーザ名とパスワードを設定するだけでインストールが完了するからです!
自分も含め、今回参加されていた皆様も同じように悩んでいた(?)のがこの概念的な部分だったと思います。どういうところが分かりにくかったのでしょうか?
例えば SOY CMS には各エントリにラベルという物を付けることができ、それによっていわゆるブログの分類や、その中のカテゴリの分類を行うことができます。
しかしそれらをどちらも自由に選択できる、ということは今まで他の CMS にはあまり無かった概念なので理解までに時間がかかりそうです。
このラベルは他の CMS でいうところのタグ、もしくは Gmail でいうラベルに相当する物だと考えるのが、今の時点では一番分かりやすいでしょうか?
その上で「A」というラベルのついたエントリだけをまとめたブログ、なんて物ができる訳です。
・・・と、書いてもよく分からないですよね?自分もまだ完全に理解できているとは言えないと思います(汗
他の参加されていた皆様も意見が出ていましたが、この辺りの文言を再考するとより分かりやすくなるのではないかと思いました。
(このラベルがカテゴリでもタグでも無く、自由に利用できる点はすごく良いと思うので、このメリットをうまく伝えることができると良いのですが・・・)
これは今回参加して SOY CMS の一番のウィークポイントだと思いました。
上に書いた概念の部分は理解してしまえばきっとどうでも無いことなのでしょうが、UI の部分に関しての問題はかなり大きいと思います。
例えばあることをしようと思ったときに、クリックしなければいけないボタンやリンクがあちこちにあるので単純に視点の移動だけでも大変です。
この点は参加されていた皆様も同じように指摘しており、この部分が改善されるだけでも随分と敷居が下がり、導入しやすくなるのではないか、と思いました。
(もちろんこの改善がかなり大変なのですが・・・)
SOY CMS の特徴でもあるコメントや id を書き換えるだけで、HTML が分かっている人であれば、既にあるサイトにも簡単に組み込める!という点に関しては本当にその通りで、柔軟にいろいろなことができるなぁ。というところが正直な感想です。
ただそのためには上にも書いたような UI の改善など「もっとこうだったら使いやすいのに・・・」と思った部分も多くありました。
ですのでここではそれをまとめてみたいと思います。
と、いろいろと辛口なことも言っていますが、既にあるサイトに簡単に組み込めるなど面白い点は多いですし、まだリリースされてから1年ほどということで今後にさらに期待できる CMS ではないでしょうか。
個人的にも応援していますし、どこか使えるところがあるなら使ってみたいな、というのが正直な感想です。
そのためにも、是非 UI の改善などを強く望みます。
大事なことなので数回言いました。
続きを読む]]>Web サイトというものがこれだけ普及してきた今、ただサイトを作れば良いという時期はもう過ぎたのではないでしょうか? 今後はより使いやすい、使っていて気持ちいいサイトというのが必要になってくるように思います。
ただ日本のサイトと海外のサイトを比べたりすると、ユーザビリティなどに関しての認識が少し違うように感じます。
サイトは本来それを閲覧するユーザにとって有益であるべきはずなのに、それを本当に実践しているサイトが日本には少ないように感じるのです。
そんな中、明日3/11にアップルストア銀座で Web Directions East09 -express- として「海外と日本のユーザビリティ」というイベントが開催されるようです。
ユーザビリティの良いサイトを制作するのに必要なユーザビリティテストとは何か、また Web Directions South08 にてユーザービリティについて講演をされた Digg の Daniel Bruka の内容なども交えてフランクなユーザビリティを学べれるようになっているそうです。
無料イベントですのでサイトのユーザビリティについて気になる方は参加してみてはいかがでしょうか?
mixi のコミュニティで参加表明が出来るようです。
Web Directions East09 -express- 「海外と日本のユーザビリティ」
2009.3.11 19:00~
場所:アップル銀座 mixi のコミュニティで参加表明はこちら
Daniel Bruka氏が2008年WebDirectionsSouthで披露したユーザービリティのスライドを踏まえて、オーストラリアで行われたWebDirectionsSouthに参加した菊池氏がご紹介いたします。
どうも、先日「ブログデザインを考える勉強会」というのに参加させていただきました。
おそらく自分は論理で攻める派
ではなくくつろいで柔らかな空気の演出できる方
で声をかけていただいたと思っているので、出来る限り「ここはこうあるべき!」ではなく自分がGeekなぺーじを見て「こうだったら見やすい、もしくは使いやすいなぁ」と思うところを中心に話してきました。
話してきましたと言っても今回は自分自身が勉強できることがたくさんありましたねー。
このような機会を提供していただいたあきみちさん、cremaさん、そして今回参加された皆様、本当にありがとうございました。
尚、今回参加された方々のエントリはこちらです :-)
今回のようにみんなで1つのデザインについて意見を交わすというのが初めての経験だったのですが、非常に面白かったです。普段話すとしても2,3人ですからねぇ・・・
自分が思ってる事と違う意見が出てきたりして「なるほど、そういう考え方もあるのかー」と自分自身の方がかなり勉強させていただいた気がします。
皆様の意見を聞けただけでも参加した価値はあったなー、と。そう思うわけでございます。
しかし既に様々な改善がなされているのを見て、自分もなんとかしなきゃいけないなぁ・・・と思っている次第であります。
(そう思ってもまだ何も出来ていない・・・orz)
またこういう機会があれば是非参加したいと思いました!(n'∀')η
続きを読む]]>先日開催された Web Directions East で John Allsopp 氏が Apple.com のナビゲーションバーを画像を使わずにライブコーディングしたとか。
残念ながら自分は Web Directions East に参加できなかったので実際には見ていないのですが、ニコニコ動画にそのさわりの動画がアップされています。
実際に John Allsopp 氏がどのようにコーディングしたのかは知らないのですが、自分の知ってる限りの知識でやってみようと思い、やってみましたw
ということで出来たのがこれです。
「Apple.com/jp のヘッダーナビゲーションを画像を使わずCSSのみでやってみる」のサンプルを見る
ただ今普通に見ても「違うんじゃね?」と思うでしょう。
これは CSS3 や CSS Gradients を使っているためで、完全な完成系は WebKit Nightly Builds のみで確認できます。
(ちなみに :last-child とかに対応していない一部のブラウザでは表示が崩れますww)
と言って終るのもアレなので、各ブラウザのスクリーンショットを貼っておきます。
尚、全て Mac 上です。クリックで実物大の画像がご覧になれます。
多分もっと作り込めると思うんですが、今日はこんなところで。
もっとこうするといいよ!などありましたらコメントなどいただけるとありがたいです!
続きを読む]]>相変わらずひねりの全くないタイトルでゴメンナサイ。
ということで先日 5 Ways to Spice up Your Images with CSS を見たときに最後の Image with Caption は違う書き方したいなと思っていたのですが、ちょっと思い立ったのでそれを実践してみました。
なお、今回画像は自分で撮った「影」を使用しています。;-)
5 Ways to Spice up Your Images with CSS のサンプルを見てなぜ自分が違う書き方したい
と感じたかですが、それは opacity を使っていることでキャプションの文字まで透明になってしまうことでした。
まぁコレくらいならいいかな、という許容範囲ではありますができれば自分はここはあまり透明にしたくはない・・・
ということで自分がやってみたサンプルがこちらです。
「やっぱりか」という声が聞こえてきそうですが、IE6を除く一般のブラウザは基本的に透過pngで対応させました。
これだとあとから透過具合を変えたいときに画像を差し替えなきゃいけない!という弊害もあるわけですが、まぁ大体この手のキャプションを使った場合は1度決めたらあまり変える物ではないかな、と思いこうしてみました。
まだ対応ブラザは Safari (Webkit) と Firefox3 以上とかだと思うのですが、CSS3 の RGBA colors に対応しているブラウザには RGBA で表示するようにしています。
どうやらOpera も Opera 10 で対応しそうな感じですし、これからもっと使える場面が増えるかもしれませんね。
ちなみにこのブログのデザインにも何カ所か RGBA を使用しています。
尚、Working Draft を見るとIf RGBA values are not supported by a user agent, they should be treated like unrecognized values per the CSS forward compatibility parsing rules. RGBA values must not be treated as simply an RGB value with the opacity ignored.
、つまり「もしブラウザが RGBA をサポートしていない場合、透明度を無視して RGB と扱ってはならない」とありますので RGBA を使う際は未対応ブラウザ用に別途色を指定してあげる必要がありますね。
(もちろんそれが必要ないデザインもあるでしょうが)
ということで上記の2パターンに当てはまらない IE6 さんですが、ここは泣く泣くということで CSS に直接 filter プロパティを記述してしのぎました。
IE6 は文字も透過せても良いかなーとか思ったのですが、これはもう仕方ないですね。早く IE7 や Firefox, Safari, Opera, Chrome などのブラウザが IE6 に置き換わり、IE6 のことを気にしないでも良いようになって欲しい物です。
ユニバーサル・エディット・ボタンというのがあるのを知って、対応サイトを見てたら「これ livedoor Blog で簡単に対応できそうだなぁ」と思ったのでやってみた。
ちなみにユニバーサル・エディット・ボタンっていうのはそのサイトが編集可能な場合に、それをユーザに知らせる方法で、今のところはFirefox拡張をインストールすると、使えます。
やり方はとっても簡単で 管理ページトップ > カスタマイズ/管理 > デザインのカスタマイズ > 個別記事ページ へ。
そこの<head>
~ </head>
に以下のコードを挿入するだけ。
<link rel="alternate" type="application/x-wiki" title="<$ArticleTitle ESCAPE$> を編集する" href="<$ArticleEditUrl$>" />
挿入後に全ページを再構築すれば、こんな感じでユニバーサル・エディット・ボタンがでてきます。
これで一度公開したページを編集したいとき、ワンクリックで編集ページに行く事ができますね!
いや、必要か?と聞かれたら必要だとは思わないんですが、対応できそうなのでしてみたっていう・・・ww
ちなみに対応したところで、その ID でログインしていないユーザは編集できませんので、ご安心してくださいませ。
続きを読む]]>先週末の14,15日と SwapSkills for Happy web weekend に行ってきました。
また、その前の13日は『マイクロフォーマット』出版記念セミナーにも行ってきましたので、John Allsopp氏のセミナーに3日間連続で行った事になります。
その辺の細かい内容についてはまだまとめきっていないのですが、全体的な感想としては「行って良かった」ということに尽きます。
毎回様々なセミナーに参加するたびに思うのですが、一番重要な事は同じ空間を共有する事だと思います。
necoze さんやヤスヒサさんも書かれていますが、本当にこれは参加するたびに強く思いますね。
今回セミナーで話されていた microformats や HTML5 なんかの話は、その気になればウェブや書籍、雑誌などから情報を手に入れる事は可能でしょう。
それでも、やっぱりその場で話をしたり聞いたり、同じ空間を共有するだけで得られるものはその何倍にもなると思います。
John Allsopp氏をはじめ、今回のセミナーをされたMichael Smith氏、神崎正英氏、そして参加されていたほとんどの人に言えると思うのですが、みんなウェブを楽しんでるなぁと。
それは単純に YouTube やニコニコ動画で動画を見て楽しむとか、Twitter や nowa でコミュニケーションを楽しむだけとも違う。
うまくいえないのですが、ウェブというもの自体を楽しんでいるという感じしました。
特にJohn Allsopp氏の話し振りからは「どうだい?CSS3 ってすごいだろ?」「microformats 使うとこんなことができるよ!」というような事を彼自身もワクワクしながら話している様子がこちらにも伝わってきました。
有害サイト規制法が成立するなど、何となく暗澹としてしまったりするわけですが、それでも自分もこうやったウェブを楽しんで行ければなぁ、と思います。
John Allsopp氏が主催する Web Directions が Web Directions East として今年の11月に東京で開催されるようです。
場所などまだ未定なところも多いようですが、コレは期待できるのではないでしょうか?
November 08, 2008 - November 11, 2008
2日間のカンファレンスと2日間のワークショップに分けて開催されるようです。
今のところ海外からのスピーカーとしては
そして、もちろんJohn Allsopp氏も来るという事でした。
日本からも5,6人の方がスピーカーとして参加されるようです。これは楽しみですね!
CSS に border-radius
といういわゆる角丸を作るプロパティがあるんだけど、今のところ Mozilla系(Gecko エンジン)と Safari(Webkit)はそれらを独自拡張のプロパティで採用している。
実際に使うとこんな感じ。
-moz-border-radius: 10px;
-webkit-border-radius; 10px:
で、ここまではまぁ良いんだけど、角別(右上だけ、とか)で指定しようとするとプロパティが両者で微妙に違うので間違えやすい。
Mozilla系 は radius
の後に top
とかなのに対して Webkit の場合は raius
の前に top
とか書いてあげる必要がある。
Webkit の方が CSS3 の Working Draft に近いというか同じなので、Mozilla系でもそちらが使えるようになると良いですね。
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
前回の Microformats x SwapSkills 個人的まとめで書ききれなかったこととかあったので新たにエントリを書いてみました。
なのでこのエントリは「Microformats x SwapSkills 個人的まとめ」を読んでから読むと良いと思います。
最も気になる点の一つにコレがあると思います。
期待されていた Firefox 3 での実装もどうやら先送りされそうですし、まだどのブラウザも標準実装はしていないと言うのが現状です。
しかしながら Firefox には Operator がありますし、Safari には Safari Microformats plugin があります。
IE も 8 で hSlice(WebSlice?)に対応しますし、ブラウザ自身が実装しなくてもプラグイン形式で使えるようになる、というのは増えて行くでしょうね。
また先日のセミナーの中で「某ブラウザ開発者の話」として紹介されていたものに、こうのがありました。
我々は microformats を含めたメタデータについて研究している。
しかし UI についていつも揉めている。
(引用者注:この部分うまくメモれていなかったのでニュアンスなどが違う場合があります。指摘などありましたら、頂けるとありがたいです)
確かに一般ユーザにまで、microformats を使わせる UI を作るのは難しい気がします。
microformats はそれだけではあまり活用できるものではなく、その他のアプリケーション(カレンダーやアドレス帳など)やサービスと組み合わせてその本領を発揮するものですし、それらのどれと連携させるのか?と言うところも難しいでしょうね。
その中で自分が面白そうだなと思っているのが Mac OS X Leopard の Mail に実装されているデータ検出機能です。
英語ですが、Apple - Business - Quick Tips - Mail Data Detectors で実際の動画が見られるのでどうぞ。
また Bento のようなアプリケーションの連携して、そのデータを様々に使える、というのも面白そうですね。
先日のセミナーで質問が出ていたのですが、勝手に microfomats 的なものを作るのはありか?とうもの。
個人的な意見を含めて言えば、勝手に作ってそれを組み込むのはありですが、おそらくそれと連携するサービスなどはほとんど出てこないと思いますよ。(そのデータがあまりに再利用価値のあるものであれば別でしょうが)
それよりも今ある標準的な microfomats に準じた方が、コレから増えるであろう連携サービスなどと容易に連携して行けるのではないでしょうか?
それでも「今ある microformats じゃ足りないんだよ!」と言う方はメーリングリストや IRC にコミットしていただいて、それを標準にして行けば良いのではないでしょうか? :-D
何となく先日思い立って hCard Creator の日本語版を作ってみました。
http://microformats.org/ 内にある hCard Creator では日本と住所の向きが逆だったりしてちょっと使いにくいのですが、その辺も含めて直したつもりです。
とは言っても、こういうものを作るのには慣れていないので、苦情などありましたらどんどんどうぞ。もちろんその全てに対応できるわけではありませんが・・・
2008.06.14 19:00~20:00 銀座アップルストア3Fにて開催。
今後,主流になるであろう CSS3 を先取りし,旧ブラウザに対応したままどのように組み込んでいくのか?概念では終らない実践的テクニックを、彼の開発したエディタ StyleMaster を使い、ハンズオンでコーディングしていきます。
2008.06.15 10:00~16:00 お茶の水 VISION CENTER Hall A+Bにて開催。
Web の世界は Wifi の普及や,PSP や iPodtouch などさまざまな機器からもアクセスできるようになりました。その中で、これからの Web はどうなっていくのか,またどのようなサイトを制作すればいいのか、解き明かします。
SwapSkills: 『Microformats x SwapSkills』アップルストア銀座 に行ってきました。
最近、またなんか Microformats が盛り上がっていたりもするらしいのですが、なかなか日本ではこれと行った情報源がほとんど無いのが現状です。
今回は、microformats.biz の中の人がお話をされるということで(時間的に結構ギリギリだったのですが)楽しみにしながら行ってきました。
そのまままとめてもつまらないので、ちょこっと自分の知ってる情報も加えつつまとめます。
違うよ。全然違うよ。もちろん合法だよ。
例えば名前をマークアップする時は普通に<p>でマークアップをしたりすると思うんだけど、そうするとこうなる。
<p>forestk</p>
でもこれだと何の情報か分からないただの文字列になってしまう。じゃぁ新しく名前を記述する<name>というタグを作る?そうするとこうなる。
<name>forestk</name>
でもこれをやりだすと色々な情報にあわせたタグが必要になってきて、それらを全部覚えなきゃいけなくてそんなの面倒くさい!
んじゃ、どうすんの?ってことになるんだけど、そこで Microformats の出番です。
上の名前だったらこうやってマークアップできる。
<p class="vcard fn">forestk</p>
これで新しいタグを覚えずに「名前」という情報をマークアップする事ができました。
つまり各要素に class などを与えることでその情報にもっと意味を持たせようというのが Microformats です。
まぁ厳密には<p class="vcard"><span class="fn">forestk</span></p>
ってマークアップした方が良いんだけど・・・
そんなこと無いよ!今でもたくさんのものが作られてるよ!
ざっとあげるとこんな感じ。
とかとか・・・これでも全部書けてるのかどうか不安ですw
日本語版があるものに関しては追記いたしました。で、例えばこの中で曲の情報なんかを記述する hAudio だとこんな感じになる。
<div class="haudio"> <h3 class="title">まめことネコゼのどたばた会議 第8回 ペパボだよ!全員集合!(後編)</h3> <p><abbr class="published" title="20080325">2008年03月25日</abbr>公開 <a rel="enclosure" href="http://woopsdez.jp/podcast/dotabatakaigi_008.mp3">Download MP3</a></p> <ul class="contributor"> <li class="vcard"><a href="http://twitter.com/woopsdez" class="url fn" rel="friend met">まめこ(id:woopsdez)</a></li> <li class="vcard"><a href="http://twitter.com/necoze" class="url fn" rel="friend met">ネコゼ(id:necoze)</a></li> </ul> </div>
で、実際に書くとこんな感じ。
簡単に中身を説明すると
という感じです。
contributor の中は hCard で記述していて、今回は何となく XFN も追加してみました。
そうだよね。なにかしらそれによってメリットが無いと導入しづらいよね。
ということで対応してるサービスやらアプリやらをいくつか。
米Yahoo! が発表したコレです。
Microformats などのメタデータを検索結果に出すそうです。
つまり・・・
これが
こうなる。
下の方がクリックしたくなるよね!
Google が発表したコレです。
XFN なんかを使ってリンク上の繋がり追っていくという感じですね。
今回のセミナーではこれをリンクの重み付けに使うんじゃないか?
という話しが出ていました。
つまり何の繋がりも無い人同士のリンクよりも、友達や恋人といった繋がりのある人からのリンクの方が重みがある、といった感じですね。
自分自身はまだこれがどうなっていくのかは分かりませんが、Social Graph API Demo - My Connections なんかを見ても面白い事ができそうな気はしますね。
Google マップ は以前から hCard に対応してますね。
例えば、こういうページなんかが対応しています。アップルストア loc: 銀座 - Google マップ
Twitter も hCard, XFN, hAtom に対応してます。
Jaiku では hCard と XFN に対応してますね。
livedoor Blogも第4世代 HTML が hAtom と hCard に対応していますね。
Firefox を microformats に対応させる Add-on に Operator というのがあります。
これを使うと microformats に反応するだけでなく、そこから別のアクションを起こす事ができます。
例えば、hCard であればそのコンタクト情報をアドレス帳なんかに書き出せたり、その住所を Google Maps で検索することも出来ます。
Safari にも microformats に対応させるプラグインがあって、Safari Microformats plugin がそうです。
この拡張自体が Leopard 以上対応なので,未だに Tiger を使ってる自分は試せないのですが、hCalendar を iCal に hCard をアドレスブックに書き出したりできるみたいですね。
使ったことある人は感想など聞かせてもらえるとありがたいです!
Mac 用の RSS Reader である NetNewsWire も hCalendar を iCal に hCard をアドレスブックに書き出したりできます。
IE8 で hSlice(WebSlice?)というのが発表されました。
出来ること自体は面白いのですが「それ hAtom で出来るよ、きっと」と思ってしまいますね。
hAtom 0.1 では必須だった author と updated が 0.2 でオプション扱いになったおかげで使える場面も増えますしね。
hSlice が hAtom にそのまま対応してくれれば色々と便利だとは思うんですけどねー。
これは知りませんでした。Firefox で hSlice を使える Add-on がありました。
えーと・・・誰か試して感想聞かせてくださいwww
Microformats に関しては日本語のリソースが非常に少ないのでどうやって勉強すれば良いのか、非常に悩ましいところです。
今回話されていたのでは、やはりよくできたマークアップを見て勉強する
というものでした。
Microformats.org に非常に優れたサンプルがたくさんありますので、本文は英語ですが、サンプル自体は見られると思いますので、その辺を参考にされると良いのではないでしょうか?
このようなチートシートも公開されています。
また hCalendar や hCard に関しては Creator があるのでまずはそれを利用してみるのも良いのではないでしょうか?
また XFN の生成ツールに関してはWeb標準Blogの木達さんが日本語版を作ってくださってます :-)
そういえば hReview Creator が全く動かないのですが,見てみると hreview.js が 404 Not Found になってる様子。どなたか行方をご存じないですか?w
上記の「どうやって勉強すれば良いのか」にも絡んでくるのですが、海外では既に「Microformats: Empowering Your Markup for Web 2.0」という本が出ています。
その本が IA Spectrum の浅野紀予さん翻訳、木達さん監修により「マイクロフォーマット Webページをより便利にする最新マークアップテクニック(仮題)」として毎日コミュニケーションズさんから発売予定とのことです。
まだ詳しい発売時期などはアナウンスできないとのことですが、遅くとも夏頃には皆さんのお手元にお届けしたいと話されていました。
また Microformats 自身がとても変化のスピードが速いものなので、日々新しいフォーマットが提案されたり改訂されたしていますが、その辺の情報に関してはできる限り補足として記述して行くとのことでした。
その他にも、例えば日付を記述する際の<abbr>
なんかに title 属性で ISO 形式で記述するのですが、それを音声ブラウザなどではただの文字列として読み上げてしまう、などのアクセシビリティ上の問題も指摘されていますので、その辺の情報もできる限り記述して行くとのことでした。
その後に Microformats Tシャツプレゼントのジャンケン大会があったのですが、なんと勝って Microformats Tシャツを頂いてしまいました!><
本当にありがとうございます><
上記の「Microformats: Empowering Your Markup for Web 2.0」の執筆者でもあり、また The Web Standards Project の初期メンバーでもある John Allsopp 氏が来日し6月にセミナーを行うということです。
2008.06.14 19:00~20:00 銀座アップルストア3Fにて開催。
今後,主流になるであろう CSS3 を先取りし,旧ブラウザに対応したままどのように組み込んでいくのか?概念では終らない実践的テクニックを、彼の開発したエディタ StyleMaster を使い、ハンズオンでコーディングしていきます。
2008.06.15 10:00~16:00 お茶の水 VISION CENTER Hall A+Bにて開催。
Web の世界は Wifi の普及や,PSP や iPodtouch などさまざまな機器からもアクセスできるようになりました。その中で、これからの Web はどうなっていくのか,またどのようなサイトを制作すればいいのか、解き明かします。
最近、Microformats 関係のエントリを色々見かけるんだけど、その中で気になったので1つだけかいておこうかなと。
ちなみに自分はまだまだ分かってないヒヨッコなので「ここはこうだよ!」というのがありましたら遠慮なくコメントなど下さい。
・・・と、逃げ道を作ったところで早速書いてみる。
Microformats の中に xfolk ってのがあるんだけど、これを自分のブログのエントリに付けるのはどうなのかな?と思った。
個人的には自分のブログのエントリを Microformats に対応させるのならば、hatom の方が適切な気がするのだけど・・・
詳細は公式 Wiki を参照。
でこの Wiki の一番最初にこう書いてある。
xFolk is a simple and open format for publishing collections of bookmarks. It better enables services for improving user experience and sharing data in web-based bookmarking software.
適当に意訳するとこんな感じだろうか。
「xFolk は自分のブックマークを公開するためのフォーマット。これを使うと SBM での利便性があがるよ!」
さらに Introduction を読んでもこれはブログのエントリではなくブックマークなどを公開する時に使うものなんだと思うんだけれども・・・
xfolk のリンク先に使われる Class 名のtaggedlink
はまさに「タグ付けされたリンク」という意味な訳で。
そこから考えても、これは「自分でタグ付けした」というよりも「みんなにタグ付けされた」という意味合いの方が適切に思うんだけどどうなんだろうか?
Firefox なんかを Microformats に対応させる tails っていう拡張があるんだけど、これを入れた状態で xfolk に対応してるサイトを見るとブックマークとして認識される。
同様に hatom に対応したサイトを見ると、ブログエントリとして認識される。
ということで、やっぱりブログのエントリを Microformats に対応させるのならば hatom の方が適切な気がするのだけど、どうなんだろうか?
xfolk に対応してるサイトは POOKMARK Airlines のトップページで試しました。