LoginSignup
2
4

More than 3 years have passed since last update.

HTMLへの埋め込み用としてRubyを使う(勉強メモ)

Posted at

※勉強メモです。

<<-PAGE ... PAGE:ヒアドキュメント形式

改行が重なるような文字列の記述に向く
この間に記述したものを、ターミナルでrubyとして実行すると、単に文字列のHTMLが表示される(HTMLをRubyで実行して表示)

・ERBを使ってRubyコードをHTMLに埋め込む

<%.. Rubyコード..%><%=..Rubyコード..%>をHTMLに埋め込む
「result」メソッドで埋め込まれたコードを実行し、最終的にHTMLに出力する機能

require 'erb' #ERBライブラリの読み込み  

def web_page
  ...
    <p><%= Time.now %></p>
  ...
end

erb = ERB.new(web_page)  #ERBオブジェクトのインスタンス生成
result = erb.result   #ERB内のRubyコード実行
puts result    #文字列表示
・Webサーバーと起動してRubyを自動的に実行させる

「Webサーバー-Pumaとは」
Webサーバー:HTTPリクエストを受取り、HTMLなどのWebページをHTTPレスポンスとして返すサーバのこと
Puma:RubyやRails標準のWebサーバー

・Gem

Rubyのライブラリ(便利機能をパッケージングした拡張機能)

・Webサーバーの起動

Sinatra:軽量なWebアプリケーションフレームワーク
Sinatra では、views フォルダの中には erb ファイルのみを配置し、views/ フォルダの中の index.erb が今までの HTML に埋め込んできた ERB となり、このように独立のファイルとして作成

app.rb には、HTTPリクエストが来たときのWEBアプリの処理を記述

require 'sinatra' #Sinatraの読込み

get '/' do  #トップページ(/)にHTTPリクエストのGETメソッドが来た時に対処する処理(do ~ end)
  erb :index  #views/index.erb内の埋込Rubyの実行結果として出力されたHTMLをレスポンスとして返す
end
・Webサーバーの起動

sinatra-webフォルダに移動$ cd ~/enviromnet/sinatra-ewb
Pumaの起動$ ruby app.rb -o $IP -p $PORT

「フォームデータの送受信」

・GETとPOST
ブラウザからHTTPリクエストを送る際の技術的な仕様

・GET:基本的にほかユーザーにも表示される情報
 リンクをクリックしたとき
 ブラウザのURL欄に直接URLを打込んだとき
 ブラウザで検索ボタンを押したとき

・POST:ほかユーザーに見られたくない情報の送信
 問合せフォームで内容を入力し、送信ボタンをクリックしたとき
 IDとパスワードを入力し、ログインボタンをクリックしたとき

・POSTでフォームから情報を送信する
(例)名前を入力し送信

(view/index.erb)
#送信先の指定:/(トップ)  POSTメソッド指定:method="POST"
<form action="/" method="POST"> 
  <label>名前: <input type="text" name="target_name"></label>
  <input type="submit" value="送信">
</form>

・POSTで送信した情報を受け取って処理する
target_nameを処理する

(app.rb)に以下追加
post '/' do
  erb :index
end

※app.rb を変更する度、Puma を再起動(Ctrl+c)

・index.erbでPOSTデータ受取り

(view/index.erb)
<% name = params['target_name'] %>

★HTTPリクエストのPOSTメソッドで送ったデータはRubyのparams(Parameters・パラメータの略)に格納される

POSTメソッドで、ユーザーからHTMLのform要素(入力フォーム)を通してデータを受け取れる

受取ったデータはparamsという変数に自動的に格納される(paramsはハッシュ)

2
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
4