FLASHer のためのSinatra入門 [導入編]

このエントリーを含むはてなブックマーク

はじめに

こんにちはーFlasherのみなさん。
すっかりRuby記事ばっかりなのに、いまだにブログ訪問者の大半はFlasherらしいこのブログ。
久しぶりにFLASHerのための記事を書けそうです。

今日とりあげるのはSinatraというRubyで作られた超シンプルなフレームワークです。

  1. require 'rubygems'
  2. require 'sinatra'
  3. get '/hi' do
  4.   "Hello World!"
  5. end


このたった5行で、http://localhost:4567/hi にアクセスすると「Hello World!」というテキストを返すAPIサーバがローカルPC上に完成するんだ。

Rubyがわからなくたって、どんなプログラムなのか一目瞭然だ。シンプルだと思わないかい？
今回はこのシンプルなSinatraを使って、あなたのFlash案件に使える、より本番に近いモックAPIサーバを作ろうというお話です。

この記事の対象者

  • サーバ連携なFlash案件が多いFlash開発者
  • Macユーザー（Windowsの人もインストール編以外は共通だと思う）
  • ターミナル.appが少しは触れる人（達人じゃなくてよい）

今回のシチュエーション

FlashでToDo管理アプリを作ることになった。 まずはToDoの一覧をサーバからXMLで取得して、それが表示できるようにしたい。

APIのURLと、どんなXMLが返ってくるかは決まっているんだけど、肝心なサーバ側は完成していないどころかリリース前日には出来上がるスケジュールらしい。 こうなったら自分でダミーAPIを用意しながら開発するしかない。

ToDo一覧を取得するAPIと返ってくるXMLのサンプル
http://example.jp/api/todolist

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <todos>
  3.   <todo id=‘1’>
  4.     <title>牛乳を買って帰る</title>
  5.   </todo>
  6.   <todo id=‘2’>
  7.     <title>企画書を提出する</title>
  8.   </todo>
  9. </todos>


効率よく開発を進めるためのFlashの設計

さて、上記のようなシチュエーションの場合、ローカルにダミーXMLを配置して、それを読み込むというのが一番てっとり早い開発手法なんだと思う。 しかしAPIの種類が100種類とか膨大だったり、同じAPIでもパラメーターで返却のバリエーションが変わるとか想定すると、本番により近いAPIモックを用意できるのがベストだ。

例えば本番APIとドメイン以外まったくURLが同じという構成があったら、Flashの設計も随分綺麗になると思うよ。

  1. import flash.events.*;
  2. import flash.net.*;
  3.  
  4. // 実行環境をSWF起動時に設定する
  5. var environment:String = 'development';
  6.  
  7. // 設定
  8. var setting:Object = {
  9.   production: { // 本番用
  10.     host: 'http://example.jp'
  11.   },
  12.   development: { // 開発用
  13.     host: 'http://localhost:4567'
  14.   }
  15. };
  16.  
  17. // ローダー
  18. var request:URLRequest = new URLRequest(setting[environment].host.concat('/api/todolist'));
  19. var loader:URLLoader = new URLLoader();
  20. loader.addEventListener(Event.COMPLETE, function(e:Event) {
  21.   trace(URLLoader(e.target).data);    
  22. });
  23. loader.load(request);


上のコードでは、「environment」変数の中身がdevelopmentなら開発環境用のAPIを、productionなら本番環境用のAPIをリクエストする。

インストール編

ここからはSinatraをインストールする話

Sinatraでモックサーバを作るには最低でも以下のようなものが要求されるよ、がんばれ！

  • ターミナル.appの操作
  • ruby
  • rubygems
  • sinatra

まずはターミナル.appを起動しよう。Macの「/アプリケーション/ユーティリティ/」に入っている。これを機会にターミナルをDockに入れておいたら周りの同僚に一目おかれるかもね。

起動したらRubyが入っているか確認だ。MacOS10.4くらいからRubyは最初から入っているはず。最新の10.6ならRubyのバージョンは1.8.7のはずだ。

  1. % ruby -v
  2. ruby 1.8.7 (2008-08-11 patchlevel 72) [universal-darwin10.0]


次にrubygemsのバージョン確認。rubygemsはrubyのサードアプリをインストールしたりするための管理ツールだよ。 今回のSinatraもそうだし、有名なRuby on Railsもrubygemsでインストールできるんだ。

  1. % gem -v
  2. 1.3.5


ひょっとしたらバージョンは1.3.5より低いかも。そのままでも大丈夫だと思うけどアップグレードするなら。

  1. % sudo gem update —system


でアップグレードしよう。

Sinatraのインストール

さて、RubyGemでお目当てのSinatraをインストールする。ついでに他にも使えそうなライブラリをいれておくよ。

  1. sudo gem install sinatra haml rack shotgun


パスワードを要求されるので、自分のアカウントのパスワードを入力しよう。するとインストールが始まる。

お疲れ様でした！あとはダミーサーバを書くだけだ。

さぁ、SinatraでダミーAPIを書くんだ！

ここまで準備ができたら、Flashプロジェクトの中にでもsinatra用のディレクトリ「mock」を作る。全体の構成はこんな感じにしたよ。

mockディレクトリの中にapp.rbというテキストファイルを作成して、エディタで以下のように書く。

  1. require 'rubygems'
  2. require 'sinatra'
  3. get '/api/todolist' do
  4.   'Hello World!'
  5. end


そして、ターミナルでプロジェクトのmockディレクトリまで移動してサーバを起動しよう。 え？ターミナルでmockディレクトリまで移動ができない？ デスクトップにmytodosプロジェクトフォルダがあるなら

  1. % cd ~/Desktop/mytodos/mock


と入力してエンターだ。

それでもわからなかったら、「cd 」とだけ書いて、移動したいフォルダをターミナルへドラッグドロップでもオッケー。

そしてサーバ起動だ。

  1. % ruby app.rb


こんな感じになってるかな？

なっていれば、君による君だけのAPIサーバが起動した。おめでとう！ そうそう、サーバを止めたい時はCTRL+Cを押すんだよ。

ブラウザで http://localhost:4567/api/todolistアクセスしてみよう。

すごい！完璧だ！サーバサイドエンジニアになれるんじゃないか？！

モックAPIを作る

僕らの目的は「Hello World」を表示することじゃない。XMLを返すサーバを作ることだから先を急ぐよ。

mock/app.rbをちょっと変更してきちんとXMLを返すようにしてみるよ

  1. require 'rubygems'
  2. require 'sinatra'
  3. get '/api/todolist' do
  4.   content_type 'xml'
  5.   erb :api_todolist
  6. end


そして、mock/views/api_todolist.erb というファイルを作成して

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <todos>
  3.   <todo id='1'>
  4.     <title>牛乳を買って帰る</title>
  5.   </todo>
  6.   <todo id='2'>
  7.     <title>企画書を提出する</title>
  8.   </todo>
  9. </todos>


としよう。

ブラウザでアクセスすれば、今度はXMLが返ってくるようになったはずだ。

簡単に説明すると、「content_type ‘xml’」でXMLとしてレスポンスを返すように定義して、 「erb :api_todolist」で views/api_todolist.erbというテンプレートファイルを出力してね。

ということになる。ERBというのはRubyでスタンダードなテンプレートシステムだ。
参考：http://www.druby.org/ilikeruby/erb.html

もうちょっと高度なことをする

これじゃローカルにXMLを置くのと変わらないよドラえもーん、と嘆いている、そこののび太くん。 ERBを使えば繰り返しが可能なので、例えば999件のXMLを返したい時はこうだ。

mock/views/api_todolist を修正

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <todos>
  3.   <% 999.times do |id| %>
  4.   <todo id='<%= id %>'>
  5.     <title>牛乳を買って帰る <%= id %></title>
  6.   </todo>
  7.   <% end %>
  8. </todos>


数値.times do ~ end で数値分繰り返し処理されるのはRuby独特の書き方だ。

さらに高度なことをする

単純な繰り返しじゃいやだ！自分でレコードを作りたい！でもデータベースは嫌だ！ OK。ならこうだ。

mock/app.rb修正

  1. require 'rubygems'
  2. require 'sinatra'
  3. get '/api/todolist' do
  4.   # TODOの配列を作る %w はRubyの配列式
  5.   @todos = %w{
  6.     コンビニに寄る
  7.     ジャンプを立ち読みする
  8.     牛乳をレジへ持っていく
  9.     178円払う
  10.     店員さんにありがとうと言う
  11.     牛乳を買って帰る
  12.     牛乳を冷蔵庫へしまう
  13.   }
  14.   content_type 'xml'
  15.   erb :api_todolist
  16. end


mock/views/api_todolist.erb修正

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <todos>
  3.   <% @todos.each_with_index do |todo, id| %>
  4.   <todo id='<%= id %>'>
  5.     <title><%= todo %></title>
  6.   </todo>
  7.   <% end %>
  8. </todos>


app.rbで設定した@todosをテンプレートからアクセスしている。
@todos.each_with_index do |element, index| ~ end という形もRubyでは日常茶飯事に使われる配列の繰り返し方。

さいごに

ざっとFLASHerがSinatraを使ってモックサーバを用意する方法を書いてみた。

Sinatra側のコードは書き換える度にサーバを再起動する必要があるから注意してね。 それがめんどくさい場合はshotgunコマンドを使うと、再起動の心配は必要無くなる。

  1. % shotgun app.rb


駆け足だったので、もっと具体的なことをしたいとか、これはどーやって実現するんだ？という質問があったら、コメントなりメールなり@func09なりへどうぞ。

それから、モックサーバを作るためにRubyにハマりすぎると、僕みたいにFlasherを引退してまでRubyを書くことになっちゃうからほどほどにね。

enjoy flash and ruby!

参考URL: AS3でちょっとしたサーバサイドのプログラムが必要になる時に毎回書くのが面倒なので、適当に sinatra で書いた

Posted in flash, ruby, sinatra, 未分類 at 2月 16th, 2010. Trackback URI: trackback
Tags: , , ,

2 Responses to “FLASHer のためのSinatra入門 [導入編]”

  1. 2月 17th, 2010 at 1:31 PM #[sinatra for flasher] 大量のダミーデータを返すAPIを作る - func09

    [...] FLASHer のためのSinatra入門 [導入編] [...]

  2. 2月 18th, 2010 at 2:05 PM #KRAY » Blog Archive » FLASHerのためのSinatra入門

    [...] FLASHer のためのSinatra入門 [導入編] http://www.func09.com/wordpress/archives/764 [...]

Leave a Reply