Help us understand the problem. What is going on with this article?

フロントエンド作業時の仮WebAPIお手軽作成方法

More than 5 years have passed since last update.

ドーモ。サーバサイド苦手マン=サン。
サーバサイド苦手マンです。

AngularJSなどを使ってSPA形式のサイトを作る際に、特定のURLを叩いてjsonを取得する、ってことけっこうありますよね?
私はあります。

そして、フロントエンドの作業は進めたいけど上記を実現するWebAPIがまだ実装されておらずどうにも作業が進められない、ってこともけっこうありますよね?
私はあります。

そんなとき、適当な場所にjsonを置いて、もしAngularJSであれば単純に

$http.get(...)

みたいな形で仮でjsonファイルを引っぱってくるものを作っといても良いんですが、WebAPIが完成してからコードを修正するのはけっこう手間だったりしますね。

ということで、サーバサイドをあまり触らない私が思いつきでrubyで仮のWebAPIを作っちゃおうと思ったら びっくりするくらいに簡単にできちゃったのでここで共有しておきます。

レシピ

材料

作り方

Ruby

てきとーにググっててきとーにインストールしといてください。

適当に作ったjsonファイル

てきとーに作っておいてください。

sinatra & sinatra-cross_origin

ここからが、今回の記事の肝になります。

とりあえず下記コマンドでインストールしておきましょう

gem install sinatra
gem install sinatra-cross_origin

sinatraはruby触っている人には有名なWebアプリケーションフレームワークらしいです。(簡易版ruby on rails?)

これを使うと、例えば「あるURLにアクセスがあったさいにあることをする」ってのを簡単に記述できるってことで今回はこれを使ってみました。

詳しく説明せずとも、下記ソースを見ていただければわかりやすいかと。

dummyApi.rb
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

簡単に説明

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の冒頭で

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とかを触っている方には何を今さら的な感じだったかと思いますが、フロントエンドしかほぼほぼ触ったことがない方々もこの世にはけっこう多いかと思います。
この記事がそんな方々の役に立てれば幸いです。

migi
フリーランス グロースデザイナー/フロントエンドエンジニア
http://migi.tech
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away