jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践

jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践

3,300円(本体 3,000円+税10%)

品種名
書籍
発売日
2010/12/17
ページ数
424P
サイズ
A5判
著者
西畑一馬、中村享介、徳田和規
ISBN
9784844329619

初級から上級までテクニック満載! 目的別で引ける!Webの現場に必ず置いておきたい必携書。

jQueryの知識&テクニックを121項目にわたって解説。基本構文から、プラグインの活用・作成、イベント処理、多彩なフォームやアニメーションの実現、さらにはiPhone/iPadサイト作成まで完全網羅。項目ごとに初級・中級・上級のレベルを表示。目的別に引けるので、すぐに役立ちます。Webデザイン現場の必携書。

◆jQueryやJavaScriptに自信がない
   ⇒ 本書を最初から読むと、キホンが分かります!
◆見た目とかフォームとか現場でちょっと困ってる
   ⇒ 本書の目次から引いて問題解決!
◆jQueryの実践テクニックを身につけたい
   ⇒ 中級・上級アイコンを目安に本書をお読みください!

「読者アンケートに答える」「読者プレゼントに応募」の場合もこちらをご利用ください。

アンケートに答える

書籍の内容に関するお問い合わせはこちら。お答えできるのは本書に記載の内容に関することに限ります。

学校・法人一括購入に関するお問い合わせはこちらへ。

一括購入窓口

著者紹介

 本書は、jQueryやJavaScriptの基本的な文法から、jQueryのさまざまなテクニック、実務で必要になるであろうUI(ユーザーインターフェイス)の作成、プラグインの利用方法、AjaxやWebサービスとのマッシュアップ、そしてスマートフォン対応など、Web制作で求められるさまざまな技術を網羅するように解説しています。その数は121項目にも及びます。なかには詳細に解説しようとすると1冊にもなる内容を数ページにまとめたものもあり、説明が物足りなく感じる場合もあるでしょう。しかし、幅広い知識を習得することは、新しいアイデアを産み出し、業務での助けになると考えています。
 本書が、jQueryを学ぶだけではなく、jQueryを通してWebに関するさまざまな構築手法を習得する一助になれば幸いです。(「はじめに」より)

ページイメージ

クリックすると大きい画像でご覧いただけます

目次

第1章 jQueryの基本構文
   1-1 jQueryを利用したい
   1-2 セレクタやフィルタを理解したい
   1-3 HTMLを変更したい
   1-4 HTMLの属性を操作したい
   1-5 CSSを操作したい
   1-6 メソッドチェーンを利用したい
   1-7 イベントを設定したい
   1-8 将来追加される要素にイベントを設定したい
   1-9 ブラウザのイベント処理を止めたい
   1-10 繰り返し処理をしたい
   1-11 thisを理解したい
   1-12 セレクタで指定した要素を絞り込みたい

第2章 jQueryとJavaScriptを組み合わせてみよう
   2-1 jQueryとJavaScriptの使い分け方を知りたい
   2-2 変数を理解したい
   2-3 条件分岐を理解したい
   2-4 配列を理解したい
   2-5 関数を作りたい
   2-6 正規表現を理解したい
   2-7 オブジェクトを理解したい
   2-8 繰り返し構文を理解したい
   2-9 DOMを理解したい

第3章 jQueryのさまざまなテクニック
   3-1 DOM要素中に値を保存したい
   3-2 画像のプリロードを行いたい
   3-3 ブラウザごとに処理を変えたい
   3-4 セレクタのコンテキストを利用したい
   3-5 jQueryを高速化したい
   3-6 プラグインを作成したい
   3-7 セレクタを自作したい
   3-8 クッキーを使いたい
   3-9 再帰的に置き換え処理を行いたい
   3-10 イベントデリゲートで効率よくイベントを設定したい
   3-11 クロージャを利用したい
   3-12 配列を効率よく操作したい
   3-13 jQuery以外のライブラリと併用したい
   3-14 thisが示す値を固定したい
   3-15 セレクタで指定した要素の数を取得したい
   3-16 jQueryオブジェクトからDOMノードを取得したい
   3-17 右クリックを禁止したい
      右クリックで独自メニューを表示させたい
   3-18 イベントで名前空間を利用したい
   3-19 イベントオブジェクトを利用したい

第4章 見た目をよりよく変えてみよう
   4-1 ブロックレベル要素を角丸にしたい
   4-2 ストライプテーブルを表示したい
   4-3 IE6で透過PNG画像を利用したい
   4-4 画像にリフレクション効果を与えたい
   4-5 複数の背景画像を異なるスピードでスクロールさせたい
   4-6 ユーザーがスタイルシートを切り替えられるようにしたい
   4-7 テーブル要素のユーザーインターフェイスを強化したい
   4-8 表示中の画像の一部を拡大して別に表示させたい
   4-9 グラデーションを表現したい
   4-10 画像の縦横比を固定して縮小したい
   4-11 ドロップシャドウ(影)を付けたい
   4-12 要素に複数の背景画像を設定したい
   4-13 要素をふわっと表示・非表示させたい
   4-14 ブロックレベル要素の高さを揃えたい

第5章 さまざまなインターフェイスを作成しよう
   5-1 アラートをきれいに表示したい
   5-2 ロールオーバーを作成したい
   5-3 タブパネルを作成したい
   5-4 アコーディオンパネルを作成したい
   5-5 ツールチップを利用したい
   5-6 フローティングウィンドウを利用したい
   5-7 ウィジェットを移動できるiGoogleのようなページを作りたい
   5-8 モーダルウィンドウを利用したい
   5-9 ドラッグ&ドロップを実装したい
   5-10 ニュースティッカーを表示したい
   5-11 Dock風メニューを作成したい
   5-12 ドロップダウンメニューを作成したい
   5-13 クロスフェードギャラリーを作成したい
   5-14 グラフを表示したい

第6章 フォームを入力しやすくしよう
   6-1 チェックボックスを一括変更したい
   6-2 入力チェックを行いたい
   6-3 カレンダーを表示したい
   6-4 カラーピッカーを表示したい
   6-5 チェックボックスやラジオボタンのデザインを変更したい
   6-6 数値をスライダーで変えたい
   6-7 セレクトボックスをデザインしたい
   6-8 プレースホルダーを実装したい
   6-9 複数のセレクトボックスを連動させたい
   6-10 フォームに入力された文字数を表示したい

第7章 多彩なアニメーション表示を利用しよう
   7-1 アニメーションを作成したい
   7-2 要素をスライド表示・非表示で切り替えたい
   7-3 要素をフェードイン/フェードアウトさせたい
   7-4 さまざまなeasing処理を使いたい
   7-5 アニメーションの実行タイミングを制御したい
   7-6 複雑なeasing処理を使いたい
   7-7 スクロールしても常に表示されるメニューを作成したい
   7-8 ページ内リンク先をスムーズスクロールで表示したい
   7-9 スクロールで別のコンテンツに切り替えたい

第8章 Ajaxを利用しよう
   8-1 Ajaxを利用したい
   8-2 他のページの要素を読み込みたい
   8-3 JSONデータを表示したい
   8-4 クロスドメインでJSONPを扱いたい
   8-5 RSSなどのXMLを読み込みたい
   8-6 複雑な非同期通信をスムーズに実行したい
   8-7 通信エラー時の処理を行いたい
   8-8 ローディング画像を表示したい
   8-9 クロスドメインからRSSフィードを取得したい
   8-10 Ajaxでもヒストリーを使いたい
   8-11 サジェスト機能を実装したい

第9章 Web APIを組み込もう
   9-1 YouTube APIを利用したい
   9-2 Google Maps APIを利用したい
   9-3 Twitter APIを利用したい
   9-4 Flickrを利用したい
   9-5 URLを短縮したい
   9-6 delicious APIを利用したい

第10章 iPhone/iPadサイトを作成しよう
   10-1 タッチやタップのイベントを実装したい
   10-2 滑らかにアニメーションを表示させたい
   10-3 デバイスの向きを検出したい
   10-4 iPhoneのUIを作成したい

第11章 ツールを使ってより簡単に開発しよう
   11-1 Firebugを利用したい
   11-2 FireQueryを利用したい
   11-3 IEの開発者ツールを利用したい
   11-4 Visual Studioでコードを楽に書きたい
   11-5 チートシートを活用したい
   11-6 jQueryのソースコードを確認したい

第12章 The Other Topics of jQuery ~その他の重要テーマ~
   12-1 JavaScriptが実行できない環境を考慮したい
   12-2 JavaScriptファイルを圧縮したい
   12-3 ライセンスについて知りたい
   12-4 jQueryプラグインを効率よく探したい
   12-5 ブックマークレットを作成したい
   12-6 Greasemonkeyスクリプトを作成したい
   12-7 CDNを使ってjQueryを利用したい




■著者プロフィール

西畑一馬[Kazuma Nishihata]
to-R代表。PHPによるシステム開発や、CMSを利用したWebサイト制作、SEO対策などのマーケティング、コンサルティング、Webクリエイター向けの講座の講師などを業務で行っている。主な著書に『Web制作の現場で使うjQueryデザイン入門』(アスキー・メディアワークス刊)、『現場のプロから学ぶXHTML+CSS』(共著、毎日コミュニケーションズ刊)。

徳田和規[Kazunori Tokuda]
マインドフリー株式会社ディレクター兼UIデベロッパー。Web制作会社のHTML/CSSコーダーを経てディレクターとしてマインドフリー株式会社へ入社。JavaScriptの特性を活かしたサイトディレクション・UI開発を得意とする。個人ブログ(http://5509.me/)では多数の自作jQueryプラグインを公開している。

中村享介[Kyosuke Nakamura]
株式会社ピクセルグリッド代表取締役/フロントエンド・エンジニア。Web制作会社のFlashエンジニア・ディレクターを経て、株式会社ピクセルグリッドを設立。主な業務はJavaScriptを中心に、HTML5/CSS3といった新しい技術を駆使したWebサイト制作やiPhone/iPadといったスマートフォン、タブレット向けWebサイト/アプリ制作など。会社経営・制作のほか、講演、執筆など幅広く活動している。著書に『WebクリエイティブのためのDOM Scripting』(毎日コミュニケーションズ刊)。

ダウンロード

サンプルコードのダウンロードと実行

  • →サンプルのダウンロード

    以下のリンクをクリックすると、サンプルを収録したアーカイブファイル(5.942KB)をダウンロードできます。ダウンロードしたアーカイブを解凍すると、各節ごとのフォルダとサンプルが展開されます。

    サンプルのダウンロード開始リンク

    【1】8章4節のサンプルsample.jsonp(p.306)が保存されているURLが消滅し、サンプルが動作していませんでした。新規のURLに保存・変更し、動作するようにしました(2014/11/04)。

    【2】9章3節で解説している@AnywhereというTwitter APIが利用できなくなっており、9章3節のサンプルが動作しません。外部サービスの停止のため、ご理解のほどなにとぞよろしくお願いいたします(2014/11/04)。

  • →各サンプルを実行できるページ

    以下のリンク先ページでは、表示されるリンクをクリックすることで、オンラインで各サンプルを実行できます。

    各サンプルの実行ページ

    【1】8章4節のサンプルsample.jsonp(p.306)が保存されているURLが消滅し、サンプルが動作していませんでした。新規のURLに保存・変更し、動作するようにしました(2014/11/04)。

    【2】9章3節で解説している@AnywhereというTwitter APIが利用できなくなっており、9章3節のサンプルが動作しません。外部サービスの停止のため、ご理解のほどなにとぞよろしくお願いいたします(2014/11/04)。

お詫びと訂正

誤記のためにご迷惑をおかけし、誠に申し訳ございません。

  • 18ページ フォームフィルタの表 「checkedフィルタ」の「記述例」
    • [誤]
      $(":disabled")
    • [正]
      $(":checked")
    • 【 第2刷にて修正 】
  • 60ページ 最初の罫囲みコードの下の説明
    • [誤]
       parentsメソッドの引数にセレクタを指定した場合、そのセレクタの要素までの各要素の先祖をjQueryオブジェクトとして作成します。次のように記述すると、li要素からbody要素の間にある各要素の先祖要素をjQueryオブジェクトとします。その際、li要素とbody要素はjQueryオブジェクトには含まれません。
    • [正]
       parentsメソッドの引数にセレクタを指定した場合、jQueryオブジェクトをそのセレクタで指定した先祖要素に変更します。次のように記述すると、jQueryオブジェクトを先祖要素のbody要素に変更します。
    • 【 第2刷にて修正 】
  • 96ページ 「スクリプトの例」下の本文4行目
    • [誤]
      getElementsByClassNameメソッドを使って
    • [正]
      querySelectorAllメソッドを使って
    • 【 第2刷にて修正 】
  • 96ページ 「スクリプトの例」下の本文5行目
    • [誤]
      IEなど一部のブラウザでは
    • [正]
      IE6/7など一部のブラウザでは
    • 【 第2刷にて修正 】
  • 96ページ 「スクリプトの例」下の本文6行目
    • [誤]
      そのため、すべての要素を精査し、
    • [正]
      また、すべての要素を精査し、
    • 【 第2刷にて修正 】
  • 97ページ 上から2つめの罫囲みにあるコード(カンマをピリオドに変更)
    • [誤]
      $("div,nav")
    • [正]
      $("div.nav")
    • 【 第2刷にて修正 】
  • 97ページ 本文1行目
    • [誤]
      IEなど一部のブラウザでは、getElementsByClassNameメソッドを利用できません。
    • [正]
      IE6/7など一部のブラウザでは、querySelectorAllメソッドを利用できません。
    • 【 第2刷にて修正 】
  • 97ページ ページ下から6行目
    • [誤]
      これは、jQueryのセレクタが「右から左」に解釈されるためです。
    • [正]
      これは、querySelectorAllメソッドがセレクタを「右から左」に解釈するためです。
    • 【 第2刷にて修正 】
  • 127ページ 「スクリプトの例」のコード下 本文7行目
    • [誤]
      button要素はnameプロパティを持たないため、クリックしても「undefined」とアラート表示されてしまいます。
    • [正]
      button要素はnameプロパティの値を持たないため、クリックしてもアラートに何も表示されません。
    • 【 第2刷にて修正 】
  • 187ページ コードの下から13行目の末尾(セミコロンを削除)
    • [誤]
      ul.tab li a.selected{;
    • [正]
      ul.tab li a.selected{
    • 【 第2刷にて修正 】
  • 307ページ スクリプトの例[/8-4/index.html]
    • [誤]
      $.getJSON("http://5509.me/sample.jsonp",function(data){
    • [正]
      http://5509.meが消滅しているため、別のドメインのURLにsample.jsonp(p.306)を保存し、このサンプルのURLを変更する必要があります。
  • 308ページ スクリプトの例[/8-4/index2.html]
    • [誤]
      $.getJSON("http://5509.me/sample.jsonp?jsoncallback=?");
    • [正]
      http://5509.meが消滅しているため、別のドメインのURLにsample.jsonp(p.306)を保存し、このサンプルのURLを変更する必要があります。
  • 345ページ 9-3節の内容について
    • [誤]
      @AnywhereというTwitter APIの利用について
    • [正]
      @AnywhereというTwitter APIが利用できなくなり、9章3節のサンプルが動作しません。外部サービスの停止につきまして、ご理解いただきたく、なにとぞよろしくお願いいたします(2014/11/04)。
  • 355ページ リスト 下から8行目(行末にセミコロンを追加)
    • [誤]
      $(this).prependTo("#photos").show()
    • [正]
      $(this).prependTo("#photos").show();
    • 【 第2刷にて修正 】

お問い合わせ

書籍の内容に関するお問い合わせはこちら。お答えできるのは本書に記載の内容に関することに限ります。

お問い合わせフォーム