【Rails】背景色・色・フォントなどランダムに投稿
はじめに
本記事では
RubyのSampleメソッドを用いて実装を行なっています
下準備
興味のない方は飛ばしてOK
以下をコピペしていきましょう〜！
rails new sample
rails db:create
rails g model Example body:string
rails db:migrate
rails g controller examples
code .
resources :examples
root 'examples#index'
def index
@examples = Example.all
@example = Example.new
end
def create
example = Example.new(example_params)
if example.save
redirect_to :action => "index"
end
end
private
def example_params
params.require(:example).permit(:body)
end
続いてindex.html.erbというファイルをapp/views/examplesに作成し、以下をコピペします
<%= form_for @example do |f| %>
<%= f.label :body %>
<%= f.text_field :body , :size => 140 %>
<br>
<%= f.submit "exampleする" %>
<% end %>
<div class="examples-container">
<% @examples.each do |t| %>
<div class="example">
<%= t.body %>
</div>
<% end %>
sampleコード
一度試してみましょう
<%= form_for @example do |f| %>
<%= f.label :body %>
<%= f.text_field :body , :size => 140 %>
<br>
<%= f.submit "exampleする" %>
<% end %>
<!-- 追記箇所 -->
<% colors = %w|#51617A #5A9AFB #A6C8FA #2C4B7A #839EC7| %>
<!-- 追記箇所 -->
<div class="examples-container">
<% @examples.each do |t| %>
<!-- 追記箇所 -->
<%= content_tag :div, style: "background-color: #{colors.sample}" do %>
<div class="example">
<%= t.body %>
</div>
<% end %>
<!-- 追記箇所 -->
<% end %>
ここで追記した以下の部分について解説をします。
<% colors = %w|#51617A #5A9AFB #A6C8FA #2C4B7A #839EC7| %>
<div class="examples-container">
<% @examples.each do |t| %>
<%= content_tag :div, style: "background-color: #{colors.sample}" do %>
<div class="example">
<%= t.body %>
</div>
<% end %>
<% end %>
まず
<% colors = %w|#51617A #5A9AFB #A6C8FA #2C4B7A #839EC7| %>
の部分ではcolorsという名前の配列を作っています！
%wとすることで、colorsの中身が配列の形で
["#51617A", "#5A9AFB", "#A6C8FA","#2C4B7A","#839EC7"]
となります。
その後
<%= content_tag :div, style: "background-color: #{colors.sample}" do %>
#{colors.sample}とすることで背景色が先ほどの配列の中から一つ選ばれます！
sampleメソッドとは
sampleメソッドとは、Rubyの言語でランダムで配列から要素をひとつ選択して返すメソッドです。
例えば
array = [1,2,3,4,5,6,7]
とした上で
array.sample
とすることで1~7までの数値からランダムで1つ選択されます！
これを使って応用してみましょう！
応用編
<% colors = %w|#51617A #5A9AFB #A6C8FA #2C4B7A #839EC7| %>
+ <% widthes = %w|10em 20em 30em| %>
<div class="examples-container">
<% @examples.each do |t| %>
+ <%= content_tag :div, style: "background-color: #{colors.sample};width:#{widthes.sample};height:#{widthes.sample}" do %>
<div class="example">
<%= t.body %>
</div>
<% end %>
<% end %>
とすると縦・横の幅が10em・20em・30emの中から任意に取られます！
面白いですね！
終わりに
この機能で色々なことができると思います！背景写真をランダムに変えたり、投稿画面を色鮮やかにしたりなどなど！
プロダクトはあなたの思い通りに
GeekSalonWebメンターいとじゅんがお送りしました！
Author And Source
この問題について(【Rails】背景色・色・フォントなどランダムに投稿), 我々は、より多くの情報をここで見つけました https://zenn.dev/junpppppppp/articles/a50ef8fc640192著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol