コーディング時に役立てているブックマークレット
- 投稿日時
- 2010/01/09 5:36
- カテゴリー
- javascript
- タグ
- 記事のURL
- http://tshinobu.com/blog/archives/255
- ブックマーク
-
ウェブ制作時に個人的によく利用しているブックマークレット（ブックマークに登録して利用する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);
画像のwidthとheightを削除（要jQuery）
これはもう使っていないんですが、逆に画像にHTML上でwidth/heightを設定していると、IEでは1pxの差異でもつぶれて表示されます。また機械的に同じサイズの画像を呼び出すシーンがあったとして、呼び出す画像のサイズにばらつきがあれば手直ししなくてはいけません。そこで画像のHTML上のwidth/heightの指定を解除するブックマークレットです。
javascript:$("img").each(function(){$(this).removeAttr("width").removeAttr("height");});alert("done!");void(0);
画像の代替テキストを表示（要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);
画像ファイル名を表示（要jQuery）
画像のファイル名を画像の下に表示するブックマークレットです。たとえば大量の画像があったときに、どの画像を修正したのかわからない、画像ファイル名にキーとなるワードが入っていて該当の画像をいち早く見つけたい、というようなシーンで使います。
javascript:$("img").each(function(){var%20a=$(this).attr("src");$(this).after("<span%20style='background:#00FF00'>"+a+"</span>");});void(0);
ウィンドウサイズ変更（横幅800px）
Windows XP（デフォルトスキン）のFirefox 3.0で、Firefoxのコンテンツ表示部分の幅を800pxに、ブラウザの高さを一般的なノートパソコンのサイズに変更するブックマークレットです。ウェブデザインの段階で「おさまりチェック」を行うために使用します。一般的なモニタサイズでのブラウザ表示を再現することで、エンドユーザの視点を検証できます。
横幅はプログラム上では845pxとなっていますが、ウィンドウの縁やスクロールバーを引き算して、コンテンツエリア内は800pxの横幅となります。なので、OSや外観や扱う案件などによって変わってきますが、ご自分にあった値を一度設定しておくと、のちのちのチェックや検証が楽になるかと思います。
javascript:window.resizeTo(845,768);
ウィンドウサイズ変更（横幅240px）
Windows XP（デフォルトスキン）のFirefox 3.0で、Firefoxのコンテンツ表示部分の幅を240pxに変更するブックマークレットです。モバイルサイトをPCで構築する際に、実機やシミュレータを用意しなくてもある程度モバイルサイトのレイアウトを再現することができます。
javascript:window.resizeTo(256,900);
ウィンドウタイトルを表示
現在開いているサイトのウィンドウタイトルを取得します。ブログやＥメールでウェブサイトを紹介する際に、手打ちやソースを開いたりしなくてもコピペできるようになります。（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()})();
テストサーバと公開サーバを変換
個人的にものすごく使用しています。テストサーバと公開サーバが同じディレクトリ構成の場合、ワンクリックでサーバを切り替えるブックマークレットです。以下スクリプトの「テストサーバ」にテストサーバの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);
