Bookmarkを新規追加すると、エラーのダイアログが表示されます。

でも、最新のリストを再取得してみるとBookmarkの追加自体は成功しています。

つまり、新規追加の処理自体は成功しているのに、誤ってエラーダイアログが表示されるということです。

原因

HTTPステータスコード「201 Created」の扱いについてRailsとFlexにずれがあることが原因です。一般的なWebアプリにおいて、通常クライアントのリクエストが成功した場合はHTTPステータスコード「200 OK」が返されますが、RailsのRESTfulアプリにおいて新規生成（PUT）が成功したときは、201が返されるようです。ところが、Flexが201を受け取るとエラーとして処理してしまいます。

これをFlexのバグとして報告しましたが、微妙なとこではあります。というのは、201はHTTPのPUTメソッドが成功したときに返されるものと定義されるようですが、Flex（Flash Player）ではPUTメソッドは送信できません（GETとPOSTのみ可）。これは一般的なブラウザでも同じです。そこでRailsのRESTfulアプリではパラメータに"_method=PUT"が含まれたPOSTメソッドでPUTメソッドの代用ができることを利用して擬似的にPUTを実現しています。つまり実際Flexから送信されているのはPOSTメソッドなのでそのレスポンスにおいてFlexが201を考慮していないのは仕方が無いとも言えます。

ただ、今後FlexがRESTfulアプリのクライアントとして重要な地位を占めるためにも、これはぜひ対応してほしいとこです。FlexからＰＵTやDELETEをプロキシサーバなしに送信可能になったらなおよいですが。それはFlash Playerの制限で無理そうです。

回避方法

Flex側でHTTPServiceの代わりに、URLLoaderを使って、HTTPStatusEventを取って（この場合もioErrorになる）201の場合、例外処理をする手もあるが、ブラウザによっては取れない場合もあるらしいので、サーバ側で対応した方がいいでしょう。

つまり、現在201を返しているとこを修正して200を返すようにします。修正するファイルは[RAILS_ROOT]\app\controllers\にあるbookmarks_controller.rbです。これを以下のように修正します。

# bookmarks_controller.rb抜粋

  # POST /bookmarks
  # POST /bookmarks.xml
  def create
    @bookmark = Bookmark.new(params[:bookmark])

    respond_to do |format|
      if @bookmark.save
        flash[:notice] = 'Bookmark was successfully created.'
        format.html { redirect_to(@bookmark) }
        #format.xml  { render :xml => @bookmark, :status => :created, :location => @bookmark } # 201を返す
        format.xml  { render :xml => @bookmark, :location => @bookmark } # 200を返す
      else
        format.html { render :action => "new" }
        format.xml  { render :xml => @bookmark.errors, :status => :unprocessable_entity }
      end
    end
  end

修正完了

これでRESTfulアプリの基本機能である、一覧取得（GET）、新規追加（PUT）、更新（POST）、削除（DELETE）がエラーなくできるようになりました。

次回は、このアプリをレンタルサーバのXREAにアップしてアプリを公開するとこまでやりましょう。

ちなみに今回は使いまんせがFlex Builder 3 beta3のダウンロードはここからできます。

準備 （Flex 3 beta3 の SDK）

Adobe LabsのFlex 3 SDKダウンロードページからDownload Flex 3 SDK 3 beta 3 for all platformsをダウンロード＆解凍して適当なディレクトリに配置します。

僕の場合は、D:\flex\の中に入れました。

さて、コマンドラインで使えるように、パスを通しましょう。

Windows XPの僕のマシンの場合、環境変数PATHにD:\flex\flex3sdk_b3_121207\bin\をセットしました。

準備 （Flash Player）

Flash Playerのバージョンを確認。バージョン確認ページ。

9.0.28未満の場合は、新しいバージョンのFlash Playerをインストール必要があります。 開発時はDebug版のFlash Playerの方が便利なので、バージョンの問題がない場合も含めて最新（現在は9.0.115）のDebug版Flash Playerをインストールしておくといいでしょう。

さっきダウンロードしたSDKの中にそのインストーラが入ってます。 僕の場合、D:\flex\flex3sdk_b3_121207\runtimes\player\以下にあります。

Flexを知らない人のために

FlexにはボタンやチェックボックスなどのUIコンポーネントや、通信のためのコンポーネントなどアプリケーションのインタフェースを作る上で便利なものがいっぱい用意されてます。

どんなものがあるかはFlex 3 Compon Entexplorerを見るのがいいでしょう。UIコンポーネントはCSSによるスタイル変更も可能で、それはFlex Style Explorerで動的に確認できます。

ちなみにこのStyle Explorerはソース付きで、画面上で右クリックしてメニューの「View Source」でソースの閲覧＆ダウンロードができます。

Flexの実装

Flexのソースファイルを置くところはどこでもいいのですが、僕の場合は、D:\rails\rails2restful\にflex_srcというフォルダを作りました。

その中にRails2RESTful.mxmlというテキストファイルを作り、以下のコードを入力します。文字コードはUTF-8。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
		initialize="listBookmarks()">
	<mx:Script>
	<![CDATA[
		import mx.controls.Alert;
		import mx.events.CloseEvent;
		import mx.rpc.AsyncResponder;
		import mx.rpc.AsyncToken;
		private function listBookmarks():void
		{
			listBookmarksHS.url = "/bookmarks.xml";
			listBookmarksHS.method = "GET";
			var call:AsyncToken = listBookmarksHS.send();
			call.addResponder(new AsyncResponder(
				function (result:Object, token:Object = null):void
				{
					Alert.show(result.toString(), "listBookmarks 成功");
				},
				function (error:Object, token:Object = null):void
				{
					Alert.show(error.toString(), "listBookmarks エラー");
				},
				call
			));
		}
		private function createBookmark():void
		{
			var request:XML = 
				<bookmark>
					<name>{ nameTextInput.text }</name>
					<url>{ urlTextInput.text }</url>
				</bookmark>;
			createBookmarkHS.contentType = "application/xml";
			createBookmarkHS.url = "/bookmarks.xml";
			createBookmarkHS.method = "POST";
			var call:AsyncToken = createBookmarkHS.send(request);
			call.addResponder(new AsyncResponder(
				function (result:Object, token:Object = null):void
				{
					Alert.show(result.toString(), "createBookmark 成功", 4, null, 
						function (event:CloseEvent):void
						{
							listBookmarks();
						});
				},
				function (error:Object, token:Object = null):void
				{
					Alert.show(error.toString(), "createBookmark エラー");
				},
				call
			));
		}
		private function updateBookmark():void
		{
			var request:Object = {};
			request["_method"] = "PUT";
			request["bookmark[name]"] = nameTextInput.text;
			request["bookmark[url]"] = urlTextInput.text;
			updateBookmarkHS.url = "/bookmarks/" + dataGrid.selectedItem.id + ".xml";
			updateBookmarkHS.method = URLRequestMethod.POST;
			var call:AsyncToken = updateBookmarkHS.send(request);
			call.addResponder(new AsyncResponder(
				function (result:Object, token:Object = null):void
				{
					Alert.show(result.toString(), "updateBookmark 成功", 4, null, 
						function (event:CloseEvent):void
						{
							listBookmarks();
						});
				},
				function (error:Object, token:Object = null):void
				{
					Alert.show(error.toString(), "updateBookmark エラー");
				},
				call
			));
		}
		private function destroyBookmark():void
		{
			var request:Object = {};
			request["_method"] = "DELETE";
			destroyBookmarkHS.url = "/bookmarks/" + dataGrid.selectedItem.id + ".xml";
			destroyBookmarkHS.method = URLRequestMethod.POST;
			var call:AsyncToken = destroyBookmarkHS.send(request);
			call.addResponder(new AsyncResponder(
				function (result:Object, token:Object = null):void
				{
					Alert.show(result.toString(), "destroyBookmark 成功", 4, null, 
						function (event:CloseEvent):void
						{
							listBookmarks();
						});
				},
				function (error:Object, token:Object = null):void
				{
					Alert.show(error.toString(), "destroyBookmark エラー");
				},
				call
			));
		}
	]]>
	</mx:Script>
	
	<mx:HTTPService id="listBookmarksHS" useProxy="false" showBusyCursor="true" />
	<mx:HTTPService id="createBookmarkHS" useProxy="false" showBusyCursor="true" />
	<mx:HTTPService id="updateBookmarkHS" useProxy="false" showBusyCursor="true" />
	<mx:HTTPService id="destroyBookmarkHS" useProxy="false" showBusyCursor="true" />
	
	<mx:Button label="最新" top="8" right="8" click="listBookmarks()" />
	<mx:DataGrid id="dataGrid" left="8" top="40" right="8" bottom="120"
		dataProvider="{ listBookmarksHS.lastResult.bookmarks.bookmark }"/>
	<mx:Form left="8" right="8" bottom="8">
		<mx:FormItem label="名前">
			<mx:TextInput id="nameTextInput" text="{ dataGrid.selectedItem.name }" />
		</mx:FormItem>
		<mx:FormItem label="URL">
			<mx:TextInput id="urlTextInput" text="{ dataGrid.selectedItem.url }" />
		</mx:FormItem>
		<mx:FormItem direction="horizontal">
			<mx:Button label="新規追加" click="createBookmark()" />
			<mx:Button label="更新" click="updateBookmark()" />
			<mx:Button label="削除" click="destroyBookmark()" />
		</mx:FormItem>
	</mx:Form>
</mx:Application>

コマンドラインでコンパイル

D:\rails\rails2restful>mxmlc flex_src\Rails2RESTful.mxml
Loading configuration file D:\flex\flex3sdk_b3_121207\frameworks\flex-config.xml

This beta will expire on Sat Mar 15 00:00:00 JST 2008.
D:\rails\rails2restful\flex_src\Rails2RESTful.swf (321711 bytes)

ブラウザで確認するための準備

できたSWFファイルをRailsのpublicフォルダにコピー。 僕の場合は、D:\rails\rails2restful\public\以下にコピー。

同フォルダにSWFを表示するためのhtmlファイル、flex.htmlを作ります。以下はソース。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body { margin: 0px; overflow:hidden }
</style>
</head>
<body scroll="no">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        id="Rails2RESTful" width="100%" height="100%"
        codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
        <param name="movie" value="Rails2RESTful.swf" />
        <param name="quality" value="high" />
        <param name="bgcolor" value="#869ca7" />
        <param name="allowScriptAccess" value="sameDomain" />
        <embed src="Rails2RESTful.swf" quality="high" bgcolor="#869ca7"
            width="100%" height="100%" name="Rails2RESTful" align="middle"
            play="true"
            loop="false"
            quality="high"
            allowScriptAccess="sameDomain"
            type="application/x-shockwave-flash"
            pluginspage="http://www.adobe.com/go/getflashplayer">
        </embed>
    </object>
</body>
</html>

ブラウザで確認

http://localhost:3000/flex.htmlを開く。

データ取得ＯＫ。 データの新規追加、更新、削除も動作確認。

ほぼ問題なし、だけど、データの新規追加のときだけ、エラーが発生する。 これについては、次回で。

つづく。