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

MacOSX Leopard + Flex + PHP + MySQLの設定メモ 1

Tags: Flex, Mac, MySQL, PHP

MacOSXのローカルサイト(http://localhost/~USERNAME/)でFlexアプリケーションからPHP経由でMySQLと通信するまでに必要な諸設定について。文章が長くなったので今回はFlexとの連携直前の下準備まで。

About my Mac

MacOSX 10.5.3 (Intel Core 2 Duo)

必要なもの

3と4は必須ではないけど有った方が断然便利。

Apache(webサーバー)
MySQL(データベース)
phpMyAdmin(MySQLを操作するwebアプリケーション)
PEARパッケージ(PHP用モジュール)
Flexアプリケーションが動作する環境(Flex Builder, Flex SDK etc.)

1. Apache

最初からMac OSXにはインストールされているので、PHPが動作するように設定をするだけ。ただし設定ファイル(httpd.conf)の在処がOSX 10.5から変更されている(参考: Mac OS X 10.5 Leopard で PHP を動作させるには − kazumich.log)。

/etc/httpd/httpd.conf (OSX 10.4) -> /etc/apache2/httpd.conf (OSX 10.5)

httpd.conf内の以下の行のコメントアウト#をはずす。

#LoadModule php5_module      libexec/apache2/libphp5.so

以下のコマンドでApacheを再起動しhttpd.confの設定を反映させる。(この後何回も行う重要なコマンド)

sudo apachectl restart

次にMacのシステム環境設定 > ネットワーク共有からWeb共有を有効にする。これで自分のローカルサイト(http://localhost/~USERNAME/)でPHP5が動作するようになる。試しに「~/Sites/」直下に以下を記述したファイルをindex.phpとして保存(Finderだと「書類 > サイト」)。

<?php echo ‘Hello world’; ?>

ブラウザでhttp://localhost/~USERNAME/index.phpにアクセスして「Hello world」と表示されたらOK。

2. MySQL

MySQL :: MySQL Downloadsより本体をダウンロード。Mac OSX 10.5用には32bit環境用(x86)と64bit環境用(x86_64)が用意されているので必要な方を。僕はx86_64をダウンロードした。PowerPCの場合はPowerPC専用と明記されたものを使わないとダメかもしれません。

MySQL本体とStartupItemsの両方をインストール。ターミナルより以下を指定でMySQLサーバが起動。

sudo /Library/StartupItems/MySQLCOM/MySQLCOM start

試しにコマンドラインで以下を指定してMySQLと通信できればOK。

mysql -u root

MySQLが起動していないとこういうエラーが出る。

Can't connect to local MySQL server through socket '/tmp/mysql.sock'

rootユーザーにパスワードを設定する場合はMySQLと通信した状態でターミナルより以下のように指定。

mysql> UPDATE user SET password = PASSWORD('********') WHERE user = 'root';

これで次回のMySQLログイン時にパスワード入力が必要になる。アクセスは「mysql -u root -p」。

3. phpMyAdmin

必須ではないけどGUIとしてスタンダードだしある方が断然便利。phpMyAdmin | MySQL Database Administration Tool | www.phpmyadmin.netより最新のパッケージをダウンロード。ただのPHPファイル群なのでMacがどうこうってものはない。解凍したフォルダ名を例えば「phpMyAdmin」にして例えば「~/Sites/」直下にフォルダごと移動(Finderだと「書類 > サイト」)。

フォルダ内のconfig.inc.phpファイル(またはそれに準じた名前のファイルを”config.inc.php”に修正)内に以下のような記述を加える。Authentication Typeはパスワード制にした(cockieを使う方法もある)。パスワードは先ほどrootユーザーに付与したもの。extentionの項はMySQL 4.1.2以上用のmysqli (improved MySQL)とした(mysqlでもok)。これでwebブラウザからhttp://localhost/~USERNAME/phpMyAdmin/にアクセスすると常時rootユーザーでMySQLと通信することになる。

$cfg['pmaAbsoluteUri'] = 'http://localhost/~USERNAME/phpMyAdmin/';
$cfg['Servers'][$i]['auth_type'] = 'config';
$cfg['Servers'][$i]['user'] = 'root';
$cfg['Servers'][$i]['password'] = '******';
$cfg['Servers'][$i]['extension'] = 'mysqli';

毎回パスワードを要求させるのであれば上記の一部を以下のように記述。

$cfg['Servers'][$i]['auth_type'] = 'http';
$cfg['Servers'][$i]['user'] = '';
$cfg['Servers'][$i]['password'] = '';

次にPHPが参照するMySQLソケットパスを実際のMySQLソケットパスとに合わせてやる。この時点でhttp://localhost/~USERNAME/phpMyAdmin/にアクセスしてphpMyAdminが動作するのであれば通信が正しく行えている状態なので修正は必要ない。MySQLのソケットパスはMySQLと通信した状態でターミナルより確認できる。

mysql> status;

ソケットパスは僕の場合以下のようになっていた。

UNIX socket: /tmp/mysql.sock

次にPHPが参照しているMySQLソケットパスは、phpinfo()で確認できる。先ほど”Hello world”を書いたindex.phpに以下のように記述して実行すればok。

<?php phpinfo(); ?>

表示される情報の下の方にPHPが参照しているmysql(mysqli)ソケットパスが表示されているはず。僕の場合は以下のようになっていた。

MYSQL_SOCKET		/var/mysql/mysql.sock
mysql.default_socket	no value

MYSQLI_SOCKET		/var/mysql/mysql.sock
mysqli.default_socket	no value

これらを修正するためにphp.iniファイルを修正する。コマンドラインより

sudo pico /etc/php.ini

ファイル内部のMySQL (MySQLi)の項目にMySQLの実際のソケットパス(ここでは/tmp/mysql.sock)を記述。

mysql.default_socket = /tmp/mysql.sock
mysqli.default_socket = /tmp/mysql.sock

Apacheを再起動(sudo apachectl restart)してphpinfo()で確認する。先ほど”mysql.default_socket no value (mysqli.default_socket no value)”となっていた箇所が設定できていればOK。phpMyAdminにアクセスできるはず。

4. PEAR

これも絶対必須ではないけど、例えばDBモジュールだとデータベースのバージョン変化だったりに柔軟に対応できるので便利。まずインストーラーのダウンロード。ターミナルより

sudo curl http://pear.php.net/go-pear | php

どこにインストールするか聞かれるので番号を押しながら設定(参考: 素晴らしき哉、人生！: Mac OS 10.5にpearをインストール)。デフォルトだと「~/Documents」直下にインストールになる(参考: Mac OS Xで動かす軽量プログラミング言語 − ＠IT)。僕は前者に従って以下のように設定した。

1. Installation prefix ($prefix) : /usr/share/PEAR
2. Temporary files directory : $prefix/temp
3. Binaries directory : /usr/bin
4. PHP code directory ($php_dir) : $prefix
5. Documentation base directory : $php_dir/docs
6. Data base directory : $php_dir/data
7. Tests base directory : $php_dir/tests

上記の例の場合pearコマンドは「/usr/bin/」にインストールされるので、自分の環境設定ファイルにパスを通しておくと後々便利。

pico ~/.profile

ファイル内に以下のように記述。

export PATH="$PATH:/usr/bin"

PEARパッケージ内の情報は以下のコマンドで取得できる。

pear list

DBパッケージをインストール。上記の例の場合「/usr/share/PEAR/」配下にDB.phpがインストールされる。

sudo pear install -a DB

PEARパッケージをインストールした時点で「/etc/php.ini」の最後尾に以下のような記述が追加されているはず(なければ追加記述する)。

;***** Added by go-pear
include_path=".:/usr/share/PEAR"
;*****

php.iniファイルを反映させてから(sudo apachectl restart)、試しにDB.phpをインクルードしてみる。適当なphpファイルを作り以下のように記述してから実行。

<?php require_once(‘DB.php’); ?>

エラーが出なければパスが通っている証拠。これでFlex以外の環境は整いました。次回へつづく

6 月 22, 2008

2 Comments

Flex + Ruby on Rails + MySQL 連携メモ

Rails側

Flex側

まとめ

MacOSX Leopard + Flex + PHP + MySQLの設定メモ 1

About my Mac

必要なもの

1. Apache

2. MySQL

3. phpMyAdmin

4. PEAR

About

iPhone Apps

Paid Apps

Free Apps

iPad Apps

Paid Apps

Search

Recent entries

AIR

Flash

Find It

Credits