Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

画像のアップロードに便利なサムネイル表示機能の組み込み

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2006/04/28 00:00

Webサイトで画像をアップロードする際、従来のようにファイル名を指定する方法だと、ファイルがどんな画像かをあらかじめ把握しておく必要があり、不便です。本稿で紹介するライブラリを利用すると、画像ファイルをアップロードする前に、ブラウザ上で画像のサムネイルを表示させることができます。

目次

はじめに

 ブロードバンドの普及、ストレージデバイスの大容量化に伴い、最近の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を指定しています。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 尾藤 正人(ビトウ マサト)

    大学時代にVine SPARCの開発に参加。就職後2003年度未踏ユースに採択される。その後語学留学のため半年程渡米。帰国後はウノウ(株)の最高技術責任者として写真共有サイトフォト蔵の開発に従事。ブログ: ベイエリア情報局

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5