【Rails】背景色・色・フォントなどランダムに投稿したい！！

【Rails】背景色・色・フォントなどランダムに投稿

はじめに

本記事では
RubyのSampleメソッドを用いて実装を行なっています

下準備

興味のない方は飛ばしてOK

terminal

rails new sample
rails db:create  
rails g model Example body:string
rails db:migrate
rails g controller examples
code .

config/routes.rb

  resources :examples
  root 'examples#index'

app/controllers

    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に作成し、以下をコピペします

app/views/examples/index.html.erb

<%= 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コード

一度試してみましょう

app/views/examples/index.html.erb

<%= 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メンターいとじゅんがお送りしました！