このページの本文へ

DESIGN 実践!iPhone&Androidサイト制作ガイド ― 第10回

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

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

たにぐちまこと/H2O Space.

  • この記事をはてなブックマークに追加
本文印刷
iphone-android

 スマートフォン向けの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/
書影

「まとめてじっくり読みたい!」という読者のみなさまの声にお応えし、この連載が本になりました。書籍化にあたっては構成を全面的に見直し、記事公開後の最新情報や現場で役立つ追加情報も多数盛り込んでいます。画面設計に便利な特製ノート付き。

iPhone+Android
スマートフォンサイト制作入門

本体 2,380円+税、B5変形判216ページ(オール4色刷)
ISBN:978-4-04-870218-8

Amazon.co.jpで買う 楽天ブックスで買う

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング