Javascript/jQueryの最近のブログ記事

例えばあるdiv#hogeをhoverした際に、その#hoge内のh2とpのテキスト色を同時に変えたいみたいな時に、jQieryでthisの小要素を指定できるとhoverのfunctionがひとつで済んで便利。

<div id="hoge">
    <h2>一緒だよ</h2>
    <p>一緒に変化するよ</p>
</div>

色々方法があるけど、

$("hoge",this)

が一番シンプルで使いやすいと思う。

上記コードで使うと

$("#hoge").hover(function() {
		$("h2",this).stop().animate({ color: "#444444" }, 'slow');
		$("p",this).stop().animate({ color: "#444444" }, 'slow');
	},function() {
		$("h2",this).stop().animate({ color: "#222222" }, 'slow');
		$("p",this).stop().animate({ color: "#666666" }, 'slow');
	});

その他、

$(this).children("hoge")
$(this).find("hoge")

など。

セレクトボタンで一度セレクトされたものを解除（selected）の状態に戻したい！な時の話。

下記例で、最初は「そないいわんでも」。
クリックして「ほんにまあ」をセレクト。
もう一度セレクトボタンを触らずに、別のボタンか何かでselectedの「そないいわんでも」に変更したい、みたいなことです。

<select>
<option selected="selected">そないいわんでも</option>
<option>ほんにまあ</option>
</select>

selectedIndexがセレクトされているoptionを数値で持っていて、、このselectIndexを

0（0からカウントされている値なので）

にすれば戻る。

で、普通にぽわんと考えると

$('select') .attr('selectedIndex', 0);

とattr()でselectedIndexの値を「0」にしようとした。

でもjQueryはattr()色々と難しいようで動かない。

http://ginpen.com/2011/05/20/jquery-1-6-1/この記事が詳しい。

で、上記記事を参照し、selectedIndexはprop()でないとダメらしく

$('select') .prop('selectedIndex', 0);

で動く。
jQueryのバージョンで挙動が色々あるらしく、動かなかったらもう色々試すしかないね。。。

サンプルはこちら：jQueryにおけるattr()とprop()　- selectedIndexの場合 -　サンプルページ

とりあえずselectedIndexの件は以上で、解決。

座標を調べるoffset()の件。
まず、要素は可視状態であることが条件。

で、

var hantei = $('#hoge').offset()
alert(hantei);


だと hogeの座標値が正しく表示されない。


var hantei = $('#hoge').offset()
alert(hantei.left);


ならOK。

複数のセレクタ（#hoge1 #hoge2 #hoge3）で同じ処理の時のセレクタをまとめる書き方。

$('#hoge, #hoge2, #hoge3').

ってこと。

んだけ。

A++も++Aもどちらも「Aの値を1増やす」だが、その過程というか1加算されるタイミングが違う。

A + ++Bはすでに1加算されたBとAの足し算「A + B」

A + B++は「A + (B+1)」

var A = 2;
var B = 4;
var test1 = A + ++B;
var test2 = A + B++;
$("document").ready(function(){
$("#t1").text(test1);
$("#t2").text(test2);
});

結果はこちらのページ

今さらだけど、ブックマーク的メモ。

ajaxzip3

メンテナンス不要で常に最新版の郵便番号データを利用できるようになりました。（JSONPに対応）

注）ajaxzip2を利用していた方へ
オリジナルから引数の順序を変更しました。

オリジナルの引数は

AjaxZip2.zip2addr( '〒上3桁', '都道府県', '市区町村', '〒下4桁', '町域大字', '丁目番地' );
でしたが、これを

AjaxZip3.zip2addr( '〒上3桁', '〒下4桁', '都道府県', '市区町村', '町域大字', '丁目番地' );
としました。

ひとつのボタンで切り替えるjavascript。

onボタンをクリックすると、指定の動作＋ onボタンがoffボタンにみたいに、ボタンもあわせて変化させるオプション含めて以下の通りサンプルソース。
なお、サンプルはjquery使ったコードの書き方になっている。

ポイントは

num = 0
num ^= 1;　//0と1を切り替え ^ 排他的論理和

の部分。

ボタン部分のhtmlは単純に


<img src="hoge_on.png" id="hoge">


として、

javascriptは以下の通り。

num = 0;
$("#hoge").click(function(){ // hogeというid要素クリック
num ^= 1;　//0と1を切り替え ^ 排他的論理和
if(num==1){ // numが1と等しい場合
$(this).attr("src","hoge_off.png");
その他諸々動作;
}
else{ // numuが1じゃない（そうじゃない）場合
$(this).attr("src","hoge_on.png");
その他諸々動作;
}
});


ま、一例なので。

チェックボックス、ラジオボタンで選択されているかどうかの判定。

選択されている場合にこう動け見たいなときに。

htmlをこんな感じとする。

javascriptのコードは以下の通り。

このエントリーとは全然関係ないけど、JQuery初心者はこのスライドを見るといい。

めちゃくちゃまとめかた上手。

素敵スライド。

数値を***円見たいな通貨表示するのに、カンマで区切りたい。

phpは


number_format(数値)


また

money_format(フォーマット,通貨)


javascriptは以下のコードが一番シンプルでよいかも。


function num3(str) {
var num = new String(str).replace(/,/g,"");
while(num != (num = num.replace(/^(-?\d+)(\d{3})/,"$1,$2")));
return num;
}


引用：Javascriptで金額表示に使う3桁区切り、カンマ挿入

jQueryがまだ天下取る前に制作したサイトとかって結構Mootoolsとか使ってたんだけど、機能追加でjQueryを使う必要があるときなどのjQueryとMootoolsの共存方法は以下のサイトがさっくり上手にまとめてくださっていました。

http://h2ham.seesaa.net/article/106053238.html

まんま引用させて頂くと


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
jQuery.noConflict();
-->
</script>
<script type="text/javascript" src="mootools.js"></script>


ということです。
つまりは、読み込み順と書き方をちょっとカスタマイズするということ。

こうすれば　j$()　でいいという。

以上、メモ。

ポップアップさせるページのアドレスバーを外したいとか、ブックマークバーを非表示にしたいとか、サイズを指定したいという時にhtmlソースに直接書くjavascriptは以下のような感じで。

<a href="http://www.spiral-records.com/psts/" onClick="window.open('http://www.spiral-records.com/psts/','win','width=400,height=300,menubar=no,status=no,scrollbars=no') ; return false ;">＊＊＊＊＊＊</a>

ご覧の通りバー関係はyes / no で指定。
上記例にあるバー以外にlocation、directories、toolbarがあります。

サイズは普通に width height で指定。

また、「resizable」のyes / no でリサイズの可否も決められます。

http://tweet.seaofclouds.com/

というサイトがあります。
twitterに関するjQuery.jsを用いた一覧表示を可能にするjavascriptです。

このjsに関する詳細は以下のブログに記載がありました。
丁寧な説明です。

http://web-marketing.zako.org/twitter/jquery-plugin-for-twitter.html

今回は、http://tweet.seaofclouds.com/の下段に例示されている、指定したキーワードを含むつぶやきの一覧をためしています。

日本語の方のブログの通り、
jquery.js　と　jquery.tweet.js
というjavascriptファイルを使います。

jquery.tweet.jsには表示したい件数や画像サイズの指定などを指定の箇所に記載します。

あとはhtml側のヘッダにjqueryの書き方にそって


$(function(){
$('.tweet').tweet({
query: "%e6%a5%bd%e5%99%a8"
});
});


とし、body内に


<div class="tweet"></div>


と反映する場所を書きます。

検索キーワードは英語ならいいんですが、日本語はエンコードする必要があります。

ので、http://www.tagindex.com/tool/url.htmlとかで、utf-8にエンコードして埋め込みます。

ちなみに下のサンプルは「楽器」なので「%e6%a5%bd%e5%99%a8」

どうでしょ？

まずは、日本語版リファレンスサイト：http://semooh.jp/jquery/

リファレンス等から引用しつつ、加筆修正をしたりして、自分なりに理解しやすいようにまとめています。

スピードに関する重要な関数ready(fn)

DOMがロードされて操作・解析が可能になったタイミングで関数を実行します。

殆ど全てのJavaScriptはDOMの準備が出来たタイミングで処理を実行したいと思いますが、 window.onloadでは画像などのロードが済む時点にタイミングを合わせるブラウザもあります。
ということは、重い画像などがあると、それのロードを待つことになり、体感処理速度が重く感じてしまうことがるということです。
それを解決するために、readyイベントを用いることで、アプリケーションの体感処理速度を大きく向上させることができます。

ready関数にコールバック関数を渡します。
コールバック関数の引数に$エイリアスが来るので、これを用いることでグローバル名前空間での衝突を避けた安全なコードを書くことが出来ます。

この関数を使う場合、bodyのonloadイベントには何も書かないこと。readyイベントが実行されなくなってしまいます。

$(document).readyを用いてもかまいません。複数の関数を登録した場合、登録した順に実行されます。

jQueryはセレクターを操るのがすごく楽！

これが一番のjQueryのポイントでは。
h1とか、dic#naviとか、cssを書くときの感覚で操作したいセレクターを指定することができます。

書き方は

$('セレクタ')

超単純！
セレクタに続いてAPIを記載することで簡単に操作できるわけです。

例えばこのサイトのフッターですが、ブラウザのサイズが変更されるといったん消えて再登場しますが、これは


$(window).resize(function(){
$("#setting-footer").css("display", "none").slideDown("500");
});

のように書かれています。

$(window).resize(function()

windowがresizeされたときfunctionする。

functionの内容は

$("#setting-footer").css("display", "none").slideDown("500");

セレクタdiv idの#setting-footerのcssをdisplay:noneにし、続いて(スピード)でスライドさせる。。。

すごく、直感的に書けて便利だと思います。

なお、日本語リファレンス内にセレクターをしらべるためのブックマークが用意されています。

[jQuery Selectors Inspector]

ブックマークに追加して、クリックするとセレクタを入力するフォームが立ち上がります。
入力しOKすると、そのセレクタがどこにあるか調べることができます。

//4件に変更する場合は以下を記述。
setResultSetSize(GSearch.SMALL_RESULTSET);

//8件に変更する場合は以下を記述。
setResultSetSize(GSearch.LARGE_RESULTSET);

ウェブサイト・ブログにtwitterのつぶやきを表示させるためのjavascript。
以下のサイトで説明とjsファイルがダウンロードできます。

http://remysharp.com/2007/05/18/add-twitter-to-your-blog-step-by-step/

ものすごく簡単。
上記サイトでtwitter.jsダウンロードしてアップ、htmlにソースと表示ブロックを記載するだけ。

デザインは各自いじってくださいという簡単なソースです。

html中表示したい場所に以下のようなソースを記載。
上記アドレスサンプルの日本語版的な。。。


<!--twitter用-->
<div id="tweet">
<p>Please wait while my tweets load <img src="http://www.spiral-records.com/psts/images/loading2.gif" /></p>
<p><a href="http://twitter.com/novolver">tweeterデータ取得中だけど、だめだったらクリックしてね</a></p>
<script src="http://www.spiral-records.com/psts/twitter.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
getTwitters('tweet', {
id: '***ID***',
count: *表示コメント数*,
enableLinks: true,
ignoreReplies: true,
clearContents: true,
template: '"%text%" <a href="http://twitter.com/%user_screen_name%/statuses/%id%/">%time%</a>'
});
</script>
</div>
<!--twitter用　end-->


twitter APIを使っているので、

Twitter API Wiki
Twitter API Wiki　（日本語）

で勉強するとカスタマイズできます（ハズ（笑））。
Wiki（日本語）中に翻訳バージョンへのリンクもありますが、Twitter仕様書の日本語訳は
http://watcher.moe-nifty.com/memo/2007/04/twitter_api.htmlです。
こういう方はほんとありがたいです。

ちなみにAPI規制：60分間に70リクエスト。認証を伴うリクエストのみ。POSTは除外の一文あり。ほほう。

↓サンプルです。

なお、というか今気づいたけどMovable Typeを利用したサイトであればアクションストリームを利用する方法があったね！
shit！

Formのselect optionで入力項目を変更するjavascriptです。
別にselect optionでなくてもいくらでも応用できますし、innerHTMLで内容の入れ替えを行っているだけなので入力フォームじゃなくても別にいけます。

一部ソースにスマートじゃない部分ありますが、まあご愛嬌。

サンプルページ

参加人数によって氏名、アドレス記入欄を変更します。

サンプルページの場合は、select optionのvalueがonChangeする際にfunction.ninzuChangeが動き、フォーム内容が切り替わるというようになっています。

function.ninzuChange内は、単純にvalueがninzu1ならこうする、ninzu2ならこうする。。。と記述してあります。

以下詳細（サンプルページのソースです）

adobeのspryライブラリを用いたjavascriptによるxmlデータの読み込み表示方法について。

xmlデータは内部データのみで、外部データはこの方法では無理なのであしからず。

http://labs.adobe.com/technologies/spry/home.html

ライブラリのうちxpath.jsとSpryData.jsを使います。


<script type="text/javascript">
<!--
var ds1 = new Spry.Data.XMLDataSet("http://www.spiral-records.com/psts/index.xml", "rss/channel/item");
//-->
</script>


という感じでxmlデータファイルのパスと、xmlデータファイル内の表示したい内容までのパス（今回はrss/channel/item）を記載。

body内に例えば


<div id="" spry:region="ds1">
<div spry:repeat="ds1">
<h2>{title}</h2>
<div>{description}</div>
</div>
</div>


spry:regionで範囲指定とspry:repeatで繰り返しの指定。spry:repeatがないと最初のデータしか取得表示しません。表示したいデータの属性を{***}で指定すればOkです。

サンプルページ

上記サンプルの全ソースは以下の通り。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>xmlデータ読み込みのためのjavascript</title>
<script src="../../SpryAssets/xpath.js" type="text/javascript"></script>
<script src="../../SpryAssets/SpryData.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var ds1 = new Spry.Data.XMLDataSet("http://www.spiral-records.com/psts/index.xml", "rss/channel/item");
//-->
</script>
</head>
<body>
<div id="" spry:region="ds1">
<div spry:repeat="ds1">
<h2>{title}</h2>
<div>{description}</div>
</div>
</div>
</body>
</html>


最近ブログパーツの制作を依頼されることがちょいちょいあるので、メモ。

まずはじめに、

フローティングブログパーツの作り方、こっそり教えます（前編）

がとても親切な解説をしています。ありがとうございます。

で上記ページをもとにブログパーツの制作方法について簡単にいうと、

①FLASHを作る
②FLASHを埋め込ませるためのスクリプトとソースを書く

の2点です。

また注意点として

• 外部テキストファイル名を、必ず「http://」から始まる絶対パスにする


• 絶対パスのドメイン名は「www.」の有無を統一する

があげられます。flashのセキュリティの関係ですね。

仕組みは想像より簡単なので、FLASHの制作にたけた人であれば

ブラウザ間の互換性
プロモーションであれば効果測定の施策をきちんとする

この点に労力を割くことになるのでは。

一時期は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に関して。

超初歩的なことから自分メモ。