ユージック

jQuery Mobileでは、jQuery MobileのJSの手前に初期値設定オプション用のJSを読み込むことで初期設定を変更することができます。

続きを読む

jQueryなしではWEB制作をするのが窮屈になってきた今日この頃です。
IE7.6など:focus擬似クラスが使えないブラウザ用にjQueryでフォームのinputにfocusを実装するコードを書いたので覚書として書いておきます。

続きを読む

※jQueryのやり方ではなくFB.Canvas.setAutoResize();の方法がよりスマートです。

以前書いた記事Facebookページ作成についての覚書にてJavascriptSDKを使ってiframeのページの高さを調整してスクロールバーを消すやり方のページの方法をご紹介しましたが、コンテンツの内容が変わるたびに高さの設定をしないといけないので、ページの高さを自動で取得して代入するやり方を考えてみました。

続きを読む

マイアプリでiframeを組み込むタイプのFacebookページ作成手順を覚書として書いてみます。

続きを読む

iPhoneとAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。

続きを読む

jQuery Mobileを利用してスマートフォンサイト作成してみたので、手順を覚書として書いておきます。
ちなみにまだ正式版ではなく、アルファ版となります。※2010年11月現在
現在のバージョンなどは下記の本家サイトよりご確認ください。

jQuery Mobile

続きを読む

ノンプログラマー向けのjQuery解説本が出たのでご紹介します。

続きを読む

All　Aboutで連載もしているJavaScriptで有名な高橋登史朗氏が作ったEXCELをHTMLのテーブルに変換するjQueryプラグインjquery.csv2table.jsが便利そうなのでご紹介しようと思います。

続きを読む

イメージを文章説明付でフェイドイン・アウト表示させるＪＳライブラリであるs3Sliderが便利そうなのでご紹介しようと思います。

続きを読む

GoogleのAJAXライブラリを簡単に利用するAPIであるAJAX Libraries APIが公開されましたのでご紹介します。

続きを読む

様々なメディアファイルをLighboxのように表示できるLightview2.0が非常に素晴らしいのでご紹介したいと思います。

続きを読む

追記

指摘がありました。 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をご紹介いたします。

続きを読む

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

続きを読む

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

続きを読む

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

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

続きを読む

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などを$()と省略できる関数などがあり非常に優れたライブラリです。僕は断然こっちをお勧めです。

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ライブラリと組み合わせることで、管理が簡単になり且つ、色んな機能を実装することできるようになるので結構便利かもしれない。

ドロップシャドウの効いた角丸ボックスを表現する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ライセンス。

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

そこで今回は文字サイズを変更してイメージも拡大する効果を得れるライブラリｓｗ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で指定するほうが効率的です。このライブラリのエフェクトも同時に使うときなどはこのエントリーの方法でご紹介した画像伸縮を使えば良いかと思います。

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