私も使いこなしているわけでもありませんので、概要しか説明できません。
とはいえ、jQueryで「何ができて、何ができないのか」、概要でも頭に入れておくことは、ショップページをカスタマイズするアイデアが浮かんだときに、実現可能か(もしくは不可能か)判断することが可能になります。
当サイトでは取っ掛かり程度の内容ですが、 カラーミーショップをカスタマイズするさいの有用な知識になることは間違いありません。
初学者向けの内容になっておりますので、jQueryってなんぞ、という方はどうぞ。
jQuery(ジェイクエリー)は、JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリ。すこし具体的に。
機能・特徴
1.ブラウザに依存しないオープンソースのセレクタエンジン Sizzle を使ったDOMエレメントの選択
2.DOM操作と変更
3.イベント
4.CSS操作
5.エフェクトとアニメーション
6.Ajax
7.ユーティリティ - ブラウザのバージョン取得、each関数など
8.拡張性 - jQuery プラグイン
引用元:jQuery (Nov. 15, 2011, 21:36 UTC). In Wikipedia: The Free Encyclopedia. Retrieved from Here
カラーミーショップでショップページを作るに場合に使えそうなのは
・文字サイズを変更する、文字サイズ 小・中・大ボタン
・マウスカーソルをのせるとロールオーバーする画像、ドロップダウンするメニュー
一定の操作をきっかけに機能を実行させることを、「イベント」と呼びます。マウスの他には、キーボード操作、ブラウザのスクロール、タイマーなどのイベントがあります。こういうイベント関連も、jQueryを利用すれば簡単にできます。
「CSS操作」というのは、簡単に文字サイズや色など、CSSで設定できる項目を変更できます。イベントと組み合わせて使ったりします。
当サイトでも使った「Ajax」が簡単に利用できます。Ajaxは別次元のパワフルさがあります。カラーミーショップのカスタマイズで使うかは微妙なところですが、機会があれば、記事にしようと思っています。
「拡張性」はプラグインという形で実現されます。
・商品画像のスライドショーや見栄えのよいエフェクト
・色々な情報をCookieに保存(便利なので、よく使います)
導入方法ですが、たとえばCookieプラグインなら「jquery.cookie.js」という形で配布されており、jQuery.js同様に、ロリポップ!やヘテムルなどのレンタルサーバー上に置いて、共通ページの先頭で読み込ませます。
ざっくりとした、まとめ。
・JavaScriptで記述するよりも、より簡単・便利にしたライブラリがjQueryです。手間の有無を別にすれば、やれることはJavaScriptとおなじです。
・ブラウザで表示する、ということに関して、大体のことが実現できます。そしてありがたいことに、プラグインとして配布されていることが多いです。jQueryで到底実現できないこと(表示するデータをどこから持ってくるのか等)、すなわちもっと根っこの部分はSmartyで行いますが、カラーミーショップというレンタルカートの性質上、すべてが思い通りにいじれるわけではありません。
次回は、ImageMagickを使った画像加工を取り上げようと考えています。
商品画像のサムネイル作成、リサイズ、トリミングなど、ショップ運営には画像加工が必要不可欠。手間のかかる作業も、ImageMagickを使うと「あーら便利、あれやこれや自動でやってくれるよ」というお話。
【参考】
中身が理解しやすくなる(これが初歩として一番)
・ノンプログラマーのためのjQuery入門
何ができるか(これを見れば、jQueryで実現可能か分かります)
・jQuery日本語リファレンス
自分で作るために(随時追加します)
・Web制作の現場で使えるjQuery UIデザイン入門
これも読みやすい
・CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました