layout.erbを使わない共通処理
もう一つの共通処理の仕方
前回、layout.erbで各テンプレートの共通処理を管理しましたが、今回はlayout.erbを使用しない場合、どうするか、です。
フィルタ機能を利用する
『before』と『after』というフィルタを利用して、myapp.rb内で共通処理を定義します。
事前に処理を定義したい場合は『before』
事後に処理を定義したい場合は『after』
Documents/myapp/myapp.rb
class App < Sinatra::Base
configure :development do
register Sinatra::Reloader
end
before do
@author = "という夢を見たのさ"
end
after do
puts "もこたんログにインしたお！"
end
get '/' do
@title = "もこの部屋"
@content = "もこたんインしたお！" + @author
erb :index
end
get '/about' do
@title = "もこの部屋"
@content = "もこたんが勢い余ってインしちゃうサイト" + @author
@email = "moco@xxxx.com"
erb :about
endend
※緑字の部分を追記
さて、これで実行するとwebでどう表示されるかというと…
さらに、/aboutも見てみると…
こんな感じで、beforeで定義した内容が反映されました。
では、afterで定義した内容はどこで確認できるかというと、ターミナルで表示されます。
こんな感じです。
layoutを駆使することもできますが、テンプレートを使わずに直接記述することで共通処理を定義することも可能です。
使う場面は、、、と問われると、まだ良くわかりませんが、layoutを使わずに共通処理を定義することができる、というのは覚えておいたほうが良さそうです。
今日のまとめ的な何か
・layoutを利用しなくても共通処理を定義できる
・before/afterのフィルタ機能を駆使する
・まだよくわからない！
erbを一通りやってみようぜ！
中途半端良くない
erbとerubisの違いを把握するためにも、どっちも理解する必要があるなと。
せっかくerbかじったので、まずはこのまま色々とやってみようと思います。
変数を使ってみる
簡単な変数を使ってみようってことで、『@』を使って少しいじってみました。
Documents/myapp/myapp.rb
get '/' do
@title = "もこの部屋"
@content = "もこたんインしたお！"
erb :index
end
get以下を上記のように記述する。
Documents/myapp/views/index.erb
<head>
<meta charset="ucf-8">
<title><%= @title %></title>
</head>
<body>
<div><%= @content %><div>
</body>
</html>
次に、index.erbの<head>以下を、上記のように記述する。
すると、webで次のように表示される。
はい、タイトルが『もこの部屋』になりました。そして見事にインしたお！
こんな感じでですね、基本、『@ほにゃらら』で変数を指定して、適用したいerbテンプレート先で『<%= %>』として呼び出すといった塩梅です。
分かりやすい、かつ、簡単にすんなりできます。
さらにそこからもう少し進めます。
今はindex.erbのページしかありませんでしが、その1階層下にもう1ページ作成します。
まずは、以下のファイルに記述を追加します。
Documents/myapp/myapp.rb
get '/' do
@title = "もこの部屋"
@content = "もこたんインしたお！"
erb :index
end
get '/about' do
@title = "もこの部屋"
@content = "もこたんが勢い余ってインしちゃうサイト"
@email = "moco@xxxx.com"
erb :about
end
※緑色部分を追記します！
さらに、今追記した分のerbテンプレートを用意します。
viewsディレクトリ配下に、『about.erb』ファイルを作成し、以下の記述をしましょう。
Documents/myapp/views/about.erb
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="ucf-8">
<title><%= @title %></title>
</head>
<body>
<div><%= @content %></div>
<div><%= @email %></div>
</body>
</html>
そうするとどうなるかというと…
かーらーのー
こうなる！！
うーん。ちょっとサイトっぽい感じなってきたような気がしなくもない。
体裁、全然整ってないけど、構造の雰囲気だけは味わっているような感じがする。
で、このabout.erbとindex.erbを記述して気づいたと思うのですが、共通の記述部分がありますよね。
この共通項を、まとめてテンプレートとして置いておき、すべてのページに適用することができるんだって。
まずは、viewsディレクトリ配下に、『layout.erb』ファイルを作成し、以下の記述をします。
Documents/myapp/views/layout.erb
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="ucf-8">
<title><%= @title %></title>
</head>
<body>
<%= yield %>
</body>
</html>
緑文字の部分が、いわゆる各テンプレートの共通項部分で、黄文字の部分が、各テンプレート固有の部分です。
固有の部分は、<%= yield %>とすることで、各テンプレートの固有記述が反映されます。
layout.erbの記述が完了したら、次は各テンプレートの共通部分を削除します。
Documents/myapp/views/index.erb
<div><%= @content %></div>
Documents/myapp/views/about.erb
<div><%= @content %></div>
<div><%= @email %></div>
はい、かなり削れましたね。index.erbが1行、about.erbが2行です。
layout.erbを用意して各テンプレートの共通部分を管理すれば、これだけ記述を簡略化できる、と。
せっかくなのでと始めたerbですが、面白い。これは序の口で、もっと色んなことができるんだろうなー。
しばらくはerbで理解を深めてから、erubisに取り掛かろうと思います。
今日のまとめ的な何か
・変数を使っていくよ
・テンプレートの共通部分はlayout.erbで管理するよ
・面白くなってきたよ！！
知らない間に使ってた
誰もerbがerubisだとは思うまい
いや、普通気づくよね？
erb≠erubisだと思ってたのは俺くらいだよね？
ドットインストールやあれこれ調べながらやってたら、いつの間にかerubisテンプレート使ってました。
とりあえず、新しいフォルダとerbテンプレートを用意。
~Documents/myapp/views
ターミナルで『views』ディレクトリと『index.erb』ファイルをさくっと作成します。
作成したら、作ったindex.erbにhtmlを記述していきます。
最低限のウルトラ簡単なやつでOK!
そうしたら最後に、このファイルを呼び出すためのコマンドをmyapp.rbに記述しましょう。
よしよし。erb=erubisテンプレート、おっさん覚えた！！
最後に、いつもどおりローカルサーバ起動して、きちんとテンプレートを呼び出せるか確認しましょ！
ね、簡単でしょう？
これまでと違い、htmlなので色々整えてやればwebサイトのいっちょあがりってたつです。
よくわからんうちに使っていたのがerubisテンプレートだったなんて…というか、頭文字３文字なんだから、気付こうな、俺。
今日のまとめ的な何か
・erb=erubisテンプレートのことだよ！！！！
・htmlとcss覚えないとダメっぽい
・楽しくなってきた
わかることから
プレスリー手強い
erubisを使ってあれこれしようと思ったんだけど、どうにも理解が進まない…。
そんなこんなで、せっかく月額料金を払っているので、ドットインストールでできることからやってみようかと思い立ったわけです。
いつまでも解らなくてモチベーションが維持できなくなるより、少しでも解ることをできることとして身につけながらチャレンジしたほうが長続きするのかなーという個人的見解。
というわけで、今はこれやってます。
URLからのパラメーターの渡し方と、ワイルドカード、正規表現なんかの初歩的なところは、理解できたぞー。
色々試したり遊んだりするの楽しいですっ。
今日のまとめ的な何か
・モチベーション維持優先
・壁に当たったら解ることから身につける
・シンボル、パラメーター、大事
神からのお告げ
降ってきた
前回のBlogで、ファイルなどをRuby-2.2ディレクトリに置いてましたが、Rubyがインストールされている場所なので、別にしたほうが良いと、アドバイスをいただきました。
早速なので、自分で書いた記事を参考にして、新しくプロジェクト用にディレクトリを作成して、同じ環境を構築してみました。
結果、無事に構築完了。reloaderも問題なく動作していました。
うーん、色々と感動。一度できれば、なんとかなるもんですね。
erubisを使ってみよう
そしてさらに次の課題です。
高速テンプレートエンジンのerubisを駆使して、あれこれしてみよう！です。
とりあえず以下のコマンドを実行して、インストールしてみました。
$ sudo gem install erubis
インストールをしてから、使い方をあれこでググってみたのですが、いまいち解らず。。。
もう少し、関連ページを読み漁って、理解する必要がありそうです。
そんな感じで再び格闘の日々の予感…！
今日のまとめ的な何か
・erubis＝rubyの高速テンプレートエンジン
・インストールはあっさり完了
・プレスリーとか言いだしたらおっさん
