[Sinatra+MongoDB]Sinatraの掲示板にMongoDBを使ってみた。

タイトル：[Sinatra+MongoDB]Sinatraの掲示板にMongoDBを使ってみた。

目的：Sinatraで作成した掲示板を改良する。書き込みデータの管理にMongoDBを使用する。

実施環境：
OS：Windows8.1
Ruby：v2.2.2
Sinatra：v1.4.6
Haml：v4.0.6
mongo(gems)：v2.0.4
MongoDB：mongodb-win32-x86_64-2008plus-ssl-3.0.3-signed


ディレクトリ構造：
作業ディレクトリ
|-sinatra_start.rb（rubyファイル）
|
|-views（ディレクトリ）
|   |-index.haml（hamlファイル）
|
|-db
    |-MongoDBによって作成されるファイル複数

目次：

1. 概要
2. Ruby(Sinatra)のソースコード修正
3. Hamlのソースコード修正
4. 説明
5. 実行

掲示板のプログラムや説明に関しては、
以前記事を書いているので、そちらを参考にして頂ければ分かりやすいと思います。

また、ソースコードも以前の記事にあるものを修正したものになります。
Sinatraで掲示板を作ってみた！！

また、MongoDBの起動方法等については、
以下の記事を参考にして頂ければ分かりやすいと思います。
MongoDBを使ってみる。

1.概要

1.1

以前、Sinatraで作成した掲示板。

書き込みデータの管理はCSVで行っていた。

その部分をMongoDBに書き換える。

以下の点に注意

• DBのソースコード部分はべた書きである
• Modelクラスの作成はない
• Validationによる入力データの検証は行っていない

2.Ruby(Sinatra)のソースコード修正

2.1

Ruby(Sinatra)側のソースコードは以下の通り修正した。

3.Hamlのソースコード修正

3.1

Haml側のソースコードは以下の通り修正した。

4.説明

4.1

「get '/' do」のデータ取得の修正部分。

CSV.read("db/sinatra_bbs.csv")

の部分を

db[:comments].find

に変更している。

(DBの接続部分もあるが、これだけ)

4.2

「put '/write_comment' do」のコメント書き込みの修正部分。

CSV.open("db/sinatra_bbs.csv", "a") do |csv|

csv << [params[:name], params[:title], params[:message]]

end

の部分を

db[:comments].insert_one({

:name => params[:name],

:title => params[:title],

:comment => params[:message]

})

に変更している。

(DBの接続部分もあるが、これだけ)

5.実行

5.1

以下のコマンドを実行する。

コマンド：ruby sinatra_start.rb

5.2

以下のURLにアクセスする。

(なお、ポートを変更している方は変更したポート番号を指定する)

URL： http://localhost:4567

実行による表示は以前の記事(Sinatraで掲示板を作ってみた！！の実行画像)から変わらない。

プログラム内部でのデータの取得と挿入がDBに変わっているだけである。

(微妙にボーダー入ってるかもですけど、気にしないこと・・・)

以上！！

以下、参考にさせて頂いたサイト様
なし

管理人の独り言
本日、2度目の投稿。
丁度、MongoDBのBSONドキュメントのアクセスまでやったから、ついでに掲示板の方も修正～

そういえば、React.jsが熱いらしいと聞いた。
ただ、小規模ならAngular.js、Vue.jsで十分とも聞くし、どうしたものか・・・
いずれにせよ、使うかどうかともかく情報としては押さえておこうかと思います。
じゃないと自分が使うのに何が良いか検証もできないですし・・・

しっかし、やはりソースコードがインデントで見辛いな、どうにかならないかな・・・

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のソースコードは以下の通り作成した。


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


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にも参加されたことがある方ですから、

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

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

Sinatraで入力フォームのデータを取得する。

タイトル：Sinatraで入力フォームのデータを取得する。

目的：htmlのinputタグ(テキストボックス)で入力されたデータを取得し表示する。

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

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

目次：

1. 入力データを取得(sinatra_start.rb)
2. 入力フォームを作成(index.haml)
3. 入力データを表示(request_print.haml)
4. 説明＆実行

以前、以下の記事を閲覧して頂いたことがある方は、

ソースコードを追記/修正する形で実施すると楽です。

SinatraでWebリクエストを取得してみる。

1.入力データを取得(sinatra_start.rb)

1.1

画面側で入力されたデータを取得する部分を記述する。

ソースコードは以下の通り作成した。

2.入力フォームを作成(index.haml)

2.1

画面に入力するための入力フォームを作成する。

ソースコードは以下の通り作成した。

3.入力データを表示(request_print.haml)

3.1

入力されたデータを画面で確認する部分を作成する。

ソースコードは以下の通り作成した。

4.説明＆実行

4.1

Ruby側についての説明

データの取得の仕方は、

「params[:inputタグのnameの値]」で取得できる。

また、直接（？）Webリクエストの内容からも取得できた。

「request[:inputタグのnameの値]」でも取得できた。

現状、使い分けがどうなっているのか分からない。

しかし、Sinatraの本家サイトではルーティングの説明の後に

paramsでデータを取得をしている部分があるので、

おそらくparamsを使っていれば問題はないと思う。

4.2

Haml側についての説明

index.hamlについての説明。

Hamlでは、inputタグを以下のように記述する。

「%input{:type => "text", :name => "name"}」

typeにinputの種類（今回はテキストボックス）を、

nameにはparamsで取得するための名前を設定している。

inputタグの詳しい設営はhtmlのドキュメントか説明サイトを参照にして下さい。

request_print.hamlの説明は表示のみなのでなし。

4.3

以下のコマンドで実行する。

コマンド： ruby sinatra_start.rb

画面下部に入力フォーム3つとボタンが出ていることを確認し、

適当な文字を入力フォームに入力する。

送信ボタンを押下する。

ページ遷移し、入力した値が表示されていれば問題ない。

以上！！

参考にさせて頂いたサイト

Sinatra本家（日本語訳）

管理人の独り言...
これで、パーツは概ね問題ないかな...？
まだ、DBやらActiveRecordだとかあるけど、
修正でプログラムすればいいし大丈夫だろう。

というわけで、ようやっと掲示板の作成に取り掛かれます。
内容的には、Webの基本中の基本的な内容なので、
あまり過度な期待はしないで下さい。

SinatraでWebリクエストを取得してみる。

タイトル：SinatraでWebリクエストを取得してみる。

内容：
Sinatraで、formタグから送信されるWebリクエスト（HTTPメソッドとURL）を取得し表示する。

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

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

目次：

1. Rubyソースコードを作成
2. Hamlソースコードを作成
3. 説明＆実行

以前、以下の記事を見て頂いたことがある方は、
ソースコードに追記する形で実施すると楽です。
Hamlを使ってみた。

1.Rubyソースコードを作成
Rubyのソースコードは以下のように作成した。
sinatra_start.rb


2.Hamlソースコードを作成
Hamlソースコードは以下のように作成した。
index.haml


request_print.haml


3.説明＆実行

3.1
Ruby側の説明
「＠～」の部分で、リクエストのパラメータを取得している。
「request.」で、リクエストオブジェクトにアクセスしている。
（Sinatraに用意されているためかなり楽だった...）

「haml: request_print」でrequest_print.hamlを指定。

「put '/request_print' do ～ end」は、
HTTPメソッドが「put」、パスが「/request_print」でこの部分が実行されるよう記述している。
request.request_method：HTTPメソッド
request.url：要求されたURL
request.path：要求されたパス

3.2
Haml側の説明
Web知識のgetとpost、各HTTPメソッドについては説明を割愛する。

formタグにて、「post」で「/request_print」を指定している。
しかし、hiddenで「_method」、「put」を指定している。
そのため、HTTPメソッドは「put」、パスは「/request_print」にて送られていることになる。

実際に、hiddenをコメントアウト等して実行すると、
HTTPメソッドが「post」、パスは「/request_print」で送られる。
その場合、サーバ側で受ける部分がないので、Sinatraのエラー（？）ページが表示されるが...

3.3
実行してみよう。
コマンド：ruby sinatra_start.rb

localhost:4567へアクセスし、ページ遷移のボタンを押下する。

request_printのページが表示され、
ボタンが押下された際のリクエストデータが表示されている。

以上！！

参考にさせて頂いたサイト
Sinatra本家（日本語訳）

個人的なコメント
今回、リクエストについて記事を書いたのには理由がある。
HTTPメソッドとか色々忘れたからだ...orz
なので、html側から送ってきたリクエストがどうなっているのかイメージができなくなっていた。
というわけで何が送られているか知るために今回の記事を書いたわけです。

当初、Hamlのファイル名は_（アンダーバー）を-（ハイフン）で作成していたが、
Rubyソースで参照するHamlファイルを指定するとArrgment Errorが発生した。
そのため、ファイル名を_（アンダーバー）に変更した。
（仕様...でいいのかな...？）

Hamlで二次元配列の内容をループさせて表示する

タイトル：Hamlで二次元配列の内容をループさせて表示する

目的：Ruby+Sinatra側でCSVを読み込み、そのデータをHamlでループさせて表示する。

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

ディレクトリ構造

作業ディレクトリ
|- sinatra-start.rb（ファイル）
|- views（ディレクトリ）
|　- index.haml（ファイル）
|- resources（ディレクトリ）
　 - bbs-data.csv（ファイル）

csvのテスト用データは各自でご用意して下さい。
（文字コードはUTF-8を想定してプログラムしています。）

目次：

1. Ruby(Sinatra)ソース作成
2. Hamlソース作成
3. 説明＆テスト

以下の記事を以前に見て頂いたことがある方は、

ソースコードに追記する形で実施すると楽です。

Hamlを使ってみた。

1.Ruby(Sinatra)ソース作成

Rubyのソースコードは以下の通り作成した。

sinatra-start.rb

2.Hamlソース作成

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

index.haml

3.説明＆テスト

3.1

Ruby側の説明

エンコーディングの設定をUTF-8に変更しています。

@bbs_dataと言うインスタンス変数に対して、

読み込んだCSVデータ（二次元配列）を代入しています。

こちら側でやっていることはこれくらいですね。

3.2

Haml側の説明

Hamlにて、-（ハイフン）を記述するとRubyのコードを記述することができるようになります。

なので、@bbs_dataをeachでループさせることができるわけですね。

Rubyで設定した@bbs_dataを（二次元配列なので）二回ループさせて値を取り出しています。

表示は、配列のままも出せますし、個々の値を出すこともできます。

くぅ～、今日は時間がなかった...少し説明不足で全体的な進行が遅いな。

まぁ、仕方ないか...初めて触るものばかりですし...

現在は、パーツを集めている段階です。

各記事の内容が組み合わさって掲示板になるかと思います。

もしかしたら、Rubyの環境構築を実施した時のようにまとめ記事を作成するかもしれません。

以上！！

技術本まとめ

タイトル：技術本まとめ

目的：ブログに書いてる内容にリンクしたお薦めな本をまとめる（第一弾）

※リンク先はAmazonのサイトです。

・Rubyの本
プログラミング言語 Ruby
まず、これは外せませんね。
Rubyの作者である、まつもとゆきひろさんが書いた本です。
必読書と言っても過言ではない本かと...大体の人が持っているんではないでしょうか？

初めてのRuby
Ruby初心者の一冊だと思います。
但し、プログラム完全な初心者だと少し厳しいかもしれません。

しかし、持っていて損になる本ではないです。
プログラミング言語 Rubyと一緒に最初に買っておくといいと思います。
値段も手ごろですし。

パーフェクトRuby
言語の仕様についても書いてある。手元にあったら便利な本です。
Ruby2.0にも対応しているので助かりますね。
ある程度、Rubyに親しんでから読むといいと思います。
ただ、分厚いですね（笑）

Rubyのしくみ -Ruby Under a Microscope-
タイトルの通り、Rubyの仕組みについて書いてある本です。
図や手順が載っているので、分かりやすいとは思います。
でも、初心者が読む本ではないと思います。

Effective Ruby
有名なEffectiveシリーズの本ですね。
自分はまだ読めてません...上級者向けの本です。

・Sinatraの本
Sinatra: Up and Running
Kindle版ですが、Sinatra始めるならこの本は欲しい。

Sinatraの本少ないですよね。
これしか見つけられませんでした...

・Gitの本
入門git
初心者にも分かりやすい本です。
これだけだと少し足りない気がするので、他の本と併用が望ましいと思います。

実用git
gitが内部でどうやって動作しているのかが分かります。
一人で開発する管理人では、あまり使わないかも知れないですが、
知識として押さえておくだけでも理解度が違うので...
しかし、翻訳微妙...

Gitによるバージョン管理
実際に複数人で開発する時に役立つと思います。
お一人開発のことも書いてあるのでいいですね。

・Sublimeの本
探したのですが、コレ！っと言う本がありませんでした。

結局のところ、Sublimeのドキュメントやプラグインのドキュメントを読むか、
Webで調べるのが速いと思います。

誰か良い本ご存知ですか？

今後、必要な時は各記事に本の紹介（？）のようなものを追加していく方針で行きます。
今回は、十数件の記事を修正するのが面倒だったからまとめますが...
たまには、お薦め本紹介の記事やりますけど。

Kindleが欲しい...

以上！！

erbを使ってみた。

タイトル：erbを使ってみた。

目的：htmlにerbを埋め込みテストする

以下の環境にて実施

OS：Windows8.1

Ruby: v2.2.2 x64
Sinatra：v1.4.6
Sinatra-contrib：v1.4.2

前提条件

• 上記に準ずる環境が構築されていること

以下の流れにて実施

1. ディレクトリ作成
2. ruby側のソースコード作成
3. erb側のソースコード作成
4. 軽く説明＆テスト

さて、Sinatraメインで行くと言っておきながらいきなり公約破り...
まぁいずれerb、は使うことになったであろうから仕方がない。
今後Web系をやっていくのに必要（？）と言うことで納得して欲しい。

1.ディレクトリ作成
以下に示す通りのディレクトリを作成する。
作業ディレクトリ（名称は何でもいい）
|-sinatraTest.rb
|-views（名称は左記の通りにディレクトリを作成）
    |-view.erb

viewsディレクトリはどうにもsinatraのデフォルトのようです。
viewsディレクトリを作成せず、sinatraTest.rbとview.erbを同ディレクトリに置いた場合、
No such a fileと言った感じにエラーが発生します。

その際、「～/views/view.erb」にありませんと言った文言が表示されるので、
viewsがデフォルトであると検討を付けました。

2.ruby側のソースコード作成
以下の通りにソースコード作成する。
以前、以下の記事を見た方はそちらを改造追加する形で行うと楽です。
sinatraを使ってみた。

ソース1

3.erb側のソースコード作成
以下の通りにソースコードを作成する。
ソース2

4.軽く説明＆テスト
簡単に説明すると、
sinatraTest.rbにて、erb側で使うものを定義し、view.erbにて利用している。

例）
sinatraTest.rbの「@title」部分が定義部分。
view.erbの「<%= @title %>」部分がhtmlソースへの埋め込み部分。
「erb :view」でview.erbで使うと記述している。

htmlの細かい部分は割愛する。

記事書いてから気づいた...hamlかslim使えばよかった...orz
以上！！

sinatraを使ってみた。

タイトル：sinatraを使ってみた。

目的：sinatraのテストプログラムを書く。

以下の環境により構築

OS：Windows8.1

Ruby: v2.2.2 x64

RubyDevKit：DevKit-mingw64-64-4.7.2-20130224-1432-sfx

前提条件

• Rubyがインストールされていること
• RubyのDevKitがインストールされていること

前提条件が満たせていない方は、以下を参考にしてください。

Rubyのインストール

RubyLife - DevKitのインストール

以下の流れにて実施

1. gemのインストール
2. sinatraのテストコード

sinatraのサイトの流れに沿って実施した。

一部ソースが異なるため、sinatraのサイトを見て実施した方が確実だと思う。

http://www.sinatrarb.com/intro-ja.html

1.gemのインストール

1.1

Rubyのコマンドプロンプトを立ち上げ、以下のコマンドを実行する。

コマンド1：gem install sinatra

コマンド2：gem install sinatra-contrib

1.2

gemのインストール後、以下のコマンドを実行し、sinatra(バージョン)、sinatra-contrib（バージョン）が確認できれば問題ない。

コマンド：gem list

2.sinatraのテストコード

2.1

以下の内容を作成する。

sinatra-contribを入れた理由としては、自動リロードさせるため。
これがあるとソースを書き換えた後、いちいち再起動しなくて済む。
（ソース中の「require 'sinatra/reloader' if development?」の部分）

しかし途中問題もあった、
sinatraとsinatra-contribをインストールするとtiltと言うgemがインストールされるのだが、
sinatraを入れるとtilt2.0.1、sinatra-contribを入れるとtilt1.4.1が入りsinatra-contribを使うと競合する。

それを避けるため、gemのtiltをバージョン指定で読み込み、requireもしている。
どちらかを消すとかの対処の仕方が調べても出てこないので、
現状こういった方法で対処している。
他、詳しい内容はまだ説明できないので割愛する。

2.2
作成できたら実行し、「localhost:4567」をブラウザから開く。
「Hello World!!」が表示されていれば問題ない。

以上！！しかし、最近Web開発便利になったんだな～（やっぱ一度離れると大変だわｗ）

参考にさせて頂いたサイト

なし（あえて挙げるならsinatraの本家サイト様）