前回はsinatraをブラウザで更新したら反映されるようにする-さくらのVPSでブラウザの更新おしたらsinatraの更新が反映されるようになりました。今回は実際にHTMLを表示してみたいと思います。

viewsフォルダを使う

sinatraではテンプレートファイルというファイルを扱います。種類は豊富で詳しくは利用可能なテンプレート言語というページをみてください。

HTMLの代わりに使うテンプレート

HTMLの代わりという意味ではHaml テンプレートかErbテンプレートというのを使います。記述方法などが異なりますが初心者である僕はErbテンプレートを選択します。Erbの方が面倒な感じはしますがHTMLをそのまま書くのに近いので初心者の方はErbテンプレートで試して慣れたら他のにしてみてください。

CSSの代わりのテンプレート

普通にCSS書いて読み込めば良いですが、最近ではSassやLessを使って書く場合もあるため、その状態で読み込む事もできます。

というわけで実際に書いてみます

実際に書いてみたいと思います。まずはテキストエディタで書いていきます。僕はAtomエディターを使い書いています。 [ruby]

表示確認

[/ruby] 上記のように書いたらファイル名をindex.erbとして保存します。

ファイル構成

index.erbはviewsフォルダの中に保存するため以下のようになります。 [c] /home/logw/sinatra/public 　　　　　　　　├──/tmp 　　　　　　　　│　　└always_restart.txt #sinatraをブラウザで更新したら反映されるようにする-さくらのVPSで追加 　　　　　　　　├──/views　#今回追加 　　　　　　　　│　　└index.erb　#今回追加 　　　　　　　　├──config.ru 　　　　　　　　└──myapp.rb [/c] このようになります。このままアップしても表示はできませんのでmyapp.rbファイルを変更します。

myapp.rbファイルを書き換える

myapp.rbファイルを見てみると以下のようになっていると思います。 [ruby] require 'sinatra' require 'sinatra/reloader' #TOPページ get '/' do 'こんにちは' end [/ruby] これを書き換えます。 [ruby] require 'sinatra' require 'sinatra/reloader' #TOPページ get '/' do erb :index end [/ruby] このようにします。これをアップロードしてブラウザで開くとindex.erbが読み込まれた形になります。今回使ったソースファイルはダウンロードできるようにしておきましたので、実際にアップして試してみてください。