雨谷の庵

[0326] へろーわーるどバナー (2003/01/15)
※バナー雑文祭


[Home]
バナー雑文祭ということで、バナーについて少し書いてみたいと思う。

とりあえず、要するにバナーというのはWebに掲げる看板のようなものだというくらいの知識や
認識は、日常的にWebを利用しているであろう読者諸賢にしてみれば馴染みのものなのだろう。
この、看板を掲げるための方法としては幾つかがあり、その幾つかについては既に誰かが
どこかで書き綴っているであろうから、私はそれとは別途の手法について書いてみよう。

さて。
ご存知のように、バナーとして最も一般的なものは、画像を用いて看板とする方法である。
Webの仕組みでは画像は至極一般的なものであるし、またデジタル画像は加工も容易で
あることから、この手法が最も普及するのは至極当然のなりゆきだろう。
画像を用いない方法としてはHTMLのテーブルタグを利用したものや、スタイルシートを応用して
テキストそのものを着色するようなものもあったりはするが、あまり一般的では無い。
また画像を利用したバナーについては、予め用意した固定の画像ファイルをサーバに置いておき、
それをWebページにイメージタグを用いて貼りつける方法が一般的である。
別種の方法として、Webページの呼び出しのたびに動的に画像を生成して表示するという
方法もあるが、それにはあまり一般的では無い技術を駆使する必要があることもあり、
手軽に誰でも利用可能な手法、ということにはなりそうにも無い。
まあ、要するにバナーには固定の画像ファイルを用いるのが一番良いということである。

ただ、そこで話が終わってしまうと面白く無いので、今回は動的に画像を生成するタイプの
バナーについて、少しだけ紹介してみようと思ったりもする。
この、動的に画像を生成する仕組みにはCGI(もしくはSSI)という仕組みを利用する。
通常、CGIといえば掲示板であるとかカウンターであるとか、そういうものを実現するための
ものだが、これをバナーに応用するというのも可能であるということは容易にご想像頂けるだろう。
例えば複数の画像をサーバに予め用意しておき、CGIが呼び出されるごとにその呼び出しに
応じた画像(もしくは画像の一部)を送り返すものや、地図検索サービスなどのように、サーバに
保持しているデータをもとに画像を生成して送り返すものなどは、すぐに思いつくだろう。
今回は実際にそういうものを作ってみたいと思う。

さて。
CGIはプログラムであるから、それを書き下す為の言語を選定しなければならないのだが、
今回はJavaを用いてみることにする。
というか、私個人の技術的な理由から、Java以外でこれを書くのは無理ではあるのだが。
ただJava2SDK1.4以降、Javaで画像関係を扱うための手段が充実してきたので、そういうものを
試してみるという観点からしても、今回Javaを使うというのは良いかと思ったりもする。
JavaにはServletという、CGIと類似の機能をより簡易に実現する技術も用意されているので、
そこのところは非常に便利だったりもするのだが。
まあとりあえず、ちょっと実際に書いてみよう。以下がそれだ。

[BannarServlet.java]
===============================================================================
import java.awt.*;
import java.awt.image.BufferedImage;
public class BannarServlet extends javax.servlet.http.HttpServlet {
 public void doGet (
  javax.servlet.http.HttpServletRequest request,
  javax.servlet.http.HttpServletResponse response
 ) throws javax.servlet.ServletException, java.io.IOException {
  response.setContentType("image/png");
  java.io.OutputStream out = response.getOutputStream();
  try{
   BufferedImage img = new BufferedImage(200, 40, BufferedImage.TYPE_INT_RGB);
   this.paint(img.createGraphics());
   javax.imageio.ImageIO.write(img, "png", out);
  }finally{
   out.flush();
   out.close();
  }
 }
 private void paint(Graphics g){
  g.drawString("Hello World", 20, 20);
 }
}
===============================================================================

実際にコレを実行すると、以下のような画像が表示されることになる。
http://amado.acz.jp/amado/img/bannar0.png
Java版、Servletによるへろーわーるどバナーの完成である。
20行程度でこういうことが出来るのは非常に有り難い限りである。先人達に感謝。
具体的に上記のコードの意味を説明するのは面倒なので割愛するとして、実際に上記の
中で画像のお絵描きをしている部分というのは以下の3行である。

 private void paint(Graphics g){
  g.drawString("Hello World", 20, 20);
 }

Graphicsというのが画像のためのキャンパス、drawStringというのがそのキャンパスに
文字を書き込むための指示であると思えば、ほぼ間違い無い。
要するに、このpaint関数の部分を書き換えてやれば、バナーの絵柄を自由に描き上げることが
可能であると、そういうことである。
例えばこうだ。

===============================================================================
 private void paint(Graphics g){
  g.setColor(new Color(240, 240, 255));
  g.fillRect(0, 0, 200, 40);
  g.setColor(new Color(200, 200, 215));
  g.fillRect(5, 5, 200, 40);
  g.setColor(new Color(220, 220, 235));
  g.fillRect(5, 5, 190, 30);
  g.setFont(new Font("Serif", Font.ITALIC + Font.BOLD, 18));
  g.setColor(new Color(185, 185, 200));
  g.drawString("Zatsu-bun Soku-ho", 22, 27);
  g.drawLine(22, 30, 167, 30);
  g.setColor(new Color(100, 100, 200));
  g.drawString("Zatsu-bun Soku-ho", 20, 25);
  g.drawLine(20, 28, 165, 28);
 }
===============================================================================

結果はこうなる。
http://amado.acz.jp/amado/img/bannar1.png
ここまでやれば、一応バナーとしての体裁は整ったと言っても過言ではないようにも思う。
しかしこれだけではせっかくJavaで作ったのに、動的生成バナーとしての面白味が無い。
固定の表示を生成するだけなら、前述したように画像ファイルを用いる方が良いからだ。
やはり、表示される度に何かしらが異なっているように、プログラムを書くべきだろう。
取りあえず、以下では表示される度にバナーの色合いが変わるように書き換えてみた

===============================================================================
 private void paint(Graphics g){
  int red  = (int)(15.0 * Math.random());
  int green = (int)(15.0 * Math.random());
  int blue = (int)(15.0 * Math.random());
  g.setColor(new Color(240 + red, 240 + green, 240 + blue));
  g.fillRect(0, 0, 200, 40);
  g.setColor(new Color(200 + red, 200 + green, 200 + blue));
  g.fillRect(5, 5, 200, 40);
  g.setColor(new Color(220 + red, 220 + green, 220 + blue));
  g.fillRect(5, 5, 190, 30);
  g.setFont(new Font("Serif", Font.ITALIC + Font.BOLD, 18));
  g.setColor(new Color(185 + red, 185 + green, 185 + blue));
  g.drawString("Zatsu-bun Soku-ho", 22, 27);
  g.drawLine(22, 30, 167, 30);
  g.setColor(new Color(100 + red * 6, 100 + green * 6, 100 + blue * 6));
  g.drawString("Zatsu-bun Soku-ho", 20, 25);
  g.drawLine(20, 28, 165, 28);
 }
===============================================================================

paint関数の冒頭で、ランダムに表示色を決定しているところが、動的であるわけだ。
このバナーはリロードする度に色が変わる。
実際、何度かリロードさせてみた結果はこちらだ。
http://amado.acz.jp/amado/img/bannar2.png
http://amado.acz.jp/amado/img/bannar3.png
他にも、季節や時刻によって表示を変えたり、訪問者によって表示を切り換えたりなど、
様々なことができそうではある。
何しろ使っているのがJavaであるから、Javaで実現可能な全ての技術を注ぎ込めるわけで、
そこらへんの可能性という点に関しては他の手法の追随を許さない、といったところではある。
今回は雑文速報を主催としたバナー雑文祭向けにこの文章を起こしているわけであるが、
雑文速報的なことを考えるなら、速報の簡易表示を画像に埋めこんだり、本日の報告数を
画像の隅に表示させたりといったことをやってみるというのも良いかも知れない。
とまあ、色々と応用だけは可能なのだが、問題はそれを誰が作るのか、という点に尽きると
いうかなんというか私が作るのは面倒臭いなぁとかなんとか誰か作らないかなぁとか
思ってみたりもして、結局このまま放りっぱなしで今回は終わってしまうのであった。

雨谷の庵は今日も雨。
< Back |List| Next >
管理者:徳田雨窓