<a href="http://www.flickr.com/photos/web-marketing/2080726864/" title="nasa-gov-5.jpg by sigeos15jm, on Flickr"><img src="http://farm3.static.flickr.com/2257/2080726864_f47b77d4fd_o.jpg" width="250" height="200" alt="Ajax超情報整理サイトNASA.GOV 5.0" /></a>
<p>NASA設立50周年を期に先日リニューアルされたNASAのオフィシャルサイト「<a class="web-site-link" href="http://www.nasa.gov/topics/aeronautics/index.html" target="_blank">NASA5.0</a>」、随所で<a href="http://web-marketing.zako.org/web-tools/ajax-tab/">Ajax</a>を使った情報整理がなされていたので使用されているAjaxと共にご紹介します。</p>

<!--more-->
<h3 class="tips">NASAの新オフィシャルサイト「NASA.GOV 5.0」</h3>
<p><a href="http://web-marketing.zako.org/images/nasa-gov-5-main.jpg" rel="lightbox"><img alt="nasa-gov-5-main-m.jpg" src="http://web-marketing.zako.org/images/nasa-gov-5-main-m.jpg" width="400" height="300" /></a></p>
<p>↑NASAといえば、Googleに情報を提供するほど膨大な量の情報を持っているわけですから、情報整理のノウハウが詰まっているはず。</p>

<h4 class="tips">NASA 5.0</h4>
<object width="425" height="373"><param name="movie" value="http://www.youtube.com/v/3jEJ10ju_MY&rel=1&color1=0x2b405b&color2=0x6b8ab6&border=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/3jEJ10ju_MY&rel=1&color1=0x2b405b&color2=0x6b8ab6&border=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="373"></embed></object>
<p>↑これがNASA5.0のサイト。たまに「新しいタブ」ではなく「新しいウインドウ」でページが開くので、すべてが良いわけではないですが、参考になる部分はいろいろありそうです。</p>

<h4 class="tips">RSSフィード登録</h4>
<p><img alt="nasa-gov-5-rss.jpg" src="http://web-marketing.zako.org/images/nasa-gov-5-rss.jpg" width="232" height="302" /></p>
<p>↑フィード登録にも気を使った感を受けます。</p>
<h4 class="tips">ブクマボタン</h4>
<p><img alt="nasa-gov-5-bookmark.jpg" src="http://web-marketing.zako.org/images/nasa-gov-5-bookmark.jpg" width="212" height="350" /></p>
<p>↑ついに政府機関もSMO！？流行どころはしっかりと押えているようです。</p>

<p class="floatright"><img alt="prototype.jpg" src="http://web-marketing.zako.org/images/prototype.jpg" width="208" height="74" /></p>
<p>ちなみにこのサイトで使われているのは<a class="ajax-link" href="http://www.prototypejs.org/" target="_blank">Prototype JavaScript</a>、Ajaxを使った主な特徴も公表されていました。</p>
<br clear="all" />
<h4 class="tips">NASA 5.0で主に使用されているAjax</h4>
<p>すべてがPrototype.jsを使っているわけではありませんが体系化してみました。</p>
<dl>
<dt>ドロップダウンツリー</dt>
<dd><a class="ajax-link" href="http://blog.faro.main.jp/?eid=369489" target="_blank">faLog | CSS(とJS)でシンプルなドロップダウンメニュー - 2</a></dd>
<dt>アコーディオン</dt>
<dd><a class="ajax-link" href="http://e0166.blog89.fc2.com/blog-entry-234.html" target="_blank">横にスライドするきれいな動きのアコーディオンJavaScript*ホームページを作る人のネタ帳</a></dd>
<dt>タブメニュー</dt>
<dd><a class="ajax-link" href="http://e0166.blog89.fc2.com/blog-entry-326.html" target="_blank">『10のJavaScript、Ajaxタブメニュー』他、タブまとめ*ホームページを作る人のネタ帳</a></dd>
<dt>Ajaxカレンダー</dt>
<dd><a class="ajax-link" href="http://phpspot.org/blog/archives/2007/05/cssjavascript_4.html" target="_blank">フリーのCSS＆JavaScriptカレンダースクリプトいろいろ:phpspot開発日誌</a></dd>
<dt>タグクラウド</dt><dd><a class="ajax-link" href="http://phpspot.org/blog/archives/2006/05/javascript_13.html" target="_blank">JavaScriptオンリーで動く高速サーチエンジン＆タグクラウド:phpspot開発日誌</a></dd>
<dt>コメント</dt>
<dd>MovableType：<a class="ajax-link" href="http://bizcaz.com/archives/2006/08/27-192539.php" target="_blank">MovableTypeのコメントをAjaxで投稿する - Movable Type備忘録</a></dd>
<dd>WordPress：<a class="ajax-link" href="http://www.orioa.com/wp-ajax-edit-comments/" target="_blank">コメントを投稿した後も編集できる WordPress のプラグイン at orioa</a></dd>
<dt>ポップアップでない小窓</dt>
<dd>[J] ポップアップではない手法で小窓/ウィンドウを表現したい - Jamz (Tech)</dd>
</dl>
<p>決してすべての人が「使いやすい！」と思うわけでないと思いますが、良い意味でも悪い意味でも参考になるのではないでしょうか。</p>

<p>サイトの仕掛けについてもっと詳しく知りたい方はフラッシュ動画で説明してくれる<a class="web-site-link" href="http://www.nasa.gov/externalflash/NASA50/1.html" target="_blank">NASA5.0プレビューサイト</a>へどうぞ。</p>

<h4 class="tips">関連情報</h4>
<ul>
<li><a class="web-site-link" href="http://www.nasa.gov/home/index.html" target="_blank">NASA</a></li>
<li><a href="http://web-marketing.zako.org/web-tools/ajax-tab/" onclick="javascript:urchinTracker('/go/Under_link');">Ajax カテゴリー</a>、<a href="http://web-marketing.zako.org/web-person-words/web-marketing-words/13-design-guidelines-for-tab-controls.html" onclick="javascript:urchinTracker('/go/Under_link');">AJAXタブを作る際の13のユーザビリティガイドライン</a>も参考になるかも。</li>
</ul>
<div style="margin-bottom:0px;"><div style="float:left;"><a href="http://www.amazon.co.jp/gp/redirect.html%3FASIN=4896273052%26tag=snowboadteamz-22%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/4896273052%253FSubscriptionId=028QVM5GAF1MWA4NBMR2" target="_blank"><img src="http://g-ecx.images-amazon.com/images/G/09/nav2/dp/no-image-avail-img-map._V23175435_AA120_.gif" alt="Ajaxハッカーズ・プログラミング―基礎からprototype.js、Yahoo!UIライブラリ、HTML_AJAXの活用までWebアプリケーション制作のプログラミング・テクニック" style="border:0;"></a></div><div style="float:left;margin-left:15px;line-height:120%"><div style="margin-bottom:10px;line-height:120%"><form style="margin-bottom:0px;" method="post" action="http://www.amazon.co.jp/gp/aws/cart/add.html" target="_blank"><input type="hidden" name="AssociateTag" value="snowboadteamz-22"><input type="hidden" name="SubscriptionId" value="028QVM5GAF1MWA4NBMR2"><input type="hidden" name="ASIN.1" value="4896273052"><input type="hidden" name="Quantity.1" value="1"><input type="image" name="submit.add-to-cart" src="http://rcm-images.amazon.com/images/G/09/extranet/associates/buttons/remote-buy-jp5.gif" /></form></div><div>Ajaxハッカーズ・プログラミング―基礎からprototype.js、Yahoo!UIライブラリ、HTML_AJAXの活用までWebアプリケーション制作のプログラミング・テクニック<br /></div><div style="margin-top:0px; margin-bottom:10px"><div style="margin-bottom:5px">価格：<span style="color:#f33;font-weight:bold;">￥ 2,814</span><br />平均評価：4.0<br />納期：通常24時間以内に発送<br /></div></div><div style="margin-top: 5px"><a href="http://www.amazon.co.jp/gp/redirect.html%3FASIN=4896273052%26tag=snowboadteamz-22%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/4896273052%253FSubscriptionId=028QVM5GAF1MWA4NBMR2" target="_blank">Amazon で詳細を見る</a> by <a href="http://astore.amazon.co.jp/snowboadteamz-22" title="WEB担当者の本屋" target="_blank">WEB担当者の本屋</a></div></div><div style="clear: left"></div></div>