『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 ・・・タグ等によりコンテンツを種類別に絞り込み表示

ナビゲーション

• jQuery MegaMenu 2 ・・・メインメニューにマウスカーソルをあわせると子孫メニューをドロップダウンするUI
• Superfish ・・・ドロップダウンメニュー
• idTabs ・・・タブUI
• jquery.socialbutton ・・・各種ソーシャルサイトのシェアボタンを表示
• jQuery UI Accordion ・・・縦に開閉するアコーディオンUI
• jQuery UI Tabs ・・・タブUI
• jquery custom content scroller ・・・スクロールバーのスタイルを変更
• jQuery Easing Plugin ・・・スムーズなアニメーションを実現
• Awesome Bubble Navigation ・・・円形のメニュー
• jBreadCrumb ・・・アニメーションするパンくずリスト
• tipsy ・・・ツールチップ
• Font Sizer ・・・文字サイズ変更
• Font Sizer 拡張版 ・・・Font Sizer の拡張版
• Javascript Cookie Library with jQuery bindings and JSON support ・・・JSON形式で保存可能なCookieライブラリ
• droppy ・・・深い階層に対応したドロップダウンメニュー
• Highliner jQuery Plugin ・・・コンテンツの一部をハイライト表示する
• jQuery Radmenu Plugin ・・・円形のセレクトメニュー（ナビゲーション）
• jQuery.autopager ・・・オートページングを実装
• jQuery Waypoints ・・・スクロールUI。無限スクロールやScrollSpy等
• jQuery Mouse Wheel Plugin ・・・マウスホイールのイベントを捕捉
• hashchangeTab.js ・・・戻る・進むボタンに対応したタブUI
• jQuery Joyride Feature Tour Plugin ・・・サイトの機能ツアー
• jPages ・・・アニメーションを使用したページング
• FerroSlider ・・・矢印キーに対応したページング

エフェクト

• 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のような慣性スクロール

グラフィック

• carouFredSel ・・・カルーセル
• jquery.mb.YTPlayer ・・・YouTubeプレーヤーを背景全体に表示
• jquery.metadata.js ・・・html要素のclass内にデータを埋め込める
• Circle Navigation Effect with CSS3 ・・・円形のサムネイルが飛び出すUI
• fb.wall ・・・サイト内にfacebookのWallを埋め込む
• Google maps v3 plugin for jQuery and jQuery Mobile ・・・Googleマップを埋め込みマーカー等を追加
• jQuery-Visualize ・・・グラフを作成
• ExplorerCanvas ・・・IE等でcanvasを利用
• fancyBox ・・・Light Box風のポップアップUI
• Camera slideshow ・・・多彩なアニメーションのスライドショー
• jQuery Before/After plugin ・・・画像加工前後などの複数の画像をスライダーを使用して比較するUI
• Nivo Slider ・・・多彩なアニメーションのスライドショー
• ColorBox ・・・アニメーションの種類が豊富なLightBox風UI
• SuperSized ・・・ウィンドウにあわせて背景画像を画面いっぱいに表示
• Slicebox ・・・3Dアニメーションによるスライドショー
• jQuery Text Change Event ・・・テキスト入力のイベントを捕捉する
• Elastislide ・・・ウィンドウサイズによって画像サイズや枚数が変わるカルーセル
• jQuery Shuffle Text ・・・テキストをシャッフルする演出

以上、総勢88種類のプラグインが紹介されています。

（導入が詳しく掲載されているのは太字のプラグインです）
（わたしが寄稿した記事はマーカーのプラグインです）

jQueryはどなたでも扱いやすいですが、解説が英語だったりして導入に苦労することもあるでしょう。

そんなときに実践的な内容でカスタマイズ方法も掲載されている本書は、きっとあなたの役に立ってくれるはずです。

本書に寄稿するにあたり執筆経験のないわたしにレクチャーをしてくださいましたMdN編集部のKさん、ありがとうございました。

また、Kさんにわたしをご紹介していただきました下北沢オープンソースカフェのマスターのKawamuraさんありがとうございます。2冊献本いただいているので1冊寄贈しますね。

これだけ豊富だと、ぱらぱら眺めているだけでもWebサイト構築時のUIのヒントが得られますよ。ぜひ1冊どうぞ。