sinatraでHTMLの出力をしてみる-さくらのVPS
前回はsinatraをブラウザで更新したら反映されるようにする-さくらのVPSでブラウザの更新おしたらsinatraの更新が反映されるようになりました。今回は実際にHTMLを表示してみたいと思います。
viewsフォルダを使う
sinatraではテンプレートファイルというファイルを扱います。種類は豊富で詳しくは利用可能なテンプレート言語というページをみてください。
HTMLの代わりに使うテンプレート
HTMLの代わりという意味ではHaml テンプレートかErbテンプレートというのを使います。記述方法などが異なりますが初心者である僕はErbテンプレートを選択します。Erbの方が面倒な感じはしますがHTMLをそのまま書くのに近いので初心者の方はErbテンプレートで試して慣れたら他のにしてみてください。
CSSの代わりのテンプレート
普通にCSS書いて読み込めば良いですが、最近ではSassやLessを使って書く場合もあるため、その状態で読み込む事もできます。
というわけで実際に書いてみます
実際に書いてみたいと思います。まずはテキストエディタで書いていきます。僕はAtomエディターを使い書いています。
[ruby]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf8">
<title>テスト</title>
</head>
<body>
<h1>表示確認</h1>
</body>
</html>
[/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が読み込まれた形になります。今回使ったソースファイルはダウンロードできるようにしておきましたので、実際にアップして試してみてください。
個人支援・寄付について
サイトラボでは個人支援・寄付を受けております。ご協力いただける方はお願いいたします。当サイトではビットコインで受け付けております。
- ビットコイン：3LHnADwZwUbic2L45EnVJEykiG6KfbqrwS