The current article

初歩的なjQueryプラグインの設置方法

ほとんどのjQueryプラグインは、jQuery本体、プラグイン本体、実行コードの3つで形成されます。
初心者でもわかるように、初歩的な設置方法について説明していきたいと思います。

jQuery

capture

jQuery本体の設置

まず、jQuery本体を設置しないと動きません。ここでは
①jQueryをダウンロードしてフォルダに入れて使用する。(サーバにアップロード)
②GoogleやMicrosoftなどが配布しているjQueryファイルを読み込んで使用する。
の2つを説明します。

ダウンロードして使用する場合

jQuery本サイト(http://jquery.com/)の「Download(jQuery)」ボタンを押します。
フォルダでダウンロードされる訳では無くソースが表示されますので、ブラウザによって異なりますが右クリックして「名前をつけてページを保存」(FireFox)
「jquery-1.8.1.min.js」と言う名前で保存されます。この記事を書いた時点では、最新版は1.8.1と言うバージョンのようです。

現在バージョンアップしたため、「Download(jQuery)」ボタンを押してもソースが表示されません。
詳しくは後日記事を書こうと思っていますので、下にある「jQueryファイルを読み込んで使用」の方法で対処して下さい。
ダウンロードについて書いてみました。

このファイルをサーバにアップロードします。
jqueryフォルダ構成
上記は、「js」フォルダに「jquery-1.8.1.min.js」を入れました。
この場合のHTMLファイルのhead内に

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

と記述します。

jQueryファイルを読み込んで使用する場合

ダウンロードしたjQuery本体ファイルを使用する代わりに、GoogleやMicrosoftなどが用意しているjQuery本体ファイルを読み込んで使用することもできます。
Googleを使用する場合、HTMLファイルのhead内に

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

と記述します。
これで、設置完了です。

ちなみに、その他には
Microsoft

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js"></script>

jQuery

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>

とアドレス部分を変更しても使えます。

プラグイン本体の設置

さて、jQuery本体は読み込ませましたので、色々なプラグインが使えるようになりました。
次は、使いたいプラグインを設置します。ダウンロードするものもあれば、コード(スクリプト)だけのものもあります。
ダウンロードしたならその中に「xxxxx.js」(例えばsample.js)のようなファイルがあると思います。
また、文面にコードだけ記述されているものならばテキストエディタなどに貼り付けて、例えば「sample.js」など名前をつけて保存して下さい。
で、そのファイルをサーバにアップロードします。
jqueryプラグインの設置構成
上記は、「js」フォルダに「sample.js」を入れました。
この場合のHTMLファイルのhead内に

<script type="text/javascript" src="js/sample.js"></script>

と記述します。(※jQuery本体より後に記述して下さい。)

jQuery本体とプラグイン本体のコードを簡単に書くと、
jQuery本体をダウンロードして使用の場合

  <html>
    <head>
   ・
      <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
      <script type="text/javascript" src="js/sample.js"></script>
   ・
    </head>
    <body>
    ・
    ・

jQuery本体を読み込んで使用の場合

<html>
  <head>
 ・
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/sample.js"></script>
 ・
  </head>
  <body>
  ・
  ・

のようになります。

実行コードの設定

後は実行コードを設定してあげれば動作します。
例えば

<script type='text/javascript' src="js/jletter.jquery.js"></script> /*プラグイン読み込み*/
<script type="text/javascript"> /*実行コード*/
	jQuery(document).ready(function($) {
		$("#letter").jLetter({
		pause: 3000, //停止時間
		rotateSpeed: 2500, //ローテション速度
		fadeSpeed: 1000 //フェード時間
		});
	});
</script>

ただ実行用のスクリプトはプラグインの作りによって様々なため書ききれません・・・
実行コードがjsファイルの中にあったり、head内やHTML内に記述されたりしています。
また、HTMLのID要素名を指定したり、スライドなどなら動くスピードや時間を変えてみたりします。
作者の方がそれぞれ設置方法を書いてくれていると思いますので参考にしてみて下さい。
私がプラグインを紹介する時は、そのあたりも説明したいと思います。

参考になれば良いのですが、長文最後までお付き合い有難う御座いました。


Category

Service

Guidance

Salutation

WPCは大阪を中心に、ホームページ制作、リニューアル、コーディング、更新業務、各種印刷物制作、スキルアップ出張講習・セミナー等取り扱っております。
どこの会社に作成を依頼しようかとお悩みの方、リニューアルしたいんだけど良いプランはないかなとお探しの方、本格派のデザイナーにデザインを依頼したい、 コーディングだけ頼みたい、更新だけ頼みたい、パソコンやソフトの使い方を教えて欲しいなど、どんな事でもWPCまでお気軽にご相談ください。