一時期はjavascriptは敬遠されcssによるロールオーバーが多かったと思うけど、ここんとこAjaxの攻勢によりjavascriptが見直されているなか、ページ内に色々な動きをつけるために複数のjavascriptファイルをかませることって非常に多い。
javascriptをいちから簡単にすらすっらとかけるヒトはいいけど、javascriptはソースをひっぱってきて使うっていうことが多々ある。
そんなときにこまるのが、それぞれのjavascriptファイルがお互いに干渉して一方が動かなくなったりしてげんなりすることってありません？
そんなわけで、同じ動きを実現するにもいくつかの違うjavascriptがあると便利。
さしかえて検討できます。
ということで、画像のロールオーバーを実現するjavascriptをまとめました。
といっても今回は２こだけだけど。
タブ切り替えのjavascriptで今制作中のサイトで利用するのに完璧なものがなかったので、
moo.fxを利用したタブのソース（http://www.nyokiglitter.com/tutorials/tabs.html）を改良して作った。
1. 動きがあること
2. 最初は用意されたタブが開いていない
3. タブを閉じることができる
以上が必須要件。
1は今回の元ソースが個人的には最適な動作をしてくれていたのでほとんどいじっていない。
2と3は探したけれども、これがない。
moo.fxのスクリプトとcssおよびhtmlの関係を見ていると2と3を実装できそうな気配があったのでチャレンジしたところ、完成！
以下が今回作成したデモです。
http://www.spiral-records.com/psts-lib/tabaccordion081027/tabbed.html
詳細は下記の通り。
プログラム周りは後追いのため弱い自分ですが、日々努力中といった感じです。
Google AJAX Feed APIを用いて外部サイトやブログの一覧を表示すべくGoogle AJAX Feed APIのデフォルトソースをいじくっていましたが、その途中で使いやすいやつ発見。
Google AJAX Feed API でブログの人気エントリーを表示するサンプル - F.Ko-Jiの「一秒後は未来」
素敵なソースありがとうございます↑↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google AJAX Feed API でブログの人気エントリーを表示するサンプル</title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=取得したAPIキー"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("読み込むｒｓｓのurl");
feed.setNumEntries(15);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
var a = document.createElement("a");
a.href = entry.link;
a.appendChild(document.createTextNode(entry.title));
div.appendChild(a);
var img = document.createElement("img");
img.src = "http://b.hatena.ne.jp/entry/image/" + entry.link;
with(img.style) {
verticalAlign = "middle";
marginLeft = "4px";
}
div.appendChild(img);
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(initialize);
</script>
</head><body>
<div id="feed"></div>
</body>
</html>
さらに、
Google Maps API。
企業ウェブサイトでももう普通に取り入れられていますよね。
簡略化しわかりやすくしたオリジナルな地図もいいし、ユーザーが普段使い慣れた地図（Google Maps）を使うのも良い。
ターゲットユーザーや、状況に応じて、上手に使っていきたいです。
で、使い方。
まずは貼付けるウェブサイトのアドレスをGoogle マップ API への登録 - Google マップ API - Google Codeで打ち込み、「APIキーを生成」します。
MooToolsライブラリのFancy menuです。
現在制作のクライアントサイトでmenuの見せ方を検討していましたが、flashではなくても動きのある感じをだしたい。
ということで、web creaters9月号に載っているMooToolsライブラリのFancy menuをベースに制作することにしました。
例：↓
javascriptに関して。
超初歩的なことから自分メモ。