演習課題「間違い探し」
右の環境には、Sinatraで以下のメッセージを表示するプログラムが作成されていますが、テンプレートに間違いがあるため2行目が表示されません。間違いを修正して、正しく表示するように修正してください。
Hello Sinatra
世界の皆さん、コンニチハ
採点して、すべてのジャッジに正解すれば、演習課題クリアです！
※ 採点時は、サーバーを起動し、問題文に関するページにアクセスできる状態にしてください。
＃08:テンプレートの共通部分を分割しよう
ここでは、テンプレートの共通部分を分割する方法について学習します。そのために、Sinatraに共通のテンプレートを設置してみましょう。
viewsディレクトリにlayput.erbファイルを格納する
player_menu.rb
views
|
- indnex.erb
action.erb
layout.erb
layput.erbファイルでは、個別のテンプレートが埋め込まれる個所に「<%= yield %>」を指定する。<!DOCTYPE html>
<html lang="ja">
<head>
<mata charset="utf-8">
<title>Sinatra - paiza</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<%= yield %>
</body>
</html>
「public」ディレクトリは、css以外にも静的なファイルを格納できる。そして、
player_menu.rb
views
|
- indnex.erb
action.erb
layout.erb
public
|
- style.css
スタイルシートへのパスは、「public」というディレクトリ名を省略して、publicディレクトリを起点に指定する。 <!DOCTYPE html>
<html lang="ja">
<head>
<mata charset="utf-8">
<title>Sinatra - paiza</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<%= yield %>
</body>
</html>
# 見た目とロジックを分離する
require 'sinatra'
require 'sinatra/reloader'
require 'erb'
# メニュー
get '/' do
@player = '勇者'
erb :index
end
# あるく
get '/walk' do
@player = '勇者'
@message = "#{@player}は、荒野を歩いていた。"
erb :action
end
# たたかう
get '/attack' do
@player = '勇者'
@message = "#{@player}は、モンスターと戦った。"
erb :action
end
<!DOCTYPE html>
<html lang="ja">
<head>
<mata charset="utf-8">
<title>Sinatra - paiza</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<%= yield %>
</body>
</html>
<h1><%= @player %>のメニュー</h1>
<p><a href="/walk">あるく</a></p>
<p><a href="/attack">たたかう</a></p>
<h1><%= @player %>のアクション</h1>
<p><%= @message %></p>
<p><a href="/">メニューに戻る</a></p>
body {
padding: 30px;
}
- [Sinatra: README (Japanese)]
http://www.sinatrarb.com/intro-ja.html
- [SinatraでとりあえずWebページを立ち上げてみる - Qiita]
http://qiita.com/k-ta-yamada/items/9e35c5f8b31862267e01
- [Sinatraの初心者向け入門 〜簡単にWebサイトを作れるRubyのフレームワーク〜 - ゴトーのブログ]
http://www.gamehuntblog.com/entry/sinatra-first-step
- [Sinatra 入門 - Qiita]
http://qiita.com/kimioka0/items/751e460cbb59c70379c6
- [Sinatraであそぶ | キャスレーコンサルティング 技術ブログ]
http://www.casleyconsulting.co.jp/blog-engineer/ruby/sinatra%E3%81%A7%E3%81%82%E3%81%9D%E3%81%B6/
- [はじめてのSinatra - Qiita]
https://qiita.com/ms2sato/items/7c07b2079b48c49fad2a
- [Rubyist Magazine - Sinatra 再入門、 Padrino / Rack / その先の何か]
http://magazine.rubyist.net/?0036-SinatraReintroduction