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

viewsフォルダを使う

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

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

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

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

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

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

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

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

ファイル構成

index.erbはviewsフォルダの中に保存するため以下のようになります。

このようになります。このままアップしても表示はできませんのでmyapp.rbファイルを変更します。

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

myapp.rbファイルを見てみると以下のようになっていると思います。

これを書き換えます。

このようにします。これをアップロードしてブラウザで開くとindex.erbが読み込まれた形になります。今回使ったソースファイルはダウンロードできるようにしておきましたので、実際にアップして試してみてください。