Flex + Ruby on Rails + MySQL 連携メモ

Tags: Flex, MySQL, Rails, Ruby

データベースの情報をRailsでXMLファイルに整形しFlexに読み込ませる。Model-View-Controller(MVC)パターンで言うとMCをRailsに、VをFlexに担当させる。今までデータベースへのアクセスはPHPスクリプトを書いて行っていたが、Railsを用いるとその面倒くさいテンプレート書きが必要なくなるので非常に快適。用いたのはFlexSDK 3.0, Ruby 1.8.6, Rails 1.2.6, MySQL 5.0.5。Railsは最新の2.xを用いても特に問題ないと思う。以下の例ではデータベースに格納されたの本の詳細(title, price, description)をRailsで管理、FlexのGridDataに読み込ませている。

Rails側

Railsで適当なプロジェクト(ここではflex_connect)を作成。コマンドラインより

rails flex_connect

データベースを作成。MySQLコマンドラインより

mysql> create database flex_connect_development;

Railsプロジェクト内config/database.ymlを設定(今回はdevelopmentのみ使用)。

development:
  adapter: mysql
  database: flex_connect_development
  username: root
  password: [YOURPASSWORD]
  socket: /tmp/mysql.sock

次にモデルを作成(ここではBook)。Railsプロジェクト内に移動してコマンドラインより

ruby script/generate model Book

Railsプロジェクト内、db/migrate/xxx_create_books.rb(xxxの部分はrailsのバージョンによって異なる)を以下のように修正。

class CreateBooks < ActiveRecord::Migration
  def self.up
    create_table :books do |t|
      t.column :title, :string
      t.column :price, :float
      t.column :description, :text
    end
  end

  def self.down
    drop_table :books
  end
end

コマンドラインより

rake migrate

これによりDB: flex_connect_developmentにテーブルbooks(title, price, description)が作成される(MySQLを直接触らなくてよい！)。テーブル内に適当にテストデータを入力しておく(title=”Flex3″, price=”54.99″, description=”Adobe developer library”, etc.)。Railsから入力してやるのが簡単だがここでは割愛。

次にコントローラーを作成。コマンドラインより

ruby script/generate controller Book

Railsプロジェクト内、app/controllers/book_controller.rbに以下のメソッドを定義。

class BookController < ApplicationController
  def make_xml
    @books = Book.find(:all)
    render :xml => @books.to_xml
  end
end

これで”http://localhost:3000/book/make_xml”にアクセスするとデータベース情報がXML形式で出力される。例えばこんな感じ。

<?xml version="1.0" encoding="UTF-8"?>
<books>
  <book>
    <description>Ruby on Rails made easy.</description>
    <id type="integer">3</id>
    <price type="float">34.99</price>
    <title>Rails Solutions</title>
  </book>
  <book>
    <description>The Adobe developer library guide for rich interner application developers</description>
    <id type="integer">4</id>
    <price type="float">44.99</price>
    <title>Flex 3 Cookbook</title>
  </book>
  <book>
    <description>Friends of ED Adobe lerning library.</description>
    <id type="integer">5</id>
    <price type="float">54.99</price>
    <title>The Essential Guide To Flex 3</title>
  </book>
</books>

Flex側

“http://localhost:3000/book/make_xml”の内容をDataGridに表示させるソースは以下の通り。上記RailsのXMLファイルを出力するURLをロードしてDataGridに格納している。詳細は割愛。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                    layout="absolute" creationComplete="init(event)">

    <mx:DataGrid dataProvider="{_bookList}">
        <mx:columns>
            <mx:DataGridColumn dataField="title" />
            <mx:DataGridColumn dataField="price" />
            <mx:DataGridColumn dataField="description" />
        </mx:columns>
    </mx:DataGrid>

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.rpc.http.HTTPService;
            import mx.rpc.events.ResultEvent;
            import mx.rpc.events.FaultEvent;
            import mx.controls.Alert;
            import flash.net.URLRequestMethod;

            [Bindable]
            private var _bookList:ArrayCollection

            private function init(e:Event):void{
                var req:HTTPService = new HTTPService();
                req.url = "http://localhost:3000/book/make_xml";
                req.method = URLRequestMethod.POST;
                req.send();
                req.addEventListener(ResultEvent.RESULT,onResult);
                req.addEventListener(FaultEvent.FAULT,onFault);
            }

            private function onResult(e:ResultEvent):void{
                _bookList = e.result.books.book;
                e.target.removeEventListener(ResultEvent.RESULT,onResult);
                e.target.removeEventListener(FaultEvent.FAULT,onFault);
            }

            private function onFault(e:FaultEvent):void{
                Alert.show("Could not connect the database.","ERROR");
                e.target.removeEventListener(ResultEvent.RESULT,onResult);
                e.target.removeEventListener(FaultEvent.FAULT,onFault);
            }
        ]]>
    </mx:Script>
</mx:Application>

まとめ

今回はRails側にMVCパターンのMCを担当させた。同様にしてRails側のコントローラーに適切なメソッド(データの追加・削除 etc.)を追加することで専用のURLを簡単に作成できるので、Flex側は必要なURLにアクセスするだけでよくなった。

7 月 30, 2008

1 Comment

[Books] Ruby on Rails - up and running

Tags: Books, Rails, Ruby

結論: Railsのバージョンの違いは致命的。この本は扱っているRailsのバージョンが1.1と古いので買うべからず。買うならRails 2.xと明記した最近の本を。

O’reillyでRuby on Railsを扱っている本がこれしかなかったので盲目的に買ったが失敗。扱ってるRailsのバージョンが古すぎて(1.x)、現行のRails 2.xだと四苦八苦することが多い。本自体は150ページと割と薄めで、一つのRailsアプリケーションを題材に進行していくため、(頭に入るかどうかは別として)よみすすめやすくはある。ただしRuby自体の教本ではないので(それほど親切に説明はない)Rubyのリファレンスは必要。僕は平行してThe Ruby Programming Languageを読んだ。

Railsのバージョンアップは初学者にはかなりの障壁になるようなので、もし手持ちの本がRails 1.xを扱っているようであれば、Railsのバージョンを落として学ぶか(仕組みを覚えてから2.xに移行)、2.xを扱う本を買った方が効率がよいと思う。以下Rails 1.x > 2.xの違いについて参考にしたページ。

追記 2008/08/08

レーダーチャートによる評価レビューはこちら

7 月 27, 2008

Comment

[Books]ActionScript 3.0 Design Patterns

Tags: ActionScript, Books, DesignPatterns

プログラムの設計思想と具体的な王道設計パターンについて豊富に例を挙げつつ説明してる本。内容自体はどのプログラミング言語(OOP)にも共通なのだけど、わざわざActionScriptを題材にしている点が貴重。ActionScriptに馴染みのある人は親近感を持ちやすいのではないかと思う。章ごとに各デザインパターンの性質、最低限の骨組み、簡単な例、少し複雑な例と書かれていて段階的に読めるからわかりやすかった。さらに章内容が独立しているので、例えばStrategy > Composite > Observer > Model-View-Controllerパターンと必要な部分だけを読むことで短期間でwebアプリケーション制作に役立つ設計技術が習得できそうな感じがする。個人的にはデザインパターン云々よりもそれ以前のOOPに関する知識・思想の理解が深まったのが収穫。タイトルのActionScriptとDesign Patternはおまけかな。

良書だと思うけど、難点も結構有り。デザインパターンの説明をする際に、日常生活の例を挙げて説明することが多いのだが、これが非常にわかりにくい(日本人的でないというのもあるかも)。まずは必要最低限のプログラムの骨格を提示するところから始まる方がよかったのではないかと思う。さらにプログラム全体のフローチャート図がたくさん挙げられるが、図の説明が全くないので理解不能。図は非常にわかりやすそうな絵柄をしているだけに残念で仕方ない。最後に、ソースの誤字脱字が半端なく多い(10-20どころではない)。typoというレベルではなく、引数が書いてなかったりさらには一行きれいさっぱり書かれていなかったりするものもありちょっとびびる。

こういう弱点もふまえてオススメの読み方としては、

第一章のOOP基本概念を読む
各デザインパターン章の「Minimalist example」以降を読む(それ以前は前置きが長い)
「Minimalist Example」で理解できなければそれ以前の概念部分を読む
各章最後部はプログラムが複雑になっていくだけなので、自分が必要だと思ったところまでで適当に切り上げる(逆に言うと説明不足ということはないほど例題が豊富)

追記 2008/07/19

最終章「13. Symmetric Proxy Pattern」は未読。

追記 2008/07/20

完読。

追記 2008/08/08

レーダーチャートによる評価レビューはこちら

7 月 18, 2008

1 Comment

[DesignPatterns]疑似privateコンストラクタで勇者を唯一作成

Tags: ActionScript, DesignPatterns

Design PatternsのSingletonパターンついてのメモ。例えば以下のような勇者クラス(Yusha.as)を作成したとする。

package singleton{
    public class Yusha{
        public function sayHello():void{
            trace("僕が勇者だ");
        }
    }
}

RPGにおいて勇者は一般に物語中に一人しか存在しない。従って以下のように複数勇者が作成できるアプリケーション(Main.as)はRPG的に問題がある。

package {
    import flash.display.Sprite;
    import singleton.Yusha;

    public class Main extends Sprite{
        public function Main(){
            var y1:Yusha = new Yusha();
            var y2:Yusha = new Yusha();
            var y3:Yusha = new Yusha();

            y1.sayHello();//僕が勇者だ
            y2.sayHello();//僕が勇者だ
            y3.sayHello();//僕が勇者だ
        }
    }
}

そこでSingletonパターンを利用する。例えばCreating Mashups with Adobe Flex and AIRでは以下のような方法でインスタンスを唯一作成する方法が紹介されている。

package singleton{
    public class Yusha{

        private static var _instance:Yusha;

        public static function getInstance():Yusha{
            if (Yusha._instance == null){
                Yusha._instance = new Yusha();
            }
            return Yusha._instance;
        }
    }
}

この方法だとgetInstance()メソッドを使う限り勇者は複数作成されないが、以下のように直接Yushaクラスを作成された時に対処できなくなる。

//In Main.as
var y:Yusha = new Yusha();

Yushaクラスのコンストラクタをprivateにできれば一件落着だけど、ActionScript 3.0ではコンストラクタをprivateにできない。そこで同パッケージ内にDummyクラスを用意、それをYushaクラスの引数としてYushaクラスのコンストラクタにパッケージ外部からアクセスできないようにする(疑似private化)。

//Yusha.as
package singleton{
    public class Yusha{

        private static var _instance:Yusha;

        public function Yusha(d:Dummy){
        }

        public static function getInstance():Yusha{
            if (Yusha._instance == null){
                Yusha._instance = new Yusha(new Dummy());
            }
            return Yusha._instance;
        }

        public function sayHello():void{
            trace("僕が勇者だ");
        }
    }
}

//Dummy.as
package singleton{
    internal class Dummy{
    }
}

これによりYushaクラスは作成時にDummyクラスを引数とし、さらにDummyクラスはsingletonパッケージ外部からアクセス不能なので、MainクラスからのYushaクラスの呼び出しはgetInstance()メソッドからのみ可能となる。

//In Main.as
var y1:Yusha = new Yusha();//Error
var y2:Yusha = new Yusha(new Dummy());//Error
var y3:Yusha = Yusha.getInstance();//OK

これにより勇者は唯一無二作成されることになりました。めでたしめでたし。

[関連記事]
Tanablog: 複数版 Singleton パターン

追記:2008/07/11

Dummyクラスはsingletonパッケージ内であればアクセス可能なので、記事タイトルの「疑似private」は「疑似internal」とした方が良いかもしれない。AS3で１ファイルに複数のクラスを定義する方法 - てっく煮ブログのように、DummyクラスをYushaクラスファイル内部に定義することで、Dummyクラスへのアクセスをprivate化することもできる。

7 月 9, 2008

Comment

[Books]The Essential Guide to Flex 3

Tags: Books, FLASH, Flex

この本読んでFlexの基礎を習得したのだから文句いうなと言われそうだけど、払った金額は知識増と相殺、プラスαでストレスをもらったのでむかついている。

短所

例えば良書Colin Moock - Essential ActionScript 3.0とessentialの意味合いが異なりすぎてまぎらわしい。”The essential Guid to Flex 3″のessentialはオライリーで言うところのの「はじめての(Lerning)」だ。Colin Moock本のノリで買った人はたぶんキレる。
「心配するな！これについては後ほど詳しく説明するから！」とどこのチャプターで説明するか書いておらず不親切(既出の情報に関する言及も同様)。さらにこのように書いているにも関わらず、最後まで言及していない題材もある(例えばどのようにデータをセーブするのか教えると言いつつ教えない)。各チャプターを独立して書いているのかしらないけど教本として全体の整合性がとれてない。
「心配するな！」とやたら連発されて逆に不安になる。
コードを断片化・小出しにして説明していくので思考が分断される。例えば同じ出版社の良書Keith Peters - Foundation Actionscript Animation: Making Things Moveは骨格->肉付けという風にコードを説明していくスタイルをとっていて内容が頭に入ってきやすい。同じ出版社の同じ値段の本とは思えない。

長所(強いて挙げるなら)

索引がまあまあしっかりしている
技術書にしては安い(安売りされている)
サンプルで一章丸々読める。(Sample Chapter)

追記 2008/08/08

レーダーチャートによる評価レビューはこちら。文句言ってるわりにリファレンスとしてちょくちょく読んでたりする。

7 月 5, 2008

Comment

Flex + Ruby on Rails + MySQL 連携メモ

Rails側

Flex側

まとめ

[Books] Ruby on Rails - up and running

追記 2008/08/08

[Books]ActionScript 3.0 Design Patterns

追記 2008/07/19

追記 2008/07/20

追記 2008/08/08

[DesignPatterns]疑似privateコンストラクタで勇者を唯一作成

追記:2008/07/11

[Books]The Essential Guide to Flex 3

短所

長所(強いて挙げるなら)

追記 2008/08/08

About

Search

iPhone Apps

Recent entries

Tags

AIR

Flash

Recommended

Find It

Credits