jquery

ウェブ制作時に個人的によく利用しているブックマークレット（ブックマークに登録して利用するJavascript）を覚え書きしておきます。あまりまとめサイトなどを調べたりはしていないのですが、ほとんど必要になったものを自作したものです。なにか役に立ちそうなものがあれば使ってください。

jQueryの読み込み

以下記事を見つけて以来重宝しています。ワンクリックでjQueryの最新版を読み込むブックマークレットです。jQueryとfirebugを使ってサイトを検証したりプログラムを書いたりすることが多いので重宝しています。
http://jsgt.org/mt/archives/01/001873.html

javascript:(function(){var%20s='http://jquery.com/src/jquery-latest.js',%20t='text/javascript',q='u0022',d=document,n=navigator,e;if(/mac/i.test(n.platform)&&/msie/i.test(n.userAgent))(d.createElement('div')).innerHTML='u003cscript%20type='+q+t+q+'%20src='+q+s+q+'u003eu003c/scriptu003e';else{(e=d.createElement('script')).src=s;e.type=t;d.getElementsByTagName('head')[0].appendChild(e)}})();void(0);%20%E3%80%80

jQuery (firefoxならブックマークツールバーにドラッグアンドドロップでインストールできます）

画像を非表示に（要jQuery）

画像にHTML上でwidth/heightを設定していないと画像読み込み時にがたがたがたっと画面が崩れてしまいます。そこでwidth/heightの設定漏れがないよう、img要素のsrc属性を空にして画像がまったく読み込まれていない状態を再現し、チェックするブックマークレットです。

javascript:$("img").each(function(){$(this).attr("src","");});void(0);

ImgHide

画像のwidthとheightを削除（要jQuery）

これはもう使っていないんですが、逆に画像にHTML上でwidth/heightを設定していると、IEでは1pxの差異でもつぶれて表示されます。また機械的に同じサイズの画像を呼び出すシーンがあったとして、呼び出す画像のサイズにばらつきがあれば手直ししなくてはいけません。そこで画像のHTML上のwidth/heightの指定を解除するブックマークレットです。

javascript:$("img").each(function(){$(this).removeAttr("width").removeAttr("height");});alert("done!");void(0);

ImgSizeBreak

画像の代替テキストを表示（要jQuery）

画像の代替テキスト（altテキスト）を画像の下に表示するブックマークレットです。WebDevelopperなどのFirefox拡張を入れれば同等のことが再現できます。会社の規定でFirefox拡張を勝手に入れられない、WebDevelopperを入れるのが面倒くさいときなどにお使いください。

javascript:$("img").each(function(){var%20a=$(this).attr("alt");$(this).after("<span%20style='background:#00FF00'>"+a+"</span>");});void(0);

ImgAlt

画像ファイル名を表示（要jQuery）

画像のファイル名を画像の下に表示するブックマークレットです。たとえば大量の画像があったときに、どの画像を修正したのかわからない、画像ファイル名にキーとなるワードが入っていて該当の画像をいち早く見つけたい、というようなシーンで使います。

javascript:$("img").each(function(){var%20a=$(this).attr("src");$(this).after("<span%20style='background:#00FF00'>"+a+"</span>");});void(0);

ImgName

ウィンドウサイズ変更（横幅800px）

Windows XP（デフォルトスキン）のFirefox 3.0で、Firefoxのコンテンツ表示部分の幅を800pxに、ブラウザの高さを一般的なノートパソコンのサイズに変更するブックマークレットです。ウェブデザインの段階で「おさまりチェック」を行うために使用します。一般的なモニタサイズでのブラウザ表示を再現することで、エンドユーザの視点を検証できます。

横幅はプログラム上では845pxとなっていますが、ウィンドウの縁やスクロールバーを引き算して、コンテンツエリア内は800pxの横幅となります。なので、OSや外観や扱う案件などによって変わってきますが、ご自分にあった値を一度設定しておくと、のちのちのチェックや検証が楽になるかと思います。

javascript:window.resizeTo(845,768);

WinPC

ウィンドウサイズ変更（横幅240px）

Windows XP（デフォルトスキン）のFirefox 3.0で、Firefoxのコンテンツ表示部分の幅を240pxに変更するブックマークレットです。モバイルサイトをPCで構築する際に、実機やシミュレータを用意しなくてもある程度モバイルサイトのレイアウトを再現することができます。

javascript:window.resizeTo(256,900);

WinMobile

ウィンドウタイトルを表示

現在開いているサイトのウィンドウタイトルを取得します。ブログやＥメールでウェブサイトを紹介する際に、手打ちやソースを開いたりしなくてもコピペできるようになります。（MakeLinkというすばらしいFirefox拡張はありますが）

javascript:(function(){var%20w=window.open("","","width=400,height=200");w.document.write("%E2%96%A0"+document.title+"<br>"+location.href);w.document.close()})();

ShowTitle

テストサーバと公開サーバを変換

個人的にものすごく使用しています。テストサーバと公開サーバが同じディレクトリ構成の場合、ワンクリックでサーバを切り替えるブックマークレットです。以下スクリプトの「テストサーバ」にテストサーバのURL、「公開サーバ」に公開サーバのURLを入力してご利用ください。たとえば、「http://test.tshinobu.com/blog/?p=255」を「http://tshinobu.com/blog/?p=255」にワンクリックで相互変換できます。入力し直す、Ｅメールを開いてURLをクリックし直す手間が省けるのでかなりストレス軽減できました。

javascript:(function(){var%20l=location;var%20a="テストサーバ";var%20b="公開サーバ";if(l.href.match(a))l.href=l.href.replace(a,b);if(l.href.match(b))l.href=l.href.replace(b,a);})();void(0);

www/test

jQueryのparents()と同等の関数をjQueryレスで実装したいと思い解析して作りました。引数（基点となる要素, 検索する要素）を渡すと、基点となる要素から見て条件にマッチする親要素あるいは親要素群を返す関数です。

/*---------- 親要素を検索する ----------*/
var findParentElement = function(elem, query){
	var result = [];
	var matched = [], cur = elem["parentNode"];
	while ( cur && cur != document ) {
		if ( cur.nodeType == 1 )
			matched.push( cur );
		cur = cur["parentNode"];
	}
	for (var i=0; i<matched.length; i++){
		reg = new RegExp(query,"i");
		if(matched[i].nodeName.match(reg)){
			result = matched.splice(i,1);
			break;
		}
	}
	return result;
};

/*---------- 親要素郡を検索する ----------*/
var findParentElementsMulti = function(elem, query){
	var result = [];
	var matched = [], cur = elem["parentNode"];
	while ( cur && cur != document ) {
		if ( cur.nodeType == 1 )
			matched.push( cur );
		cur = cur["parentNode"];
	}
	for (var i=0; i<matched.length; i++){
		reg = new RegExp(query,"i");
		if(matched[i].nodeName.match(reg)){
			result.push(matched[i]);
		}
	}
	return result;
};

たとえば、以下のようなHTMLがあったときに「親要素を表示」を押すと「div.release-block」のオブジェクトが返ります。「親要素群を表示」を押すと配列で「div.release-block, div.primary-area, div.main-area, div.container」のオブジェクトが返ります。

<div class="container">
  <div class="main-area">
    <div class="primary-area">
      <div class="release-block release-block-parent">
        <h2>本社プレスリリース</h2>
        <dl>
          <dt>2009年11月18日</dt>
          <dd><a href="#" onclick="alert(findParentElement(this,'div'));return(false);">親要素を表示</a></dd>
          <dt>2009年10月29日</dt>
          <dd><a href="#" onclick="alert(findParentElementsMulti(this,'div'));">親要素群を表示</a></dd>
        </dl>
      </div>
      <div class="release-block release-block-group">
        <h2>関連会社プレスリリース</h2>
        <dl>
          <dt>2009年11月18日</dt>
          <dd><a href="#" onclick="alert(findParentElement(this,'div'));return(false);">親要素を表示</a></dd>
          <dt>2009年10月29日</dt>
          <dd><a href="#" onclick="alert(findParentElementsMulti(this,'div'));">親要素群を表示</a></dd>
        </dl>
      </div>
    </div>
  </div>
</div>

サンプル（新しいウィンドウで開きます）

返値を利用すれば条件にマッチする要素でかつ、必要なクラス名だけ抽出することも可能です。同等のファンクションを提供する際、HTMLの構造が違う場合に都度分岐させるのは非常に煩雑で面倒なので、繰り返し適用できるように工夫できます。

http://tshinobu.com/lab/jQuery.simpleTab/

タブ機能が仕事で必要になりそうだったのですが、ライブラリを探すのも手間なので、10分くらいで作ってみました。
僕がこだわった点というか、こいつのウリは、タブナビゲーションをタブの数だけ配置するところです。

こういう感じで動くように実装しています。

スタイルシート切ってみていただければお分かりいただけるかと！

ほかのほとんどのタブ実装系ライブラリって、１ページにタブエリアがひとつだけしかないと思うんです。
タブ画像のアクティブ表示や、タブ画像の文言変更などは、画像やCSSで制御しなくちゃならない。
あとタブエリアの下にすぐコンテンツが入るようなビジュアルだと、
JS切ったときにタブが各セクションごとに無いとすごくぶさいく。

この点ケアしたライブラリはあるのかもしれないけど、僕が見つけられなくてこういう不満があって、じゃあ作っちゃえって思って作ってみました。また外部ファイル化とかしますがとりあえず公開してみます。誰かのハートに響くと嬉しいなあ。