ブログトップ
記事一覧
画像一覧

[JS] thickboxを活用して利用者に分かりやすいサイトを作ろう

少し古いライブラリですが、thickboxというjQueryをベースにしたJavaScriptのライブラリがあります。

Ajaxを使った非同期通信で、画像や別のHTMLファイルを画面にオーバーレイして表示してくれるという特徴があります。

手っ取り早くthickboxを知りたい場合は、公式サイトの中にあるサンプル（上部メニューのExamplesから）を見てみるのが早いでしょう。

このように画像やコンテンツをページ遷移することなく、しかも格好よく見せることができるライブラリです。

このライブラリ自体は結構有名なのですが、実際に使うとなると使い道があまり見出せないと思う人も多いかもしれません。

個人のブログで、掲載した画像を格好よく見せたいという場合はありかもしれませんが、サイトやアプリケーションを構築するにあたって、画像を強調するような見せ方をすることは多くありません。

で、もう一つの機能である別のHTMLファイルを表示するという機能を使って、利用者に分かりやすいサイト作りをする方法を考えてみたいと思います。

例えば業務アプリケーションで多い、入力フォームを用意した画面に各項目の説明をこのthickboxを通して分かりやすく見せてあげるとか、文章中に出てくる難しい言葉の説明を、その文字列をクリックする事でFAQのように見せてあげるというような使い道があったりします。

こんな感じのHTMLがあって、特定の文字にthickboxを呼び出すロジックを組み込んでおきます（リンク部分）

このリンク部分をクリックすると

thickboxを動かして、そのリンク部分の説明書きを表示するとか。

以前に紹介した、特定の文字にマウスをあてると吹き出しを表示してくれる Hints.js でも似たような事はできるのですが、このようなFAQ形式であれば文字数が多くなったりしますし、画面のレイアウトを自由に変えれるのでお勧めです。（Hints.jsは特定の位置にマウスをあて続けなければ表示が消えてしまいますし）

thickboxの設置方法

1. jQueryのダウンロード

最初に説明したとおり、thickboxはｊQueryをベースに作られているので、まずはｊQueryを設置する必要があります。

ｊQueryのダウンロードは、公式サイトより行えます。

今回は、2008年11月時点で最新のバージョン1.2.6を使用しています。

また、ここではファイル名をjquery.jsとしています。

2. thickboxのダウンロード

thickboxを使用するには3つのファイルが必要です。

- thickbox本体（JavaScriptファイル）

- thickbox用のCSSファイル

- ページ読み込み時のアニメーションGIF （※）

※ なくても動きます。

しかし、thickbox本体に関しては、公式ページからダウンロードするのではなく、下記サイトからダウンロードしたものを利用した方がよさそうです。

Thickbox 3.1 IE7 Positioning bug ＠ Jamie Thompson

※ thickbox.patch.jsをダウンロード

理由は、本家のthickboxを利用するとInternet Explorer7で見たときに表示位置やレイアウトがずれるというバグがあります。

どうも表示するコンテンツの高さがブラウザのウィンドウサイズを超えて表示した場合に、位置がずれるというバグが出てくるようです。

3. ｊQueryとthickboxの配置

では、ダウンロードしたｊQueryとthickboxを配置してみましょう。

今回は、下記のような構成で配置してみました。

.
|-- css
| `-- thickbox.css
|-- img
| `-- loadingAnimation.gif
|-- index.html
|-- js
| |-- jquery.js
| `-- thickbox.js
`-- readme.html

配置する位置は任意の位置でかまいませんが、thickbox本体（thickbox.js）内にローディング時のアニメーションGIFのパスを指定している箇所があるので、そこを編集しておく必要があります。

- thickbox.js 11行目

var tb_pathToImage = "/img/loadingAnimation.gif";

thickboxの使い方

先ほどの例で示したようなFAQ形式でHTMLファイルを表示する場合の方法について書きたいと思います。

呼び出しもとのHTMLファイルを作ります。

- index.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>a day in the boy's life</title>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/thickbox.js"></script>
<link rel="stylesheet" href="/css/thickbox.css" type="text/css" media="screen" />
</head>
<body>
<br />
<br />
このサイトは、<a href="/help.html?height=200&width=400" class="thickbox">A Day In The Boy's Life</a>の別館です。
</body>
</html>

最初に、ｊQueryのJavaScriptファイル（jquery.js）を呼び出した後に、thickbox本体を呼び出します。

そして、thickbox用のCSSも読み込むように指定します。

アンカータグ内で指定している、width（表示する画面の幅。デフォルト630px）とheight（表示する画面の高さ。デフォルト440px）のパラメータがthickboxで表示する際の横幅と縦幅になります。

これはお好みで調整可能です。

最後に、class名をthickboxと指定します。（このクラス名がthickboxの呼び出し対象となります）

呼び出し先のHTMLファイル（上記の場合、help.html）はなんでもかまいません。

この中に画像やFlashを埋め込んでいても問題なく動作します。

ただ、thickboxで表示する際の幅と高さにあわせた形で作っておいた方が綺麗に見せることができます。

また、今回は静的なHTMLファイルを呼び出してみましたが、FAQの文字列をDBに登録しておき、上手くパラメータを渡す事で動的に見せるプログラムファイルを指定しても問題なく動作します。

thickboxの応用

単純に言ってしまえば、ポップアップウィンドウの代用と言ったところですので、様々な応用が考えれます。

例えば、住所入力フォームで郵便番号検索を補助するような役割のヘルプ画面に応用してみましょう。

よくあるパターンでは、「郵便番号検索」というようなボタンをクリックすると新しいウィンドウが立ち上がって、そこから自分の住所を選択すると、元画面のテキストボックスに郵便番号が入っているというパターンです。

まずは、イメージから。

最初に、このような画面があって「こちら」の部分がリンクになっており、クリックする事でthickboxが呼び出されます。

この画面から「こちら」というリンクをクリックすると、郵便番号検索画面がでてきます。

この画面から「登録」というボタンを押すと、thickboxが解除されて元画面の「郵便番号」のテキストボックスに該当の住所の郵便番号が入るというものです。

ソースもいたって簡単にかけます。

- 呼び出しもとのファイル（input.html）

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>a day in the boy's life</title>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/thickbox.js"></script>
<link rel="stylesheet" href="/css/thickbox.css" type="text/css" media="screen" />
</head>
<body>
<br />
<br />
<br />
郵便番号を入力してください。郵便番号が不明な場合は、<a href="address.html?width=400&height
=250" class="thickbox">こちら</a>から検索できます。

<br />
郵便番号： <input type="text" name="text_box" id="zip_code">
</body>
</html>

- 呼び出し先のファイル（address.html）

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>a day in the boy's life</title>
<link rel="stylesheet" href="/css/mystyle.css" type="text/css" />
<script type="text/Javascript">
<!--

function inputZipCode(zip_code) {
$("#zip_code").val(zip_code); // 開いたファイルにあるテキストボックスに郵便番号をセット
tb_remove(); // thickboxを解除する
}

// -->
</script>
</head>
<body>
<table class="help_tab">
<tr>
<th>-</th>
<th>住所</th>
</tr>
<tr>
<td><input type="button" value="登録" onClick="inputZipCode('160-0021')"></td>
<td>東京都 新宿区 歌舞伎町</td>
</tr>
<tr>
<td><input type="button" value="登録" onClick="inputZipCode('154-0017')"></td>
<td>東京都 世田谷区 世田谷</td>
</tr>
<tr>
<td><input type="button" value="登録" onClick="inputZipCode('150-0002')"></td>
<td>東京都 渋谷区 渋谷</td>
</tr>
</table>
</body>
</html>

「登録」ボタンが押されると、（ｊQueryの表記になりますが）受取った郵便番号を呼び出しもとのファイル（input.html）のテキストボックスの値にセットしてあげています。

そして、その後にtb_remove()関数でthickboxを解除しています。

tb_remove()関数は、thickbox.jsの中で定義されています。

使い方次第で色々な応用ができるライブラリなので活用してみては如何でしょうか。

[PR] ★ロリポップ！★WordPressやMovableTypeの簡単インストール、cron、共有SSL対応！

[PR] 光ファイバー/ADSLを楽しむなら「安心」「安全」の@nifty！

[PR] 世界にたった一つ、あなただけのドメインを登録しよう！

jQuery UI Sortableを使ってドラッグ＆ドロップでリストを並び替える

Twitter入力フォームのように文字カウントしてくれるcharacter count

Googleサジェストが実装できるjQuery Autocomplete Mod

[jQuery] マウスオーバー・マウスアウトで画像を表示・非表示にする方法

高機能でカスタマイズも容易なWYSIWYGエディタ [CKEditor]

[JS]JavaScriptで簡単にWindowsエクスプローラー風のツリーを作れるDTree

[JS] 特定のフォームにフォーカスすると吹き出しを表示できるHints.js

[JS] JavaScriptで吹き出しを表示するBalloon tooltip

[jQuery] 外部JavaScriptファイル読込みに関する考察