たった5行のコードでWebサービス!Sinatra, Rubyとは?

Rubyで簡単、マッシュアップサービスを公開してみよう! - 第1回 -

今回のコースで学べること

「Rubyで簡単、マッシュアップサービスを公開してみよう!」を目指します。 Rubyというプログラミング言語でTwitter APIなどを利用した、マッシュアップサイトが作れるようになります。 たとえば、「誰が一番つぶやいてるったー」のようなサイトが作れるようになります。 ※このサイトはJava(Slim3)とGoogle App Engineを利用しています。

プログラミング未経験者の方以上の方向けの記事です。 下記のような3回連載記事を予定しています。

  • [第1回] 5行コードを書くだけでWebサービスを開始できる、Sinatraとは? Ruby言語とは? Sinatraとerb
  • [第2回] WebAPIとは? Authとは? オープンソースライブラリ、Rubygemsで簡単にAPIを利用しよう
  • [第3回] 最近話題のPaaSクラウドサーバー、Herokuとは? 普及し始めたKeyValueStore、Redisとは? Herokuへのサービスの公開とRedisを使ったAPIキャッシュの利用方法

 

[第1回] 5行コードを書くだけでWebサービスを開始できる、RubyとSinatra

早速、RubyとSinatraについて、概要を説明していきましょう。

 

Ruby言語とは?

「Ruby」というプログラミング言語、聞いたことがある方、使える方も多いのではないでしょうか?日本人である「まつもとゆきひろ」さんが開発、「Ruby on Rails」といわれるFrameworkが海外で産まれたことを機に、爆発的に普及しはじめました。

Ruby on Railsは「同じことを繰り返さない」という理念を元に、徹底したルール化(Railsの名前の由来)を行うことで、動的なウェブサイトの構築の高速化を目指したFramework(仕組み)です。

Ruby on Railsは規約を重視し、規約を設けることで高速化していますが、Ruby言語自体はまったく正反対の設計思想、理念に基づくものです。

Ruby言語の設計思想

「Rubyの言語仕様策定において最も重視しているのはストレスなくプログラミングを楽しむことである (enjoy programming)」 http://ja.wikipedia.org/wiki/RubyonRails

こうして、この記事を見てくださっている方々に楽しんでいただくために、ストレスのないプログラミング言語、楽しいプログラミング言語、Rubyの記事を書くことにしました。

Ruby言語とは、楽しくプログラミング出来るプログラミング言語なのです。

 

Sinatraとは?

「プログラミングを勉強したい!」という方は多いですが、実際にRuby言語について勉強してみても、身についた気がしない、という方が多いのではないかと思います。 そういった方におすすめしたいのが、「ウェブサービスを作る」ということです。ブラウザで動くようになる、「こんなサービス作ってます」って言えるようになる、とても素敵な事ではないでしょうか?

そのために「Ruby on Rails」を覚えようという方も多いのですが、Ruby on Railsは規約が多すぎます。覚えることが多すぎます。初心者の方が扱うと、ストレスでたまりません。

そこで、初心者の方に最もオススメしたい、とりあえずウェブサービスを作るなら最適なFramework、それが「Sinatra」です。

 

Sinatraを触ってみましょう

4段階のワークをこれから進めていきます。 1. Rubyをインストール 2. Sinatraをインストール 3. Sinatraで文字を表示する 4. 文字をerbファイルという別のファイルに分けて表示する

 

1. Rubyをインストール

バージョンは2013年6月頃にRuby 2.0が正式リリースされましたので、2.0系を利用しています。

 

Windowsの方

簡単にインストール出来るバイナリ(パッケージ)が配布されていますので、こちらをご利用ください。 http://rubyinstaller.org/ 英語苦手だよ!って方は、「RubyInstaller インストール」とGoogleで検索してみましょう。

 

Macの方

Macの方は、Rubyは最初からインストールされていますので、それを使って頂いても大丈夫です(この章をスキップしても大丈夫です)。ただし、もうすぐSinatraでも1.8.7は使えなくなる(2013年6月現在)ため、新しく入れるのが良いでしょう。

「Mac Ruby インストール」とGoogleで検索、インストールしてください。

一応、丁寧な形でも、記載しておきます。(2013年7月3日時点での最新バージョンのインストール方法の一例です)

Xcodeをインストールしてない人はインストールして下さい

AppStoreでXcodeをインストールする

Homebrewをインストールしてない人はこちらを参考にインストールして下さい

[Mac] Mountain Lionへパッケージ管理「Homebrew」をインストールする手順のメモ

homebrewを最新にします。
1
2
brew update
brew upgrade
rbenvとruby-buildをインストールします。
1
2
brew install rbenv
brew install ruby-build
rbenvをbash_profileに登録します。
1
2
3
echo 'eval "$(rbenv init -)"' >> .bash_profile
source ~/.bash_profile
rbenv rehash
readlineとopensslをインストールします。
1
2
brew install readline
brew install openssl
rubyを入れます
1
CONFIGURE_OPTS="--with-readline-dir=/usr/local --with-openssl-dir=/usr/local" rbenv     install 2.0.0p247
どんなバージョンのrubyがインストールされているかを表示します。
1
rbenv versions
使うrubyを指定します。
1
2
rbenv global 2.0.0p247
rbenv rehash
どんなバージョンのrubyがインストールされているかを表示します。
1
rbenv versions

これでRubyのインストールは完了です。

 

2. Sinatraのインストール

Windowsの方はコマンドプロンプト、Macの方はターミナル(コンソール)を起動してください。

以下の文字列を実行してください。

Sinatraのインストール
1
2
gem install sinatra
gem install sinatra-reloader
rbenvのrehash
1
rbenv rehash

 

3. Sinatraで文字を表示する

myapp.rbというファイル名でファイルを作ってください。 Windowsの方はメモ帳などでファイルを作成してください。 Macの方はXcodeなどでファイルを作成してください。

そこに、下記のように記載して保存してください。

myapp.rb
1
2
3
4
5
6
require 'sinatra'
require 'sinatra/reloader'
 
get '/' do
    "Hello World!"
end

そうしましたら、コマンドプロンプトやターミナルで、myapp.rbのある場所にcd(Change Directory)して頂き、下記コマンドを実行してください。

プログラムを動かすコマンド
1
ruby myapp.rb

これでウェブサーバーが立ち上がります。Rubyのインストールには長く時間がかかりましたが、入れてさえしまえば、ウェブサーバーが立ち上がるのはあっという間だったことでしょう。

ためしにブラウザで http://localhost:4567/ を開いてください。動いているページが見られるはずです。

 

4. 文字をerbファイルという別のファイルに分けて表示する

先程は"Hello World!"としか表示出来なかったわけですが、HTMLやCSSを使って綺麗に表示することも出来ます。ここからは、HTMLやCSSとRubyを組み合わせて使う方法を記載していきます。

myapp.rbを以下のように変更してみましょう。

1
2
3
4
5
6
7
8
9
myapp.rb
require 'sinatra'
require 'sinatra/reloader'
 
get '/' do
    @title = 'Hello World!'
    @subtitle = 'Welcome to the world of sinatra and ruby.'
    erb :index
end

「erb」と呼ばれる、eRubyスクリプトが使用できるようになります。 erbでは、HTMLの中にrubyの記述を埋め込むことができます。

ただし、今はerbと呼ばれる何かを用意も何もしていないので、http://localhost:4567/はエラーになるようになってしまいます。

現在のファイル構成はこのようになっています。 [ファイル]myapp.rb

これを、このように変更しましょう。 [ファイル]myapp.rb [フォルダ]views [ファイル]views/index.erb

index.erb ファイルには、下記のように書いてみましょう。

index.erb

1
2
3
4
5
6
7
8
9
<html>
    <head>
        <title><%= @title %></title>
    </head>
    <body>
        <h1><%= @title %></h1>
        <p><%= @subtitle %></p>
    </body>
</html>

<%= … %>のように書くと、その括弧内で記載されたRubyの値が出力されます。 <%= 1 + 1 %>と書けば、2と出力されます。

<% result = 1+1 %>と書き、その下の行で <%= result %>と書くと、2とだけ出力されます。

myapp.rbで@titleや@subtitleにテキストを代入しましたが、@をつけた変数はerbの方でも利用出来ます。

 

おわりに

SinatraとRubyで動的なウェブサイトを作ることが出来るようになりました。 Rubyのインストールだけは時間がかかったかと思いますが、それ以外は、HTMLやCSSをかじったことがある方なら、一瞬だったのではないでしょうか?

PHPの場合は、phpで全てを表現する(今回でいうerb)ケースも多いかとは思います。が、基本的には今はウェブ系のプログラミングの世界は「MVC構造」が標準になっています。

MはModel。今回は登場していません。 VはView。今回のindex.erbです。 CはController。今回のmyapp.rbです。

画面はVが担当し、Vに出力する動的な値の生成などの処理はCが担当する。データベースなどを扱うのはM。 これがMVC構造です。

駆け足ではありますが、「楽しいプログラミング言語、Ruby」、「5行コードを書くだけでウェブサービスを開始できるSinatra」を体験できたのではないでしょうか。

第2回めの記事の投稿までまだ間がありますので、ぜひRuby、HTML、CSSについて未習得の方は学習してみてください。「Ruby 入門」などで検索していただいたり、書店で書籍を読んで頂いても構いません。

 


[第2回]簡単Sinatra!WebAPI・OAuth認証を使ってみよう

第1回目だった前回は、「Ruby言語」とは何か、そしてRuby Frameworkである「Sinatra」とは何かについてお話した後、簡単にコーディングの仕方についてお伝えしました。第2回目となる今回は、オープンソースライブラリである「Rubygems」と、前回学んだ「Ruby」と「Sinatra」を利用して、WebAPIやOAuth認証の利用方法をお話しようと思います。 また記事ではTwitterAPIを利用して、OAuth認証からTwitterの機能を使えるようにするまでの流れをお伝えします。…

[第3回]さあ、公開だ!「Heroku」と「Redis To Go」を組み合わせて、Webサービスを公開してみよう!

これまでRuby言語のFrameworkである「Sinatra」の使い方や、「Sinatra」とオープンソースライブラリである「Rubygems」を組み合わせて、WebAPIやOAuth認証の利用方法について解説してきました。 最終回となる今回は、これまでにお話した「Sinatra」などを利用しながら、今話題のPaaS型サーバー「Heroku」の使い方や、アプリケーションの公開の仕方についてお話します。…

type IT Academyのトップページへ

簡単!エンジニア体験ゲーム

その他の条件で探す

@typeでは職種や勤務地、仕事探しで譲れないこだわりの条件など、様々な切り口から自分の働き方に合った求人を探すことができます。気になるキーワードやテーマから転職・求人情報をチェックしてください。

転職活動を進める

あなたの転職活動をサポートする、@typeの各種サービスをご案内します。

  • スカウト

    スカウト

    匿名だから安心!あなたに興味を持った企業の採用担当から直接メールが届くサービスです。

  • オファーDM

    オファーDM

    あなたが登録した情報と近い内容の募集条件の企業から、メールが届くサービスです。

  • マッチングサービス

    マッチングサービス

    あなたのスキルや希望、志向に合った求人をセレクトしてご紹介する、独自のサービスです。

  • 検討中リスト

    検討中リスト

    興味を持った求人を保存しておくことができ、気になる求人を一覧にて比較検討できます。