seak0503/Nokogiri_HTML_Builder.md

## Nokogiri_HTML_Builder.md

      
    Raw
  

              Nokogiri_HTML_Builder.md
            
          
    Nokogiriを使ってHTMLを生成する方法

例1: 単純なHTML
# HTML生成
root = Nokogiri::HTML::DocumentFragment.parse('')
Nokogiri::HTML::Builder.with(root) do |doc|
  doc.span '*', class: 'mark'
  doc.text '印の付いた項目は入力必須です。'
end

# 生成されたHTML
puts root.to_html
<span class="mark">*</span>印の付いた項目は入力必須です。

例2: ネストされたHTML
# HTML生成
root = Nokogiri::HTML::DocumentFragment.parse('')
Nokogiri::HTML::Builder.with(root) do |doc|
  doc.div(class: 'notes') do
    doc.span '*', class: 'mark'
    doc.text '印の付いた項目は入力必須です。'
  end
end

# 生成されたHTML
puts root.to_html
<div class="notes">
  <span class="mark">*</span>印の付いた項目は入力必須です。
</div>

例3: 何重にもネストされたHTML
# HTML生成
root = Nokogiri::HTML::DocumentFragment.parse('')
Nokogiri::HTML::Builder.with(root) do |doc|
  doc.div(id: 'message') do
    doc.div(class: 'box') do
      doc.span '*', class: 'mark'
      doc.text '印の付いた項目は入力必須です。'
    end
  end
end

# 生成されたHTML
puts root.to_html
<div id="message">
  <div class="box">
    <span class="mark">*</span>印の付いた項目は入力必須です。
  </div>
</div>

例4: sendメソッドを使ってネストされたHTMLを生成
# HTML生成
root = Nokogiri::HTML::DocumentFragment.parse('')
Nokogiri::HTML::Builder.with(root) do |doc|
  doc.send(:div, class: 'notes') do
    doc.span '*', class: 'mark'
    doc.text '印の付いた項目は入力必須です。'
  end
end

# 生成されたHTML
puts root.to_html
<div class="notes">
  <span class="mark">*</span>印の付いた項目は入力必須です。
</div>

例5: 生成済みのHTMLコードの断片を加える
# HTML生成
root = Nokogiri::HTML::DocumentFragment.parse('')
Nokogiri::HTML::Builder.with(root) do |doc|
  doc << "<span class='mark'>*</span>"
  doc.text '印のついた項目は入力必須です。'
end

# 生成されたHTML
puts root.to_html
<span class="mark">*</span>印のついた項目は入力必須です。