スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
公開: --年--月--日, カテゴリ: スポンサー広告

jQuery導入メモ

JavaScriptライブラリであるjQueryをこのブログに取り入れてみたいと思ったので、まずは前提条件であるjQuery本体の導入手順についてメモしておきます。

2011-06-20: 更新

目次

  1. 導入方法その1: Google Libraries API を利用する
  2. 導入方法その2: 自分のWebスペースへアップロードしたjsファイルを読込ませる
  3. 外部リンク

導入方法その1: Google Libraries API を利用する

Googleの提供しているサービスであるGoogle Libraries APIを利用すれば、HTMLにscript要素を記述するだけで簡単に導入することができます。Google Libraries API を利用する利点としては次のようなものがあるそうです。

現在の最新版はv1.6.1です。

さて、導入の方法ですがこれは非常に簡単で、HTML文書中のhead要素の子要素として下記のとおりscript要素を記述するだけです。FC2blogであれば管理画面のテンプレートの編集からHTMLの編集を行います。

<head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.6.1");</script>
</head>

ふたつめのscript要素の内容はgoogle.load関数と言い、( )内で指定したAPIを読込む仕組みです。引数は、("Google AJAX APIの指定", "バージョン") というように記述します。Google AJAX APIにはjQuery以外にも様々なものがあります(参考: Google Libraries API)。また、バージョンの指定にはまた別の書き方があり、上の方で書いているとおりバージョンの指定を途中までにしておくと常にそのバージョンの最新版を読込むようになります。

<head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.6");</script>
</head>

Google Libraries APIでそれぞれの最新バージョンが確認できます。

先程と異なるのはバージョンが1.4.3ではなく1.4までしか書いていないところです。こう書くことによりバージョン1.4x系のjQueryがマイナーアップデートされると常にその最新版が導入されます。最新のバージョンがいくつなのかは以下のリンク先のページで確認できます。Link: Google Libraries API - Developer's Guide

google.loadを使わずに下記のように直接jsファイルのパスを指定しても構いません。

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

導入方法その2: 自分のWebスペースへアップロードしたjsファイルを読込ませる

jQueryの公式サイトからjQuery本体をダウンロードします。

  1. まずはjQueryの公式サイトへアクセスします。
  2. アクセス先のページでjQueryのJavaScriptファイルをダウンロードします。ダウンロードファイルはデフォルトで設定されているPRODUCTIONの方をダウンロードします。ファイル名は適当につけて拡張子をjsで保存してください。
  3. 次に保存したJSファイルをアップロードします。FC2ブログであれば管理画面のファイルのアップロードからアップロードします。
  4. あとは先程と同じようにHTML文書中のhead要素の子要素として下記のscript要素を記述するだけです。FC2ブログであれば管理画面のテンプレートの編集からHTMLの編集を行います。
<head>
    <script type="text/javascript" src="JSファイルへのパス"></script>
</head>

src属性にはアップロードしたjsファイルへの絶対パスを記述します。

以上でjQuery本体の導入は終わりです。私は今のところ方法1のやり方で導入しています。とりあえず今回はここまでにしておきます。これからこのブログで少しずつ実際に試してみて理解できたものからまた記事にしてみたいと思います。

ではでは、また

外部リンク

公開: 2010年10月17日, カテゴリ: ぶろぐいじり