ページ作成

文字

ソースリスト

php

GCP

jQuery

CSS

インターネット WEB jQuwery

WEBページ作成jQuery便利な JavaScript ライブラリーを使おう

JavaSctipt ライブラリーの jQuery を使うと，読者に優しい WEB ページにすることができます．私もいくつかの jQuery を使っています．このページでは，インストールの方法から具体的な使い方まで説明します．

jQuery を実行するために
- ヘッダー部
- 基本的な書き方
ツリー構造の表示 (Treeview)
画像のポップアップ表示(Lightbox)
画像・他のポップアップ表示(fancyBox)
リストの分割表示 (easyListSplitter)
ツールチップ (clueTip)
ページ作成情報
- 参考資料
- 更新履歴

jQuery を実行するために

ヘッダー部

jQuery を動かすためには，htmlのヘッダー (<head> — </head>の間) に，いくつかのおまじないが必要です．

JavaScript と jQuery の指定

html のヘッダー部に，少なくとも以下の記述が必要です．

<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src=" ../../../js/jquery-1.11.1.min.js"></script>

最初の行で，デフォルトのスクリプト言語に JavaScript を指定します．二行目は，jQuery のパスを表しています．この例では，jQuery ver 1.11.1 となっています．バージョンは，ページの実行環境に合わせます．

ファイル読み込み後に実行

html ファイル読み込み後に実行するプログラムは，html のヘッダーに次のように記述します．

<script type="text/javascript">
$(document).ready(init);
function init(){
      ここにプログラムを書きます
      複数行にわたって書くことができます．
};
</script>

関数 $(document).ready()によりブラウザがファイルを読み込んだ直後，関数 init() が実行されます．関数 init() の実行文は，次の行に書きます．もちろん，「init()」とは異なる関数名も使うことができます．

基本的な書き方

jQuery の基本的な書き方は，「$(セレクタ).メソッド(パラメーター);」です．例えば，「$("h1").css({color:"red"})」とすると，h1の要素が赤字になります．具体的には，html のヘッダー部に以下のように記述します．

<script type="text/javascript">
$(document).ready(init);
function init(){
      $("h1").css({color:"red"});
};
</script>

ツリー構造の表示 (Treeview)

WEBページでツリー構造を表示する場合，jQuery を使った「Treeview」が便利です．ブラウザ上でノードをクリックすることで，下層のノードの表示/非表示を切り替えることができます．ちょっと感動しました．大きなツリー構造を表現するときに，重宝します．

インストール

以下，WEB サイトへのインストール方法を示します．私のサイトにインストールしたときの手順です．

jQuery plugin: Treeviewに行き，files:Download をクリックすると，zip ファイルがダウンロードされます．ファイルの保存先は，どこでも OK です．そして，ダウンロードしたファイルを解凍します．
```
$ unzip  jquery.treeview.zip
```
解凍された Treeview ファイルは，WEB サイトの任意の場所に保管可能です．私は，以下の場所(ルートディレクトリー直下)に置きました．ツリーのノード(フォルダー)をクリックするとファイルが現れます．このツリーは，Treeview の例にもなっています．
- css
  - jquery.treeview.css
- js
  - jquery.treeview.js
  - jquery.cookie.js
- images
  - treeview
    - ajax-loader.gif
    - treeview-black-line.gif
    - treeview-gray-line.gif
    - file.gif
    - treeview-black.gif
    - treeview-gray.gif
    - folder-closed.gif
    - treeview-default-line.gif
    - treeview-red-line.gif
    - folder.gif
    - treeview-default.gif
    - treeview-red.gif
    - minus.gif
    - treeview-famfamfam-line.gif
    - plus.gif
    - treeview-famfamfam.gif
元々の設定では，gif イメージファイルが入っているフォルダーは，jquery.treeview.css と同じディレクトリーに置くように設定さています．先に示したようにイメージファイルの場所を変更した場合は，CSS ファイルで指定されている gif イメージへのパスを書き直す必要があります．例えば，上のツリーに従い jquery.treeview.css の 12 行目を次のように書き換えます．
```
background: url(images/treeview-default.gif) -64px -25px no-repeat;
```
↓ (gifイメージの場所を相対パス指定)
```
background: url(../images/treeview/treeview-default.gif) -64px -25px no-repeat;
```
この 12 行目のみならず，全ての gif イメージのパスを書き直す必要があります．
このままの CSS だと，クラス「filetree」(表2)を除いて，タグ <li> によるリストのマークが現れます．これはみっともないので，「.treeview li」と「.treeview-red li」，「.treeview-black li」，「.treeview-gray li」，「.treeview-famfamfam li」に「list-style-type:none;」を追加します．具体的には，以下のようにします．
```
.treeview-red li { background-image: url(../images/treeview/treeview-red-line.gif);}
```
↓ (最後に，「list-style-type:none;」を追加)
```
.treeview-red li { background-image: url(../images/treeview/treeview-red-line.gif); list-style-type:none;}
```
WEBページの背景が白色の場合は問題ないですが，私ページのように色つきでは以下の修正を行います．
- 「jquery.treeview.css」の　8行目の「background-color: white;」を削除します．
- イメージファイルの「file.gif」と「folder-closed.gif」，「folder.gif」の端は白いので，そこを透明にします．Gimp を使うとこの処理は簡単です．

以上で，インストールは完了です．ツリーのブランチを表す線が切断される場合，ユーザー作成の CSS を疑ってください．<li>の margin 等の設定を確認してください．

html の記述

ヘッダー (<head> — </head>)

htmlのヘッダー (<head> — </head>の間) には，(1)必要な js と CSS ファイルのパスの指定，(2)初期実行ルーチンの処理を記述します．

ファイルのパス

実行時に必要なファイル(*.js, *.css)へのパスを指定します．もちろん，これらへのパスは WEBサイトに依存します．jQuery のバージョン「jquery-x.x.x.min.js」は，Treeview が動作すれば，どれを使っても良いです．

<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src=" ../../../js/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href=" ../../../css/jquery.treeview.css">
<script src="../../../js/jquery.treeview.js" type="text/javascript"></script>
<script src="../../../js/jquery.cookie.js" type="text/javascript"></script>

最初の行で，JavaScript をデフォルトのスクリプト言語に指定します．以降は，実行に必要なファイルのパスを表しています．

JavaScript

次に，ファイルを読み込んだ後，最初に実行する jQuery のプログラムを書きます．ここで，Treeview の動作のオプションを指定します．最初に実行するプログラムについては，「ファイル読み込み後に実行」を参照．以下に，具体例を示します．

<script type="text/javascript">
$(document).ready(init);
function init(){
    $("#list_01").treeview();
    $("#list_02").treeview({
        animated: "slow",
        persist: "cookie",
        cookieId: "tree2Cookie",
        collapsed: false,
        unique: true,
        toggle: function(){window.alert("クリックしましたね !!");}
    });
};
</script>

Treeview の ID 名(この例では，list_01とlist_02)は，本文中のツリー構造の ID 名を記述します．list_01 は，全てデフォルト設定です．list_02 は，オプションを指定しています．オプションの動作については，以下の表を参照ください．

treeview のオプションの設定
設定変数	動作	設定値		デフォルト値
animated	展開のアニメーション速度	slow : 遅い	fast : 早い	slow と fast の中間
persist	表示の継続	cookie : クッキー	location : ???	?(クッキーではない)
collapsed	ツリーを強制的に閉じる	true : 閉じる	false : 閉じない	false
unique	ひとつの階層に開くノード	true : 1つのみ	false : いくらでも	false
toggle	ノードを開閉時の実行関数	toggle:function(){実行文}		なし

「animated: "slow"」にすると，ゆっくりとツリーが展開されるので良い感じです．「persist: "cookie"」もお勧めの設定です．展開の結果がクッキーに残るので，つぎに同じページをアクセスしたとき同じ開閉状態のツリーが現れます．このオプションを使うときには，「cookieId: "tree2Cookie"」のようにクッキーIDの指定が必要です．「collapsed: true」のオプションを指定すると，最初全てのツリーは閉じています．「unique: true」のオプションを指定すると，ひとつの階層で開くことができるノードはひとつのみです．大きなツリー構造を表示する場合に，便利かもしれません．「toggle:function(){window.alert("クリックしましたね !!");}」とすると，ノードを開閉する度にアラートが表示されます．上手く使うと便利ですが，この例のアラートだと邪魔なだけですが …．要するに，オプション toggle は，ノード開閉時に実行される関数を指定できます．

本文 (<body> — </body>)

ツリー構造の表示方法は，以下の表に示すクラスで指定します．表中の「treeview」 —「treeveiw_famfamfam」は，汎用的なツリーの表示に使います．一方，「filetree」はコンピューターのファイルのディレクトリーを表示するときに使います．

treeview のクラス
クラス名	ノード表示(<ul id="ID名" class="クラス名">)	ブランチ表示
treeview		黒い点線
treeview-red		赤い実線
treeview-black		黒い実線
treeview-gray		灰色の実線
treeview-famfamfam		無し(??)
filetree	(<span class="folder">と共に， )	黒い点線

リストを書くときに，IDと共にクラスは，「<ul id="ID名" class="クラス名">」と指定します．Treeview を用いたツリー構造の記述は，html のリストの記述とほとんど同じです．具体的な記述方法は以下の通りで，汎用的なツリーとディレクトリーのツリーに分けて説明します．

一般的なツリーの場合

一般的なのツリーの場合，最初に記述する ul 要素のクラス名を「treeview」や「treeview-red」，「treeview-black」「treeview-gray」「treeview-famfamfam」とします．ノードを表す要素 li を「<li class="closed">」とすると，そこが閉じられます．すると，そのノードよりも下層のブランチは表示されません．クラスを書かなければ，下層のブランチが表示されます．

html 内では，以下のように記述します．

<ul id="ID" class="クラス名">

<li class="閉の場合(closed)">ノード_1 (レベル1)
    <ul>
      <li>アイテム_12 (レベル2)
    </ul>
</li>

<li class="閉の場合(closed)"><span class="folder">ノード_2 (レベル1)
    <ul>
      <li>アイテム_21 (レベル2)
      <li>アイテム_21 (レベル2)
    </ul>
</li>

<li class="閉の場合(closed)"><span class="folder">ノード_3 (レベル1)
    <ul>
      <li class="閉の場合(closed)"><span class="folder">ノード_31 (レベル2)
      <ul>
	<li>アイテム_311 (レベル3)
	<li>アイテム_312 (レベル3)
	<li>アイテム_313 (レベル3)
      </ul>
      </li>
   </ul>
</li>
</ul>

ディレクトリーのツリーの場合

ディレクトリーのツリーの場合，最初に記述する ul 要素のクラス名を「filetree」とします．汎用的なツリーと異なる部分は，フォルダー名を「<span class="folder">フォルダー名</span>」，ファイル名を「<span class="file">ファイル</span>」のように，クラス名(folder or file)を伴った span 要素で囲むことができる点です．これにより，それぞれの前にフォルダーやファイルのアイコンが表示され，分かりやすくなります．

ノードがフォルダーの場合に「<li class="closed">」とすると，閉じたフォルダーになり，そのブランチは表示されません．クラスを書かなければ，開いたフォルダーでブランチ(サブディレクトリーやフォルダー)が表示されます．

html 内では，以下のように記述します．

<ul id="ID名" class="filetree">

<li class="閉の場合(closed)"><span  class="folder">フォルダー名_1 (レベル1)</span>
    <ul>
      <li><span class="file">ファイル_12 (レベル2)</span></li>
    </ul>
</li>

<li class="閉の場合(closed)"><span class="folder">フォルダー名_2 (レベル1)</span>
    <ul>
      <li><span class="file">ファイル名_21 (レベル2)</span></li>
      <li><span class="file">ファイル名_21 (レベル2)</span></li>
    </ul>
</li>

<li class="閉の場合(closed)"><span class="folder">フォルダー名_3 (レベル1)</span>
    <ul>
      <li class="閉の場合(closed)"><span class="folder">フォルダー名_31 (レベル2)</span>
      <ul>
	<li><span class="file">ファイル名_311 (レベル3)</span></li>
	<li><span class="file">ファイル名_312 (レベル3)</span></li>
	<li><span class="file">ファイル名_313 (レベル3)</span></li>
      </ul>
      </li>
   </ul>
</li>
</ul>

サンプル

ここでは，具体例として生物の分類をツリー構造で表します．以下のようなツリー構造を書くための html ファイルを示します．ノードをクリックすると，ブランチを開いたり閉じたりできます．

生物
- 動物
  - 脊椎動物
    - ほ乳類
      - 真獣下網
        
        北方真獣類
        
        真主齧上目
        
        真主獣大目
        
        登木目 (登攀目、ツパイ目): ツパイ
        
        皮翼目 (ヒヨケザル目): ヒヨケザル
        
        霊長目 (サル目): キツネザル, ガラゴ, サル, 類人猿, ヒト
        
        グリレス大目
        
        ウサギ目 (兎形目): ナキウサギ, ウサギ
        
        齧歯目 (ネズミ目): リス, ネズミ, ヤマアラシ, ヌートリア
        
        ローラシア獣上目
        
        ハリネズミ目: ハリネズミ
        
        トガリネズミ目: モグラ
        
        鯨偶蹄目: ラクダ, イノシシ, キリン, シカ, ウシ, ヤギ, カバ, クジラ, イルカ
        
        有鱗目 (鱗甲目、センザンコウ目): センザンコウ
        
        食肉目 (ネコ目): トラ, オオカミ, イタチ, クマ, アザラシ
        
        奇蹄目 (ウマ目): ウマ, サイ, バク
        
        翼手目 (コウモリ目): コウモリ
        
        異節類
        
        アフリカ獣類
      - 後獣類
      - 原獣類
    - 鳥類
    - は虫類
    - 両生類
    - 魚類
  - 無脊椎動物
- 植物

このツリーを表示する最も簡単な html は，以下の通りです．

Treeview を使い生物の分類をツリー構造で表した html．(ここをクリックすると表示)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

<head>
<meta http-equiv="Content-Type" content = "text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="../../../../js/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="../../../../css/jquery.treeview.css" />
<script src="../../../../js/jquery.treeview.js" type="text/javascript"></script>
<script src="../../../../js/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(init);
function init(){
    $("#sample_2").treeview({
         animated: "slow",
         persist: "cookie",
         cookieId: "tree2Cookie",
         collapsed: false,
         unique: false
    });
};
</script>
</head>


<body>
<ul id="sample_2" class="treeview-red" style="margin-left:50px">

<li>生物
<ul>
  <li>動物
  <ul>
    <li class="closed">脊椎動物
    <ul>
      <li class="closed">ほ乳類
      <ul>
        <li class="closed">真獣下網
        <ul class="closed">
          <li>北方真獣類
      <ul>
        <li class="closed">真主齧上目
        <ul>
          <li class="closed">真主獣大目
          <ul>
        <li>登木目 (登攀目、ツパイ目): ツパイ</li>
        <li>皮翼目 (ヒヨケザル目): ヒヨケザル</li>
        <li>霊長目 (サル目): キツネザル, ガラゴ, サル, 類人猿, ヒト</li>
          </ul>
          <li class="closed">グリレス大目
          <ul>
        <li>ウサギ目 (兎形目): ナキウサギ, ウサギ</li>
        <li>齧歯目 (ネズミ目): リス, ネズミ, ヤマアラシ, ヌートリア</li>
          </ul>
        </ul>
        <li class="closed">ローラシア獣上目
        <ul>
          <li>ハリネズミ目: ハリネズミ</li>
          <li>トガリネズミ目: モグラ</li>
          <li>鯨偶蹄目: ラクダ, イノシシ, キリン, シカ, ウシ, ヤギ, カバ, クジラ, イルカ</li>
          <li>有鱗目 (鱗甲目、センザンコウ目): センザンコウ</li>
          <li>食肉目 (ネコ目): トラ, オオカミ, イタチ, クマ, アザラシ</li>
          <li>奇蹄目 (ウマ目): ウマ, サイ, バク</li>
          <li>翼手目 (コウモリ目): コウモリ</li>
            </ul></li>
          </ul></li> 
      <li>異節類</li>
      <li>アフリカ獣類</li>
      </ul></li>
        <li>後獣類</li>
    <li>原獣類</li>
      </ul></li>
      <li>鳥類</li>
      <li>は虫類</li>
      <li>両生類</li>
      <li>魚類</li>
    </ul></li>
    <li>無脊椎動物</li>
    </ul></li>
  <li>植物</li>
</ul>
</li>
</ul>

</body>
</html>

その他

ノードの説明は以下のようにします．

<img src="パス/close.svg" style="width:16px; vertical-align:-2px"> をクリック
するとツリーを開くことができ，<img src="パス/open.svg" style="width:16px; 
vertical-align:-2px"> をクリックするとツリーを折りたたみます．

この説明に必要なノードの図は「node.zip」をダウンロードします．

インストール

派手な WEB ページは嫌いですが，Lightbox は格好いいですね．拡大図を他のページに飛ばすよりも，格段にユーザーに優しそうです．そこでインストールすることにしました．2014年4月12日の最新は ligntbox-2.71 で，ここではそのインストール方法を示します．

Lightbox のホームページに行き，[DOWNLOAD]ボタンを押します．すると，zip ファイルがダウンロードされます．ファイルの保存先は，どこでも OK です．
ダウンロードしたファイルを解凍します．
```
$ unzip  lightbox-2.7.1.zip
```
すると，二つのファイル「README.markdown」と「index.html」，三つのディレクトリー「css」と「img」，「js」が現れます．
二つのディレクトリー「css」と「js」を WEBサイトのルートディレクトリーにコピーします．一方，「img」にある 4 つの画像ファイルは，「images/Lightbox/」にコピーします．私の場合は，以下の通り．
- css
  - lightbox.css
  - screen.css
- js
  - lightbox.js
  - lightbox.min.js
  - lightbox.min.map
- images
  - Lightbox
    - close.png
    - loading.gif
    - next.png
    - prev.png
ただし，これらのディレクトリーとファイルは任意の場所に保管することができます．あとで，これらのパスを指定するからです．
「ligntbox.css」に書かれている画像ファイルへのパスを変更します．先のように画像ファイルを保管した場合には，この CSS ファイルの全ての「../img/」を「../images/Lighbox/」と変更します．CSS から見る画像ファイルは相対パスで記述します．

以上で，インストールは完了です．Lightbox を使う準備はできました．次に示すように，html 中にタグなどを書けば，Lightbox を使うことができます．

html の記述

ヘッダー

Lightbox を使うためには，htmlのヘッダー (<head> — </head>の間) に以下を記述します．ただし，ディレクトリー js や css へのパスは，ファイルの位置により変わります．

<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="../../../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../../js/lightbox.min.js"></script>
<link href="../../../css/lightbox.css" rel="stylesheet">

本文(単独の図)

単独の図や写真の記述は，次のように html を記述します．

<a href="画像ファイルへのパス" data-lightbox="イメージ名" data-title="キャプション">リンク元</a>

data-lightbox の属性値は，ユニーク(同じ値がない)でなくてはなりません．同じ属性値があると，後述するようにグループ化され，スライドショーの対象になります．

具体的には，以下のように記述します．

<a href="figure/ex_lightbox.jpg" data-lightbox="sample" data-title="夏の森の小道．Lightbos のサンプル">
    <img src="figure/ex_lightbox.jpg" width="200" alt="lightboxのサンプル"></a>

すると，以下のイメージが現れます．そして，それをクリックすると拡大イメージが表示されます．品よく表示されるので，良いですね．

夏の森の小道．クリックすると拡大します．

本文(スライドショー)

複数の図や写真をスライドショーにする場合には，data-lightbox の属性値を同一にします．具体例を以下に示します．

<table class="figure" summary="Lightbox のスライドショー説明用">
  <col width="200">
  <col width="200">
  <col width="200">

  <tr>
    <td class="image" id="LB21">
    <a href="figure/Tanigawadake_1.JPG" data-lightbox="mountain" data-title="山の風景(青空)">
    <img src="figure/Tanigawadake_1s.JPG" width="180" alt="山の風景　1">
    </a></td>
    <td class="image" id="LB22">
    <a href="figure/Tanigawadake_2.JPG" data-lightbox="mountain" data-title="山の風景(紅葉)">
    <img src="figure/Tanigawadake_2s.JPG" width="180" alt="山の風景　1">
    </a></td>
    <td class="image" id="LB23">
    <a href="figure/Tanigawadake_3.JPG" data-lightbox="mountain" data-title="山の風景(曇り)">
    <img src="figure/Tanigawadake_3s.JPG" width="180" alt="山の風景　1">
    </a></td>
  </tr>

  <tr>
    <td class="caption">山の風景(青空)</td>
    <td class="caption">山の風景(紅葉)</td>
    <td class="caption">山の風景(曇り)</td>
 </tr>

</table>

サムネイル(縮小した図)を横に並べるために，<table>を使っています．そして，それらの図をスライドショーで表示するために，Ligntbox のオプションの data-lightbox の属性値を「mountain」と全て同一にしています．こうすることにより，同一の属性値を持つ図は，スライドショーの対象になります．

このようにして，以下のサムネイルを作成しました．いずれかの図をクリックすると，ポップアップで拡大図が現れます．その図の右端あるいは左端をクリックするとスライドショーになります．


山の風景(青空)	山の風景(紅葉)	山の風景(曇り)

Lightbox を使うと，サムネイルのスライドショーが簡単に記述できます．写真を多用する web サイトには，重宝するでしょう．

注意：SVGの問題

SVGフォーマットの図(ディンギー)．

品よく図を拡大するときに，Lightbox は重宝します．しかし，Internet Explorer (以降 IE) では SVG をポップアップ表示することはできません．IE ver. 11 で，いろいろな方法を試しましたが，私はどうしても表示させることができませんでした．一方，Firefox や Chrome，Safari は SVG の図でも問題なくポップアップ表示できます．次に示す fancyBox を使っても，IEのみ表示できませんでした．IE でも SVG 以外は OK です．SVG を多用する私には致命的な問題です．

具体的に，IE では右の SVG の図をクリックしてポップアップ表示できません．IE で他のブラウザと同じように表示が可能になれば，良いのですが．

巷に言われているように，「IE はクソ」です．これまでWEBページを書いてきて，IEのみ表示が異なることにさんざん苦労させられてきました．近頃，多少良くなってきたと思ったのですが，やはり問題を起こすのは IE です．IE がきちんと対応するか，シェアーを落とすか — を待つしかないですね．最近の私の WEB ページの閲覧者で IE を使っている人の割合は 30% で以前よりもかなり減ったのですが，まだまだ，無視できない状況です．

Firefox の場合，SVG ファイルの svg タグに表示の幅と高さ (width, height) を指定する必要があります．具体的には，以下の通り．

<svg  ……  viewBox="x₀ y₀ Δx Δy"  width="幅指定"  height="高さ指定"   … >

これは，ポップアップされる画像のサイズの変更にも使えます．

画像・他のポップアップ表示(fancyBox)

Lightbox は手軽に使える反面，インラインフレームなどの高度なことができません．少し高度なことをするならば，fancyBox が良さそうです．

インストール

2014年4月26日の最新の fancyBox のバージョンは，2.1.5 です．ここではそのインストール方法を示します．

fancyBox のホームページに行き，[DOWNLOAD v2.1.5]ボタンを押します．すると，zip ファイルがダウンロードされます．ファイルの保存先は，どこでも OK です．
ダウンロードしたファイルを解凍します．
```
$ unzip  fancyapps-fancyBox-v2.1.5-0-ge2248f4.zip
```
すると，fancyapps-fancyBox-18d1712 ができあがります．解凍したディレクトリーの中には，不要なファイルもあります．それらを削除することもできます．私はディレクトリー「demo」を削除しました．
ディレクトリーの名前が長いので，「fancyBox」と変更します．そして，ディレクトリー「fancyBox」ごと，WEBサイトの適当な場所に保管します．私は「jQuery/fancyBox」に保管しました．

以上で，インストールは完了です．

html の記述

ヘッダー

fancyBox を使うためには，htmlのヘッダー (<head> — </head>の間) に以下を記述します．ただし，ディレクトリーへのパスは，fancyBox を保管した場所により変わります．

<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="../../../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../../jQuery/fancyBox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="../../../jQuery/fancyBox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript" src="../../../jQuery/fancyBox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="../../../jQuery/fancyBox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript" src="../../../jQuery/fancyBox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

<link rel="stylesheet" href="../../../jQuery/fancyBox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen">
<link rel="stylesheet" href="../../../jQuery/fancyBox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen">
<link rel="stylesheet" href="../../../jQuery/fancyBox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen">

第一行目で，デフォルトのスクリプト言語を JavaScript に指定しています．第二行目は，jQuery ライブラリーの指定です．この辺はおきまりですね．第三行目は，マウスホィールを使う場合に必要です(オプション)．第四 – 五行目は，fancyBox を使う場合必須です．それ以降は，ボタンやサムネイル，メディア関係のようです(オプション)．何のことか? – よく分かりませんが，入れておくと良いことがありそうです．

ここでは，fancyBox のファイルを相対パスで指定指定しましたが，絶対パス指定も可能です．私は，将来の web サイトの移転に備えて相対パスを使いました．

JavaScript

他の jQuery を使ったソフトウェアー同様，fancyBox の動作パラメーターは html のヘッダー部に，JavaScript で記述します．パラメーターに特別な指定が無い場合，ヘッダー部の JavaScript のコードは以下のようにします．

<script type="text/javascript">
$(document).ready(init);
function init(){
     $(".fancybox").fancybox();
};
</script>

全てのオプションは，デフォルト指定になります．以下に示す単純な図のポップアップの場合は，これで問題ありません．細かい設定を行う場合には，オプションに適当な値を与えます．オプションについては，「fancyBox のドキュメント」に詳しい説明があります．

この JavaScript は，ブラウザーが html ドキュメントを読み込んだ後に，「$(".fancybox").fancybox()」を実行します．この辺りの jQuery コードについては，「ファイル読み込み後に実行」に簡単な説明があります．

本文(図のポップアップ)

本文中の図や写真の記述は，次のようにします．

<a class="fancybox" rel="グループ" href="画像ファイルへのパス title="キャプション">リンク元</a>

class で fancybox を指定します．rel でグループ名を指定します．これは Lightbox 同様，ユニークな名前の場合は単独，同じ名前の場合はグループ化されスライドショーの対象になります．href は，リンク元をクリックしたときの画像です．title でキャプションを書くこともできます．

具体的には，以下のように記述します．すると，以下のイメージをクリックすると拡大イメージが現れます．

<a class="fancybox" rel="newark" href="figure/fancybox_L.jpg" title="夏の町">
<img src="figure/fancybox_S.jpg" alt="fancyBoxのサンプル"></a>

夏の町．クリックすると拡大します．

以下は，fancyBox のスライドショーの例です．rel で指定するグループ名を同一にすることにより，スライドショーになります．


北国の冬 (1/3)	北国の冬 (2/3)	北国の冬 (3/3)

いろいろな使い方

fancyBox はいろいろと便利な機能があり，その詳細はfancyBox の WEB サイトに書かれています．ここでは，私が使う機能の例を示します．

これから示す例に使うヘッダーに書かれる JavaScript (設定)は，以下の通りです．

<script type="text/javascript">
$(document).ready(init);
function init(){
    $(".various").fancybox({
	maxWidth        : 800,    
	maxHeight       : 600,
	fitToView       : false,
	width           : '70%',
	height          : '70%',
	autoSize        : false,
	closeClick      : false,
	openEffect      : 'none',
	closeEffect     : 'none'
　　});
};
</script>

先ほどとは異なり，オプションに値を与えています．オプションについては，「fancyBox のドキュメント」を参照ください．

インラインフレーム

iframe を使うと別の WEB ページをポップアップ表示させることができます．以下はマイクロプロセッサーの発明について書かれた文章ですが，文中にある「マイクロプロセッサー 4004」をクリックするとポップアップウインドウで別の html 文書が表示されます．ちょっとした説明を書くときに便利です．

マイクロプロセッサーは米国で発明されましたが，それには日本人も関わっています．1960年代の後半から，日本では電卓の開発競争が起きました．そのとき，日本のビジコン社はプログラムで制御可能なICのアイディアを思いつきました．それをインテルに持ち込んだところ，テッド・ホフは4ビットの汎用コンピューターを提案しました．それが世界最初のマイクロプロセッサー 4004 になるわけで，フェデリコ・ファジンと嶋正利が中心となって開発が進められました．

HTML

先の文章の，html ファイルは以下の通りです．設定は class で，インラインフレームは data-fancybox-type で指定します．

… を提案しました．それが世界最初の
<a class="various" data-fancybox-type="iframe" href="various/iframe.html">マイクロプロセッサー 4004</a>
になるわけで，フェデリコ・ファジンと嶋正利が …

ポップアップ表示される文章のソース(iframe.html)は，いたって普通の html です．

動画(Flash)

flash 動画をポップアップで表示することもできます．例えば，次の例に示すように動画を伴った説明文がある時に便利です．

学研の「大人の科学」は，実験教材がついた科学の好きな大人向けの雑誌です．いろいろと興味を引くものがありますが，その中でも「Vツイン蒸気エンジン」は傑作だと思います．

HTML

この動画(flash)の html のソースは，以下の通りです．

<a class="various" href="various/steam_engine.swf">
<img src="various/steam_engine.jpg" width="320"  style="margin-left:200px" alt="大人の科学の蒸気機関">
</a>

通常は画像(steam_engine.jpg)が表示され，それがクリックされるとビデオ(steam_engine.swf)がポップアップ画面で再生されます．

google map

グーグルマップ(Google maps)もポップアップ表示できます．例えば，以下のように文中からグーグルマップにリンクを張ることができます．

コロッセオは帝政ローマの時代の西暦80年頃に完成した円形競技場です．収容人数は 45000 人で，そこでは模擬海戦も行われていました．当時の日本は弥生時代で鹿や熊を追っていたことを考えると，ローマが偉大であったことが分かります．現在は，ローマの主要な観光施設になっています．

HTML

グーグルマップを表示する html は以下のように記述します．

… ます．現在は，
<a class="various fancybox.iframe" href="http://maps.google.com/?output=embed&f=q&ll=41.8904835,12.4922873&t=h&iwloc=A&z=18">ローマの主要な観光施設</a>
になっています．…

グーグルマップの引数については，「Google Mapsを使ってみよう」に詳しい説明があります．

リストの分割表示 (easyListSplitter)

easyListSplitter を使うと，縦に長いリストを列に分割して表示できます．短い要素がたくさんあるリストがある時，空白を少なくできます．このページの目次にも，この easyListSplitter を使っています．

インストール

インストールはとても簡単で，まずは WEB の適当なページから，ソースファイルをダウンロードします．私は，このページの SOURCE からダウンロードしました．それを適当なWEBサーバーのユーザーの適当なディレクトリーに保存します．以上でインストールは終了です．

使い方

ヘッダー

html のヘッダーには，jQuery と easyListSplitter のソースファイルの場所を指定します．

<script type="text/javascript" src="../../../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../../jQuery/easyListSplitter/jquery.easyListSplitter.js"></script>

CSS

easyListSplitter を使うためには，回り込みの設定が必要です．CSSで「float:left」を指定します．タグ中に style を使ってしても可能ですが，ほんの少しレイアウトがずれます．その場合は，margin を使って調整すると良いでしょう．私は，以下のように CSS を記述しています．こうすると，style を使う場合と異なりレイアウトの崩れは起きません．

<style type="text/css">
    div.els ul{float:left}
</style>

これで，CSS の「float:left」を指定します．さらに，さまざまなスタイルの指定も可能です．

後述しますが，リストの<ul>—</ul>は，タグ<div class="els">—</div>で囲まれています．常識的には，わざわざタブ<div>で囲む必要はないように思えます．しかし，クラスや id を使い ul に直接 CSS を指定しても思い通りに easyListSplitter は動作しません．原因は不明です．

JavaScript

html のヘッダー部で，以下のようにして列の分割数を指定します．

<script type="text/javascript">
$(document).ready(init);
function init(){

    $('#sample_list').easyListSplitter({
        colNumber: 3
    });

};
</script>

こうすると，リストは3列に分割されます．リストに書かれた順に，1列目から埋められます．行から埋めたい場合には，「direction: 'horizontal'」を指定します．

HTML

htmlの書き方は，通常のリストとほとんど同じです．違いは，先に述べた CSS と JavaScript を反映させるために，<div class="els"> — </div>で囲むこと，リストに id 指定「id="sample_list"」すること，float:clear を解除するために「<div style="clear: both"></div>」を記述することです．具体的には，以下の通りです．

<div class="els">
<ul id="sample_list">
  <li>ガーネット</li>
  <li>アメシスト</li>
  <li>アクアマリン</li>
  <li>ダイヤモンド</li>
  <li>エメラルド</li>
  <li>パール</li>
  <li>ペリドット</li>
  <li>サファイア</li>
  <li>オパール</li>
  <li>トパーズ</li>
  <li>トルコ石</li>
</ul>
</div>

<div style="clear: both"></div>

すると，以下のリストが表れます．

ガーネット
アメシスト
アクアマリン
ダイヤモンド
エメラルド
パール
ルビー
ペリドット
サファイア
オパール
トパーズ
トルコ石

応用

easyListSplitter では<ol>が使えますが，問題があります．列毎に番号が 1 から始まります．通し番号を付けたい場合は，CSS で少し工夫が必要です．例えば，以下のようにカウンターを使えば，通し番号をつけることができます．

div.els{
  counter-reset:cntr;
}

div.els ol{
  float:left;
  list-style:none;
}

div.els ol li{
  counter-increment:cntr;
}

div.els ol li:before{
  content:counter(cntr) "\0A0\0A0";
}

すると，以下のように通し番号付きのリストにすることができます．

ガーネット
アメシスト
アクアマリン
ダイヤモンド
エメラルド
パール
ルビー
ペリドット
サファイア
オパール
トパーズ
トルコ石

しかし，行から埋めるように「direction:'horizontal'」と設定すると，通し番号の順番がおかしくなります．列を優先して番号が振られます．今のところ，この問題については解決方法が見つかっていません．元のプログラムである「jquery.easyListSplitter.js」の修正が必要と考えています．

ツールチップ (clueTip)

GUI を備えたアプリケーションプログラムで，アイコンなどのユーザーのインターフェース部分ににマウスを乗せると，簡単な説明が現れるものがあります．この簡単な説明をツールチップと言います．

近頃，この機能がある WEB ページも増えてきました．上手に使うと，ページを簡潔に記述することができます．一方，ツールチップが多すぎると「うざい」サイトになりますので，注意が必要です．ツールチップは，「Simple is best.」です．

WEB ページ作成に使えるツールチップはたくさんあります．通常の HTML のタグに title 属性を付加するだけでも，ツールチップが表れます．これはあまり見栄えが良くありません．そこで，jQuery で適当なツールチップを使うことにします．ここでは，設定が豊富な clueTip について説明します．

インストール

clueTip のサイトの「Download & Support」のページに行き，そこから「clueTip on Github」をクリックし，GitHub のページの [Download ZIP]をクリックします．すると，「jquery-cluetip-master.zip」がダウンロードされます．ダウンロードされたファイルを解凍します．

$ unzip  jquery-cluetip-master.zip

解凍するとディレクトリー「jquery-cluetip-master」ができあがります．これを適当なディレクトリーに保存します．私は名前を「clueTip」に変更し，ルートディレクトリーにある jQuery の直下に置きました．

使い方

clueTip を使うためには，ヘッダーと JavaScript, CSS，HTML の記述が必要です．それぞれの記述内容を示します．

ヘッダー

html のヘッダーで，jQuery と clueTip に関係するファイルの場所を指定します．私の場合は，以下の通りです．

<script type="text/javascript" src="../../../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../../jQuery/clueTip/jquery.cluetip.js"></script>
<script type="text/javascript" src="../../../jQuery/fancyBox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

ヘッダーでは，clueTip の CSS ファイルも指定します．

<link rel="stylesheet" href="../../../jQuery/clueTip/jquery.cluetip.css" type="text/css">

JavaScript

html のヘッダー部に以下のように JavaScript コードを記述し，clueTip のオプションを指定します．もちろん，html の DOM ツリー読み込み後に実行できればどのように記述しても問題はありません．

<script type="text/javascript">
$(document).ready(init);
function init(){

    $('セレクター').cluetip({
         オプションの指定
    });

};
</script>

複数のオプションが必要な場合は，カンマ区切りで並べて書きます．具体的なオプションについては，あとで説明します．

CSS

CSSはお好みで設定します.CSSを記述しなくても，clueTipは動作します．

a[class^="tooltip_"]{
   color:blue;
 }

こうすることにより，アンカータグ a のクラス名の先頭が tooltip_ の場合の設定ができます．CSSのセレクタについては，CSSの書き方が参考になります．

HTML

HTMLでツールチップを表示するためには，class あるいは id を付けて，cluetip()を呼び出します．具体的には，以下のように記述します(JavaScriptの例， htmlの例)．

<a class="クラス名"  title="ツールチップの内容">マウスを乗せる本文を記載</a>

id で指定する場合は，以下のようにします．(JavaScriptの例， htmlの例)．

<a id="id名"  title="ツールチップの内容">マウスを乗せる本文を記載</a>

次節で具体例を示します．最初は，それをコピー/ペースとして使うことを推奨します．

具体的な例

次節で示すように cluetip には豊富なオプションの設定が可能で，視覚的に凝った web サイトの作成が可能です．私は，ツールチップは分かりやすくシンプルを旨とし，凝ったサイトには fancyBox の方が良いと考えています．fancyBox でも同じような効果が得られます．そのようなことから，私は cluetip の豊富なオプションの一部しか使いません．ここでは私の備忘録を兼ねて，JavaScript と html の例を示します．

タイトル無し

最も簡単なタイトルが不要な場合です．JavaScriptで，オプション showTitle を false にします． (表示例)．

$('a.tooltip_NoTitle').cluetip({
  width: 300,
  splitTitle: '|',
  showTitle: false
});

<a class="tooltip_NoTitle" title="タイトルがない場合の表示例です．">表示例</a>

理由は分かりませんが，この場合でもオプション splitTitle の文字の指定 —先の例では「|」—は必要です．ただし，splitTitle で指定された文字は属性 title 中の文字列では改行文字に使われ，効果はあります．

タイトル付き

タイトルを付けると分かりやすくなります．JavaScriptで，オプション showTitle を true にします (表示例)．

$('a.tooltip_Title').cluetip({
  width: 300,
  splitTitle: '|',
  showTitle: true
});

<a class="tooltip_Title" title="タイトル有り|タイトルがある場合の表示例です．">表示例</a>

オプション splitTitle の指定された文字 —先の例では「|」—の前がタイトルになります．二つ目以降のこの文字は，改行文字として取り扱われます．

表示を続ける

マウスが離れれも表示を続けることができます．そのために，JavaScriptで，オプション sticky を true にします (表示例)．

$('a.tooltip_Sticky').cluetip({
  width: 300,
  sticky: true,
  closeText: '&#9746;',
  closePosition: 'title',
  splitTitle: '|',
  showTitle: true
});

<a class="tooltip_Sticky" title="sticky| 右上の&#9746;をクリックすると閉じます．">表示例</a>

closeText でクローズの文字を指定します．デフォルトは "Close" ですが，ここでは &#9746 (表示:☒) を指定しています．「closePosition: 'title'」とすることで，Close がタイトル表示領域に現れます．これはお勧めの設定です．

オプションについて

clueTip には，さまざまなオプションが用意されています．その一覧は，「clueTip Plugin API / Options」に書かれています．

ページ作成情報

参考資料

Treeview の使い方については，「jQueryでエクスプローラ風メニューに！」が参考になります．
Treeview の例の生物の分類は，ウィキペディア「哺乳類」を参考にしました．
Lightbox のインストールは，Lightbox のページを参考にしました．
fancyBox の使い方は，fancyBox の WEB サイトが大変参考になります．
グーグルマップの引数(パラメーター)については，「Google Mapsを使ってみよう」を参考にしました．
clueTip の本家は，「clueTip: A jQuery Tooltip Plugin」です．英語ですが，ここを見ると clueTip の全てが分かります．日本語であれば，「jQueryでスタイリッシュなツールチップを作ろう」が大変参考になります．

更新履歴

2014年06月06日	ページの新規作成
2014年06月08日	Treeview の説明を追加．

WEBページ作成jQuery便利な JavaScript ライブラリーを使おう

目次

jQuery を実行するために

ヘッダー部

JavaScript と jQuery の指定

ファイル読み込み後に実行

基本的な書き方

ツリー構造の表示 (Treeview)

インストール

html の記述

ヘッダー (<head> — </head>)

ファイルのパス

JavaScript

本文 (<body> — </body>)

一般的なツリーの場合

ディレクトリーのツリーの場合

サンプル

その他

画像のポップアップ表示(Lightbox)

インストール

html の記述

ヘッダー

本文(単独の図)

本文(スライドショー)

注意：SVGの問題

画像・他のポップアップ表示(fancyBox)

インストール

html の記述

ヘッダー

JavaScript

本文(図のポップアップ)

いろいろな使い方

インラインフレーム

HTML

動画(Flash)

HTML

google map

HTML

リストの分割表示 (easyListSplitter)

インストール

使い方

ヘッダー

CSS

JavaScript

HTML

応用

ツールチップ (clueTip)

インストール

使い方

ヘッダー

JavaScript

CSS

HTML

具体的な例

タイトル無し

タイトル付き

表示を続ける

オプションについて

ページ作成情報

参考資料

更新履歴