|
|---|
スマートフォン向けの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についてさらに詳しく知りたい場合は、以下の連載を参考にしてください。
- ・Web制作の現場で使えるjQuery UIデザイン入門
- http://ascii.jp/elem/000/000/438/438206/
