prototype.jsを使った画像サムネイルの表示ライブラリ

• 動作デモ

はじめに

　ブロードバンドの普及、ストレージデバイスの大容量化に伴い、最近のWebサイトでは画像ファイルのような大容量のメディアを扱う機会が多くなってきました。しかし、Webサイトで画像のアップロードに対応するときに、従来のようにファイル名を指定する方法だと、アップロードをする側はどのファイルがどんな画像かを把握する必要があり、簡単に画像ファイルをアップロードすることができません。

　筆者が開発を担当している「フォト蔵」という写真共有サイトでは、上記の問題を解決するための画像サムネイル表示ライブラリを作成して、使用しています。 画像サムネイル表示ライブラリを使用することで、画像ファイルをアップロードする前にブラウザ上で画像のサムネイルを表示させることができます。

　セキュリティ機能の関係上、動作可能WebブラウザはIE限定になってしまいますが、IEは日本および世界におけるブラウザ市場でもトップシェアを誇っており、IEのみでも対応することで格段に操作性が向上します。ぜひ、本ライブラリを皆さんのWebサイトにも導入してみてください。

対象読者

　Webサイトを構築している方。基本的なHTML、JavaScriptが書ける方を対象としています。 画像サムネイル表示ライブラリはJavaScriptのみで動作するので、サーバ側言語はなんでも構いません。

動作環境

　動作可能なブラウザはIEのみ。Mozilla、Operaでは動作しません。

　また、画像サムネイル表示ライブラリではprototype.jsを使用しています。prototype.jsはWeb 2.0を支える重要なライブラリのひとつですので、ぜひこの機会に導入されることをお勧めします。

画像サムネイル表示ライブラリの使い方

　まず始めに、画像サムネイル表示ライブラリの使い方を説明します。

　下記に画像サムネイル表示ライブラリを使用するための最低限のHTMLを示します。

1 <script type="text/javascript" src="prototype.js"></script>
2 <script type="text/javascript" src="ImageThumbnail.js"></script>
3 <input type="file" id="photo">
4 <img src="empty.gif" id="thumbnail" width="80" height="0">
5 <script type="text/javascript">
6 <!--
7 new Image.Thumbnail('thumbnail', 'photo');
8 //-->
9 </script>

　1、2行目でprototype.js、画像サムネイル表示ライブラリの読み込みを行っています。

　3行目はファイル選択するためのinputタグ、4行目はサムネイルを表示するimgタグです。imgタグのwidth属性でサムネイルの最大サイズを指定しています。「empty.gif」は1x1の大きさの画像です。ここには皆さんの好みでサムネイル用の画像を表示してもよいでしょう。

　6～9行目で画像サムネイル表示ライブラリの呼び出しを行っています。Image.Thumbnailはprototype.jsの機能を用いてクラスとして定義されており、newすることで使用できるようになっています。第1引数にimgタグのidを、第2引数にinputタグのidを指定しています。