ドーモ。サーバサイド苦手マン=サン。
サーバサイド苦手マンです。
AngularJSなどを使ってSPA形式のサイトを作る際に、特定のURLを叩いてjsonを取得する、ってことけっこうありますよね？
私はあります。
そして、フロントエンドの作業は進めたいけど上記を実現するWebAPIがまだ実装されておらずどうにも作業が進められない、ってこともけっこうありますよね？
私はあります。
そんなとき、適当な場所にjsonを置いて、もしAngularJSであれば単純に
$http.get(...)
みたいな形で仮でjsonファイルを引っぱってくるものを作っといても良いんですが、WebAPIが完成してからコードを修正するのはけっこう手間だったりしますね。
ということで、サーバサイドをあまり触らない私が思いつきでrubyで仮のWebAPIを作っちゃおうと思ったら びっくりするくらいに簡単にできちゃったのでここで共有しておきます。
レシピ
材料
- Ruby
- 適当に作ったjsonファイル
- sinatra & sinatra-cross_origin
作り方
Ruby
てきとーにググっててきとーにインストールしといてください。
適当に作ったjsonファイル
てきとーに作っておいてください。
sinatra & sinatra-cross_origin
ここからが、今回の記事の肝になります。
とりあえず下記コマンドでインストールしておきましょう
gem install sinatra
gem install sinatra-cross_origin
sinatraはruby触っている人には有名なWebアプリケーションフレームワークらしいです。(簡易版ruby on rails?)
これを使うと、例えば「あるURLにアクセスがあったさいにあることをする」ってのを簡単に記述できるってことで今回はこれを使ってみました。
詳しく説明せずとも、下記ソースを見ていただければわかりやすいかと。
require 'sinatra'
require 'sinatra/cross_origin'
configure do
enable :cross_origin
end
# get
get '/api/hoge' do
print 'get成功 /api/hoge'
send_file 'data/hoge.json'
end
# post
post '/api/hoge/:id' do
# とりあえず仮だし、ログだけ出しとけば良いんじゃないかな
print "post成功 /api/hoge/#{params[:id]} : "
print request.body.read
end
...
んで、ターミナルでこのファイルを動かしてあげればlocalhost:4567でサーバが立ち上がり、確認は簡単にできます。
ruby dummyApi.rb
簡単に説明
...
# get
get '/api/hoge' do
print 'get成功 /api/hoge'
send_file 'data/hoge.json'
end
...
/api/hogeにGETメソッドでリクエストを送るとdoからendまでのことをしますよ、ってだけです。(ここでは、ログを吐き出すのと、/data/hoge.jsonってファイルを返すことだけやってます。)
そんだけ。
これを忘れるとﾀﾋる
一点注意が必要で、dummyApi.rbの冒頭で
...
configure do
enable :cross_origin
end
...
とやっているのは、これをやっておかないとフロントエンド大好きマンが大好きなgulp等で立ち上げたlocalhost:3000とかからここにアクセスする際に
XMLHttpRequest cannot load http://localhost:4567/hgoe. Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin.
のエラーが発生するのを防ぐためです。
HTTP headerを書き換えるみたいな方法もありますが、素直にsinatra-cross_originを使っておいたほうが数倍楽かと。
まとめ
普段からしっかりRubyとかを触っている方には何を今さら的な感じだったかと思いますが、フロントエンドしかほぼほぼ触ったことがない方々もこの世にはけっこう多いかと思います。
この記事がそんな方々の役に立てれば幸いです。