簡単な掲示板を作ってみよう

Sinatraを使った非常に簡単な掲示板アプリのチュートリアルです。

bbs demo

このチュートリアルを終わった際に出来上がるソースコードはこちらになります。

require 'sinatra'
require 'sinatra/reloader'

comments = []

get '/' do
    @comments = comments
    erb :index
end 

post '/new' do
    comments.push(params[:body])
    redirect '/'
end

<html>
    <head>
        <title>掲示板</title>
    </head>
    <body>
        <h1>掲示板</h1>
        <ul>
            <% @comments.each do |comment| %>
                <li>
                    <%= comment%>
                </li>
            <% end %>
        </ul>
        <h2>コメントする</h2>
        <form method="post" action="/new">
                <input type="text" name="body">
                <input type="submit" value="post">
        </form>
    </body>
</html>

チュートリアル

まずは今回ライブラリとして使用するsinatraをインストールします。

gem install sinatra sinatra-contrib

インストールが終了したら、bbsというディレクトリ(フォルダのことです)を作り、そこへcdコマンドを使って移動します。

mkdir bbs
cd bbs

bbs内にbbs.rbを以下のように作成します

require 'sinatra'
require 'sinatra/reloader'

get '/' do
    'Hello World!'
end

bbs.rb作成後、ターミナルでruby bbs.rbを実行します

ruby bbs.rb

その後、ブラウザのアドレスバーにlocalhost:4567を入力します Hello World!と表示されていればOKです！

sinatraではerbなどのテンプレートを使うことができます今回はerbを使ってHello World!と表示してみます

まずはviewsディレクトリをbbs内に作成します

その後、viewsディレクトリ内にindex.erbを作成し、以下のようにします

<html>
    <body>
        Hello World!
    </body>
</html>

あとは、bbs.rbを以下のように修正してruby bbs.rbを実行します

require 'sinatra'
require 'sinatra/reloader'

get '/' do
-    'Hello World!'
+    erb :index
end 

ruby bbs.rb

localhost:4567へと再度アクセスして、Hello World!と表示されていればOKです！

次に、掲示板のコメント機能を作っていきます。　まずは、bbs.rbを以下のように変更します。

require 'sinatra'
require 'sinatra/reloader'

+ comments = []
+
get '/' do
+    @comments = comments
    erb :index
end

そして、views/index.erbを以下の変更します

<html>
+    <head>
+        <title>掲示板</title>
+    </head>
    <body>
-        Hello World!
+        <h1>掲示板</h1>
+        <ul>
+            <% @comments.each do |comment| %>
+                <li>
+                    <%= comment %>
+                </li>
+            <% end %>
+        </ul>
    </body>
</html>

ここまでの変更で作成済みのコメントを一覧として表示することができます。

最後に、コメントを作成するフォームを実装ていきます。

フォームから送信されたコメントを取得して保存する処理を実装します。

require 'sinatra'
require 'sinatra/reloader'

comments = []

get '/' do
    @comments = comments
    erb :index
end 
+ 
+ post '/new' do
+     comments.push(params[:body])
+     redirect '/'
+ end

最後に、views/index.erbにコメントを作成するフォームを実装します。

views/index.erbを以下のようにします。

<html>
    <head>
        <title>掲示板</title>
    </head>
    <body>
        <h1>掲示板</h1>
        <ul>
            <% @comments.each do |comment| %>
                <li>
                    <%= comment %>
                </li>
            <% end %>
        </ul>
+        <h2>コメントする</h2>
+        <form method="post" action="/new">
+            <input type="text" name="body">
+            <input type="submit" value="post">
+        </form>
    </body>
</html>

後は、ターミナルでruby bbs.rbを実行します

ruby bbs.rb

localhost:4567にアクセスし、フォームからコメントを送信できていればOKです！

課題

余裕のある人向けの課題です。

現在の掲示板プログラムはデザインなどは良くないです。

そこで、Bootstrapを使ってデザインを整えてみましょう。

参考

Sinatra 入門