JavaScriptのTIPSやDOMなどのカテゴリ

追記: 指摘がありました。 offspring.jsがあっても、IE6とIE7でCSSの擬似クラスを使えないとの事です。このライブラリはIEのcss実装の不備を補完するものじゃなく、最初の子要素に自動的に追加されます。クラスが追加されるだけで擬似クラスをjsで実装してるわけではないようです。offspring.jsを読み込んでも、cssファイルに書いた、:first-child{....}はie系では無視されます。offspring.jsの作者は、ブラウザ間で実装の有無がある:first-childのような擬似クラスは「使わない」ことを提案しているようです。

今現在、CSSの擬似クラスをサポートしているのはSafari 3だけらしいのですが、IEなどでもCSSの代替え策として最初の子要素に自動的にclassを追加してくれるoffspring.jsをご紹介いたします。

続きを読む "offspring.js" »

投稿者: ユージック日時: 23:52 | パーマリンク | コメント (2) | トラックバック (0) | ▲TOP

Nov23

Firebugに慣れよう

Javascriptの開発を行う際に非常に便利で、Javascriptの開発を行うプログラマならおそらくインストールしてあるであろうFirefoxのアドオンであるFirebugの紹介をしたいと思います。

続きを読む "Firebugに慣れよう" »

投稿者: ユージック日時: 21:38 | パーマリンク | コメント (0) | トラックバック (0) | ▲TOP

Nov09

サーバーサイドでJSとCSSをバンドルする方法

How To Minimize Your Javascript and CSS Files for Faster Page Loadsという海外のブログでJSとCSSを最小限に抑えてページの読み込みを高速化する方法。具体的にはファイル自体を圧縮する方法と外部読み込みをバンドルする方法がある。今回はその中のサーバーサイドでバンドルする方法を紹介します。

続きを読む "サーバーサイドでJSとCSSをバンドルする方法" »

投稿者: ユージック日時: 14:09 | パーマリンク | コメント (0) | トラックバック (0) | ▲TOP

Sep17

メニューで現在位置を表示するJSライブラリ

メニューでjavascriptのみで現在位置を表示するJSライブラリをご紹介します。

どういったものかというと、マークアップでメニューに各ページごとにIDやクラスをふらなくても現在のページをハイライトするという機能です。

続きを読む "メニューで現在位置を表示するJSライブラリ" »

投稿者: ユージック日時: 22:10 | パーマリンク | コメント (3) | トラックバック (0) | ▲TOP

May07

Javascriptのイベントハンドラ設定方法

DOMやJavascriptを勉強しているとイベントハンドラの設定方法が色々とあってどの方法でやれば一番良いのかわからなくなってきたので、自分の覚書もかねてイベントハンドラの設定方法をまとめてみようと思います。

尚、サンプルはボタンを押すと”クリックされました”とアラートが出るだけのシンプルなスクリプトでご紹介します。

（X）HTMLの中に記述する方法

<form>
<input type="button" id="myButton" value="Click" onClick="alert('クリックされました');">
</form>

（X）HTMLの中でイベントハンドラを利用する方法で（X）HTMLとスクリプトの分離ができていないのであまり良い方法とはされていませんがシンプルな方法の一つです。

.onclickを使う方法

<script type="text/javascript"><!--
window.onload = function() {
document.getElementById("myButton").onclick = function () {
  alert('クリックされました');
  return false;
}
}
--></script>

<form>
<input type="button" id="myButton" value="Click">
</form>

（X）HTMLとスクリプトを完全に分離できる方法でのもっともシンプルな記述方法になります。しかし、一つの関数の中でイベントハンドラを記述するのであまりオブジェクト指向といえませんね。

addEventListenerを使う方法

<script type="text/javascript"><!--
function dispMsg() {
  alert('クリックされました');
}

window.onload = function() {
document.getElementById("myButton").addEventListener('click', dispMsg, false);
}
--></script>

<form>
<input type="button" id="myButton" value="Click">
</form>

（X）HTMLとスクリプトを完全に分離できる方法になります。特徴としてはオブジェクト指向で様々な関数をaddEventListenerという関数で呼び出すことのできる方法です。しかしW3C推奨ブラウザのみに有効であって、IEでは使用できません。IEの場合はattachEventというIE独自のものがあるのでそれを利用します。attachEventの記述方法はイベントタイプにonをつけることとcaptureが不要な点がaddEventListenerとの違いになります。

クロスブラウザに対応したaddEventListenerを使う方法

<script type="text/javascript"><!--
function dispMsg() {
alert("クリックされました");
}

function addListener(elem, eventType, func, cap)
{
    if(elem.addEventListener)
    {
        elem.addEventListener(eventType, func, cap);
    }
    else if(elem.attachEvent)
    {
        elem.attachEvent('on' + eventType, func);
    }
}

function setMsg()
{
    btn = document.getElementById("myButton");
    addListener(btn, 'click', dispMsg, false);
}

addListener(window, 'load', setMsg, false);
--></script>

<form>
<input type="button" id="myButton" value="Click">
</form>

addEventListenerとIE独自に有効なattachEventを組み合わせて新たな関数を作り、それを利用したイベントハンドラの方法です。現時点ではこの方法が一番スマートだと言えます。

prototype.jsを利用したEvent.observeを使う方法

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--

Event.observe(window, "load", setMsg, false);

function setMsg(){
	Event.observe("myButton", "click", dispMsg, false);
}

function dispMsg() {
alert("クリックされました");
}
--></script>

<form>
<input type="button" id="myButton" value="Click">
</form>

ブラウザ間の差異を吸収するprototype.jsというライブラリの独自関数であるEvent.observeを使う方法です。これは先ほどのイベントハンドラの関数などをわざわざ作らなくてもprototype.jsの中でEvent.observeというイベントハンドラの関数を作ってくれているので簡単に利用することができます。他にもgetElementByIdなどを$()と省略できる関数などがあり非常に優れたライブラリです。僕は断然こっちをお勧めです。

投稿者: ユージック日時: 20:29 | パーマリンク | コメント (0) | トラックバック (0) | ▲TOP

Mar31

Modal WindowやLightBoxを実装できるライブラリ Control.Modal

Modal Windowとは一度開いた窓を閉じるまで、他の操作をできなくするタイプの窓という意味。LightBoxを使ったことのあるユーザーならなんとなく感覚を理解することができると思う。今回ご紹介するライブラリControl.ModalはHTMLやiflameでページを表示させる事やイメージをLightBox風に表示させるようなModal Windowをコントロールするためのライブラリになる。

Control.Modal

実装はPrototype v.1.5とcontrol.modal.jsを読み込むことで実装できる。

特徴としてEvent.observeで指定したIDに関数を指定してコンフィグレーションやCSSをつけて使用する。コンフィグレーションを1行で記述することができ、CSSでレイアウトをつけれたりするので、調整やカスタマイズがしやすく、結構幅広いアレンジが効くんじゃないかと思う。動作の指定は以下の通り。

<script>
    Event.observe(window,'load',function(){
        new Control.Modal($('modal_link_one'),{
            opacity: 0.8,
            position: 'relative',
            width: 200,
            height: 200
        });
        new Control.Modal($('modal_link_two'),{
            containerClassName: 'test',
            overlayClassName: 'test'
        });
        new Control.Modal($('modal_link_three'));
        new Control.Modal($('modal_link_four'),{
            iframe: true
        });
        new Control.Modal($('lightbox_link_one'));
        new Control.Modal($('lightbox_link_two'),{
            opacity: 0.75
        });
        new Control.Modal($('hoverbox_link'),{
            hover: true,
            position: 'relative',
            offsetLeft: 120
        });
    });
</script>

上記のコードはControl.ModalのExamplesのリンクをクリックするデモで動作を確認することができる。

このライブラリはprototype.jsを使い、Event.observeで関数を記述するので、その他のEvent.observeで関数を記述して使うjavascriptライブラリと組み合わせることで、管理が簡単になり且つ、色んな機能を実装することできるようになるので結構便利かもしれない。

投稿者: ユージック日時: 01:22 | パーマリンク | コメント (0) | トラックバック (0) | ▲TOP

Mar26

ドロップシャドウの効いた角丸ボックスを表現するjavascriptライブラリ

ドロップシャドウの効いた角丸ボックスを表現するjavascriptライブラリの記事を見つけたのでご紹介します。

ShadedBorder - JavaScript Round Corners with Drop Shadow

使い方はいたって簡単です。上記URLに記載のshadedborder.jsをダウンロードし解凍してからスクリプトを外部読み込みします。

<script type="text/javascript" src="shadedborder.js">

（X）HTMLは下記だと想定します。※classでsbは指定しておいてください。

<div id="round_me" class="sb">
       <p>&nbsp;</p>
</div>

ボックスにCSSをつけます。

#round_me{
padding:20px; 
width:30%; 
margin:20px auto;

}
.sb-inner{　　　　　　/*ボックス内の背景色はここで指定*/
background:#FFF;
}

.sb-border{　　　　　/*ボックスのボーダー色はここで指定*/
background:#EEE;
}

角丸にする要素のIDの指定、コーナーのアール、ボーダーの太さ、シャドウの調整などはbody内にてjavascriptで記述します。

<script type="text/javascript">
　　border.render('round_me');
　　var border = RUZEE.ShadedBorder.create({ corner:5, shadow:10,  border:2 }); 
</script>

するとこんな感じでドロップシャドウ付きの角丸ボックスを作ることができます。尚、on-hoverの時はIE6では動かないそうですがIE7ではOKです。ライセンスはMITライセンス。

投稿者: ユージック日時: 23:02 | パーマリンク | コメント (0) | トラックバック (0) | ▲TOP

Feb28

エラスティックレイアウトでイメージを自動で拡大する方法

文字サイズを拡大したときにレイアウト幅も伸縮するエラスティックレイアウトの手法は以前ご紹介しましたが、ヘッダーなどでイメージを使った際はイメージは伸縮しないのであまり使えないなと思われているかと思います。

そこで今回は文字サイズを変更してイメージも拡大する効果を得れるライブラリｓｗIRをご紹介します。

ｓｗIRはFLASHとJavascriptを利用した様々なエフェクトをimgに与えれる優れものです。今回はエラスティックレイアウトの画像に対応する部分だけをご紹介します。

使い方はいたって簡単です。まずTOPページでダウンロードできるswfIRを解凍し、サーバーの同一フォルダにswfir.jsとswfir.swfをアップロードします。そしてswfir.jsを読み込んでJavascriptで効果を記述します。以下はheader内に記述した例です。

<script type="text/javascript" src="swfir.js"></script>
<script type="text/javascript">

window.onload = function(){	
  elastic = new swfir(); 
  elastic.specify('src', '/swfir.swf');
  elastic.specify('elasticity', 'true');
  elastic.swap('img');		
}

</script>

サンプルdemo

画像が拡大した時は解像度が低くなり、画質が低下するのはネックですが、レイアウト崩れを起こすよりはマシですよね。

※追記
画像の伸縮は画像のwidthをemで指定することで解決します。エラスティックレイアウトのみに対応させる場合はこのライブラリを使用するよりも、画像のwidthをemで指定するほうが効率的です。このライブラリのエフェクトも同時に使うときなどはこのエントリーの方法でご紹介した画像伸縮を使えば良いかと思います。

投稿者: ユージック日時: 12:04 | パーマリンク | コメント (0) | トラックバック (0) | ▲TOP

Sep20

フェードイン、フェードアウトして切り替わるボックス

フェードイン、フェードアウトして中身が切り替わるJavascriptのライブラリを発見。
Crossfade DIV Demo
scriptaculous.jsとprototype.jsを利用している。
カスタマイズも簡単でボックスを増やす場合は配列にそのＩＤを追加してリピートが終わる回数のところをその配列の数にしてあげるとＯＫ。エントリーの下のフェードイン　フェードアウトして切り替わる広告で利用しています。これはiframeで読み込んでいます。 javascriptだけでＦＬＡＳＨを使わなくてもおもしろい事ができるもんですね。

投稿者: ユージック日時: 10:48 | パーマリンク | コメント (2) | トラックバック (0) | ▲TOP

ユージック

Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)

EXCELをHTMLのTABLEに変換するjQueryプラグイン

イメージを文章説明付でフェイドイン・アウト表示させるＪＳライブラリ　s3Slider

AJAX Libraries API

アップデートしたLightviewが素晴らしい

offspring.js

Firebugに慣れよう

サーバーサイドでJSとCSSをバンドルする方法

メニューで現在位置を表示するJSライブラリ

Javascriptのイベントハンドラ設定方法

（X）HTMLの中に記述する方法

.onclickを使う方法

addEventListenerを使う方法

クロスブラウザに対応したaddEventListenerを使う方法

prototype.jsを利用したEvent.observeを使う方法

Modal WindowやLightBoxを実装できるライブラリ Control.Modal

ドロップシャドウの効いた角丸ボックスを表現するjavascriptライブラリ

エラスティックレイアウトでイメージを自動で拡大する方法

フェードイン、フェードアウトして切り替わるボックス

BLOG SEARCH

CATEGORY

RECENT ENTRY

FEED

CONTENTS

WEB ACTIVITY

CREATOR

MOBILE

（X）HTMLの中に記述する方法

.onclickを使う方法

addEventListenerを使う方法

クロスブラウザに対応したaddEventListenerを使う方法

prototype.jsを利用したEvent.observeを使う方法

BLOG SEARCH

CATEGORY

RECENT ENTRY

TAG CLOUD

FEED

CONTENTS

WEB ACTIVITY

CREATOR

MOBILE