func09 » flash

[sinatra for flasher] 大量のダミーデータを返すAPIを作る

haga — Wed, 17 Feb 2010 04:30:41 +0000

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

前回の続きです。

今回は大量のダミーデータを返すAPIを作ってみます。
要件としては

住所録を返すAPI
本番サーバはPHPなので、URLもそれに合わせる
100件程度、ランダムで返す
XMLの内容は、名前、メール、メッセージ、性別、国

という感じです。

Haml

今回はテンプレート言語にHamlを使っていきます。
タグ構造をインデントと簡略構文でガシガシ書いていけるので、慣れると気持ちいいです。

日本Hamlの会
http://haml.ursm.jp/

Getting Started Haml
http://haml.ursm.jp/getting-started

ざっくりと説明すると

!!! XML
%items
%item(id="1") こんにちは
%item(id="2") さようなら

というHamlマークアップが

version='1.0' encoding='utf-8' ?>
>
id="1">こんにちは>
id="2">さようなら>
>

に変換されます。
雰囲気だけ掴んでもらって、詳しくはチュートリアルやドキュメントを御覧下さい。

Forgeryでサンプルデータの作成から解放される

forgeryというgemライブラリで、煩瑣なサンプルデータ作成とはおさらばできる。

sudo gem install forgery

でインストールして、使い方は

require 'forgery'
puts Forgery(:internet).email_address #=> tmccoy@topiclounge.biz
puts Forgery(:internet).email_address #=> charper@voolia.net

こんな感じ。標準でサンプルデータの辞書がいろいろ入っていて、上記のコードはメールアドレスのサンプルデータをランダムに生成している。

今回はForgeryを積極的に使う。

コード

いきなりですが最終型のコード

require 'rubygems'
require 'sinatra'
require 'forgery'

before do
content_type 'xml' # 常にContent-Typeを 'application/xml'に
end

get '/api/getFriends.php' do
haml :get_friends_php
end

__END__

@@ layout
!!! XML
= yield

@@ get_friends_php
%friends
- rand(100).times do |i|
%friend(id="#{i}")
%name
%first_name= Forgery(:name).first_name
%last_name= Forgery(:name).last_name
%email= Forgery(:internet).email_address
%message= Forgery(:lorem_ipsum).paragraph
%gender= Forgery(:personal).gender
%country= Forgery(:address).country

今回は1ファイルで完結させてみた。

ブラウザで http://localhost:9393/api/getFriends.php （ポートはshotgunデフォルト）にアクセスすると、下みたいなXMLが取得できる。

beforeフィルター

常にXMLを返すAPIなので、リクエストを受け付けて処理する前にContent-Typeを’application/xml’にするように設定。Sinatraのbeforeフィルターという機能で実現。

before do
content_type 'xml' # 常にContent-Typeを 'application/xml'に
end

URLに対する処理

/api/getFriends.phpというパスに対して処理したい場合、Sinatraのgetメソッドに続いて、そのパスを定義する。 do ~ end ブロックの中に処理を記述。

この場合Hamlでget_friends_phpテンプレートを出力する処理のみだね。

パスに普通に「.php」とか使えているところに注目してもらいたい。要するにマッチすればなんでも良いので「.pl」でも「.cgi」でも「.do」でも本番と同じパスを表現できるはずだ。

get '/api/getFriends.php' do
haml :get_friends_php
end

Hamlによるテンプレート

Sinatraには「ファイル内テンプレート」という機能があって、テンプレートをわざわざ別ファイルとして用意しなくても、ソースファイルの最後（END以降）にテンプレートを書いても良いことになっている。

テンプレート名は「@@index」とか「@@layout」とか先頭に「＠＠」を付けて置くこと。

__END__

@@ layout
!!! XML
= yield

@@ get_friends_php
%friends
- rand(100).times do |i|
%friend(id="#{i}")
%name
%first_name= Forgery(:name).first_name
%last_name= Forgery(:name).last_name
%email= Forgery(:internet).email_address
%message= Forgery(:lorem_ipsum).paragraph
%gender= Forgery(:personal).gender
%country= Forgery(:address).country

レイアウト

layout という名前のテンプレートがあれば、Sinatraはすべてのテンプレートのレイアウト、つまり枠として利用する。

「!!! XML」はXMLのドキュタイプ宣言を簡略表現で、「= yield」は、ここにメインテンプレートの内容を流し込むよーという処理。

get_friends_php テンプレート

@@ get_friends_php
%friends
- rand(100).times do |i|
%friend(id="#{i}")
%name
%first_name= Forgery(:name).first_name
%last_name= Forgery(:name).last_name
%email= Forgery(:internet).email_address
%message= Forgery(:lorem_ipsum).paragraph
%gender= Forgery(:personal).gender
%country= Forgery(:address).country

XMLのタグ表現を「%タグ名」とインデント階層でマークアップしていく。
「- rand(100).times do |i|」は、以降の下層インデントの部分をランダムで100件まで繰り返させている。

あとはForgeryの住所辞書や名前辞書を使ってサンプルデータを埋め込むよ。

さいごに

今回はFlashで使えそうな大量のダミーデータAPIをさくっと作ってみたよ。慣れれば10分もあれば作れるので、下手に実データを作るより楽なはず。

今後は

HTTP POSTでデータを送信するような場合
JSONの場合

など書いてみようかと。

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

haga — Tue, 16 Feb 2010 08:33:01 +0000

はじめに

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

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

require 'rubygems'
require 'sinatra'
get '/hi' do
"Hello World!"
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

牛乳を買って帰る

企画書を提出する

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

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

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

import flash.events.*;
import flash.net.*;

// 実行環境をSWF起動時に設定する
var environment:String = 'development';

// 設定
var setting:Object = {
production: { // 本番用
host: 'http://example.jp'
},
development: { // 開発用
host: 'http://localhost:4567'
}
};

// ローダー
var request:URLRequest = new URLRequest(setting[environment].host.concat('/api/todolist'));
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, function(e:Event) {
trace(URLLoader(e.target).data);
});
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のはずだ。

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

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

% gem -v
1.3.5

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

% sudo gem update —system

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

Sinatraのインストール

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

sudo gem install sinatra haml rack shotgun

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

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

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

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

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

require 'rubygems'
require 'sinatra'
get '/api/todolist' do
'Hello World!'
end

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

% cd ~/Desktop/mytodos/mock

と入力してエンターだ。

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

そしてサーバ起動だ。

% ruby app.rb

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

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

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

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

モックAPIを作る

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

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

require 'rubygems'
require 'sinatra'
get '/api/todolist' do
content_type 'xml'
erb :api_todolist
end

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

牛乳を買って帰る

企画書を提出する

としよう。

ブラウザでアクセスすれば、今度は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 を修正

<% 999.times do |id| %>

牛乳を買って帰る <%= id %>

<% end %>

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

さらに高度なことをする

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

mock/app.rb修正

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

mock/views/api_todolist.erb修正

<% @todos.each_with_index do |todo, id| %>

<%= todo %>

<% end %>

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

さいごに

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

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

% shotgun app.rb

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

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

enjoy flash and ruby!

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

mixiアプリでの外部通信のあれこれを調べた

haga — Thu, 19 Nov 2009 07:14:25 +0000

久しぶりにmixiアプリの事を調査したよ。

多分日頃からOpenSocial開発をしてる人には当たり前のことなんだろうけど
ぐぐってもわからなかったので。。

iframeで外部ページを埋め込めるか？

mixiアプリはそもそもiframe内にgadget.xmlをキャッシュされた状態で起動する。

つまり、mixi.jp内のページにmixi-platform.comにキャッシュされたコンテンツを表示していて
さらにその中で別ドメインなコンテンツを表示できるのか？

結論としてはできる。ただ外部ページからではOpenSocialAPIに接触しようがないから、不便は不便。

iframeの中にfacebookアプリを埋め込んだりもできたよ。
でもmixiアプリ上で認証させるのは多分規約違反。

iframeで外部コンテンツを表示するっていう作法も、外部サイトへの遷移の規約に従ってない気がするのでアウトかな？

どうでしょう？

Flashから外部コンテンツとの通信

OpenSocialのFlash埋め込みAPIを使って、配置したSWFから
URLLoaderなんかを使って普通にクロスドメインな通信ができるかチェック。

これもできる。相手のサーバから拒否されてなければ。

JavaScriptはXHRを使えないから（ひょっとして使える？）、makeRequestするわけだけど
Flashは普通に通信できるなら、mixiアプリは開発しやすさで言えばFlashで作るに限るってことかなぁ。

makeRequestはoAuthの署名リクエストが使えるので、通信にセキュリティを保証したい場合は有効だと思う。

嫁がFlashアニメで賞金を荒稼ぎしている件

haga — Tue, 26 May 2009 03:05:58 +0000

filmoというCM作成サイトがあって

うちの嫁さんが出す作品出す作品必ず賞を取っている

嫁（@ai1017）・・恐ろしい子・・

追記：2011/12/20
嫁はお仕事募集中です。
http://gaya-anime.com/works
是非ご相談を

Flashが埋め込まれているURLを調べる

haga — Sat, 30 Aug 2008 13:21:59 +0000

ブログパーツのようなFlashで、いろいろなサイトに埋め込まれるSWFの埋め込まれているページのURLを取得する方法。

import flash.external.*;
var locationHref:String = String(ExternalInterface.call("function(){return location.href}"));

ExternalInterface.callの１番目の引数は、呼び出すJavaScriptのメソッド名という事になっていますが

ExternalInterface.call("myMethod","args1","args2");

は単純に以下のようなJSが実行されているものと考えられるので

eval("myMethod").apply(window,["args1","args2"]);

まぁ、ようするに無名関数をFlash側で引数としてあげればいいと。

[works] eyeVioがHDビデオに対応

haga — Mon, 30 Jun 2008 12:41:09 +0000

eyeVioがHD動画に対応してます。

http://eyevio.jp/

今回もいつも通り、動画のプレイヤーと、JavaScriptあたりをやりました。

FlashPlayerは7で作っているのでExternalInterfaceクラスが使えないわけですが、それでも一生懸命JavaScriptと連携しています。

SWFからダイナミックにHTMLのレイアウトを弄ったりして、なかなか楽しいです。

今回途中で非同期処理の管理に嫌気がさしたのでAS2用のスレッドライブラリを作りました。

AS3ではSparkの「そうめん」のような素晴らしいライブラリがあるんですが、AS2向けでシンプルなのは見つからなかったので自作で

[js] new Sequence( new Wait(1), new XMLLoad(‘hoge.xml’), new Wait(1), new FunctionJob(this,this.normalfunc) ).start(); [/js]

こんな感じで書けるように。

もともとのソースコードのコールバック関数をそのまま弄らずシーケンス処理に組み込めるように関数をひとつのスレッドとして利用できるようにしたのが正解でした。

非同期の整理のつもりでスレッドライブラリを作りましたが、メソッドが集中しやすいコントローラー系クラスの処理分散にも効果を発揮してウハウハ。

時代遅れのAS2なので、気合いをいれて拡張していくつもりはサラサラないけど、気が向いたら公開したいですね。

[works]eyeVioのリニューアル

haga — Wed, 12 Mar 2008 12:00:59 +0000

ソニーの動画共有サイト「eyeVio」がリニューアルされました。動画のプレイヤー部分を引き続き担当しています。それからHTMLコーディングとCSSも、ベース段階でやっています。

今回のリリースから、フリーランスでやってます。

wmodeとallowFullScreen

haga — Wed, 27 Feb 2008 16:16:34 +0000

Flashの話。

Flashでフルスクリーンを使いたい場合は埋め込み用のEmbed of Objectタグに

allowFullScreen='true'

を追加しておく必要がありますよね。

さらに、FlashにHTMLのdivなんかをオーバレイさせたい場合は

wmode='transparent'

にしますよね。

でも、wmodeに何か設定がされているとフルスクリーンにできないみたいなんです・・・。

つまり、Flashの上にオーバレイさせたりするコンテンツで、フルスクリーンモードは使えないってわけ。週明けにリリースなのに、まじ勘弁ですよ・・・。

–

ちなみに、JavaScriptで動的にwmodeを切り替えるというのも当然考えた。けどIE以外のブラウザでは、embedタグを弄ろうものなら、容赦なくSWFがリロードされるよ。 SWFのリロードとかクリティカルすぎて問題外だよ。

Flash純正のフルスクリーンは諦めて、すでに使っているブラウザいっぱいにFlashを広げる手法でいく。これメンドイんだよなぁ。

[flash]俺のやり方

haga — Wed, 20 Feb 2008 11:33:14 +0000

ActionScript2での開発の話だけど、大抵どんなプロジェクトでもディレクトリ構造が同じになってきた。ちょっと晒してみる。

他の人はどういう風なのかな？

com
- func09
  - event(イベント系の親クラスが入ってる)
  - logging(俺ロギングAPI)
  - utils(俺便利クラス群)
  - :myproject(プロジェクト名)
    - bussines(共通で使うロジックをここに)
    - compornents(UICompornentを継承したUIはここに)
    - model（モデル系）
    - service（外部とのインターフェイスクラス。大抵シングルトンで実装）
    - views(作ったコンポーネントをがっちゃんこするクラス。コンポーネント同士のメディエイターの役割だとか、リサイズ時の制御だとか)

僕はあんまりモーションモーションした案件がないので、CairnGormなんかを参考にしてます。 UIパーツはほぼ全てUICompornentを継承してコンパイルしておきます。こうするとテストもしやすいし、おのずと結合が緩くなりますので。バイディングもできるしね。いいことばかりじゃないけどね。

さて仕事仕事。

コリン・ムック「今から始めるActionScript 3.0」に行ってきました

haga — Tue, 15 Jan 2008 13:20:14 +0000

※2008/01/24に一部加筆しました。 この記事の値のコピーについて誤った記述がありましたので文字列変数コピーは参照コピーである:福井プログラマー生活向上委員会

しかし、この説明では一つ問題があります。なぜなら、JavaScriptやActionScript3のString型は、プリミティブ型ではあるものの、変数のコピーは値コピーではなく参照コピーになるからです。それどころか、ActionScript3では全てのプリミティブ型のコピーは参照コピーになるようです

こちらの記事を是非合わせてお読みいただくことをおすすめします！！

コリン・ムック「今から始めるActionScript 3.0」に行ってきました。

http://www.event-web.net/as3/ 今コリン・ムックのレクチャーから帰ってきました。

初心者向けのレクチャーではありましたが、９時間の長丁場。内容の方は、ビギナー向けということもあり易しめで、難しいところもありませんでした。コリン節を堪能してきましたよ。

僕はAS2.0の時に、コリン氏のMVC Clockのソースを穴があくほど読んで、初めてMVCという概念を勉強したので師匠を拝むような気持ちでした。

で、基本的には「ActionScript3でどうやってアプリケーションを開発していくか」という課題をひとつのサンプルアプリを通して、疎結合に作っていく大切さを表現していました。

前半はAS3の言語的な部分に多く触れ、後半はMVCやディスプレイオブジェクト、イベントなどの実装寄りな話。

コリン氏は「変数」と「オブジェクト」の関係を正しく理解してもらいたいと何度か言っておりました。

そのわかりやすさに衝撃を受けたので、メモします。

「変数には値そのものが格納されているわけじゃない。変数は値の参照を持っているだけ」
「変数はコンテナではない。参照を持つ事のみ可能。本来のコンテナはシステムメモリ」

と同じことを何度もいっていたので、よほど覚えて帰ってほしかったのでしょう。

例えばプリミティブ型（NumberやString）では

var a = "dog";
var b = a;

としたとき、「dog」というオブジェクトがコピーされています。

追記：文字列変数コピーは参照コピーである:福井プログラマー生活向上委員会の記事を参照してください。

a = "cat";
trace(a); // output 'cat'
trace(b); // output 'dog'

この時２つの変数の間でオブジェクトは共有されていません。

では、複合データ型の場合

var a = [0,1,2,3];
var b = a;

a[0] = 10;
trace(a); // output '[10,1,2,3]'
trace(b); // output '[10,1,2,3]'

２つの変数は同じオブジェクトを参照しています。ここまでは問題ないかと。

ではさらに突っ込んで、「参照」とは何かを説明すると

a = null;
trace(b); // output '10,1,2,3'

これはちょっと変だと思う人もいるかも。 nullはオブジェクトを捨てる事ではなく、参照を切るだけ

図を見ると、「変数a」と「配列[10,1,2,3]」を繋ぐ線が消えただけだということが良くわかる。変数が持っているのは、この「線」の部分だけだということ。

では

b = null;

とすると、オブジェクト[10,1,2,3]は消えたのでしょうか？答えはノーです。

どの変数からも参照されなくなったオブジェクトはやがてメモリから捨てられます。これをガベッジコレクションといいますが、どの変数からも参照されなくなった時点で削除されるのではなく、捨てる準備。捨ててもいいよというマークがされて適当な時にGCされます。

その適当な時とは？コリン氏がいうには、ロードをやめたり、重い処理をストップさせたりした場合らしいです。

AS3ではビルトインではないけれど、強制的にガベッジコレクションを実行するハックもあるのでそれを使うのもありですかね。

http://www.gskinner.com/blog/archives/2006/08/as3_resource_ma_2.html

個人的にこのオブジェクトの話は、わかってはいても人に説明しづらい。理解したつもりでも、なんかずれていた。という経験があるので、この参照を矢印で表現する図解はためになりました。

今日のレクチャーの内容は http://moock.org/lectures/groundUpAS3/にあります。

–

追記：コリン・モック氏本人がレクチャーで使っていた図解は http://moock.org/lectures/groundUpAS3/の・copies and references ・multiple references to the same object にありました。 SWFなのでクリックして紙芝居的に挙動が確認できます。