Jqueryのプラグインを使うための基本のキ

シェアする

スポンサーリンク

Jqueryをサイトに実装するための手順

サイトを作るとどうしてもいろんな動きをつけたくなります。
そこでやっぱりJqueryの出番となります。

Jqueryとは、JavaScriptで作られたオープンソースのライブラリです。ライブラリとは多くの便利なプログラムがまとまって入っているものと思ってください。JavaScriptで記述すると記述するコードは非常に複雑で長くなりますが、Jqueryを通すことで短いコードで済むこともメリットです。

簡単、といっても「プログラミング的なコード」を書くわけですから、本来プログラミングの勉強が必要なのですが、jqueryはウェブ上に多くの便利なプラグインがあり、使い方のコツを知っておけば比較的楽に設置できるようになります。

ただ、基本的なHTMLとCSSの知識は必要かな、と思います。プラス、構文の意味を少し読めるようになるとより良いと思います。

その1:Jquery本体ファイルを設置する

本体ファイルがないとコードを書いても全く何も起こりません。まずはこの操作から。

方法は2つあり、公式サイトからダウンロードして自サイトのフォルダに保存する方法と、CDNサービスを利用して読み込む方法があります。

お勧めするのはCDNから読み込む方法です。ブラウザにキャッシュが残っていればダウンロードする必要がなくなり、ページの表示がいくぶん早くなります。

まずは公式サイトにアクセスしましょう。

http://jquery.com/

j101

公式サイトトップページ右上のダウンロードボタンをクリックすると、以下のようなダウンロードページが表示されます。

j102

方法1のダウンロードする場合はここから本体ファイルをダウンロードできますが、なんだかいろんな種類がありますね。現在Jquery には1.x系と2.x系のバージョンがあり、2015年9月23日現在で1.x系の最新バージョンは1.11.3になっています。

1.x系と2.x系の違いですが、2.x系はIE6/7/8のサポートが廃止されています。今はまだ1.x系を使用する場合が多いようです。

ダウンロードする場合は上記赤枠で囲ったDownload the compressed production jQuery 1.11.3をクリックします。compressedは圧縮されたという意味。
ダウンロードしたファイルを自サイトのフォルダに保存します。

<head></head>内にファイルへの読み込みを記述します。

<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>

方法2のCDNを利用する場合は、同じページを少し下にスクロールすると記述が表示されています。 j103 この中のコードの部分をコピーして自サイトの<head></head>内に貼り付けます。

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

GoogleやMicrosoftのCDNを利用する場合はOther CDNsのところにありますので、Googleを利用する場合はGoogle CDNのリンクをクリックします。

その2:プラグインを設置してみる

試しにシンプルなプラグイン「SmoothScroll」を使ってみましょう。ページの先頭に戻るときにスルスルっとなめらかに動くJqueryですね。

プラグインを探すときは「jquery +何とか」でいろいろ出てきます。(アバウトな表現ですが・・)
今回は下記サイトからダウンロードしてみます。
smoothScroll.js(モンキーレンチ様)

ダウンロードしたら自サイトのフォルダに保存します。(jsフォルダなどフォルダを作ったほうが管理しやすいと思います。)
先ほど記述した本体ファイルの下にプラグインファイルへの読み込みを記述します。

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="/js/jquery.smoothScroll.js" type="text/javascript"></script>

上の記述はプラグインファイルをjsというフォルダに保存した場合の記述です。
html5の場合、「 type=”text/javascript”」は必要ありません。
SmoothScrollは実行コードが必要ないので、このように簡単に実装できます。
本来は①Jquery本体ファイル②プラグインファイル③実行コードの3つが必要です。
うまく動かないときはまず下記の必須ポイントをチェックしてみましょう。

Jqueryを実装するときの必須ポイント

1.本体ファイルの記述は必ずプラグインファイルの記述の上に書く。

2.文字コードはUTF-8で!!(自分でjsファイルを作成するとき注意。テキストエディタのデフォルトの文字コードは確認してください)

3.自サイトに保存するときは相対パスを確認する。

4.プラグインを使用するときはそのサイトの説明をよく読むこと。英語のサイトが結構多いですが、その場合は「boxslider(プラグインの名前)+  使い方」で検索をかけると日本語で解説しているサイトを見つけることができます。

とにかくトライしてみる、うまくいかなかったら考える、いろいろ試す、検索して解決策を見つけることです。

CSSから解説Jqueryでアコーディオンメニューを追加する
既存のサイドメニューをアコーディオン付のメニューに変更する プラグインの設置で「簡単!」「たった3行で!」のうたい文句にひかれてコピペする...
スポンサーリンク

シェアする

フォローする