HiGash.Net ホームページへ戻る

Home [Blog] » 痒いところに手が届くJavaScriptライブラリたち

痒いところに手が届くJavaScriptライブラリたち

痒いところに手が届くJavaScriptライブラリたち

例えば、画像のロールオーバーをもっと楽にできないかな・・・。テーブルの背景色を1行おきに変えたいけど、1行1行手動でclassを指定するのは面倒だな・・・etc.

JavaScriptをゴリゴリ書けるような人にとっては「そんなの、自前のJavaScriptを作っちゃえばいいじゃん」と思う話かもしれないですが、僕みたいに「JavaScriptってよくわからん」というデザイナーだって多いはず。そんなJavaScriptの苦手なデザイナーが「こんなJavaScript待ってました。ありがとう!」と思えるような、まさに “痒いところに手が届く” JavaScriptライブラリたちをまとめてみました。

smartRollover.js

画像のロールオーバーを自動化するJavaScript。CSS HappyLife さんの ソースがシンプルなJSによるロールオーバー というエントリーから。*_off.png(もちろん画像の拡張子はgif、jpgなど何でも可)と名付けられた画像があると、画像にマウスオーバーした時だけ*_on.pngに画像を切り替えるというものです。僕はこのスクリプトを元に、*_off.pngを読み込むのと同時に*_on.pngをプリロードしておくようにカスタマイズして(JavaScriptのわかる人にカスタマイズしてもらって)使っています。


function smartRollover() {
  if(document.getElementsByTagName) {
    var images = document.getElementsByTagName("img");
    var preImages = new Array();
      for(var i=0; i < images.length; i++) {
        if(images[i].getAttribute("src").match("_off.")) {
        var preImage = new Image();
        preImage.src =
        images[i].getAttribute("src").replace("_off.", "_on.");
        preImages.push(preImage);
        images[i].onmouseover = function() {
          this.setAttribute("src",
          this.getAttribute("src").replace("_off.", "_on."));
        }
        images[i].onmouseout = function() {
          this.setAttribute("src",
          this.getAttribute("src").replace("_on.", "_off."));
        }
      }
    }
  }
}
if(window.addEventListener) {
  window.addEventListener("load", smartRollover, false);
}
else if(window.attachEvent) {
  window.attachEvent("onload", smartRollover);
}

colorful.js

鷹の島 さんの テキストフィールドのフォーカス時に背景色を変更する JavaScript というエントリーから。エントリー名の通り、フォームのテキストフィールドにフォーカスした際にその背景色を変えるスクリプトです。僕はこのスクリプトに、処理をスキップしたいタグのidを指定できるようにカスタマイズして(もちろんJavaScriptのわかる人にカスタマイズしてもらって)使っています。


var colorful = new ColorfulInput;
window.onload = function() {
   colorful.set();
}
function ColorfulInput() {
  // 処理をスキップしたい属性
  this.skip = ['button','checkbox','radio','search','submit'];
  // 処理をスキップしたいid
  this.skip_id = ['#'];
  this.color = { 'blur': '', 'focus': '#dcf7c1' };
  this.set = function() {
    var i;
    for (i = 0; i < document.forms.length; i++) {
      for (var f = 0; f < document.forms[i].length; f++) {
        var elm = document.forms[i][f];
        if(!this._checkSkip(elm)) continue;
        this._setColor(elm, 'focus');
        this._setColor(elm, 'blur');
      }     
    }
  };
  this._checkSkip = function(elm) {
    var i;
    for(i in this.skip) {
      if(elm.type == this.skip[i]) return false;
    }
    for(i in this.skip_id) {
      if(elm.id == this.skip_id[i]) return false;
    }
    return true;
  };
  this._setColor = function(elm, type) { 
    var i;
    var color = this.color[type];
    var event = function() {
      elm.style.backgroundColor = color;
    };
    if(elm.addEventListener) {
      elm.addEventListener(type, event, false); 
    } else if(elm.attachEvent) {
      elm.attachEvent('on'+type, event); 
    } else {
      elm['on'+type] = event;
    }
  };
}

Auto-striped table using Javascript

Wellstyled.com さんの Striped Tables というエントリーから。1行おきにテーブルの背景色を変えるJavaScript。正確に言うと1行おきに<tr>タグに対して奇数・偶数でそれぞれodd、evenという名のclassを付けてあげるJavaScriptです。結果的にCSSで簡単に1行おきに<tr>の背景色を塗り分けることができます。

smoothscroll.js

as days pass by, by Stuart Langridge さんの Smooth scrolling demo というエントリーから。ページ内リンクをクリックした際に、画面をリンク先までスムーズにスクロールさせるJavaScriptです。name属性に対してはもちろん、id属性をターゲットにしてリンクを貼ることができます。

ページ内リンクのスムーススクロールって、嫌う人もいるみたいなのですが、僕はオシャレなだけではなく意味のある行為だと思っています。ページ内リンクをスムーズにスクロールしない場合、ユーザはどこからどうやって(上? 下?)そのリンク先に辿り着いたかわからなくなってしまったり、違うページに移動したと勘違いしてしまう可能性が考えられるからです。

offspring.js

A List Apart さんの Keeping Your Elements’ Kids in Line with Offspring というエントリーから。:first-childや:last-childのような、いわゆる疑似クラスの代替として<li>要素などにfirst-child、last-childといったclassを付けてくれるJavaScriptです。最初の<li>にだけmarginを付けたいとか、borderを付けたいといったときに、CSSでli:first-child {margin-top:1em;}やli:last-child {border-top:solid 1px #ccc;}などと指定できると非常に便利なのですが、残念ながらこれらの疑似クラスはIE6で実装されていません。しかし、offspring.jsを使うと<li>要素などにfirst-childやlast-childといったclassが自動的に追加されます。従って、CSSでli.first-child {margin-top:1em;}やli.last-child {border-top:solid 1px #ccc;}といった指定が可能になります。

offspring.jsについて、疑似クラス非対応のブラウザで疑似クラスの使用を可能にするJavaScriptと勘違いしているかのような記事も見かけたのですが、あくまでもoffspring.jsは疑似クラスの代替となるよう、htmlソースに疑似クラスと同じような名前のclassを追加してくれるスクリプトです( CSSの擬似クラス:IE6/IE7でも使う方法あります – builder by ZDNet Japan )。また、offspring.jsにはfirst-child、last-child、only-childという3つのclassだけを付けてくれるlightモードと、nth-child-odd、nth-child-even、nth-child-##といったclassも付けてくれるfullモードの2種類の挙動があります。ちなみに当サイトはoffspring.jsをlightモードで使っています(2009/2/8追記:リニューアル後は使用していません)。

IEPNGFix

TwinHelix さんの IE PNG Fix v1.0 / 2.0 Alpha というエントリーから。透過PNGをサポートしないIE6で透過PNGの表示を可能にするJavaScriptライブラリです。v1.0ではbackground-positionとbackground-repeatの指定はできませんでしたが、v2.0 Alphaではこれらの指定も可能だということです。実際に検証してませんが、background-positionとbackground-repeatの指定もできるならばかなり強力なライブラリとして活躍してくれそうです。

Really Simple Validation (RSV)

BenjaminKeen.com さんの Really Simple Validation (RSV) というエントリーから。その名の通り、非常にシンプルな入力フォームの入力チェック用ライブラリです。この手のJavaScriptライブラリは非常に数が多いのですが、変にデザインや挙動に凝り過ぎていて扱いやすいものは少ない気がします。その点、このライブラリはシンプルなためにカスタマイズ性も高く、とても使いやすいです。スタンドアロンで動作するStandalone versionの他に、jQuery pluginとPrototype extensionバージョンがあります。

IE7.js

Google Code に公開されている ie7-js より。これは上述のJavaScriptたちと比べるとかなり有名です。IE5/6に対して、IE7のようなモダンブラウザと同様に考えてCSSなどを記述できるようにするJavaScriptライブラリです。

僕はこのライブラリを使ったことはないのですが、 テストページ を見る限りは非常に強力なライブラリだと思います。例えば、IE6にはfloatと同一方向にmarginを指定すると、なぜかmarginが倍になってしまうという有名なバグがありますが、IE7.jsを使えばこういったバグが解消されるそうです。

チャンスがあったら、ぜひIE7.jsを使ってみたいです。
以上、Webデザイナーの “痒いところに手が届く” JavaScriptライブラリたちでした。

Share & Bookmark
このエントリをFacebookでシェアする
このエントリをTwitterでつぶやく
このエントリをはてなブックマークに追加
Delicious
livedoorクリップ
Yahoo!ブックマーク
Buzzurl

コメント/トラックバック

1 件のコメント/トラックバックをいただきました。ありがとうございます!!

  1. [...] 痒いところに手が届くJavaScriptライブラリたち | HiGash.Net これはいいまとめ。 (tags: javascript) [...]

ぜひこのエントリーに対するコメントをお聞かせください。

以下のURLでトラックバックも受付けています。

http://higash.net/20080821/js_library.html/trackback/

Preview

トラックバック
http://higash.net/20080821/js_library.html/trackback/

Page Top