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が読み込まれた形になります。今回使ったソースファイルはダウンロードできるようにしておきましたので、実際にアップして試してみてください。

個人支援・寄付について

サイトラボでは個人支援・寄付を受けております。ご協力いただける方はお願いいたします。当サイトではビットコインで受け付けております。

  • ビットコイン：3LHnADwZwUbic2L45EnVJEykiG6KfbqrwS