SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

サーバサイドではじめるJavaグラフィック講座

Javaアプレット/サーブレット間のイメージ通信

サーバサイドではじめるJavaグラフィック講座 5

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

Webで使われるJava技術には、サーブレットの他に「アプレット」があります。アプレットとサーブレットの間でのイメージを利用する方法について考えてみましょう。

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

はじめに

 Webの世界で「Java」と言うと、サーバサイドでの利用がまず思い浮かびます。が、この他に、クライアントサイドで使われる「アプレット」も重要な役割を果たします。今回は、このアプレットと、サーバサイドのプログラム(サーブレット)の間でイメージを利用するための基本について説明しましょう。

対象読者

  • Javaの基本およびJavaによるWeb開発の基礎(JSP/サーブレット程度)をマスターしている人。
  • グラフィック関連のプログラミング経験があまりない人。
  • Javaのグラフィック処理を学び直したい人。

アプレットでイメージを扱う

 アプレットと言うと「Javaプラグインが必要になる」「クライアント側でしか動かない」「ローカルボリュームにアクセスできないなど制約が大きい」「起動に時間がかかる」「動作が遅い」……などなど、正直いってどうもあまり評判がいいものとはいえないところがあります。が、ハードウェアの進歩により、起動時間や動作速度などはほぼ実用レベルで動くようになっており、もう少し見直されてもよいのではないでしょうか。

 アプレットは、「Webサイトで、Javaを使ってGUIを作成し提供する」という場合、非常に重要です。Swingを使えばHTMLなどよりも高度なGUIを提供できますし、サーバと連動してインタラクティブな動作を行わせることもできます。最近ではAjaxのような形態でダイナミックなページを作成する手法も出てきましたが、アプレットも決して廃れることはないように思えます。

 アプレットの基本については、ここでは省略します。まずは、アプレットでイメージを利用する際の基本的な扱い方から簡単に説明しておくことにしましょう。ここでは、サンプルとして「マウスでドラッグし描画できるアプレット」を用意し、そのイメージをサーバに送信して保存したり、またサーバからイメージを送ってもらって表示したりできるようにしてみます。

 まずは、アプレットからです。ここでは、ImageMakerというクラスとしてアプレットを用意することにします。またイメージの描画用にImagePanelというパネルクラスを作成し利用することにしましょう。

ImageMaker.java
package jp.tuyano.codezine;

import java.awt.*;
import java.awt.event.*;
import java.awt.image.*;
import java.io.*;
import java.net.*;
import javax.swing.*;
import javax.imageio.*;
import javax.imageio.stream.*;

public class ImageMaker extends JApplet
        implements ActionListener {
    private static final long serialVersionUID = 1L;
    
    private ImagePanel panel;
    private JLabel msg;
    private JButton b1,b2;
    private String servpath;
    
    public void init(){
        servpath = this.getCodeBase() + "app2serv";
        this.setLayout(new BorderLayout());
        msg = new JLabel("ドラッグして描画できます。");
        this.add(msg);
        panel = new ImagePanel();
        this.add(panel,BorderLayout.CENTER);
        JPanel rowpanel = new JPanel();
        b1 = new JButton("SAVE");
        b1.addActionListener(this);
        rowpanel.add(b1);
        b2 = new JButton("LOAD");
        b2.addActionListener(this);
        rowpanel.add(b2);
        this.add(rowpanel,BorderLayout.SOUTH);
    }
    
    public void actionPerformed(ActionEvent ev){
        if (ev.getSource() == b1) saveImage(ev);
        if (ev.getSource() == b2) loadImage(ev);
    }
    
    // イメージをサーバに送って保存する
    private void saveImage(ActionEvent ev){}
    // イメージをサーバから受け取り表示する
    private void loadImage(ActionEvent ev){}
    }
}

class ImagePanel extends JPanel
        implements MouseMotionListener {
    private static final long serialVersionUID = 1L;
    
    private BufferedImage img;
    private Graphics2D g;
    
    public ImagePanel(){
        this.addMouseMotionListener(this);
    }
    
    public void mouseDragged(MouseEvent ev) {
        g.setPaint(Color.BLACK);
        g.fillOval(ev.getX()-5,ev.getY()-5,10,10);
        repaint();
    }
    
    public void mouseMoved(MouseEvent ev) {}
    
    public void paint(Graphics g2){
        if (img == null){
            img = new BufferedImage(this.getWidth(),
                    this.getHeight(),BufferedImage.TYPE_INT_RGB);
            g = img.createGraphics();
            g.setPaint(Color.WHITE);
            g.fillRect(0,0,this.getWidth(),this.getHeight());
        }
        g2.drawImage(img,0,0,this);
    }
    
    public BufferedImage getDrawImage(){
        return img;
    }
    
    public void setDrawImage(BufferedImage im){
        g.drawImage(im,0,0,this.getWidth(),this.getHeight(),
                0,0,im.getWidth(),im.getHeight(),this);
        repaint();
    }
}
表示用HTMLのサンプル
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type"
                content="text/html; charset=windows-31j">
        <title>Applet2Servlet</title>
    </head>
    <body>
        ※アプレット=サーブレット間通信のサンプル<br>
        <applet code="jp.tuyano.codezine.ImageMaker.class"
                width="300" height="250">
        </applet>
    </body>
</html>
マウスでドラッグして描画できるアプレット。2つのボタンで、イメージをサーバと送受させる。
マウスでドラッグして描画できるアプレット。2つのボタンで、イメージをサーバと送受させる。

 基本的なAWT/Swingの使い方がわかっていれば、そう説明することはないでしょう。アプレットは、基本的にjava.applet.Appletクラスか、javax.swing.JAppletクラスを継承して作成します。

 ここではJButtonを2つ用意し、それぞれsaveImage/loadImageというメソッドを呼び出すようにしてあります。これらのメソッドに、イメージをサーバに送信したり、サーバから受信する処理を用意すればいいわけです。なお、ここではJDK 5以降での利用を前提に考えてあるため、コンポーネントの組み込みはthis.getContentPane().addではなく、単にthis.addで行っています。

 実際にイメージを扱っているImagePanelクラスでは、BufferedImageGraphics2Dインスタンスをprivateフィールドとして用意し、これに描画を行うようにしています。マウスでドラッグをしたら、ここに描画を行ってからBufferedImageを丸ごとパネルに描画するわけです。

 こうしたイメージを表示するタイプのアプレットでは、このように「表示用のイメージをフィールドとして持たせ、必要に応じてこれを書き換えて画面に描画する」という方式をとります。一般に「オフスクリーンバッファリング」あるいは「ダブルバッファリング」と呼ばれる方式です。Swingの場合はそれほど重要ではありませんが、AWTの場合には画面のちらつきを抑えるためにもダブルバッファリングは必須でしょう。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
サーブレットの準備

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
サーバサイドではじめるJavaグラフィック講座連載記事一覧

もっと読む

この記事の著者

掌田 津耶乃(ショウダ ツヤノ)

三文ライター&三流プログラマ。主にビギナーに向けたプログラミング関連の執筆を中心に活動している。※現在、入門ドキュメントサイト「libro」、カード型学習サイト「CARD.tuyano.com」を公開...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/1175 2007/04/12 08:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング