2012年7月3日火曜日

『jQueryプラグイン徹底活用 プロのデザインアイディアとテクニック』発売!

というわけで執筆した原稿が本になりました。TANAKA Kohji です。
まずは、こちらをご覧ください。



本日、わたしが一部原稿を執筆した『jQueryプラグイン徹底活用 プロのデザインアイディアとテクニック』が発売されました。

この本は、jQueryを使ってサイトのUIを向上させるのに有効なプラグインが、88種類掲載されています。
そのうちの半分以上は、導入に対しての詳しい解説やカスタマイズの案内付き。

どのプラグインも「仕事につかえる」という視点で厳選されていて、活用度の高いプラグインばかりです。

たとえば、先頭に紹介されている jQuery Masonry というプラグインを紹介している章では。
このプラグインは、タイル状に並べた矩形のボックスを、ブラウザの横幅にあわせて並び替えるというもの。パソコンの大きな画面では横に多数並び、スマートフォンなどの画面では横には少数で、その分縦が長くなる。このプラグインの面白いのは、スマートフォンを縦から横にしたときなど、画面の横幅が変わるとアニメーションをしながらボックスが並び変わるところです。
なかなか見ていて楽しいプラグインなのですが、この本では、jQuery Masonry を紹介したあと続けて、 Infinite Scroll という、いわゆる無限ページング(スクロールして画面最下部までくると自動的に次ページをその下に表示する)を紹介しています。

組み合わせて紹介することで、より実装イメージが湧きやすく、製作するサイトで利用しやすくなっています。

掲載されているプラグイン一覧

レイアウト

  • jQuery Masonry ・・・ウィンドウの幅にあわせて要素をアニメーションして配置
  • Modernizr ・・・HTML5やCSS3等の機能に対応しているかどうかを判別
  • Infinite Scroll ・・・無限ページング
  • jQuery UI Layout ・・・WebアプリのようなUIを実現
  • jQuery UI ・・・様々な便利UIのセット
  • jQuery Mobile ・・・スマートフォン用UIを実現
  • PageSlide ・・・ページを横へスライドさせ、ページ脇にコンテンツを表示
  • TwitterBootstrap ・・・CSSフレームワーク。jQueryを使用した機能も多い(本書内では、Modal/Alert/Tab/Collapse/Typeahead等を紹介)
  • FeedReader ・・・Google Ajax APIを使用し外部ドメインのRSSを取得
  • SNBinder ・・・Ajax等で取得したhtmlをテンプレートに流し込む
  • jQSlickWrap ・・・画像の形に合わせて、テキストを回りこませる
  • exValidation ・・・入力内容のバリデーション(チェック)を実施
  • Password Strength ・・・パスワードの強弱を判定し表示
  • ui.elements.js ・・・フォームの要素をキレイにデザイン
  • js-columns ・・・雑誌のような段組みレイアウト
  • jQuery Easy Pinned Footer ・・・ページ最下部にフッターを固定
  • Setting Equal Heights with jQuery ・・・カラム(列)の高さを揃える
  • jquery.vgrid.js ・・・ウィンドウの横幅が変更されたときに再レイアウトするグリッドレイアウト
  • Tiny Scrollbar ・・・スクロールバーのスタイルを変更
  • CrossTable.js ・・・表内でハイライトするセルを十字にフォーカス表示する
  • Noisy ・・・背景にノイズを加えテクスチャっぽくする
  • selectivizr ・・・IE6~IE8でCSS3セレクタを使用可能にする
  • Contactable ・・・ページ脇から問い合わせフォームをスライドして表示
  • filtrify ・・・タグ等によりコンテンツを種類別に絞り込み表示

ナビゲーション

エフェクト

  • parallaxSlider ・・・スーパーマリオの背景のようにスクロール速度の違う複数の背景を表示
  • DD_belatedPNG ・・・IEで透過png
  • Cloud Zoom ・・・画像の一部をzoomして表示
  • MobilySlidy ・・・スライドUI
  • Quicksand ・・・アニメーションによる絞り込み・並び替えUI
  • html5.js ・・・IE等でもhtml5を利用
  • Roundabout ・・・回転して画像が入れ替わるギャラリー
  • Background-Position Animation Plugin ・・・任意の要素の背景を入れ替え
  • Foundation ・・・jQueryを利用した多機能UI集
  • Fisheye menu ・・・MacのDocメニュー風UI(天地配置)
  • jqDock ・・・MacのDocメニュー風UI(天地左右配置)
  • jQuery Reel Plugin ・・・360度画像を回転表示するUI(iPhone等にも対応)
  • youRhere ・・・文章にしおりをはさめる機能を実装
  • jquery.spritely ・・・CSSスプライトを使用しアニメーションを作成
  • jQuery Notify bar ・・・Twitter風の通知UIを画面上部からアニメーションして表示
  • jQuery Cycle Plugin ・・・いろんな種類のスライドショー
  • jQuery Peel Back Ad ・・・ページの隅をめくるUIによる(広告)リンク
  • jParallax ・・・スーパーマリオの背景のようにスクロール速度の違う複数の背景を表示
  • Zoomooz.js ・・・ページ内の要素をアニメーションさせながら拡大表示
  • Animate CSS Rotation and Scale ・・・CSS3のtransformをjQueryで実装
  • jQzoom Evolution ・・・画像の一部を拡大表示
  • jQuery NiceScroll plugin ・・・iPhoneのような慣性スクロール

グラフィック


以上、総勢88種類のプラグインが紹介されています。
(導入が詳しく掲載されているのは太字のプラグインです)
(わたしが寄稿した記事はマーカーのプラグインです)

jQueryはどなたでも扱いやすいですが、解説が英語だったりして導入に苦労することもあるでしょう。
そんなときに実践的な内容でカスタマイズ方法も掲載されている本書は、きっとあなたの役に立ってくれるはずです。



本書に寄稿するにあたり執筆経験のないわたしにレクチャーをしてくださいましたMdN編集部のKさん、ありがとうございました。
また、Kさんにわたしをご紹介していただきました下北沢オープンソースカフェのマスターのKawamuraさんありがとうございます。2冊献本いただいているので1冊寄贈しますね。

これだけ豊富だと、ぱらぱら眺めているだけでもWebサイト構築時のUIのヒントが得られますよ。ぜひ1冊どうぞ。
このエントリーをはてなブックマークに追加

Facebookへの「いいね!」ありがとうございます