GettingStartedASPNet.htm

サムネイル画像

多くの画像を表示する場合、通常処理が重くなります。そこで、実際の画像より小な画像(サムネイル画像)を作成しておき、このサムネイル画像をクライアントのブラウザで表示します。

ImageKit.Web Thumbnail コントロールの使用

ここでは Thumbail を使用した Microsoft ASP.NET 用の Web アプリケーションの作成方法を説明します。

Thumbnail コントロールの開発環境のツールボックスへの登録

インストールプログラムを実行すれば、コントロールは自動でツールボックスに登録されますが、ここでは、手動での登録方法を説明します。

"ツールボックス"上でマウスの右クリックをし、"タブの追加"を行います。
追加したタブ上でマウスの右クリックをし、"アイテムの追加と削除"を選択します。(Visual Studio 2005 では"アイテムの選択")
"参照ボタン"を押して "Newtone.ImageKit.Web.Thumbnail.dll" を選択します。
ツールボックス上でマウスの右クリックをし、タブの追加を行います。
"OK" ボタンを押します。

Web 用の Thumbnail がツールボックスに登録されます。
　

仮想ディレクトリ

画像を保持するディレクトリと、この画像のサムネイル画像を保持するディレクトリは仮想ディレクトリとして指定します。

詳しくは、ここを参照してください。

プロジェクトの作成

以下は、簡単なプログラム例です。

Visual Studio で新しいプロジェクト(ASP.NET Web アプリケーション)を作成します。
ツールボックスから Thumbnail コントロールを Web フォームに貼ります。
Thumbnail コントロールの位置や、ColumnNumber、RowNumber、ImageWidth、ImageHeight、CellSpacing 等のプロパティを設定してください。

Page_Load イベントで、下記のコードを記述してください。
ここでは、ポストバックが発生した場合はサムネイルの処理をおこないません。

[Visual Basic]

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

  If IsPostBack = False Then
    ' 画像があるディレクトリを仮想ディレクトリとして設定
    Thumbnail1.ImageDirectory = "/SampleImages/1"
    Thumbnail1.ThumbnailImageDirectory = "/SampleImages/1/ThumbnailImages"
    Thumbnail1.ShowThumbnailImages()
  End If
End Sub

[C#]

private void Page_Load(object sender, System.EventArgs e)

{

  Thumbnail1.ImageDirectory="/SampleImages/1";
  Thumbnail1.ThumbnailImageDirectory="/SampleImages/1/ThumbnailImages";
  Thumbnail1.ShowThumbnailImages();
}

画像を保持している SampleImagesl フォルダが仮想ディレクトリの設定であることと、パスが正しいことを確認して実行してください。クライアントのブラウザにサムネイル画像の一覧が表示されます。

この例の画像ディレクトリは "/SampleImages/1" となり、サムネイル画像ディレクトリは "/SampleImages/1/ThumbnailImages" となります。ここで、SampleImages は Web で共有するように設定する必要があります。

サーバーの負担軽減

このコンポーネントはサーバー側で動作します。従って、多くのクライアントからのアクセスの負荷をなるべく少なくする必要があります。そこで、

DeleteThumbnailDirectory メソッドを出来るだけ使用しない。(サムネイル画像ディレクトリが存在しないとサムネイル画像を作成する)
サムネイル画像のサイズを必要以上に大きくしない。
サムネイル画像を作成する情報ファイルの内容をなるべく変更しない。

等を考慮する必要があります。

Thumbnail コントロールと ImageKit コントロールの使用

Thumbnail コントロールのフォームと別のフォームの ImageKit コントロールに画像を表示する場合は Thumbnail コントロールの EnablePaging を False に設定してください。

(例）WebForm1 の Thumbnail コントロールで選択した画像を WebForm2 の ImageKit コントロールに表示

[Visual Basic.NET]
Private Sub Thumbnail1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Thumbnail1.Click
    Server.Transfer("WebForm2.aspx?str=" + Thumbnail1.ImageDirectory + "/" + Thumbnail1.FileName)
End Sub

[Visual C#.NET] private void Thumbnail1_Click(object sender, System.EventArgs e) { Response.Redirect("WebForm2.aspx?str=" + Thumbnail1.ImageDirectory + "/" + Thumbnail1.FileName, false); }

Visual Studio 2005 で開発するときの注意

Visual Studio 2005 で作成するプロジェクトでは、デザイン時では Web フォームに配置した Thumbnail コントロールを移動することはできませんが、以下の方法で配置の設定が可能です。Thumbnail コントロールをマウスの右ボタンでクリックし"スタイル"を選択します。ここで"位置"を選択し、"位置モード"で"絶対位置"を選択し、"上"と"左"に Thumbnail コントロールの左上の位置を設定します。デザイン時の画面では移動しませんが、実行時には設定した位置にサムネイルが表示されます。

しかし、Panel コントロールを Thumbnail コントロールのコンテナにすればデザイン時でも自由に位置の設定が行えます。まずツールボックスから Panel コントロールを Web フォームに配置し、適当な大きさに設定します。次に Panell コントロールをマウスの右ボタンでクリックし"スタイル"を選択します。ここで"位置"を選択し、"位置モード"で"絶対位置"を選択します。その次に Thumbnail コントロールを Panel コントロールの中に配置します。Thumbnail コントロールの位置を調整するには、Panel コントロールをマウスで移動します。

参照

Thumbnail メンバ | Newtone.ImageKit.Web.Thumbnail

WebForm での Thumbnail コントロールの使用

サムネイル画像

ImageKit.Web Thumbnail コントロールの使用

サーバーの負担軽減

Thumbnail コントロールと ImageKit コントロールの使用

Visual Studio 2005 で開発するときの注意

参照