コーディング時に役立てているブックマークレット

投稿日時: 2010/01/09 5:36
カテゴリー: 記事
タグ: bookmarklet, javascript, jquery
記事の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);

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

ある要素からの親要素を取得するjavascript関数

投稿日時: 2010/01/05 2:31
カテゴリー: 記事
タグ: javascript, jquery
記事のURL: http://tshinobu.com/blog/archives/245

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の構造が違う場合に都度分岐させるのは非常に煩雑で面倒なので、繰り返し適用できるように工夫できます。

ローカル環境でルートパスを読み込むJavascript

投稿日時: 2009/12/06 20:54
カテゴリー: 記事
タグ: javascript, workflow
記事のURL: http://tshinobu.com/blog/archives/221

1年前に自分用に考えたのですが、かなり役立っているのでシェアします。自分のパソコンの環境下において、以下のJavascriptを埋め込むだけで、ルートパスで指定されたファイルを読むこむように補完します。

スクリプト

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript">
$(document).ready( function(){
	if(!location.protocol.match("http")){
		var ref = "file:///C:/Documents and Settings/username/デスクトップ/project/html/";
		if( ref.match(/\/$/) ){
			ref = ref.replace(/\/$/, "");
		}
		$("[src^='/']","html").each(function(){
			result = ref + $(this).attr("src");
			$(this).attr("src", result);
		});
		$("[href^='/']","html").each(function(){
			result = ref + $(this).attr("href");
			$(this).attr("href", result);
		});
	}
});
</script>

使い方

上記スクリプトを確認したいページの<head>もしくは<body>内に貼り付け
上記スクリプトの6行目、ref = “”; のなかに補完するサイトルートパスを記述。ルートパスとして扱うローカルのフォルダ名を入力してください。確認したいファイルをFirefoxやOperaで開いたときのパスを入力いただくと確実です。
- Windowsの場合の例
  var ref = "file:///C:/Documents and Settings/username/デスクトップ/project/html/";
- Macの場合の例
  var ref = "file://localhost/Users/username/Desktop/project/html/";
- 共通ファイルがサーバ上にある場合の例
  var ref = "http://yahoo.co.jp/";

共通ファイル（画像、CSS、Javascriptなど）をルートパスで読み込んでいるサイトを開発する際、困るのがブラウザ上で制作物を確認できないこと。サイト定義していたらDreamweaver上では見れますがクロスブラウザチェックができません。そこでJavascriptでDreamweaverのサイト定義と同様のことを実現させました。ルートパスをJavaScript実行時に指定のパスに置換します。

OS X Leopard以降ではApache2が標準でバンドルされていますし、WindowsでもApacheやXAMPPを入れられれば、ローカルでサーバを立てるのも難しくないのですが、ネットワーク上で共同開発をしていると難しかったり、事情があって環境を用意できなかったり、そこまでエネルギーをかけるほどでもない… かといってテスト環境に都度アップするのも面倒です。

そういうときこのJavascriptを使えばちょっとだけ制作が楽になるかもしれません。簡単なスクリプトですが、僕はサイトやページ作成時にはほぼ必ず使用していますので、アイデアとしてブログで発信してみます。

パンくずリストを生成するJS「breadCrumb.js」をバージョンアップしました

投稿日時: 2009/11/26 2:29
カテゴリー: 記事
タグ: javascript
記事のURL: http://tshinobu.com/blog/archives/211

１年ほど開発中でした反社会的Javascript、パンくずリストを外部化するJavascriptをバージョンアップしました。ホントは5月くらいにできていて検証も済んでいたんですけどいろいろとドタバタしていて公開のタイミングを失っておりました。さきほど別のエントリーをアップしたので勢いに乗って公開です。

HTMLでの変更が面倒なパンくずナビゲーション（トピックパス）を、現在開いているURLを読み込み、Javascriptで自動的に生成します。

個人的に編集するのを忘れがちなパンくずリストなんですが、ナビゲーションとしての重要度はそんなに高くないのでは？ので外部化して作業負荷が低減されるのであれば外部化してしまってもいいのでは？という提案の意味を込めて作りました。

実際、グローバルナビなどサイト共通のナビゲーションをJavascriptで外部化したサイトが最近増えてきましたが、それだったらパンくずリストも外部化してページの上下にでも印刷ボタンと同等に機能の一部として提供したらいいんじゃって思ってます。

■breadCrumb.js
http://tshinobu.com/lab/breadCrumbJs/

ただ、以下記事のようにテンプレート設計を運用性を重視してちゃんと行えば、外部化しなくてもじゅうぶん管理できるじゃんって作った後になって気がつきましたが…

■サッポロビールにおけるテンプレート活用事例 | デベロッパーセンター
http://www.adobe.com/jp/devnet/dreamweaver/articles/dw10seminar_sapporobeer.html

とりあえず考えの一つとしてWeb上に発信してみます。興味がわきましたら触ってみていただけると嬉しいです。

外部JSを読み込むJS「require.js」を作りました

投稿日時: 2009/11/26 1:37
カテゴリー: 記事
タグ: javascript
記事のURL: http://tshinobu.com/blog/archives/200

久しぶりに実験作品を公開です。外部Javascriptファイルを読み込むJavascriptファイルを作りました。CSSのimport.cssのようなもので、HTMLからはrequire.jsを読み込むだけで複数のJavascriptをインポートすることができます。読み込むパスはHTMLから判別して自動的に補完するのでローカルでも、相対パスでも、ルートパスでも動作します。すでにいくつか同じようなものが出ていましたがもっと安全にシンプルにできるのでは、と思ってこっそり作ってみました。

詳しくはこちら
http://tshinobu.com/lab/javascript/require/

今まで個人的にはdocument.writeでルートパスの読み込み記述を並べて書く方法を採用してたんですけど、共有SSI環境とかになると分岐の処理を書かなくてはならない問題に直面しました。サイトによっては相対パスでないと都合が悪いこともしばしば… あとやはりローカル環境で制作しながら確認できないのは不便でした。すでにあるこういったJSは別の問題をはらんでいたり、使い方が分からなかったり、大規模すぎて不安だったりと使うのをためらっていたので、持っている環境で動作検証している限り、個人的にはいいものができんじゃと思います。

責任は取れませんが個人利用/商用利用問わず使ってもらっていいので、自由に持っていって、自由に改変してください。どこかで紹介して頂けると嬉しいです。他の作品のサポートとか更新とかいろいろ告知などマメにできてなくてすみません。。

(2009/11/26 2:50追記)
@aulta さんにご指摘いただき1行削りました！

« Previous | Next »