年末までにjQueryをマスターしたい人必見！導入マニュアル＋すぐ使える厳選プラグイン

　　　　
2013/11/22
　　 　

アイキャッチ-01
コタツにみかんが恋しくなってきましたね。こんにちは！ザ・マーズナレッジのイシジマミキです。

このエントリでは年末までにjQueryをマスターしたい人向けに、導入方法から絶対に役立つプラグインまで余さず紹介していきます。

目次

【導入マニュアル】

・jQueryってなに？
・jQueryを設置してみよう
　? ダウンロードする時にはバージョンに注意！
　? HTMLにjQueryを読み込む
　? jQueryを動かしてみる

【厳選プラグイン】

・絶対おすすめのjQueryプラグイン
　? jQueryプラグインの使い方
　? １.フォームをシンプルかつおしゃれに見せる
　? ２.「もっと見る」を設置する
　? ３.ウインドウサイズに合わせて文字幅を合わせる
　? ４.表をソートする
　? ５.写真がclickされたら拡大して表示する
　? ６.画像などを一定間隔でスライドさせる
　? ７.アンカーリンクへのスクロールをアニメーションさせる
　? ８.Facebookのようなドロワーメニューを表示させる
　? ９.チュートリアルをカッコ良く見せる
・よく使うものはBootstrapを参考に

jQueryってなに？

jQueryとはJavascriptでよく使う処理をカンタンに書けるようにしたライブラリの一種です。jQueryは世界で最も幅広く使われている人気ライブラリの一つです。

TIPS

よく使う機能を簡単に使えるようにまとめたものを「ライブラリ」と言います。

jQueryを設置してみよう

jQueryの導入は、実はとってもカンタン。公式サイトへアクセスするとすぐにダウンロードするボタンがあります。ここからjQueryをダウンロードできます。もちろん無料（MITライセンス）。
Image02

jQuery公式サイト


ダウンロードする時にはバージョンに注意！

「Download jQuery」のボタンを押すと、たくさんのファイルが表示されます。とりあえずダウンロードさせてくれればいいのに何故こんなに種類があるのでしょう？
Image11

jQuery 1.x系から2.x系までさまざまなファイルが並んでいる

「とりあえず最新版をダウンロードすればいいや」と思ったアナタ。ちょっと待ってください。
jQueryは最新版を使えば良いというものではないのです。jQuery 2.x は新しいブラウザにのみ対応したバージョンですので、IE8以下はサポートされていません。逆にjQuery 1.xというのは古いブラウザに対応したバージョンです。ダウンロードすべきファイルは、どのブラウザを対象とするのかによって決まります。

今回は一番上の「compressed, production jQuery 2.0.3」をダウンロードしてみましょう。

TIPS

同じバージョンでも異なるファイルがありますが、それぞれ以下のように分かれています。
  • compressed〜……改行などを除去してファイルサイズを抑えたファイル
  • uncompressed〜……圧縮前の元ファイル。構造が見やすい
どちらも同じように扱えます！

クリックするとjsファイルがブラウザに表示されます。Cmd + Sでこれを保存して、これから作業するフォルダに入れれば準備完了です！

HTMLにjQueryを読み込む

いよいよ設置です。jQueryはダウンロードしてきたファイルを、設置したいHTMLから読み込むことで使えます。こんな感じでコードを書けばOK。パスは適宜合わせてください。
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-2.0.3.min.js"></script>
</head>
<body>
    ...
</body>
</html>

jQueryを動かしてみる

ちゃんと設置できたかどうか、検証してみましょう。ブラウザ上に、「Hello world!」と表示させます。まずはHTMLで以下のように書きます。
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-2.0.3.min.js"></script>
</head>
<body>
    <div id=”str”></div>
</body>
</html>

これを保存してブラウザに表示させます。まだ何も表示されませんよね？ divを追加しただけで何も文字を書いてないので正しい動作です。
222222

ブラウザに何も表示されない。正しい動作です。


ではjQueryを書いて、追加した#strに文字を表示させます。

次のように書いてみてください。
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery.js"></script>
    <script>
    $(function(){
      $("#str").html("Hello World!")
    });
    </script>
</head>
<body>
    <div id="str"></div>
</body>
</html>

ブラウザをリロードし、文字が表示されたら成功です！
111111

無事、Hello World!が表示されました

これでちゃんと動いていることが分かりました。やったね！

ただHello World!させるだけなのに、いきなり難しいコードが出てきて思わず引いてしまった方もご安心ください。
jQueryには、必須とも言えるほど手放せない定番プラグインがたくさんあります。プラグインを使えば自分でコードが書けなくても大丈夫！ さっきまでの工程とHTMLとCSSが分かれば、それらを使ってカッコイイものがいろいろと利用できちゃうんです


絶対おすすめのjQueryプラグイン

jQueryプラグインの使い方

jQueryプラグインは、基本的に、
  • jQuery.jsをHTMLに読み込む
  • プラグインのjsを読み込む
  • HTML内などに動いて欲しい操作を書く
という流れを経て使えるようになります。

詳しい使い方はプラグインのドキュメント（大体英語）を読み込むことが大切です。英語が分からない方は「プラグイン名 使い方」で検索すると導入方法やデモを掲載してくれているブログなどがありますのでそちらを見ると幸せになれます。jQueryは幅広く使われているライブラリだからこそ、ドキュメントも豊富です。

ここからは絶対おすすめのjQueryプラグインを紹介していきます。日本語があればそちらを優先して紹介しています！特にECサイトに使いたいプラグインを厳選しました。


１.フォームをシンプルかつおしゃれに見せる

Image19
Turn any webform into a powerful wizardは、項目が多くて長くなりがちな登録フォームを分割し、細ぎれに見せてくれるプラグインです。

タイトルが長くていつも覚えられないのですが、その便利さは忘れられません！

Image00 2

こんなに長いフォーム（左）が、短くなる（右）んです


情報量は変わっていないのにページが別になったことで登録などの工程がラクになったように感じられます。ユーザビリティの向上が見込めます。

ダウンロード

Turn any webform into a powerful wizard
http://www.jankoatwarpspeed.com/turn-any-webform-into-a-powerful-wizard-with-jquery-formtowizard-plugin/


２.「もっと見る」を設置する

Image10
Show Moreは「もっと見る」ボタンを設置するプラグインです。

Image05 5

はてなブックマークアプリの例。「コメントのないブックマークも表示」ボタンを押すと続きが継ぎ足して表示される。


検索結果などを表示させる場合などはデータのやりとりが必要ですが、HTMLだけで実装するならすごく簡単です。

ダウンロード

Show More
https://github.com/jasonalvis/jquery-show-more/


３.ウインドウサイズに合わせて文字幅を合わせる

Image21
レスポンシブなWebサイトは文字をリフローさせることが前提になっていますが、どうしても制御したい箇所ってありますよね（とくにキャンペーンのタイトルやコピーなど重要な箇所など）そんな時にはFitText。
文字は小さくなってしまいますが、そのままのイメージで縮小させることができますので、画像を利用せずリッチなタイポグラフィーを表現するのに必須なプラグインです。

ダウンロード

FitText
http://fittextjs.com/



４.表をソートする

Image13
Tablesorter 2.0プログラム無しで表をソートできる、すごいプラグインです。

このように沢山の項目が並んでいる表を…
Image12

ヘッダーの矢印ボタンを押すことでアルファベット順や数字順に並べかえることができます。
Image01

ECサイトの地域別の送料など、内容が多い表にはぜひこのプラグインを入れましょう。

導入難度は少々高めですが、デザインのカスタマイズもできる点がポイントです。

ダウンロード

Tablesorter 2.0
http://tablesorter.com/docs/


５.写真がclickされたら拡大して表示する

Image23
Lightbox v2は写真をクリックするとLightboxを表示してくれるプラグイン。知らない人は居ないほど有名な定番プラグインです！歴史も長いしコードも簡単ですのでおすすめです！
ECサイトでは商品のサムネイルをいくつか並べておいて、大きい画像を表示させるのに使われます。Amazonはマウスを乗せると大きい画像をポップアップさせますが、lightboxはクリックすると画面が全体が暗くなり大きい写真が中央に拡大表示されます。
Image09

ダウンロード

Lightbox v2
http://lokeshdhakar.com/projects/lightbox2/


６.画像などを一定間隔でスライドさせる

Image03
galleriaはカルーセル（carousel；木馬）というUIを実装するためのプラグイン。画像などをスライドし、下にクリックできるページャーを表示してくれます。

galleriaを私がオススメする理由は、以下の2点！
  • スマートフォンのフリック操作にも対応している！
  • エラーが出た場合、分かりやすく教えてくれる！
設置は少々大変ですが、デザインをいろいろカスタマイズできるので愛用者は多いです（かく言う私もその一人です）

ダウンロード

galleria
http://galleria.io/


７.ページ内リンクでジャンプさせる時、なめらかにスクロールさせる

Image06
jQuery.smoothScroll.jsはアンカーリンクを押すと、スムーズにスクロール移動してくれるプラグインです（デモページ）。和製で導入がカンタンなのが嬉しい！jQueryが少し分かる方でしたら自分でコードを書いてもシンプルにできますが、すぐ導入できるため便利です。

ダウンロード

jQuery.smoothScroll.js
http://2inc.org/blog/2012/02/14/1233/


８.Facebookのようなドロワーメニューを表示させる

Image15
mmenu.jsは、Facebookアプリのようなドロワーメニューを表示してくれるプラグイン。スマートフォンサイトのUIでは、ナビゲーションに幅をとれない時の常套手段になってきた感じのドロワーメニューですが、これを簡単に設置できます。デザインはHTMLとCSSでカスタマイズできます。関連したその他の効果もステキなので、ぜひ使ってみたい！

ダウンロード

mmenu.js
http://mmenu.frebsite.nl/



９.チュートリアルをカッコ良く見せる

Image24
intro.jsはチュートリアルをかっこよく設置するためのプラグイン。
ECサイトや口コミサイトなど、さまざまな操作をするWebサイトでは、トップページを開いたときに「登録方法」「お気に入りに追加」などの使い方を順序だてて解説しているものがあります。かっこいいチュートリアルを設置できるのがIntro.jsです。

Image18
使い方はすっごくシンプル！以下のように書くことでチュートリアル開始ボタンを実装できます。

<h1 data-step="1" data-intro="ここに解説文が入ります!">Hello world</h1>

data-stepで順番の指定、data-infoで解説文を指定ができます。

<a href="javascript:void(0);" onclick="javascript:introJs().start();">解説を見る</a>

ダウンロード

intro.js
http://usablica.github.io/intro.js/


よく使うものはBootstrapを参考に

以前ご紹介したBootstrap3も、実はjsの部分にはjQueryを利用しています。タブメニュー、アコーディオンメニュー、カルーセルだけでなく、モーダルウインドウ(オーバーレイで表示されるダイアログ)やポップアップ、なんとページ内リンクに連動してナビゲーションの選択位置が変わる動作まで実装されています。今回ご紹介したプラグインで物足りなくなったら、ぜひBootstrap3も活用しましょう。

特にオススメのScrollSpy

Bootstrap3の中でも特にオススメなのがこれ。ScrollSpyです。スクロールするとメニューバーが連動して動くようになります 見た目はブラウザ差異を考慮した上で作られていますのでCSSでデザインをあてるだけ。感動ものです……！

http://getbootstrap.com/javascript/#scrollspy

Image08


みなさんもぜひjQueryとjQueryプラグインを使ってみましょう。この記事をきっかけに、少しでもjQueryが使えるデザイナーさんが増えるとうれしいです！

あわせて読みたい

それほど複雑な動作をしないのであれば、ぜひBootstrap3も見て使ってみましょう！


著者

イシジマ ミキ ( ザ・マーズナレッジ )
1393233_10201372008555038_925818335_n
デザイン業の他、執筆やコワーキングスペース事業も。表現でなく考え方で遊びを持たせるものが作りたい。越冬できるキリギリスを目指して、少し働いて好きに遊べるよう人生実験中。好きな言葉は「人生を棒にふるくらいヒマとゆとりをもって遊ぼう」。制作実績など掲載、おまけでデザインの考え方や制作フローも書いています。
・ブログ　：http://blog.woopsdez.jp
・twitter : @woopsdez
・facebook : http://facebook.com/woopsdez

「年末までにjQueryをマスターしたい人必見！導入マニュアル＋すぐ使える厳選プラグイン」の関連記事

WordPressの表示を劇的に速くする！jQuery/JavaScriptの高速化テクニック
　　　　　　
 　　　　　　
みんなが知らないGoogle Analyticsの裏技！いつもの画面でSEO順位を表示させる方法
　　　　　　
 　　　　　　
●●っぽい表現ができる「CSS3」サンプル集
　　　　　　
 　　　　　　
テンパッてる時でもスグ使える！ベクター素材集10個厳選まとめ
　　　　　　
 　　　　　　
スタートアップ向けのナレッジ紹介メディア『Startup Ideas & Framework』 をβ公開しました。
　　　　　　
 　　　　　　
コピペで簡単！Google AnalyticsでFacebook/Twitterのシェア数を自動集計する方法
　　　　　　
 　　　　　　

FINDJOB! Startupを購読する

FINDJOB!新着求人

職種から求人情報を探す
デザイナー・クリエイター |  Webデザイナー |  グラフィックデザイナー |  エンジニア |  インフラエンジニア |  フロントエンドエンジニア |  ディレクター・プロデューサー |  マーケティング・プロモーション |  ライター・編集 |  企画・営業・人事・総務 |  カスタマーサポート
勤務地から求人情報を探す
関東（東京近郊） |  関東（その他） |  関西（近畿・東海） |  北海道・東北 |  信越・北陸 |  中国 |  四国 |  九州・沖縄
雇用形態から求人情報を探す
正社員（中途） |  正社員（新卒） |  派遣社員 |  契約社員 |  業務委託 |  アルバイト
企業名から求人情報を探す
©︎ MIXI RECRUITMENT, Inc.