sinatraでHTMLの出力をしてみる-さくらのVPS

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

viewsフォルダを使う

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

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

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

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

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

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf8">
<title>テスト</title>
</head>

<body>

<h1>表示確認</h1>

</body>
</html>

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

ファイル構成

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

/home/logw/sinatra/public
        ├──/tmp
        │  └always_restart.txt #sinatraをブラウザで更新したら反映されるようにする-さくらのVPSで追加
        ├──/views #今回追加
        │  └index.erb #今回追加
        ├──config.ru
        └──myapp.rb

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

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

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

require 'sinatra'
require 'sinatra/reloader'

#TOPページ
get '/' do
    'こんにちは'
end

これを書き換えます。

require 'sinatra'
require 'sinatra/reloader'

#TOPページ
get '/' do
    erb :index
end

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