@blog.justoneplanet.info

検索のリッチ化が進む中、GoogleはRDFaとmicroformatに対応した。RDFaやmicroformatが埋め込まれたサイトでは検索結果が以下のように表示される。

■hCard（vCard）

人物に関する情報を記述する。

<div class="vcard">
<img class="photo" src="/wp-content/uploads/2009/12/1261861644_user_48.png" />
<p><strong class="fn">Mitsuaki Sample</strong></p>
<p><span class="org">Nutex Inc.</span>:<span class="title">Engineer</span></p>
<p><span class="adr">
<span class="postcode">141-0022</span><br />
<span class="region">東京都</span><span class="locality">品川区</span>
<span class="street-address">東五反田2-8-8</span><br />
</span></p>
</div>

会社（組織情報）だと以下のようになる。

<div class="vcard">
<dt><span class="fn org">株式会社Nutex</span></dt>
<dd><span class="url">http://nutex.jp</span></dd>
<dd><span class="tel">03-5422-8684</span></dd>
<dd class="adr"><span class="postal-code">141-0022</span><br />
<span class="region">東京都</span><span class="locality">品川区</span><span class="street-address">東五反田2-8-8</span></dd>
</div>

■hReview

レビュー情報を記述する。

<div class="hreview">
<p><span class="item"><strong><span class="fn">NutexのCMS</span></strong></span> - Score:<strong><span class="rating">4.0</span></strong></p>
<p><span class="summary">凄く使いやすい。</span></p>
<p>written by <span class="reviewer">Mitsuaki Sample</span>(<span class="dtreviewed">2009-12-20</span>)</p>
</div>

■hProduct

製品情報を記述する。

<div class="hproduct">
<h5><span class="fn">Rabit</span>(<span class="url">http://nutex.jp</span>)</h5>
<p><span class="price">\100</span></p>
<p class="ta-center"><span class="photo"><img src="http://blog.justoneplanet.info/wp-content/uploads/2009/12/1261863826_computer.png" alt="cms" width="128" height="128" /></span></p>
<p><span class="description">簡単CMS。</span></p>
<p>Brand: <span class="brand">Nutex</span> - Category: <span class="category">CMS</span></p>
</div>

■応用

レビュー情報と製品情報を組み合わせる。

<div class="hreview">
<div class="item hproduct">
<h5><span class="fn">Rabit</span>(<span class="url">http://nutex.jp</span>)</h5>
<p><span class="price">\100</span></p>
<p class="ta-center"><span class="photo"><img src="http://blog.justoneplanet.info/wp-content/uploads/2009/12/1261863826_computer.png" alt="cms" width="128" height="128" /></span></p>
<p><span class="description">簡単CMS。</span></p>
<p>Brand: <span class="brand">Nutex</span> - Category: <span class="category">CMS</span></p>
</div>
<p><span class="summary">凄く使いやすい。</span> - Score:<strong><span class="rating">4.0</span></strong></p>
<p>written by <span class="reviewer">Mitsuaki Sample</span>(<span class="dtreviewed">2009-12-20</span>)</p>
</div>

参考

• hCard
• hReview
• hProduct

以下のコードよりも

<ul>
<li><input type="checkbox" name="check[]" value="1" />1</li>
<li><input type="checkbox" name="check[]" value="2" />2</li>
<li><input type="checkbox" name="check[]" value="3" />3</li>
<li><input type="checkbox" name="check[]" value="4" />4</li>
<li><input type="checkbox" name="check[]" value="5" />5</li>
</ul>

array(1) {
  ["check"]=>
  array(2) {
    [0]=>
    string(1) "2"
    [1]=>
    string(1) "4"
  }
}

以下のコードの方が

<ul>
<li><input type="checkbox" name="check[1]" value="1" />1</li>
<li><input type="checkbox" name="check[2]" value="1" />2</li>
<li><input type="checkbox" name="check[3]" value="1" />3</li>
<li><input type="checkbox" name="check[4]" value="1" />4</li>
<li><input type="checkbox" name="check[5]" value="1" />5</li>
</ul>

array(1) {
  ["check"]=>
  array(2) {
    [2]=>
    string(1) "1"
    [4]=>
    string(1) "1"
  }
}

なんか好きだ。

ちなみにvalue属性が無かったときは

<ul>
<li><input type="checkbox" name="check[1]" />1</li>
<li><input type="checkbox" name="check[2]" />2</li>
<li><input type="checkbox" name="check[3]" />3</li>
<li><input type="checkbox" name="check[4]" />4</li>
<li><input type="checkbox" name="check[5]" />5</li>
</ul>

array(1) {
  ["check"]=>
  array(2) {
    [2]=>
    string(2) "on"
    [4]=>
    string(2) "on"
  }
}

『on』という文字列が入る。（IE6～8,FF）

■参考

17.2 Controls

以下を先頭に書く。

javascript:

Modernizrのソースを次にペーストしたら以下のソースを書く。

(function(obj){
	var txt = '';
	for(var i in obj){
		txt += i + ' : ' + obj[i] + '\n';
	}
	alert(txt);
})(window.Modernizr);

そうするとHTML5への対応やCSS3への対応がアラートされる。

頻繁に対応状況が変わるわけでないので無駄な作業な気がした。(´＿｀｡)

■参考

http://www.modernizr.com/

Geolocation APIを利用して取得。実装していないブラウザの為にGoogle Gearsを使用しても取得できる。

■Gears

使う準備をする。以下を書くだけで良い。

<script type="text/javascript" src="http://code.google.com/intl/ja/apis/gears/gears_init.js"></script>

■ソースコード

if(navigator.geolocation) {
	alert('geolocation');
	navigator.geolocation.getCurrentPosition(
		function(position){
			alert(position.coords.latitude + ',' + position.coords.longitude)
		},
		function(error){
			switch(error.code){
				case error.PERMISSION_DENIED :
					alert('Forbidden to use the Geolocation API.');
					break;
				case error.POSITION_UNAVAILABLE :
					alert('Location providers reported an internal error.');
					break;
				case error.TIMEOUT :
					alert('Timeout.');
					break;
				case error.UNKNOWN_ERROR :
				default :
					alert('Failed due to an unknown error.');
					break;
			}
		}
	);
}
else if(typeof google != 'undefined' && typeof google.gears != 'undefined'){
	alert('gears');
	google.gears.factory.create('beta.geolocation').getCurrentPosition(
		function(position){
			alert(position.coords.latitude + ',' + position.coords.longitude)
		},
		function(error){
			alert('error : ' + error.message);
		}
	);
}
else{
	alert('sorry');
}

Chrome LiteはGearsを搭載しているのでandroidでも位置情報が取得できる。

■結論

imgタグにtitle=”"と属性を加えてあげる

■注意

• altを書かないのは、アクセシビリティの観点、SEOの観点から見て好ましくない
• altをツールチップとして表示するのはInternetExplorerだけである

■結論

headタグ内に以下のような記述を加える。

<meta http-equiv="refresh" content="リダイレクトまでの時間; URL=リダイレクト先URL" />

■例

60秒後にGoogleへジャンプします。

<meta http-equiv="refresh" content="60; URL=http://www.google.co.jp/" />