.NET TIPS ［ASP.NET］動的にJPEG画像を作成するには？ 山田 祥寛 2005/09/30

　データベースなどのデータ・ストアに蓄積されたデータは、何もDataGridコントロールなどでグリッド表示するばかりが能ではない。時として、円グラフや折れ線グラフなどのチャート画像に加工することで、よりユーザーの視覚に訴えるビューを実現できるケースも多いはずだ。

　ASP.NETには、チャートを描画するためのコントロールは標準では用意されていないが、.NET Frameworkには、Windows標準の描画エンジンであるGDI+（Graphical Device Interface +）機能にアクセスするためのクラス・ライブラリが用意されている。本稿では、このクラス・ライブラリを利用して、テキスト・ファイル上で管理された数値データを基に、動的に円グラフを生成してみることにしよう。

　なお、本稿のサンプルを動作させるには、あらかじめグラフの基となる数値データとして、以下のようなタブ区切りテキスト（dotnet.dat）を用意しておく必要がある。

1.	すばらしい	123
2.	良かった	102
3.	普通	57
4.	悪い	10
5.	なってない	3
円グラフ描画の基となるタブ区切りテキスト（dotnet.dat）

　それではさっそく、具体的な手順を見ていくことにしよう。

1. 画像生成用のHTTPハンドラ・クラスを記述する

　本稿の例のように、ASP.NET上で画像データを生成するには、HTTPハンドラ・クラスを利用すると便利だ。HTTPハンドラ・クラスとは、IISに対してクライアントから要求があった場合に、実際のリクエスト処理を行うためのクラスで、例えばおなじみの.aspxファイルも内部的にはHTTPハンドラ・クラスによって処理されている。

　初歩的なASP.NETアプリケーションを構築するうえでは、HTTPハンドラ・クラスを意識する必要はほとんどないが、アプリケーションに新たなサービスを定義したい場合などでは、HTTPハンドラ・クラスを利用することでスマートにサービスを実装することができる。

　自前のHTTPハンドラ・クラスを作成する方法については、本稿では割愛する。詳細は、「TIPS：［ASP.NET］ASP.NETアプリケーションに独自の拡張子を追加するには？」）を参照いただきたい。

　以下は、データ・ファイルから読み込んだデータを基に円グラフの画像を生成してレスポンスとして返すHTTPハンドラである。

using System; using System.Drawing; using System.Drawing.Imaging; using System.Drawing.Drawing2D; using System.IO; using System.Text; using System.Web; namespace Com.Msn.Wings {   public class ImageGenerator : IHttpHandler {     public bool IsReusable {       get { return true; }     }     public void ProcessRequest(HttpContext context) {       int i = 0;       float sum = 0;       float[] angle = new float[5];       // 550×500ピクセルのキャンバスを生成したうえで、       // 背景色を白でクリア       Bitmap bImage =         new Bitmap(550, 500, PixelFormat.Format64bppPArgb);       Graphics graph = Graphics.FromImage(bImage);       graph.Clear(Color.White);       // 画像生成に使用するブラシ（SolidBrushコントロール）を定義       SolidBrush[] brush = new SolidBrush[5];       brush[0] = new SolidBrush(Color.Lime);       brush[1] = new SolidBrush(Color.Blue);       brush[2] = new SolidBrush(Color.DarkGreen);       brush[3] = new SolidBrush(Color.Red);       brush[4] = new SolidBrush(Color.Silver);       // リクエストURLからベース名のみを取得し、       // 「<ベース名>.dat」をデータ・ファイルとして読み込む       String basePath =         Path.GetFileNameWithoutExtension(context.Request.FilePath);       StreamReader sReader = new StreamReader(         context.Server.MapPath(basePath + ".dat"),         Encoding.GetEncoding("Shift_JIS"));       // 読み込んだデータから数値合計（sum）と       //個々の値（angle）をセット       // また、「■ <項目名>」の形式で凡例を出力       while (sReader.Peek() > -1) {         String[] line = sReader.ReadLine().Split('\t');         sum += Single.Parse(line[1]);         angle[i] = Single.Parse(line[1]);         graph.DrawString("■ " + line[0],           new Font("HG丸ｺﾞｼｯｸM-PRO",16),           brush[i], new PointF(380,20+i*25));         i++;       }       sReader.Close();       // 個々の値（angle）と合計値（sum）から円グラフの角度を計算       for (i =0;i < angle.Length; i++) {         angle[i] = (int)(angle[i] * 360 / sum);       }       float start = -90;       // FillPieメソッドで個々のデータに基づき、円弧を描画       for (i = 0; i < angle.Length; i++) {         graph.FillPie(brush[i], 10, 10, 400, 400, start, angle[i]);         start += angle[i];       }       // コンテンツ・タイプを設定したうえで生成された画像を出力       context.Response.ContentType = "image/jpg";       bImage.Save(context.Response.OutputStream, ImageFormat.Jpeg);     }   } }

数値データから動的に円グラフを生成するHTTPハンドラ・クラス（C#版：ImageGenerator.cs）

　

Imports System Imports System.Drawing Imports System.Drawing.Imaging Imports System.Drawing.Drawing2D Imports System.IO Imports System.Text Imports System.Web Imports Microsoft.VisualBasic Namespace Com.Msn.Wings   Public Class ImageGenerator : Implements IHttpHandler     Public ReadOnly Property IsReusable As Boolean Implements IHttpHandler.IsReusable       Get         Return True       End Get     End Property     Sub ProcessRequest(context As HttpContext) Implements IHttpHandler.ProcessRequest       Dim i As Single=0       Dim sum As Integer=0       Dim angle(4) As Integer       ' 550×500ピクセルのキャンバスを生成したうえで、       '背景色を白でクリア       Dim bImage As New BitMap( _         550, 500, PixelFormat.Format64bppPARGB)       Dim graph As Graphics = Graphics.FromImage(bImage)       graph.Clear(Color.White)       ' 画像生成に使用するブラシ（SolidBrushコントロール）を定義       Dim brush(4) As SolidBrush       brush(0) = New SolidBrush(Color.Lime)       brush(1) = New SolidBrush(Color.Blue)       brush(2) = New SolidBrush(Color.DarkGreen)       brush(3) = New SolidBrush(Color.Red)       brush(4) = New SolidBrush(Color.Silver)       ' リクエストURLからベース名のみを取得し、       ' 「<ベース名>.dat」をデータ・ファイルとして読み込む       Dim basePath As String = _         Path.GetFileNameWithoutExtension(context.Request.FilePath)       Dim sReader As New StreamReader( _         context.Server.MapPath(basePath & ".dat"), _         Encoding.GetEncoding("Shift_JIS"))       ' 読み込んだデータから数値合計（sum）と       ' 個々の値（angle）をセット       ' また、「■ <項目名>」の形式で凡例を出力       Do While sReader.Peek() > -1         Dim line As String() = sReader.ReadLine().Split(Chr(9))         sum = sum + line(1)         angle(i) = line(1)         graph.DrawString("■ " & line(0), _           New Font("HG丸ｺﾞｼｯｸM-PRO",16), brush(i), _           New PointF(380,20+i*25))         i = i + 1       Loop       sReader.Close()        ' 個々の値（angle）と合計値（sum）から円グラフの角度を計算       For i = 0 To angle.Length ? 1         angle(i) = CInt(angle(i) *360 / sum)       Next       Dim start As Integer = -90       ' FillPieメソッドで個々のデータに基づき、円弧を描画       For i = 0 To angle.Length - 1         graph.FillPie(brush(i), 10, 10, 400, 400, start, angle(i))         start += angle(i)       Next       ' コンテンツ・タイプを設定したうえで生成された画像を出力       context.Response.ContentType = "image/jpg"       bImage.Save(context.Response.OutputStream, ImageFormat.Jpeg)     End Sub   End Class End Namespace

数値データから動的に円グラフを生成するHTTPハンドラ・クラス（VB.NET版：ImageGenerator.vb）

　Bitmapクラス、Graphicsクラス（System.Drawing名前空間）に関する基本は、ビットマップに関する各TIPSとコード内のコメントを参照していただくとして、ここでは円グラフを出力するロジックを追ってみることにしよう。

　円グラフを構成する円弧を出力するのは、GraphicsクラスのFillPieメソッドの役割だ。本稿で使用しているFillPieメソッドの構文は、以下のとおり。

public void FillPie(Brush brush, float x, float y,   float width, float height, float startAngle, float sweepAngle) Overloads Public Sub FillPie(ByVal brush As Brush, _   ByVal x As Single, ByVal y As Single, _   ByVal width As Single, ByVal height As Single, _   ByVal startAngle As Single, ByVal sweepAngle As Single)

Graphics.FillPieメソッドのシグネチャ（上：C#、下：VB.NET）

　FillPieメソッドのパラメータは、先頭から「使用するブラシ」「中心のX座標」「中心のY座標」「高さ」「幅」「開始角度」「描画角度」である。つまり、ここでは−90度を開始角度（start）とし、各データ項目の角度（angle）を加算しながら円弧を描画することで、円弧を順番に積み重ね、1つの円グラフを生成しているというわけだ。

　生成した画像（Graphicsオブジェクト）は、最終的にBitmapオブジェクトのSaveメソッドで出力できる。本稿で使用しているSaveメソッドの構文は、以下のとおり。

public void Save(Stream stream, ImageFormat format) Overloads Public Sub Save(ByVal stream As Stream, ByVal format As ImageFormat)

Bitmap.Saveメソッドのシグネチャ（上：C#、下：VB.NET）

　このメソッドでは、指定された出力先（Streamオブジェクト）に対して、指定フォーマット（ImageFormatオブジェクト）で画像を出力することができる。ImageFormatオブジェクト（System.Drawing.Imaging名前空間）のプロパティには、本稿で使用しているJPEG画像のほか、Bmp、Exif、Gif、Png、Tiffなど主要な画像形式を指定可能だ。

　また、画像データのようなバイナリ・データをクライアントに出力したい場合には、バイナリ出力ストリームを利用すること。バイナリ出力ストリームは、HttpResponseオブジェクトのOutputStreamプロパティで取得できる。

2. HTTPハンドラ・クラスを配置する

　HTTPハンドラ・クラスは、使用に先立ってコマンド・プロンプトからコンパイルを行う必要がある。コンパイルの構文は以下のとおり。

> csc /t:library ImageGenerator.cs > vbc /t:library /r:System.dll /r:System.Drawing.dll /r:System.Web.dll ImageGenerator.vb

HTTPハンドラ・クラスのコンパイル方法（上：C#、下：VB.NET）

　上記のコンパイルに成功した場合、C#、VB.NETいずれにおいてもImageGenerator.dllが生成されるはずなので、これをアプリケーション・ルート配下の「\bin」フォルダにコピーすればよい。

3. web.configの設定を行う

　次に、アプリケーション・ルート配下のweb.configに以下の設定を追加する。「TIPS：［ASP.NET］特定の拡張子に対するアクセスを制限するには？」でも紹介したように、これによって、いま作成したImageGenerator.dllアセンブリ内のImageGeneratorクラス（Com.Msn.Wings名前空間）が拡張子「.img」処理用のHTTPハンドラ・クラスとして追加される。

<?xml version="1.0" encoding="UTF-8" ?> <configuration>   <system.web>     <httpHandlers>       <add verb="GET" path="*.img"         type="Com.Msn.Wings.ImageGenerator, ImageGenerator" />     </httpHandlers>   </system.web> </configuration>

拡張子「.img」の設定を追加したweb.config

　<httpHandlers>要素配下の<add>要素のpath属性に「*.img」のようなワイルドカードを含んだパスを指定することで、拡張子「.img」に対するリクエストをすべてImageGeneratorクラスで処理できるというわけだ。

　前述のImageGenerator.cs（ImageGenerator.vb）のソース・コードをご覧いただければ分かるように、後はリクエストURLから動的に処理を分岐するロジックを、HTTPハンドラ・クラスに追加すればよい。

　ここでは、リクエストURLから拡張子を取り除いたベース名を抽出し、StreamReaderクラス（System.IO名前空間）で「<ベース名>.dat」をデータ・ファイルとして読み込んでいる。このような仕組みを採用することで、リクエストURLを変えれば、参照すべきデータ・ファイルを動的に変更できるというわけだ。汎用的なサービスを提供する場合にはよく利用する手法なので、覚えておくとよいだろう。

4. IISに拡張子のマッピングを行う

　ただし、ASP.NET標準でない拡張子を追加した場合、web.configの設定だけではHTTPハンドラ・クラスは正しく実行できない。というのも、HTTPハンドラ・クラスへの振り分けはASP.NETエンジン（aspnet_isapi.dll）が行うからだ。「.img」はIISのデフォルト設定では認識されない拡張子であるから、当然、拡張子「.img」へのリクエストがあってもaspnet_isapi.dllは起動しない。

　自前の拡張子を認識させるには、IIS上で拡張子「.img」とASP.NETエンジンとのマッピングを行う必要がある。この方法については、「TIPS：［ASP.NET］.htmlや.pdfファイルをフォーム認証やロギングの対象にするには？」で紹介しているので、そちらを参照してほしい。

■

　以上で、サンプル・アプリケーションを動作させるための一連の作業は完了だ。ImageGeneratorクラスの動作を確認するために、以下のようなWebフォームを作成しよう。

<%@ Page ContentType="text/html" Language="VB" %> <html> <head> <title>画像を動的に生成する</title> </head> <body> <h1>アンケート調査結果</h1> <h3>1. 本記事を読んだ感想は？</h3> <img src="dotnet.img" width="550" height="500" /> </body> </html>

ImageGeneratorを利用するためのWebフォーム（showImage.aspx）

　画像データを出力するImageGeneratorクラスは、<img>タグのsrc属性からあたかも静的な画像ファイルであるかのように呼び出すことが可能だ。以上を実行した結果、以下のような結果が出力されれば成功だ。

showImage.aspxの実行結果

　異なるデータ・ファイルを作成し、出力画像が動的に切り替わることも確認していただきたい。なお、本稿ではデータ項目の数が5つ以内であることを前提としているが、当然、5つ以上の項目に対応することも可能だ。余力のある方は、ぜひ挑戦してみていただきたい。

カテゴリ：Webフォーム　処理対象：グラフ 使用ライブラリ：Bitmapクラス（System.Drawing名前空間） 使用ライブラリ：Graphicsクラス（System.Drawing名前空間） 使用ライブラリ：ImageFormatクラス（System.Drawing.Imaging名前空間） 関連TIPS：［ASP.NET］ASP.NETアプリケーションに独自の拡張子を追加するには？ 関連TIPS：［ASP.NET］特定の拡張子に対するアクセスを制限するには？ 関連TIPS：［ASP.NET］.htmlや.pdfファイルをフォーム認証やロギングの対象にするには？

　

この記事と関連性の高い別の.NET TIPS ［ASP.NET］ASP.NETアプリケーションに独自の拡張子を追加するには？ ［ASP.NET］特定の拡張子に対するアクセスを制限するには？ ［ASP.NET］アプリケーションにログ参照のユーティリティを追加するには？ ［ASP.NET］ユーザーから入力されたデータを任意のあて先にメールするには？ ［ASP.NET］特定のサービスを無効にするには？ このリストは、（株）デジタルアドバンテージが開発した 自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。 generated by

「.NET TIPS」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）