デザイナーでもプログラマーでも使えるjQuery

株式会社スクイズ研究所 前川昌幸

自己紹介

氏名
前川まえかわ 昌幸まさゆき
所属
株式会社 スクイズ研究所 http://sqz.jp/
担当領域
マークアップ/プログラミング(perl,php)/サーバー管理 等々
Twitter
@maepon
mixi/facebook
本名で検索して下さい
blog
http://sqz.jp/blog/mae/

今回の趣旨

jQueryを活用することでインターフェースの機能強化を少ない負荷で実現する。

デザイナー ＋ コーダー（マークアップエンジニア？） ＋ プログラマーという開発体系であれば、コーダー（マークアップエンジニア？）にある程度任せることが可能であるが、デザイナー ＋ プログラマーという体制の場合にjavascriptの機能実装をどちらが行う？

デザイナーが単独で作業する静的HTMLのサイト。プログラマーのみで行う管理系システム。これらにもjavascriptを用いたインターフェースの機能強化の要望。

こういったケースでjQueryを活用すれば比較的負荷（工数）が少なく機能の実装が可能。

一歩進めて動的な表示を行うことによるデザイン（レイアウト）パターンの増加

手前味噌（しかもちょっと後付）ながら弊社の例

今回の話でインスピレーションが湧いて頂ければ幸いです。

jQueryとは？

jQueryは、JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリ。[引用:Wikipedia]

javascriptライブラリー

jQueryの他には「Prototype JavaScript Framework」が有名

  • 先にポピュラーになったのはprototype.js
  • appleのサイトでも使われている
  • Ruby on Railsの一部

jQueryとprototype.js

どちらも一通りの機能を提供しているが、あえて（前川が個人的な見解で）分類すると…

jQuery
DOM操作に強い
prototype.js
javascriptの関数の強化

で、今回jQueryを紹介する理由

jQueryはこいつをこうするという
操作が比較的直感的に記述できる

それでは使用例とコードサンプルを次ページから紹介します

その前にHTMLのheader内に以下を記述
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
ご注意
これから紹介するものは全てjQueryでないと実装出来ないというものではありません。

表示・非表示の切り替え（こうする）

リストのタイトル

  • リスト
  • リスト
  • リスト
  • リスト
  • リスト
  • HTML
  • CSS
  • javascript

リストのタイトル

  • リスト
  • リスト
  • リスト
  • リスト
  • リスト
  • javascript

Javascript

画像のナビゲーション（こうする）

lightbox

  • HTML
  • javascript

シンプルギャラリー

  • HTML
  • javascript

画像のナビゲーション（こうする）

シンプルギャラリー2

  • javascript

Javascript

セレクタでの対象の指定（こいつ）

CSSのセレクタが利用可能
$('#hoge')：id="hoge"を指定
$('.hoge')：class="hoge"を指定
$('.hoge img'):class="hoge"の中のimgを指定。
（例）<p class="hoge"><img src="hoge.jpg" alt="" /></p>
CSS2/CSS3のセレクタ・独自フィルターなどなど
http://semooh.jp/jquery/api/selectors/
$('#hogeTable tr:even td').css('background-color','#FCC');
//id="hogeTable" の偶数行目のセルの背景色を#FCCに
$('#hogeTable tr:first td').css('border-bottom','double 3px #000');
//id="hogeTable" の1行目のセルの下線を変更

選択系操作での対象の指定（こいつ）

リストのタイトル1

  • リスト1
  • リスト1
  • リスト1

リストのタイトル2

  • リスト2
  • リスト2
  • リスト2

リストのタイトル3

  • リスト3
  • リスト3
  • リスト3
  • HTML
  • javascript

HTML

Javascript

最後に

いかがでしたでしょうか？

おそらくこれを聞いて「jQueryがバリバリ書ける！」とはならないと思います。が、手軽にUIの操作に一味追加するといったことに可能性を感じて頂ければ幸いです。

私個人の経験としてはslideDown/slideUpでクライアントの満足度が跳ね上がるという経験は結構ありますので一度お試し頂ければと思います。

今回はlightboxだけでしたがjQueryベースのjavascriptライブラリも充実しています。技術系ブログなどでよく紹介されているのでご参照ください。

身も蓋もないですが、その気になれば「jQuery」でググればいくらでも情報あります。今回がそのググるきっかけになってくれればと思います。