RailsとAIRで作成する画像のRevolver表示（後篇）

Rails ActionWebServiceとAIRの連携による画像のRevolver表示

　Ruby on Railsにて作成したアクションウェブサービスで野球選手マスタの情報を公開し、AIRからそれを呼び出して画像と共に選手の説明を表示するアプリケーションを作成します。本稿を通じて、Ruby on Railsによるアクションウェブサービスの作成方法、AIRからアクションウェブサービスを呼び出す方法、AIRで画像を表示する方法を学ぶことができます。後篇ではAIR部分を実装します。

はじめに

　本稿は「RailsとAIRで作成する画像のRevolver表示」の後篇記事です。前篇もあわせて参照してください。

• RailsとAIRで作成する画像のRevolver表示（前篇）

対象読者

• ActionScriptやAIR、Rubyのプログラマー
• RIAのシステム構築を担当するSE

必要な環境

ソフトウェア名	バージョン
Ruby	1.86
Rails	1.2.5
ImageMagick	6.3.7 Q8
RMagick	2.0.0
Flex SDK	3

AIRでウェブサービスと連携して画像を表示するアプリケーションの作成 その1

BitmapLoaderクラスの作成

　まず、最初にJPEGなどの画像表示を行うBitmapLoaderクラスを作成します。

BitmapLoader.as

package {
  import flash.display.Sprite;
  import flash.display.Loader;
  import flash.events.Event;
  import flash.net.URLRequest;
  import flash.display.Bitmap;
  import flash.display.BitmapData;
  import flash.geom.Matrix;
  import flash.geom.Rectangle;
  import flash.text.TextField;

  public class BitmapLoader extends Sprite{
    private var _loader:Loader = new Loader();
    private var _scale:Number;
    private var _image_url:String;
    private var _image:Bitmap;

    public var _shita:Number;

    public function BitmapLoader(image_url:String, scale:Number=1){
      _image_url = image_url;
      _scale = scale;

      _loader.contentLoaderInfo.addEventListener(Event.COMPLETE,
           onComplete);
      _loader.load(new URLRequest(_image_url));
    }

    public function onComplete(event:Event):void{
      var loadedImage:Bitmap = Bitmap(_loader.content);

      // ビットマップデータを作成し、画像をロードします。
      var bitmap:BitmapData
            = new BitmapData(loadedImage.width*_scale,
                                           loadedImage.height*_scale,
                                           false, 0xffffffff);
      // 拡大率を指定します。
      var translateMatrix:Matrix = new Matrix();
      translateMatrix.scale(_scale, _scale);

      bitmap.draw(loadedImage, translateMatrix);

      // 画像を画面上に表示します。
      _image = new Bitmap(bitmap);
      addChild(_image);
    }
  }
}

　_loader.load(new URLRequest(_image_url))によりURLで指定された画像をロードします。ロードの完了時にaddEventListener(Event.COMPLETE, onComplete)で指定したメソッドであるonCompleteが実行され、指定された拡大率で画像を画面上に表示できます。

三角形のボタンの作成

　次に、三角形のボタンを表示するために、座標を表すPointクラスとそれを使用した左三角形ボタンであるLeftTriangleButtonクラスおよびRightTriangleButtonクラスを作成します。

Point.as

package {
  public class Point {
    public var x:Number = 0;
    public var y:Number = 0;

    public function Point(x:Number = 0, y:Number = 0) {
      this.x = x;
      this.y = y;
    }

    public function get screenX():Number {
      return x;
    }

    public function get screenY():Number {
      return y;
    }
  }
}

　Pointクラスは、2次元の座標をx、yで表している単純なクラスです。

LeftTriangleButton.as

package{
  import flash.display.*;
  import flash.events.*;

  import mx.controls.Alert;

  public class LeftTriangleButton extends Sprite {

    public var button:SimpleButton;

    public function LeftTriangleButton() {
      // SimpleButtonによりボタンを作成します。
      button = new SimpleButton();

      var points:Array = new Array();
      points[0] = new Point(  0,   0);
      points[1] = new Point( 50,  20);
      points[2] = new Point( 50,  50);

      // ボタンの状態（通常、押下など）により
      // 色を変化させる定義を行います。
      button.upState
        = createTriangle(points[0], points[1], points[2], 0x00FF00);
      button.overState
        = createTriangle(points[0], points[1], points[2], 0xFFFFFF);
      button.downState
        = createTriangle(points[0], points[1], points[2], 0xCCCCCC);
      button.hitTestState = button.upState;

      // ボタンを表示します。
      addChild(button);
    }

    // 与えられた座標に従い三角形を描画します。
    private function createTriangle(pointA:Point, pointB:Point,
       pointC:Point, color:uint):Shape {
         var triangle:Shape = new Shape();
         triangle.graphics.beginFill(color);
         triangle.graphics.moveTo(pointA.screenX, pointA.screenY);
         triangle.graphics.lineTo(pointB.screenX, pointB.screenY);
         triangle.graphics.lineTo(pointC.screenX, pointC.screenY);
         triangle.graphics.lineTo(pointA.screenX, pointA.screenY);
         triangle.graphics.endFill();

      return triangle;
    }
  }
}

RightTriangleButton.as

package{
  import flash.display.*;
  import flash.events.*;

  import mx.controls.Alert;

  public class RightTriangleButton extends Sprite {

    public var button:SimpleButton;

    public function RightTriangleButton() {
      // SimpleButtonによりボタンを作成します。
      button = new SimpleButton();

      var points:Array = new Array();
      points[0] = new Point(  0,  30);
      points[1] = new Point( 60,   0);
      points[2] = new Point(  0,  65);

      // ボタンの状態（通常、押下など）により
      // 色を変化させる定義を行います。
      button.upState
         = createTriangle(points[0], points[1], points[2], 0xFF33CC);
      button.overState
         = createTriangle(points[0], points[1], points[2], 0xFFFFFF);
      button.downState
         = createTriangle(points[0], points[1], points[2], 0xCCCCCC);
      button.hitTestState = button.upState;

      // ボタンを表示します。
      addChild(button);
    }

    // 与えられた座標に従い三角形を描画します。
    private function createTriangle(pointA:Point,
          pointB:Point, pointC:Point, color:uint):Shape {
        var triangle:Shape = new Shape();
        triangle.graphics.beginFill(color);
        triangle.graphics.moveTo(pointA.screenX, pointA.screenY);
        triangle.graphics.lineTo(pointB.screenX, pointB.screenY);
        triangle.graphics.lineTo(pointC.screenX, pointC.screenY);
        triangle.graphics.lineTo(pointA.screenX, pointA.screenY);
        triangle.graphics.endFill();

      return triangle;
    }
  }
}

　LeftTriangleButtonクラスやRightTriangleButtonクラスは、SimpleButtonクラスを利用することで、ボタンの機能を実現しています。SimpleButtonクラスには upState、 overState、 downState の状態が定義されており、その説明は下記の通りです。

• upStateはボタンの通常の状態を表します。
• overStateはボタンの上にマウスが置かれている状態を表します。
• downStateはボタンが押下された状態を表します。

　上記の3つの状態に対して異なる色を指定することで、ボタンとしての見かけの機能を実現できます。