Web制作の現場で使うjQueryデザイン入門[改訂新版] (Web Professional Books)

現場が意識された入門書

JQuery/JavaScript未経験でも理解できるようにわかりやすく解説されています。前半は基本的な内容で、後半は応用例が紹介されています。JQueryの基礎固めに使えるWeb制作者のための実践的な1冊となっています。

西畑一馬 (著)
出版社: KADOKAWA/アスキー・メディアワークス; 改訂新版 (2013/3/7)、出典:出版社HP

 

はじめに

本書は、2010年2月に発売された「Web制作の現場で使うjQueryデザイン入門」の改訂版です。
jQueryが普及し始めたタイミングで発売された旧版は、幸いにも多くの支持を得て、3万人近くの方が手にする大ヒット書籍となりました。
3年の月日の間にWeb制作の環境は大きく変化しました。HTML5やスマートフォンの普及、それに伴うFlashの衰退。JavaScript/jQueryへのニーズは、2010年2月当時とは比較にならないほど大きくなっています。
jQueryにも変化がありました。jQueryはこれまで下位互換性を保っていましたが、2013年1月にリリースされた「jQuery 1.9.0」では従来の機能のいくつかが削除されました。

そういった時代の変化、ニーズに対応したのが今回の改訂版です。jQuery 1.9.0に対応し、サンプルをXHTML1.0からHTML5に変更。jQueryで非推奨や廃止となった機能の解説を削除し、新機能の解説を追加しました。また、紙幅を割いていたIE6への対応方法を減らし、代わってスマートフォン対応などを追加しています。

本書は、Webデザイナーやマークアップエンジニアなどの「非プログラマー」の方が、jQueryをいかに効率よく学べるかに注力して執筆しました。プログラミングの専門用語は極力使わず、CSSやHTMLの考え方をベースにjQueryの使い方を少しずつ習得できるように工夫しています。また、Webサイトで一般的に用いられるUI表現の作成方法を網羅し、100本を超えるサンプルを用意していますので、実際に手を動かしながら、サンプルを改造しながらステップアップできます。

本書が、jQueryの使い方を習得するだけでなく、Webサイトの「使いやすさ」までデザインできるようになる一助となれば幸いです。
最後に、ジョン・レッシグ氏を始めとするjQuery開発チームの方々、本書の改訂にあ たり最初から最後まで非常に多くのサポートしていただいたアスキー・メディアワークスの小橋川さん、そして本書を手にしてくださった読者のみなさんに感謝の意を表したいと思います。

2013年2月 西烟一馬

西畑一馬 (著)
出版社: KADOKAWA/アスキー・メディアワークス; 改訂新版 (2013/3/7)、出典:出版社HP

目次

第1章 jQueryをはじめる前の基礎知識

1-1 jQuery&lt?
・圧倒的人気を誇るJavaSprictライブラリー『jQuery』
・サンプルコードに見るjQueryの手軽さ
・軽量、クロスブラウザー対応もjQueryの魅力

1-2 jQueryを使うための準備
・jQueryをダウンロードする
・jQueryの読み込みと記述場
[もっと知りたい!①] GoogleのサーバーでjQueryを使う

第2章 サンプルで学ぶjQueryのキホン

2-1 jQueryの基本とセレクターの使い方
・JavaScriptの働きとHTML/CSSの関係
・JavaScriptの実行タイミングとjQuery
・HTMLの要素を指定する「セレクター」
1. CSSでよく利用されるセレクター
2. css 2.1のセレクター
3. CSS3のセレクター
4. CSSの属性セレクタ
5. jQueryの独自セレクター
・jQueryのセレクターのまとめ

2-2 HTML/CSSを操作するjQueryの命令
・HTML/CSSを自在に操れる
・jQueryの命令
1. テキストの変更と取得
2. HTMLの変更と取得
3. HTMLの挿入
4. HTMLの移動
5. 他の要素で包む
6. 親要素を取り除く [jQuery 1.4.0で追加]
7. 要素の置き換え
8. 要素の削除
9. 属性値の変更と取得
10. class属性の追加と削除
11. CSSの制御
・複数の命令をまとめて記述できる「メソッドチェーン」
・HTML/CSSを操作するjQueryの命令のまとめ

2-3 「イベント」でタイミングを設定しよう
・処理のタイミングを決める「イベント」
・HTMLが読み込まれたタイミングで実行する ready()
・他のイベント処理でもready()は必須
・イベントの基本をclick()で学ぶ
・ダブルクリックイベントを感知する dblclick()
・マウスのボタン操作を感知するmousedown()/mouseup()
・マウスオーバー/マウスアウトを感知するmouseover()/mouseout()
・マウスの動きに合わせて処理を実行する mousemove()
・イベント発生時に一度だけ処理を実行する one()
・対象要素を絞ってイベントを登録する on() [jQuery 1.7.0で追加]
・設定されているイベント処理を取り消す off() [jQuery 1.7.0で追加]
・jQueryのイベントのまとめ

2-4 フォーム機能を使いこなそう
・充実したjQueryのフォーム機能
1.フォーム部品の値を取得・変更する命令
2.フォームに関するイベントの処理
3.フォーム部品を選択するセレクター

2-5 Ajaxを使ってみよう
・今さら聞けない「Ajax」とは?
・Webページにテキストを挿入する load()
・load()で外部のHTMLを表示する
・XMLデータを取得・加工して表示する

2-6 アニメーション効果で動きを付けよう
・非表示状態の要素を表示する show()
・表示中の要素を非表示にする hide()
・要素の表示・非表示を交互に切り替える toggle()
・表示・非表示をスライドで切り替える slideDown()/slideUp()
・表示・非表示をスライドで交互に切り替える slideToggle()
・表示状態をフェードイン・フェードアウトで切り替える fadein() / fadeOut()
・透明度を徐々に変更する fadeTo()
・独自のアニメーションを設定できるanimate()
・アニメーション関連の命令のまとめ
・[もっと知りたい!②] jQueryと他のライブラリーの共存

第3章 現場で使えるデザインレシピ

3-1 CSS3セレクターでストライプテーブル
・CSS3のセレクターを使えば作業効率がアップ
・ストライプテーブルを作成する
・マウスオーバーで行や列をハイライト表示に

3-2 スライド式イメージギャラリー
・イメージギャラリーの基本部分を作ってみよう
・アニメーション効果で画像を滑らかに切り替える
・画像の追加に対応、スライド式ギャラリーに改良する

3-3 なめらかアコーディオンパネル
・シンプルなアコーディオンを作ってみよう
・より分かりやすく、使い勝手のいいアコーディオンに

3-4 ポータルサイト風タブパネル
・基本のタブパネルの作り方
・アニメーション効果でリッチなタブパネルに

3-5 個性的な3種類のツールチップ
・CSSで装飾するシンプルなツールチップ
・透過GIFで作る固定位置のツールチップ
・透過PNGで作るタイマー式のツールチップ

3-6 ロールオーバー付きナビゲーションバー
・ロールオーバーの基本的な仕組みを作ろう
・汎用的なロールオーバーに改良する
・画像のプリロード(先読み) 処理を追加する

3-7 多階層対応ドロップダウンメニュー
・基本のドロップダウンメニュー
・多階層対応のドロップダウンメニューへ改造する

3-8 Lightbox風モーダルウィンドウ
・HTMLとCSSによる表現を考える
・jQueryでモーダルウィンドウを作成する

3-9 ドラッグ&ドロップで動くフローティングウィンドウ
・基本のフローティングウィンドウを作成する

3-10 バリデーション付きメールフォーム
・バリデーションルールをclass属性で指定する

3-11 Amazon風カルーセルパネル
・HTML/CSSでカルーセルのベースを作成する

3-12 Ajaxでスムーズページング
・読み込み先のHTMLを用意する
・読み込み元のHTMLを作成する

3-13 Flashみたいなスライドギャラリー
・スライドギャラリーのHTMLを用意する
・自動でスライドするギャラリー

3-14 指で操作するスマホ用スワイプギャラリー
・スワイプギャラリーのHTMLを用意する
・jQueryで指のスワイプの処理を作る
[もっと知りたい!③] Google Chromeのデベロッパーツールによるデバッグ
[もっと知りたい!④] jQueryの高速化

第4章 jQueryプラグインでラクラクWeb制作

4-1 jQueryプラグインとは?
・実務にも学習にも便利なjQueryプラグイン
・jQueryプラグインの基本的な使い方
・jQueryプラグインの探し方
[もっと知りたい!⑤] jQueryプラグインを自作する
[もっと知りたい!⑥] jQuery1.9や2.0で「動かない」を解決する方法

索引

西畑一馬 (著)
出版社: KADOKAWA/アスキー・メディアワークス; 改訂新版 (2013/3/7)、出典:出版社HP

本書の構成

本書は、HTMLやCSSを日常的に書いているWeb制作者(デザイナー/コーダー/マークアップエンジニア)を対象に、jQueryの基礎知識から実用的なUIの制作方法までを解説した入門書です。
全4章からなり、第1章から順番に読み進めることで、JavaScriptはまったくの初心者という方でも、Web制作の現場で活用する力を養えるように構成されています。

第1章 jQueryをはじめる前の基礎知識
第1章では、jQueryの概要と入手方法、導入に必要な準備について解説します。jQueryと他 のライブラリーの違い、特徴を理解し、jQueryの学習をスタートしましょう。なお、すでにjQueryを利用している方はこの章は読み飛ばしても構いません。

第2章 サンプルで学ぶjQueryのキホン
jQueryは簡単な構文と命令を覚えることでWebページのUIに動きを付けられます。第2章では、jQueryの主要な命令をサンプルコードとともに一気に解説します。サンプルを手元に置いて、1つ1つ動きを確認しながら基礎を固めていきましょう。

第3章 現場で使えるデザインレシピ
第3章はいよいよ実践です。第2章で学んだjQueryの命令を使って、UI作成にチャレンジしましょう。カルーセルパネル、モーダルウィンドウ、スマートフォン用ギャラリーなど、商用サイトで使えるサンプルを全部で14種類作成します。

第4章 jQueryプラグインでラクラクWeb制作
jQueryの特徴の1つが「jQueryプラグイン」と呼ばれる関連ライブラリーの充実です。第4章では、jQueryプラグインの概要と使い方について解説します。インターネット上でのプラグインの探し方やプラグインの作成方法も紹介します。

サンプルファイルについて

本書のサンプルファイルは、以下のURLからダウンロードできます。
http://go.ascii.jp/?njq_sample
サンプルファイルはZIP形式で圧縮されています。展開ソフトなどで展開し、本文で示したサンプルファイルのフォルダ構造に沿ってご利用ください。
なお、各サンプルは、HTMLファイル内にCSS、JavaScriptをまとめて記述しています。実務 で利用する際には、JavaScriptとCSSを外部ファイル化することをおすすめします([1-2]を参照)。

  • サンプルファイルの利用条件
    サンプルファイルに含まれるHTML/CSS/JavaScriptのソースコードは、商用・非商用を問わず自由に利用できます。利用にあたって著作権表示や申請等は必要ありません。改変も自由です。
    ただし、サンプルファイルそのものの再配布や販売はできません。また、サンプルに含まれる写真素材等の画像については二次利用できません。動作確認にのみご利用ください。
  • サンプルファイルの動作環境
    収録したサンプルは、原則としてInternet Explorer 7以上および、Firefox/Google Chrome /Safari(2013年2月時点の最新版)を対象にしています。一部サンプルはIE6にも対応しています。

本書の見方

西畑一馬 (著)
出版社: KADOKAWA/アスキー・メディアワークス; 改訂新版 (2013/3/7)、出典:出版社HP