<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
   <channel>
      <title>HouseTect, JavaScripter Blog</title>
      <link>http://hisasann.com/housetect/</link>
      <description>Web屋のお仕事Hackブログ。最近はJava、Ruby On Rails、Mac、TextMateEditorなんかに興味津々でございます。</description>
      <language>ja</language>
      <copyright>Copyright 2008</copyright>
      <lastBuildDate>Fri, 25 Jul 2008 16:15:53 +0900</lastBuildDate>
      <generator>http://www.sixapart.com/movabletype/</generator>
      <docs>http://blogs.law.harvard.edu/tech/rss</docs> 

            <item>
         <title>AS3で画面いっぱい（フルスクリーン）で表示させる方法</title>
         <description><![CDATA[YouTubeなどを見ていると、画面いっぱいに開くためのボタンがありますが、
どうやっているんだろうと思って調べてみました。

<strong>stage.displayState</strong>プロパティの値を<strong>fullScreen</strong>にするだけだそうです。

ただし

<blockquote>
<p>フルスクリーン表示の切り替えは、セキュリティの都合上ユーザーが意図せずに行われるべきではないという事で、必ず<font id="strong">マウスイベント中か、キーボードイベント中</font>に記述する必要があります。操作していないときにプロパティを変更しても何も起こりません。
</p>
<cite>via: <a href="http://hakuhin.hp.infoseek.co.jp/main/as3/stage.html#STAGE_05" target="_blank">FlashゲームPG講座 For AS3.0【Stage クラスについて】</a></cite>
</blockquote>

となっているので、ボタンとかを作って試したほうがよいですね。

以下はコンボボックスを使った場合のサンプルコードです。

<textarea class="js" name="code">
combo.addEventListener(Event.CHANGE,function(event){
	switch(combo.selectedIndex){
	case 0:
		stage.displayState  = StageDisplayState.NORMAL;
		// stage.displayState  = "normal";
		break;
	case 1:
		stage.displayState  = StageDisplayState.FULL_SCREEN;
		// stage.displayState  = "fullScreen";
		break;
	}	
});
</textarea>

このとき

<textarea class="xml" name="code">
objectタグのほう - <param name="allowFullScreen" value="true" />
embedタグのほう - allowFullScreen="true"
</textarea>

とHTMLのほうでフルスクリーンを許可するのをお忘れなく。

■関連リンク
・<a href="http://hakuhin.hp.infoseek.co.jp/main/as/stage.html#FULL_00" target="_blank">Flashゲーム講座＆ASサンプル集【Flash の画面表示について】</a>
・<a href="http://hakuhin.hp.infoseek.co.jp/main/as3/stage.html#STAGE_05" target="_blank">FlashゲームPG講座 For AS3.0【Stage クラスについて】</a>
・<a href="http://moringo.moo.jp/wordpress/?p=8" target="_blank">[ActionScript 3.0]フルスクリーン(stage.displayState) | moriBlog</a>]]></description>
         <link>http://hisasann.com/housetect/2008/07/as3.html</link>
         <guid>http://hisasann.com/housetect/2008/07/as3.html</guid>
                  <category domain="http://www.sixapart.com/ns/types#category">技術</category>
        
                  <category domain="http://www.sixapart.com/ns/types#tag">ActionScript</category>
                  <category domain="http://www.sixapart.com/ns/types#tag">Flash</category>
                  <category domain="http://www.sixapart.com/ns/types#tag">YouTube</category>
        
         <pubDate>Fri, 25 Jul 2008 16:15:53 +0900</pubDate>
      </item>
            <item>
         <title>ActionScript（AS3）からJavaScriptを呼ぶ方法（ExternalInterfaceクラス）</title>
         <description><![CDATA[以外とハマったのでメモがてらに残しとく。
Flashを作っていくとどうしてもHTMLと連携してみたくなっちゃうのが心情で、じゃあどうやってやるの？というとネットにはそこそこ情報が載っているのですが、何かと難しい。（ボクだけかも）

<h2>使ってるツール</h2>

Adobe Flash CS3 Professional（Flash 9.0）

<h2>新規にFlashを作ってみる</h2>

<ol>
<li>ファイル→新規から「<strong>Flashファイル（AS3.0）</strong>」を選び新しくflaファイルを作成する</li>
<li>適当に名前をつけて保存しとく</li>
<li>1フレーム目を選択しF9ボタンを押す</li>
<li>出てきたアクションフレームに以下のコードを記載する</li>
</ol>

<textarea class="js" name="code">
// 呼びたいJSの関数名
var callJasFunction:String = "callJavascript";

// JSに渡したい引数
var msg:String = "Hello!";

// JavaScriptの実行
var returnValue:String = ExternalInterface.call(callJasFunction, msg).toString();
</textarea>

この状態で一旦<strong>パブリッシュ</strong>しとく。（Shift + F12）

これでHTMLファイルが作成されるので、今度はHTMLを編集する。

<h2>HTMLファイルを編集する</h2>

<strong>※注意</strong> HTMLを編集した後にまたパブリッシュしちゃうと元に戻っちゃうので注意
　これなんかいい方法ないのかな？

objectタグとembedタグのallowScriptAccessパラメータを<strong>always</strong>にする。
これをしないとローカルファイルにアクセスするときにエラーが出る。

<textarea class="java" name="code">
SecurityError: Error #2060: セキュリティサンドボックス侵害 : ExternalInterface 呼び出し元 file:///C:/Documents%20and%20Settings/user1/デスクトップ/Flash/swf-js-call.swf は file:///C:/Documents%20and%20Settings/user1/デスクトップ/Flash/swf-js-call.html にアクセスできません。
	at flash.external::ExternalInterface$/_initJS()
	at flash.external::ExternalInterface$/call()
	at swf_fla::MainTimeline/frame1()
</textarea>

こうならないように編集した後のHTMLは以下。

<textarea class="xml" name="code">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="550" height="400" id="swf-js-call" align="middle">
	<param name="allowScriptAccess" value="always" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="swf-js-call.swf" />
	<param name="quality" value="high" />
	<param name="bgcolor" value="#ffffff" />
	<embed src="swf-js-call.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="swf-js-call" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</textarea>

でもまだ先ほどと同じエラーは解消されない。

<h2>JavaScriptを編集する</h2>

IEでは画面がLoadしただんかいでFlashがアクティブにならない現象があるので、
それを回避するためのJavaScriptを容易されている場合がある。
今回使ったFlash CS3ではもれなく、そのJavaScriptがデフォルトで記載されているので
これを消去する。

scriptタグ内に<strong>AC_RunActiveContent</strong>に関する記述があるので、全部取り除いてみた。

後はFlashからコールしたい関数を容易するだけ！

<textarea class="js" name="code">
function callJavascript(str) {
   alert(str)
   return "hogehoge";
}
</textarea>

これだけｗ

これでHTMLをブラウザで表示した際に「Hello!」と表示されればOK！
AC_RunActiveContentを外さないとうまくエラーが消えないのがハマってしまったが、
これも何か回避方法があるんだろうか・・・


<h2>補足</h2>

ローカルFlashファイルからローカルHTMLファイルにアクセスする（今回の場合）ときに
警告ダイアログが出る場合がある。
そのダイアログの設定ボタンからAdobeのページに行って、フラッシュのセキュリティを「常に許可」とかにしとくと次回からちゃんとFlashが動作するようだ。

■関連リンク
・<a href="http://www.adobe.com/jp/devnet/flash/articles/external_interface.html" target="_blank">Adobe - デベロッパーセンター : 外部APIを使用したFlashとJavaScriptの接続</a>]]></description>
         <link>http://hisasann.com/housetect/2008/07/actionscriptas3javascriptexter.html</link>
         <guid>http://hisasann.com/housetect/2008/07/actionscriptas3javascriptexter.html</guid>
                  <category domain="http://www.sixapart.com/ns/types#category">技術</category>
        
                  <category domain="http://www.sixapart.com/ns/types#tag">ActionScript</category>
                  <category domain="http://www.sixapart.com/ns/types#tag">Flash</category>
                  <category domain="http://www.sixapart.com/ns/types#tag">JavaScript</category>
        
         <pubDate>Fri, 25 Jul 2008 14:38:24 +0900</pubDate>
      </item>
            <item>
         <title>IE6でレイヤーを表示するとプルダウンが前面にきてしまう現象</title>
         <description><![CDATA[lightBox系の実装をしている場合、画面全体を覆うレイヤー1枚とダイアログ用のレイヤー1枚を表示することがありますが、<br />
このときに背景にプルダウンがあるとそのプルダウンを<strong>1番前面に来てしまう現象</strong>がIE6であります。<br />
IE7ではこのバグが解消されていますが、まだまだIE6のシェアは高いのでサービスによってはこのバグを取りのぞかなけらばならない場合があります。<br />
<br />
<blockquote>
<p><li class="ttr">プルダウンメニューの上にレイヤーを重ねると、プルダウンが手前に表示されてしまう不具合が修正されていた。</li></p>
<cite>via: <a href="http://www.pxt.jp/ja/lab/rep/20061025_ie7/" target="_blank">PXT255; - Internet Explorer 7 ようやくリリース</a></cite>
</blockquote>
<br />
方法としては画面にあるすべてのプルダウンを「<strong>display:none</strong>」にしてやる方法と「<strong>iFrameを使う</strong>」方法があります。<br />
<br />
display:noneは結構力技でプルダウンの個数に速度が影響されるため、あんまりオススメできません。<br />
なのでiFrameで画面全体を覆ってしまう方法をご紹介します。<br />
<br />
以下サンプルソースです。<br />
IE6の場合のみに、iFrameを作成し透過させます。<br />
これで画面内にあるプルダウンが見えなくなるので、バグを防ぐことができるのです。<br />
<br />
<textarea class="javascript" name="code">
function isIE6(){
	if (typeof document.body.style.maxHeight == "undefined"){
		return true;
	}
	return false;
}

function hideSelectBox(){
	// IE6の場合
	if(isIE6()){
		if(document.getElementById("hideSelect")){
			return;
		}

		// iFrameでプルダウンを隠す
		var objFrame = document.createElement("iframe");
		objFrame.setAttribute("id", "hideSelect");
		objFrame.style.cssText = "z-index: 9998;"+
								"position: absolute;"+
								"top: 0;"+
								"left: 0;"+
								"background-color: #fff;"+
								"border: none;"+
								"filter: alpha(opacity=0);"+
								"-moz-opacity: 0;"+
								"opacity: 0;"+
								"height: 100%;"+
								"width: 100%;";
		var objBody = document.getElementsByTagName("body").item(0);
		objBody.appendChild(objFrame);
	}

	// テストなので3秒後にはプルダウンを表示する
	setTimeout(showSelectBox, 3000);
}

function showSelectBox(){
	// IE6の場合
	if(isIE6()){
		// iFrameの除去
		if(document.getElementById("hideSelect")){
			var objFrame = document.getElementById("hideSelect");
			var objBody = document.getElementsByTagName("body").item(0);
			objBody.removeChild(objFrame);
		}
	}
}

window.onload = hideSelectBox;
</textarea>
<br />
なんかトリッキーですが、これぐらいやらないとlightBox系の実装が不十分になってしまうんですね。<br />
う～ん、<strong>IE6対応</strong>・・・果てしなくメンドクサイｗ<br />
<br />
ちなみにこのコードはjQueryを使った<a href="http://jquery.com/demo/thickbox/" target="_blank">ThickBox 3.1</a>を参考にしています。<br />
ありがとうございます！<br />
<br />
■追記<br />
どうやらhttpsのサイトでこのiFrameの方法を使うとIE6で確認らしきダイアログが表示されてしまうようです。<br />
なのでプルダウンをdisplay:noneにする方法のほうが確かかもしれません。<br />
<br />
■さらに追記<br />
<a href="http://ewbi.blogs.com/develops/2004/07/ie_iframe_and_h.html" target="_blank">ewbi.develops: IE, IFRAME, and HTTPS</a><br />
こちらでiFrameを使ったHTTPSサイト対応が書いてありました。<br />
<br />
<strong>src="javascript:false;"</strong><br />
<br />
これを入れると大丈夫みたいです。ボクはまだ確認できてませんｗ]]></description>
         <link>http://hisasann.com/housetect/2008/07/ie6.html</link>
         <guid>http://hisasann.com/housetect/2008/07/ie6.html</guid>
                  <category domain="http://www.sixapart.com/ns/types#category">技術</category>
        
                  <category domain="http://www.sixapart.com/ns/types#tag">JavaScript</category>
                  <category domain="http://www.sixapart.com/ns/types#tag">jQuery</category>
        
         <pubDate>Thu, 24 Jul 2008 15:51:10 +0900</pubDate>
      </item>
            <item>
         <title>買った本</title>
         <description><![CDATA[<div class="amazlet-box" style="margin-bottom:0px;"><div class="amazlet-image" style="float:left;"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4812434289/hous-22/ref=nosim/" name="amazletlink" target="_blank"><img src="http://ecx.images-amazon.com/images/I/51Qf%2BGnc4uL._SL160_.jpg" alt="ハローバイバイ関暁夫の都市伝説2" style="border: none;" /></a></div><div class="amazlet-info" style="float:left;margin-left:15px;line-height:120%"><div class="amazlet-name" style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4812434289/hous-22/ref=nosim/" name="amazletlink" target="_blank">ハローバイバイ関暁夫の都市伝説2</a><div class="amazlet-powered-date" style="font-size:7pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="http://www.amazlet.com/browse/ASIN/4812434289/hous-22/ref=nosim/" title="ハローバイバイ関暁夫の都市伝説2" target="_blank">amazlet</a> at 08.07.24</div></div><div class="amazlet-detail">ハローバイバイ関 暁夫 <br />竹書房 <br />売り上げランキング: 371<br /></div><div class="amazlet-link" style="margin-top: 5px"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4812434289/hous-22/ref=nosim/" name="amazletlink" target="_blank">Amazon.co.jp で詳細を見る</a></div></div><div class="amazlet-footer" style="clear: left"></div></div>

ついつい買っちゃいました。
アングラ大好きなのでｗ
あいかわらずの「信じるか信じないかはあなた次第！」というフレーズでした。
もう全部信じちゃう。全部ね。そのほうが面白く読めるので。

<div class="amazlet-box" style="margin-bottom:0px;"><div class="amazlet-image" style="float:left;"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4478002037/hous-22/ref=nosim/" name="amazletlink" target="_blank"><img src="http://ecx.images-amazon.com/images/I/41w1dFWWB3L._SL160_.jpg" alt="効率が10倍アップする新・知的生産術―自分をグーグル化する方法" style="border: none;" /></a></div><div class="amazlet-info" style="float:left;margin-left:15px;line-height:120%"><div class="amazlet-name" style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4478002037/hous-22/ref=nosim/" name="amazletlink" target="_blank">効率が10倍アップする新・知的生産術―自分をグーグル化する方法</a><div class="amazlet-powered-date" style="font-size:7pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="http://www.amazlet.com/browse/ASIN/4478002037/hous-22/ref=nosim/" title="効率が10倍アップする新・知的生産術―自分をグーグル化する方法" target="_blank">amazlet</a> at 08.07.24</div></div><div class="amazlet-detail">勝間 和代 <br />ダイヤモンド社 <br />売り上げランキング: 522<br /></div><div class="amazlet-link" style="margin-top: 5px"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4478002037/hous-22/ref=nosim/" name="amazletlink" target="_blank">Amazon.co.jp で詳細を見る</a></div></div><div class="amazlet-footer" style="clear: left"></div></div>

基本的に<a href="http://www.mochioumeda.com/musings/" target="_blank">梅田望夫 - Musings - ウェブブック『生きるための水が湧くような思考』（梅田望夫著）</a>ここを読めば大体の知的生産術は理解できそうでしたが、通勤での勉強にと。

というかこの人子供が3人もいらっしゃるのですね。
それでこれだけビジネス思考というかLifehackerというのはすごいところ。
学生のときから成績優秀！
資格も最年少で取得したりとかなりなキャリアさん。う～ん、ボクにはさっぱりマネが出来ません。
見習うところが多すぎです。


一応前々からこの人のことは知っていたのですが、ここのところビジネス書を買う余裕がなかったのでちょっと奮発して購入しました。

じゃあ、都市伝説買うなって話ですねｗ
いや、ブログを続ける上でアングラは大切なのです。]]></description>
         <link>http://hisasann.com/housetect/2008/07/post_85.html</link>
         <guid>http://hisasann.com/housetect/2008/07/post_85.html</guid>
                  <category domain="http://www.sixapart.com/ns/types#category">本</category>
        
                  <category domain="http://www.sixapart.com/ns/types#tag">Book</category>
        
         <pubDate>Thu, 24 Jul 2008 11:58:32 +0900</pubDate>
      </item>
            <item>
         <title>RubyでJavaが書けるjRubyをインストールしてみた</title>
         <description><![CDATA[<h2>jRubyのダウンロード</h2>

以下よりjRubyをダウンロード。<br />
jruby-1.1.3をダウンロードしました。<br />
<a href="http://dist.codehaus.org/jruby/" target="_blank">Index of /jruby</a><br />
<br />
ちなみにRubyのバージョンは、<strong>1.8.6</strong>で、JDKのバージョンは<strong>1.5.0_10</strong>です。<br />
<br />
<h2>環境変数の設定</h2>

以下の変数を追加しました。<br />
<br />
<dl class="data">
<dt>
JRUBY_HOME
</dt>
<dd>
C:\work\jruby-1.0
</dd>
<dt>
PATH
</dt>
<dd>
%JRUBY_HOME%\bin
</dd>
</dl>

これでコマンドプロンプトから<br />
「<strong>jruby -v</strong>」<br />
と打ってバージョンが表示されればOKです。<br />
（一発目はちょっと時間が掛かりました。）<br />
<br />
<h2>jirbで遊んでみる</h2>

Rubyにはチョロっとプログラムをチェックしたいときなんかに使う「irb」が搭載されていますが、<br />
それのjRuby版です。<br />
<br />
コマンドプロンプトから<br />
「jirb」を入力し、入力待ちになりましたら<br />
「p "hoge"」<br />
と打てばhogeが出力されます。<br />
<br />
でもこれだとただのRubyですので、<br />
「import 'java.lang.System'」<br />
とJavaのインポート文を入力してから<br />
「System.out.println('hogehoge')」<br />
とすればちゃんと文字が出力されるのが確認できます。おお～～～！<br />
<br />
jirbから抜けるには「exit」と入力すればOKです。<br />

<h2>実際にRubyファイルに書いてみる</h2>

以下のようにhoge.rbファイルを作成しました。<br />
中身で面白い箇所は、System.out.printlnを呼び出しているところですね。<br />
<br />
<textarea class="ruby" name="code">
require "java"
class Hoge
  def showHoge()
	# p "hoge" これだと普通にRuby
	java.lang.System.out.println("hogehoge")
  end
end

hoge = Hoge.new
hoge.showHoge()
</textarea>
<br />
でさらにimport文を使って名前空間を省略できるようにすると<br />
<br />
<textarea class="ruby" name="code">
require "java"
import java.lang.System  # おお～import文がっ！
class Hoge
  def showHoge()
	System.out.println("hogehoge")
  end
end

hoge = Hoge.new
hoge.showHoge()
</textarea>
<br />
なんかRubyとJavaが混在しているので難しいですねｗ<br />

<h2>まとめ</h2>

じょじょにRubyの人気が出てきて、Ruby on Railsでの開発も小規模ながら進んできていると思います。<br />
そんなRuby on RailsからJavaのAPIを呼び出したり、他の人が作ったJavaライブラリを使ったり出来るのはとっても面白いと感じました。<br /><br />
ただ2個の言語が混ざっているので、超エンタープライズなシステムでは厳しいかな？と思いました。<br />
でもWebサービス開発とかでRailsとJavaAPIの<strong>マッシュアップ</strong>みたいなことができたらなんか楽しそう。<br />
RailsからJDBCでRDBにアクセス！すっ、すごいっす。<br />
<br />
■関連記事<br />
･<a href="http://www.thinkit.co.jp/free/article/0709/4/2/" target="_blank">[Think IT] 第2回：JRubyでHello, World！ (1/2)</a><br />
こちらの記事を大変参考にさせていただきました。]]></description>
         <link>http://hisasann.com/housetect/2008/07/rubyjavajruby.html</link>
         <guid>http://hisasann.com/housetect/2008/07/rubyjavajruby.html</guid>
                  <category domain="http://www.sixapart.com/ns/types#category">技術</category>
        
                  <category domain="http://www.sixapart.com/ns/types#tag">Java</category>
                  <category domain="http://www.sixapart.com/ns/types#tag">Ruby</category>
                  <category domain="http://www.sixapart.com/ns/types#tag">Ruby On Rails</category>
        
         <pubDate>Thu, 24 Jul 2008 10:45:04 +0900</pubDate>
      </item>
            <item>
         <title>Random Image Plugin for Wordpressで過去記事を蘇らせる</title>
         <description><![CDATA[<img src="http://img.skitch.com/20080723-jjuft6tstst147g3kb5t583ujp.jpg" alt="DigitalGrounder.COM, 6D775916306E30C730B830BF30EB30A230FC30C830D630ED30B0" align="left" hspace="5px"/>
<a href="http://news-walker.net/" target="_blank">NewsWalker.NET</a>さんで知りました。

Wordpressはコンパイル型CMSではないので毎回PHPが実行されてMTと比べるとレンダリングに時間がかかってしまいます。
なので、ボクはここ最近1個のプラグインしか起動させていませんでした。
（前はいろいろ起動してたら深夜にめちゃくちゃ遅くなって<strong>10秒</strong>とかかかってしまっていました。）

とはいってもプラグインは魅力的で入れればソレ相当の楽しさがあるので、久々にチャレンジ。
今回は<strong>Random Image Plugin for Wordpress</strong>というもので、過去記事からランダムに画像＋リンクを表示してくれるというすぐれもの。

画像の個数やスタイルの指定までできるので、サイドバーが細いブログでも問題ありません。
←で表示している画像はランダムに表示した場合です。結構いい感じに表示してくれます。

いやはやこりゃ便利だ！

ダウンロードは以下から。
<a href="http://justinsomnia.org/2005/09/random-image-plugin-for-wordpress/" target="_blank">Random Image Plugin for WordPress - Justinsomnia</a>

■参考リンク
・<a href="http://haaya.net/1036" target="_blank">WordPressプラグイン『Random Image plugin』を使って過去記事を掘り起こす。 - HAAYA</a>
こちらの記事ですべてまかなえました。]]></description>
         <link>http://hisasann.com/housetect/2008/07/random_image_plugin_for_wordpr.html</link>
         <guid>http://hisasann.com/housetect/2008/07/random_image_plugin_for_wordpr.html</guid>
                  <category domain="http://www.sixapart.com/ns/types#category">ブログ</category>
        
                  <category domain="http://www.sixapart.com/ns/types#tag">Blog</category>
                  <category domain="http://www.sixapart.com/ns/types#tag">WordPress</category>
        
         <pubDate>Thu, 24 Jul 2008 01:39:41 +0900</pubDate>
      </item>
            <item>
         <title>ボクが入れているFirefoxアドオン12個</title>
         <description><![CDATA[今後のメモのために。

<dl>
<dt>HTMLのバリデイトを「ページのソースを表示」に統合</dt>
<dd style="text-align: right;"><a href="https://addons.mozilla.org/ja/firefox/addon/249" target="_blank">Html Validator :: Firefox Add-ons</a></dd>
<dt>ちょっとしたメモに大活躍</dt>
<dd style="text-align: right;"><a href="http://www.google.com/notebook/download/" target="_blank">Google ノートブック</a></dd>
<dt>ブログで大活躍の色取得ツール</dt>
<dd style="text-align: right;"><a href="https://addons.mozilla.org/ja/firefox/addon/271" target="_blank">ColorZilla :: Firefox Add-ons</a></dd>
<dt>IEなくても大丈夫！IE5.5からIE8 beta 1として表示可能</dt>
<dd style="text-align: right;"><a href="https://addons.mozilla.org/ja/firefox/addon/6455" target="_blank">IE NetRenderer :: Firefox Add-ons</a></dd>
<dt>CSSやJSだけを見たいときに便利</dt>
<dd style="text-align: right;"><a href="https://addons.mozilla.org/ja/firefox/addon/2076" target="_blank">JSView :: Firefox Add-ons</a></dd>
<dt>Web開発では必須中の必須</dt>
<dd style="text-align: right;"><a href="https://addons.mozilla.org/ja/firefox/addon/1843" target="_blank">Firebug :: Firefox Add-ons</a></dd>
<dt>Web開発であると便利な機能盛り合わせ</dt>
<dd style="text-align: right;"><a href="https://addons.mozilla.org/ja/firefox/addon/60" target="_blank">Web Developer :: Firefox Add-ons</a></dd>
<dt>画面内のリンク一覧を別ウィンドウで表示</dt>
<dd style="text-align: right;"><a href="https://addons.mozilla.org/en-US/firefox/addon/7312" target="_blank">Link Gopher :: Firefox Add-ons</a></dd>
<dt>リンク切れなどを探すときに便利</dt>
<dd style="text-align: right;"><a href="https://addons.mozilla.org/ja/firefox/addon/4094" target="_blank">Link Evaluator :: Firefox Add-ons</a></dd>
<dt>Livedoor Readerの購読数を表示</dt>
<dd style="text-align: right;"><a href="http://miniturbo.org/product/extension/ldrcounter" target="_blank">miniturbo.org - LDRカウンタ</a></dd>
<dt>TwitterをFirefoxで手軽に見れる</dt>
<dd style="text-align: right;"><a href="https://addons.mozilla.org/ja/firefox/addon/5081" target="_blank">TwitterFox :: Firefox Add-ons</a></dd>
<dt>もうこれなしでTumblrを使えない</dt>
<dd style="text-align: right;"><a href="http://code.google.com/p/tombloo/wiki/TomblooUsage" target="_blank">TomblooUsage - tombloo - Google Code</a></dd>
</dl>

これ以外にもいろいろとお試しで入れているので、画面がごちゃごちゃしているがFirefox2のときほど重くないのがFirefox3のありがたさですね。]]></description>
         <link>http://hisasann.com/housetect/2008/07/firefox12.html</link>
         <guid>http://hisasann.com/housetect/2008/07/firefox12.html</guid>
                  <category domain="http://www.sixapart.com/ns/types#category">Firefox</category>
        
                  <category domain="http://www.sixapart.com/ns/types#tag">Firefox</category>
                  <category domain="http://www.sixapart.com/ns/types#tag">addon</category>
        
         <pubDate>Wed, 23 Jul 2008 16:25:21 +0900</pubDate>
      </item>
            <item>
         <title>jQueryで画面の中央に要素を表示する方法</title>
         <description><![CDATA[jQueryで画面の中央に要素を表示する方法

レイヤーを表示する場合なんかに有効な方法ですが、画面の中央にダイアログやボックスを表示する場合
jQueryを使うとかなり簡単に書けました。<br />
<br />
以下のコードは<strong>windowオブジェクト</strong>をjQueryの引数に渡して<strong>widthメソッド</strong>や<strong>heightメソッド</strong>で取得しています。<br />

<h2>jQueryのwidthメソッド・heightメソッドを使う</h2>

<textarea class="javascript" name="code">
$(function(){
	var left = Math.floor(($(window).width() - $("#hoge").width()) / 2);
	var top  = Math.floor(($(window).height() - $("#hoge").height()) / 2);
	$("#hoge")
		.css({
			"top": top,
			"left": left,
			"opacity": 0
		 })
		.animate({opacity: "1"},{queue: true, duration: 4000, easing: "linear", complete: function(){}});
});
</textarea>
<br />
#hogeというのは中央に表示したい要素のidになります。<br />
animateでアニメーションさせるとちょっぴりかっこよくなりました。<br />
<br />
Firefox3とIE7で確認しましたが、ちゃんと真ん中に来てました！<br />
これは助かります。<br />
<br />
ちなみに画面全体（スクロールする部分も含む）の幅や高さを取得したい場合は<br />

<textarea class="javascript" name="code">
$(function(){
	var left = $(document).width();
	var top  = $(document).height();
});
</textarea>
<br />
とすると取得が可能です。<br />

<h2>jQueryを使わずに自前でやってみる</h2>

クロスブラウザで泣きを見るパターンですが、画面の幅や高さを取得する方法は<br />
各ブラウザによってさまざまです。<br />
なのでレイヤー関連を扱う場合には以下のように、クロスブラウザ対応で取得する必要があります。<br />

<textarea class="javascript" name="code">
var obj = document.getElementById("hoge");
var pageSize = getPageSize();
var emSize = getElementSize(obj);
var left = Math.floor((pageSize.width - emSize.width) / 2);
var top = Math.floor((pageSize.height - emSize.height) / 2);
obj.style.left = left + 'px';
obj.style.top  = top + 'px';

function getPageSize()
{
	return {
		width: window.innerWidth || (document.documentElement && document.documentElement.clientWidth) || document.body.clientWidth,
		height: window.innerHeight || (document.documentElement && document.documentElement.clientHeight) || document.body.clientHeight
	};
}

function getElementSize(obj)
{
	return {
		width: obj.offsetWidth || obj.style.pixelWidth,
		height: obj.offsetHeight || obj.style.pixelHeight
	};
}
</textarea>
<br />
う～ん、あんまり見やすいコードではないですが、jQueryを使えない縛りがある場合には<br />
こんな感じで書く必要がありますね。<br />
<br />
上記コードは<br />
<ul>
<li>Firefox1.5～3</li>
<li>IE6.0</li>
<li>IE7.0</li>
<li>Netscape7.1</li>
<li>Opera9</li>
<li>Safari3.1</li>
</ul>
<br />
などなどに対応している感じです。<br />
<br />
■関連リンク<br />
<a href="http://d.hatena.ne.jp/onozaty/20060802/p1" target="_blank">ブラウザの表示領域のサイズを取得する方法。 - Enjoy*Study</a><br />
を参考にさせていただきました。<br />
どうもありがとうございます！]]></description>
         <link>http://hisasann.com/housetect/2008/07/jquery_2.html</link>
         <guid>http://hisasann.com/housetect/2008/07/jquery_2.html</guid>
                  <category domain="http://www.sixapart.com/ns/types#category">技術</category>
        
                  <category domain="http://www.sixapart.com/ns/types#tag">JavaScript</category>
                  <category domain="http://www.sixapart.com/ns/types#tag">jQuery</category>
        
         <pubDate>Wed, 23 Jul 2008 12:40:22 +0900</pubDate>
      </item>
            <item>
         <title>Syntaxhighlighterでコードにシンタックスハイライトを付ける</title>
         <description><![CDATA[<img src="http://img.skitch.com/20080719-k41ijtken8yuw66kfyn5as7c6n.jpg" alt="syntaxhighlighter - Google Code"/>

ブログにコードを書くことはしばしばあるのですが、これが意外と面倒でした。
はてなダイアリーとか使っていれば<strong>スーパーpre記法</strong>で自動で<strong>シンタックスハイライト</strong>されますが、Movable Typeはそこまで親切じゃありません。

そんなコーダーブロガーを助けてくれるのが、このsyntaxhighlighterです。
以下のサイトで詳しく導入方法がのっているので、ブロガーでコーダーのかたは是非チャレンジしてみてください。

<a href="http://bizcaz.com/archives/2007/04/11-220828.php" target="_blank">Movable Type 備忘録 - dp.SyntaxHighlighter</a>

■syntaxhighlighterのダウンロードサイト
<a href="http://code.google.com/p/syntaxhighlighter/" target="_blank">syntaxhighlighter - Google Code</a>

Javascriptのファイルを何個かロードするので多少遅くなるかもしれませんが、これもシンタックスハイライトのためです！

ただちょっとよくわかっていないのが、syntaxhighlighterにシンタックスはハイライトをさせるのにTextareaを使っているのですが、MTの自動改行がオンになっているとTextareaの中のコードにまで&lt;br /&gt;が入っちゃうのでこれをなんとか阻止できないもんか・・・

なのでコードをエントリーに書くときは自動改行をオフにしてやってます。
でもこれだと改行したいところで&lt;br /&gt;を自分で入れないといけないのですごい手間です。う〜ん。]]></description>
         <link>http://hisasann.com/housetect/2008/07/syntaxhighlighter.html</link>
         <guid>http://hisasann.com/housetect/2008/07/syntaxhighlighter.html</guid>
                  <category domain="http://www.sixapart.com/ns/types#category">ブログ</category>
        
                  <category domain="http://www.sixapart.com/ns/types#tag">Blog</category>
                  <category domain="http://www.sixapart.com/ns/types#tag">JavaScript</category>
                  <category domain="http://www.sixapart.com/ns/types#tag">Program</category>
        
         <pubDate>Sat, 19 Jul 2008 22:02:48 +0900</pubDate>
      </item>
            <item>
         <title>Objectへの分割代入って面白い</title>
         <description><![CDATA[こんなことができるみたい。<br>
<textarea name="code" class="javascript">
var { offsetWidth: x, offsetHeight: y } = document.body;
console.log("bodyのoffsetWidthは%dpx、offsetHeightは%dpxです" x, y);
</textarea>
[via]
<a href="http://d.hatena.ne.jp/javascripter/" target="_blank">素人がプログラミングを勉強するブログ</a>
<br><br>
オブジェクトが持っているプロパティ名と同じ名前のハッシュIDを持つハッシュを作ると、いちいち何行もプロパティを抜き取る処理を書かなくてもよい。
<br>
なので、自作したクラスとかで試してみるとこんな感じになる。
<br>
<textarea name="code" class="javascript">
var Hoge = function () {};
Hoge.prototype.hoge = "ほげ";
Hoge.prototype.bar = "ば～";
Hoge =  new Hoge();
var {hoge : x, bar : y} = Hoge;
console.log(x, y);
</textarea>
<br>
さらにこう書いて、変数を省略することもできるみたい。
<br>
<textarea name="code" class="javascript">
var Hoge = function () {};
Hoge.prototype.hoge = "ほげ";
Hoge.prototype.bar = "ば～";
Hoge =  new Hoge();
var {hoge, bar} = Hoge;
console.log(hoge, bar);
</textarea>
<br>
なかなか興味深いですね。]]></description>
         <link>http://hisasann.com/housetect/2008/07/object.html</link>
         <guid>http://hisasann.com/housetect/2008/07/object.html</guid>
                  <category domain="http://www.sixapart.com/ns/types#category">技術</category>
        
                  <category domain="http://www.sixapart.com/ns/types#tag">JavaScript</category>
        
         <pubDate>Fri, 18 Jul 2008 13:10:39 +0900</pubDate>
      </item>
            <item>
         <title>ライブラリ製作で使われているレトロなJavaScript関数10個</title>
         <description><![CDATA[<a href="http://www.dustindiaz.com/top-ten-javascript/" target="_blank">Top 10 custom JavaScript functions of all time</a>

こちらの記事は2005年に書かれたものですが、久々にこういったJavaScript関数を見ると先駆者たちはすごいな～と関心させられます。

たとえば、

<h2>イベントを追加するaddEventメソッド</h2>

ほんといまさらですが、よくできたメソッドだと思います。
今では当たり前かもしれませんが、<strong>addEventListener</strong>と<strong>attachEvent</strong>を使ってIEとIE以外を振り分けているのとか、なんかグッときちゃう。

<pre><font color="#0000FF">function</font> addEvent(elm, evType, fn, useCapture) {
    <font color="#0000FF">if</font> (elm.addEventListener) {
        elm.addEventListener(evType, fn, useCapture);
        <font color="#0000FF">return</font> <font color="#0000FF">true</font>;
    }
    <font color="#0000FF">else</font> <font color="#0000FF">if</font> (elm.attachEvent) {
        <font color="#0000FF">var</font> r = elm.attachEvent(<font color="#FF00FF">'on'</font> + evType, fn);
        <font color="#0000FF">return</font> r;
    }
    <font color="#0000FF">else</font> {
        elm[<font color="#FF00FF">'on'</font> + evType] = fn;
    }
}
</pre>

よくclass名からエレメントを特定しているけど、これってどうやってるの？という場合には以下、

<h2>クラス名から取得できるgetElementsByClassメソッド</h2>

結構レトロですが、HTMLタグが引数に設定されていない場合は全体から特定のclass名を持つエレメントを探していますね。
う～ん、これはなかなか重そうだ。

<pre><font color="#0000FF">function</font> getElementsByClass(searchClass, node, tag) {
    <font color="#0000FF">var</font> classElements =  <font color="#0000FF">new</font> <font color="#FF0000">Array</font>();
    <font color="#0000FF">if</font> (node == <font color="#0000FF">null</font> )node = <font color="#FF0000">document</font>;
    <font color="#0000FF">if</font> (tag == <font color="#0000FF">null</font> )tag = <font color="#FF00FF">'*'</font>;
    <font color="#0000FF">var</font> els = node.getElementsByTagName(tag);
    <font color="#0000FF">var</font> elsLen = els.length;
    <font color="#0000FF">var</font> pattern =  <font color="#0000FF">new</font> RegExp(<font color="#FF00FF">'(^|\\\\s)'</font> + searchClass + <font color="#FF00FF">'(\\\\s|$)'</font>);
    <font color="#0000FF">for</font> (i = 0, j = 0; i &lt; elsLen; i++) {
        <font color="#0000FF">if</font> (pattern.test(els[i].className)) {
            classElements[j] = els[i];
            j++;
        }
    }
    <font color="#0000FF">return</font> classElements;
}
</pre>

prototype.jsやjquery.jsを使っているとあんまり気にしないかもしれませんが、ちょっとのぞくとレトロなからくりだったり、関心させられるからくりだったりするのでたまに振り返るのは悪くないかもしれません。

これ以外にも面白い関数が紹介されていますので、是非見てみてくださいな。

<a href="http://www.dustindiaz.com/top-ten-javascript/" target="_blank">Top 10 custom JavaScript functions of all time</a>]]></description>
         <link>http://hisasann.com/housetect/2008/07/javascript10.html</link>
         <guid>http://hisasann.com/housetect/2008/07/javascript10.html</guid>
                  <category domain="http://www.sixapart.com/ns/types#category">技術</category>
        
                  <category domain="http://www.sixapart.com/ns/types#tag">JavaScript</category>
        
         <pubDate>Wed, 16 Jul 2008 10:06:17 +0900</pubDate>
      </item>
            <item>
         <title>jQueryのanimateメソッドの使い方</title>
         <description><![CDATA[<a href="http://www.amazon.co.jp/exec/obidos/ASIN/4774134902/hous-22/ref=nosim/" name="amazletlink" target="_blank"><img align="right" hspace="5" src="http://ecx.images-amazon.com/images/I/517I%2Bb6q4kL._SL160_.jpg" alt="jQueryで作る Ajaxアプリケーション" style="border: none;" /></a>
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/4774134902/hous-22/ref=nosim/" name="amazletlink" target="_blank">jQueryで作る Ajaxアプリケーション</a>を読んでてanimateメソッドについて細かく書かれていたので遊んでみました。
（本当はjQueryのソースを追ってたのですが、なんか難しくて挫折してたので本当に助かります！）

前に<a href="http://hisasann.com/housetect/2008/04/jquerytoggle.html">jQueryのtoggleメソッドって気持ちいい</a>でtoggleメソッドの使い方なんかを紹介しましたが、このメソッドも内部的にanimeteメソッドを呼んでいます。

<pre><strong>toggle</strong> : <font color="#0000FF">function</font> (fn, fn2) {
    <font color="#0000FF">return</font> jQuery.isFunction(fn) &amp;&amp; jQuery.isFunction(fn2) ? <font color="#0000FF">this</font>._toggle.apply(<font color="#0000FF">this</font>, arguments) : fn ? <font color="#0000FF">this</font>.<strong>animate</strong>( {
        height : <font color="#FF00FF">"toggle"</font>, width : <font color="#FF00FF">"toggle"</font>, opacity : <font color="#FF00FF">"toggle"</font>;
    }
    , fn, fn2) : <font color="#0000FF">this</font>.each(<font color="#0000FF">function</font> () {
        jQuery(<font color="#0000FF">this</font>)[jQuery(<font color="#0000FF">this</font>).is(<font color="#FF00FF">":hidden"</font>) ? <font color="#FF00FF">"show"</font> : <font color="#FF00FF">"hide"</font>]();
    }
    );
}
, </pre>

<h2>animeteメソッドのシグネチャー</h2>

animeteメソッドのシグネチャーは

こんな感じで、

<pre>animate : <font color="#0000FF">function</font> (prop, speed, easing, callback)</pre>

いったい何ものかと言うと、

<dl class="data">
<dt>
prop
</dt>
<dd>
CSSプロパティを連想配列でいっきに渡せます
</dd>
<dt>
speed
</dt>
<dd>
名前のとおりアニメーションのスピードです
</dd>
<dt>
easing
</dt>
<dd>
アニメーション方法を指定できます。プラグインなどを使う場合にはここの文字列を変更するみたいです。デフォルトでは"linear"が指定されています
</dd>
<dt>
callback
</dt>
<dd>
アニメーション完了時に呼び出したいコールバック関数を指定できます
</dd>
</dl>

この4つのメソッドを渡すことによっていろいろなアニメーションをさせることができるのです。
なんか意外と簡単そうです。]]></description>
         <link>http://hisasann.com/housetect/2008/07/jqueryanimate.html</link>
         <guid>http://hisasann.com/housetect/2008/07/jqueryanimate.html</guid>
                  <category domain="http://www.sixapart.com/ns/types#category">技術</category>
        
                  <category domain="http://www.sixapart.com/ns/types#tag">JavaScript</category>
                  <category domain="http://www.sixapart.com/ns/types#tag">jQuery</category>
        
         <pubDate>Mon, 14 Jul 2008 12:07:49 +0900</pubDate>
      </item>
            <item>
         <title>買った本</title>
         <description><![CDATA[<div class="amazlet-box" style="margin-bottom:0px;"><div class="amazlet-image" style="float:left;"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4774134902/hous-22/ref=nosim/" name="amazletlink" target="_blank"><img src="http://ecx.images-amazon.com/images/I/517I%2Bb6q4kL._SL160_.jpg" alt="jQueryで作る Ajaxアプリケーション" style="border: none;" /></a></div><div class="amazlet-info" style="float:left;margin-left:15px;line-height:120%"><div class="amazlet-name" style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4774134902/hous-22/ref=nosim/" name="amazletlink" target="_blank">jQueryで作る Ajaxアプリケーション</a><div class="amazlet-powered-date" style="font-size:7pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="http://www.amazlet.com/browse/ASIN/4774134902/hous-22/ref=nosim/" title="jQueryで作る Ajaxアプリケーション" target="_blank">amazlet</a> at 08.07.12</div></div><div class="amazlet-detail">沖林 正紀 <br />技術評論社 <br />売り上げランキング: 2433<br /></div><div class="amazlet-link" style="margin-top: 5px"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4774134902/hous-22/ref=nosim/" name="amazletlink" target="_blank">Amazon.co.jp で詳細を見る</a></div></div><div class="amazlet-footer" style="clear: left"></div></div>

いつのまにかjQueryの本が出てたのでまよわず購入。
もう一冊あったけど、なんかこの赤い感じが気に入ったからこっちにした。

<div class="amazlet-box" style="margin-bottom:0px;"><div class="amazlet-image" style="float:left;"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4797348526/hous-22/ref=nosim/" name="amazletlink" target="_blank"><img src="http://ecx.images-amazon.com/images/I/51JTpLq%2BFaL._SL160_.jpg" alt="Flashデザインラボ -プロに学ぶ、一生枯れない永久不滅テクニック (Design Lab+ 1-2)" style="border: none;" /></a></div><div class="amazlet-info" style="float:left;margin-left:15px;line-height:120%"><div class="amazlet-name" style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4797348526/hous-22/ref=nosim/" name="amazletlink" target="_blank">Flashデザインラボ -プロに学ぶ、一生枯れない永久不滅テクニック (Design Lab+ 1-2)</a><div class="amazlet-powered-date" style="font-size:7pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="http://www.amazlet.com/browse/ASIN/4797348526/hous-22/ref=nosim/" title="Flashデザインラボ -プロに学ぶ、一生枯れない永久不滅テクニック (Design Lab+ 1-2)" target="_blank">amazlet</a> at 08.07.12</div></div><div class="amazlet-detail">デザインラボ編集部 <br />ソフトバンククリエイティブ <br />売り上げランキング: 663<br /></div><div class="amazlet-link" style="margin-top: 5px"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4797348526/hous-22/ref=nosim/" name="amazletlink" target="_blank">Amazon.co.jp で詳細を見る</a></div></div><div class="amazlet-footer" style="clear: left"></div></div>

この本は会社でチラ見したんだけど、なかなか奥が深い世界のことが書かれていたのでとりあえず買ってみる。
本当はFlashの入門書にしようか迷ったけど、入門書レベルならネットにいっぱいころがっているからやめた。]]></description>
         <link>http://hisasann.com/housetect/2008/07/post_84.html</link>
         <guid>http://hisasann.com/housetect/2008/07/post_84.html</guid>
                  <category domain="http://www.sixapart.com/ns/types#category">本</category>
        
                  <category domain="http://www.sixapart.com/ns/types#tag">Book</category>
        
         <pubDate>Sat, 12 Jul 2008 21:32:27 +0900</pubDate>
      </item>
            <item>
         <title>Operaが持つwindow.operaオブジェクトについて</title>
         <description><![CDATA[prototype.jsを眺めていたら出だしのところでブラウザ判定としてOperaの場合に、「<strong>!!window.opera</strong>」を書いてあったので試してみた。

<h2>ブラウザがOperaかどうか判定する処理</h2>

<pre><font color="#0000FF">if</font> (<font color="#FF0000">window</font>.opera) {
    alert(<font color="#FF00FF">"Operaだね"</font> + <strong>opera.version()</strong>);
}
<font color="#0000FF">else</font> {
    alert(<font color="#FF00FF">"Operaじゃないね"</font>);
}
</pre>

versionという関数？があってこれにはOperaブラウザのバージョンが入っているみたい。
ボクの環境ではOpera9.5が入っているので、alertには9.5と表示されました。

SafariのconsoleオブジェクトといいOperaのoperaオブジェクトといい結構独自実装はあるのねんｗ

ふと思ったんだけど、prototype.jsの

<pre>IE : !!(<font color="#FF0000">window</font>.attachEvent &amp;&amp; !<font color="#FF0000">window</font>.opera)</pre>

この部分って<strong>!!document.all</strong>じゃダメだったのかな？
IE判定したいんだもんね。
いや使えない何かがあるんだろうｗ

operaオブジェクトが持つメソッドはここにいろいろ書いてあったので参考までに。
<a href="http://jp.opera.com/support/tutorials/userjs/specs/" target="_blank">ユーザー JavaScript による制御: 仕様</a>]]></description>
         <link>http://hisasann.com/housetect/2008/07/operawindowopera.html</link>
         <guid>http://hisasann.com/housetect/2008/07/operawindowopera.html</guid>
                  <category domain="http://www.sixapart.com/ns/types#category">技術</category>
        
                  <category domain="http://www.sixapart.com/ns/types#tag">JavaScript</category>
                  <category domain="http://www.sixapart.com/ns/types#tag">Opera</category>
        
         <pubDate>Wed, 02 Jul 2008 18:30:57 +0900</pubDate>
      </item>
            <item>
         <title>JSON同士を比較できるWebサービス - JSON Diff</title>
         <description><![CDATA[<a href="http://tlrobinson.net/projects/js/jsondiff/" target="_blank">JSON Diff</a>

AjaxでJSON形式を扱うときに、デバッグとして使えるかもしれない。特にボリュームの大きいJSONならその効力は絶大だと思います。

<img src="http://lh4.ggpht.com/ero.rastaman/SGmpdUfBwRI/AAAAAAAAD5I/xxTKKTY20Q4/s800/aaa.png.png" alt="JSON同士を比較できるWebサービス - JSON Diff"/>

使い方は簡単で2つのJSONを入力し、「Compare」ボタンを押すだけ。
すると画面の下のほうに比較し色付けまでしてくれた状態で表示されます。

[via]
<a href="http://ajaxian.com/archives/json-diff-released" target="_blank">Ajaxian</a>]]></description>
         <link>http://hisasann.com/housetect/2008/07/jsonweb_json_diff.html</link>
         <guid>http://hisasann.com/housetect/2008/07/jsonweb_json_diff.html</guid>
                  <category domain="http://www.sixapart.com/ns/types#category">サービス</category>
        
                  <category domain="http://www.sixapart.com/ns/types#tag">Ajax</category>
                  <category domain="http://www.sixapart.com/ns/types#tag">JavaScript</category>
        
         <pubDate>Tue, 01 Jul 2008 12:39:53 +0900</pubDate>
      </item>
      
   </channel>
</rss>
