Sinatraで掲示板を作ってみた！！

タイトル：Sinatraで掲示板を作ってみた！！

目的：Sinatraを使って掲示板を作成してみる。

実施環境：
OS：Windows8.1
Ruby：v2.2.2
Sinatra：v1.4.6
Haml：v4.0.6

ディレクトリ構造：
作業ディレクトリ
|-sinatra_start.rb（rubyファイル）
|
|-views（ディレクトリ）
|   |-index.haml（hamlファイル）
|
|-db
    |-comment_db（csvファイル）

目次：

1. 概要
2. Ruby(Sinatra)のソースコード作成
3. Hamlのソースコード作成
4. 説明
5. 実行(画像有)

今まで、入力フォームだのCSVだのと色々やってきたものをまとめたものになる。
ソースコード自体はそんなに量はないが、ようやっと形のあるものを作成できた。
今後、このプログラムを基礎に色々追加していく予定。
拙い内容ですが、読んで頂ける人に感謝をします。
それでは、内容に移っていきます。

1.概要

1.1
簡易的な掲示板のプログラム。

view側の画面自体は簡単で、入力用のフォームと過去データの表示部分があるのみ。
Rubyのプログラム自体も、データの読み書きとSinatraを利用したルーティングが記述してあるだけである。

また、データの管理についてだが”今回は”DBは使用をしない。
簡単なCSVで管理している。

理由については・・・面倒だから。

2.Ruby(Sinatra)のソースコード作成
sinatra_start.rbのソースコードは以下の通り作成した。

	# encoding: utf-8
	# File Name: sinatra_start.rb
	# Create Day is 2015/05/20
	# Last Update Day is 2015/05/20
	# Gem List
	gem 'tilt', '1.4.1'
	# Require List
	require 'sinatra'
	# sinatra reloader is classic type
	require 'sinatra/reloader' if development?
	require 'haml'
	require 'tilt'
	require 'csv'
	# 外部エンコーディングを変更
	Encoding.default_external = "UTF-8"
	get '/' do
	@title = "Welcom to Sinatra BBS!!"
	@comments_data = CSV.read("db/comment_db.csv")
	haml :index
	end
	put '/request_print' do
	CSV.open("db/comment_db.csv", "a") do |csv|
	csv << [params[:name], params[:title], params[:message]]
	end
	redirect '/'
	end

view raw sinatra_start.rb hosted with ❤ by GitHub

3.Hamlのソースコード作成
index.hamlのソースコードは以下の通り作成した。

	!!!
	%html{:lang => "ja"}
	%head
	%title= @title
	%meta{:content => "text/html", :"http-equiv" => "Content-Type", :charset => "utf-8"}
	%body
	%h1 #{@title}
	%h2 Comment Write
	%form{:method => "POST", :action => '/request_print'}
	%input{:type => "hidden", :name => "_method", :value => "PUT"}
	%table
	%tr
	%td Your Name
	%td
	%input{:type => "text", :name => "name"}
	%tr
	%td Title
	%td
	%input{:type => "text", :name => "title"}
	%tr
	%td Comment
	%td
	%input{:type => "text", :name => "message"}
	%tr
	%td
	%td
	%input{:type => "submit", :value => "コメントする"}
	%input{:type => "reset", :value => "内容をリセットする"}
	%h2 Comments List
	%table
	- @comments_data.each do |comment|
	%tr
	- comment.each do |element|
	%td= element

view raw index.haml hosted with ❤ by GitHub

4.説明

4.1
Ruby側の説明

プログラムの先頭の方では、
ファイルの読み書きのため外部エンコーディングの設定をしている。

「get '/' do ～ end」では、
view側で利用するインスタンス変数にデータを代入している。
(CSVファイルを読み込みデータは二次元配列)
index.hamlを参照するように設定。

「put '/request_print' do ～ end」では、
フォームで入力されたデータをparams[それぞれのname値]で取得し、
CSVファイルへ追記している。
また、「redirect '/'」にて、「get '/' do ～ end」が実行されるようリダイレクトしている。

4.2
Haml側の説明
コメントの表示と入力フォームをtableタグを利用し表示している。
コメントの表示部分では、tableタグの中にRubyコードを埋め込み、
csvのデータをループさせながら表示させている。

5.実行(画像有)

5.1
以下のコマンドを実行する。
コマンド：ruby sinatra_start.rb

5.2
ブラウザを起動し、以下のURLへアクセスする。
URL：http://localhost:4567/

※ポートを変更している方は、各自の設定に適した値でポート部分を変更する

5.3
以下のような実行画面が表示されていることを確認する。
(Comments Listは、CSVファイルに記述がない場合表示はない)

5.4
Comment Writeの入力フォームに適当な値を入力し、「コメントする」ボタンを押下する。

5.5
入力したデータがComments Listへ表示されれば、以上で画面テストは終了。

以上！！

以下、参考にさせて頂いたサイト
Sinatra本家（日本語訳）
プログラミング的なSomething - Hamlのsyntax error, unexpected keyword_ensure, expecting keyword_endエラーについて

管理人の独り言～
Hamlのインデント重要・・・望み通りのHTML出すのに2hは悩んだ・・・
問題を解決するために思考してたけど見当はずれな方向に調査をしていた。
同じ問題で当たったことがある人がいて良かった・・・

解決策が調査では出ない場合、みなさんはどうされますか？
答えのない問題みたいに、対処を考えておくと割と良いかな～っと思います。

以前の記事にも何回か記述していると思うが、
今後追加したいと思っているプログラムを軽く記述しておく。

• バリデーター
• DBとActiveRecord
• SASS(スタイルシート)
• Padrino
• SQLインジェクション
• Modelの導入
• 時間項目追加
• ...etc

軽くだとこんなところでしょうか。

勘違いしている部分もあると思うので増減はすると思います。

毎度思うのだが、
Gistで表示するソースコードは何故元のソースコードとこんなにインデントがずれるのだろうか・・・

最後に、私の学生時代の講師の方が本を書いたようなのでご紹介をしたいと思います。

この記事を書いているときはまだ発売してないので、内容はまだ分かりません。

ですが、プログラマとして実力は物凄く高い方で、CEDECにも参加されたことがある方ですから、

コーディング技術向上に役に立つ本だと思います。

ゲームプログラマのためのコーディング技術