実践！iPhone＆Androidサイト制作ガイド ― 第10回

jQueryでiPhone風スライドパネルを作ろう

2010年11月09日 11時00分更新

文● たにぐちまこと／H2O Space.

　スマートフォン向けのWebサイトでは、「動き」を付けることがよくあります。たとえば、折り畳んでいたパネルをゆっくりと展開したり、ページ全体を左右にスライドさせて切り替えたりと、表示される途中の過程をあえて見せることで、ユーザーに気持ちのいい操作感を与えられます。こうした動きは、JavaScriptを使って実現できます。

　今回から数回にわたって、JavaScriptを使った動きの演出方法を紹介します。

jQueryを使う

　JavaScript開発でいまや欠かせないのがJavaScriptフレームワークです。中でも「jQuery」は非常に人気があり、多くの開発者に利用されています。iPhone/Androidでも利用できますので、本連載でもjQueryを使って動きを表現してみましょう。

　まず、jQueryの最新版のファイルをダウンロードします。

・jQuery: http://jquery.com

　ダウンロードしたファイルを適当なフォルダ（ここでは「js」としました）にコピーして、HTMLのhead要素内で次のように参照します。ファイル名はバージョン番号などを省いて「jquery.js」に変更しました。

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

　これでjQueryを利用する準備が整いました。さっそく簡単なサンプルでjQueryの動きを試してみましょう。新しいHTMLファイルを作成し、body要素内に次のようなdiv要素を記述します。

<div id="content">
<p>この文字が徐々に消えます</p>
</div>

　body要素の最後に次のようなscript要素を用意し、jQueryのスクリプトを記述します。

<script type="text/javascript">
$('#content').fadeOut();
</script>

　このHTMLをブラウザーで表示すると、テキストの色が次第に薄くなっていき、真っ白のページに変わります。

　jQueryでは、対象の要素に対して「メソッド」または「イベント」と呼ばれる動作を記述することで、プログラムを作ります。対象の要素は、$('')の中にCSSのセレクターで指定し、$('.class1')とすると「class属性がclass1の要素」になります。ここでは、$('#content')という記述によって「id属性がcontentの要素」を指定しています。

　セレクターで特定した要素に対し、サンプルではfadeOut()というメソッドを指定しています。fadeOut()メソッドはその名の通り「フェードアウトする」という動作を表していて、スタイルシートのopacityプロパティの値を徐々に変更して透明度を上げ、最後にdisplayプロパティの値をnoneにして非表示にします。こうした動作をJavaScriptだけで記述するのはかなり骨が折れますが、jQueryならわずか1行で実現できるわけです。


サンプルを実行するとテキストが次第にフェードアウトしていく

　さらに、fadeOut()メソッドに以下のようにパラメータを与えると、フェードアウトの速度を変更できます。

<script type="text/javascript">
$('#content').fadeOut('slow');
</script>

　jQueryにはこのほかにもfadeIn（フェードインする）、slideIn/slideOut（スライドイン、スライドアウト）など、さまざまなメソッドが用意されていて、いろいろな効果を簡単に与えられます。jQueryについてさらに詳しく知りたい場合は、以下の連載を参考にしてください。