Help us understand the problem. What is going on with this article?

RGBまぜまぜ君を作る

More than 1 year has passed since last update.

今回作るもの

RGBまぜまぜ君です。よくある色を作るあれです。
Image from Gyazo

三本のバーを用意する

bars.haml
= range_field(:color, :red, in: 0..255,value: "0",class:"red-bar color-bar")
%br
= range_field(:color, :green, in: 0..255,value: "0",class:"green-bar color-bar") 
%br
= range_field(:color, :blue, in: 0..255,value: "0",class:"blue-bar color-bar") 

バーの解説

これがHTMLに変換されると以下のようになります。三本目のバーについて掲載しておきます。

range_field

範囲を選択できるバーができます。
長さが足りなかったり、場所や、見た目を変えたい時はCSSを当ててみてください。

<input value="0" class="blue-bar color-bar" min="0" max="255" type="range" name="color[blue]" id="color_blue">

:color,:blue

name属性、paramsのキーの記述。こんな風に飛ばした先で値を取得したい時とかに。

[1] pry(#<ColorController>)> params[:red]
=> "169"
[2] pry(#<ColorController>)> params[:green]
=> "246"
[3] pry(#<ColorController>)> params[:blue]
=> "255"

in: 0..255

0以上255以下の間で選択できるということを示しています。ちなみに、「.」を一つ増やすと、255は含まれず、0以上254以下となります。

(参考)範囲オブジェクト

range1 = 1..18 #1以上18以下の範囲
range2 = 1...18 #1以上18未満

その他

CSSを当てたり、JavaScvriptを動かすためのクラス名などです。

value:"0"

初期値を0に設定しています。つまみの位置です。

色を変化させる処理

ここからの処理は結構脳筋です。

色の値は各色につき、0を含めて256通りあるので、256の3乘枚の背景画像を用意して、条件分岐で差し込んでいます。

まず、CSSを操作することを考えますが、viewからCSSに値を渡してどうこうするというのが思いつかない。

CSSをどこに書くか

1.別ファイルに書く (HTMLとCSSを混ぜない)
2.styleタグ (HTMLの中にまとめて記述)
3.タグに直書き (HTMLのタグそれぞれにバラして記述)

以上のようにCSSを記述する場所は3つ思いついたので、あんまり使ったことのない3番の選択肢を使うことを試みます。

男は黙ってjQuery

jQueryの導入については参考になる記事がたくさんあるので割愛します!!

$('.green-bar').change(function(){//バーの値が変化したら発火
  $('.color-edit__box').css('background-color', getRGB);
});

.color-edit__boxといのは背景を変えていた四角い箱のクラス名です。getRGBというのは定義した関数です。これを、red,green,blueの3本分用意します。

getRGB
function getRGB(){
    var red = $('.red-bar').val();//それぞれのバーの値を取得して
    var green = $('.green-bar').val();
    var blue = $('.blue-bar').val();
    var RGB = 'rgb(' + red + ','+ green + ','+ blue + ')';//スタイルシートの記述へ変換
    return RGB;//rgb(255,200,233)みたいなのを返します。
  }

まとめ

結構簡単にできますし、動きもあって割と楽しいので、よろしければ作ってみてください。

おまけ

今作っているアプリでは、さらに数値表示と保存ができるようにしています。

Image from Gyazo

別途CSSが必要ですが、ビューとjsはこのような形です。

      .color-edit
        .color-edit__box
        .color-edit__form
          %br
          = range_field(:color, :red, in: 0..255,value: "0",class:"red-bar color-bar") 
          %br
          = range_field(:color, :green, in: 0..255,value: "0",class:"green-bar color-bar") 
          %br
          = range_field(:color, :blue, in: 0..255,value: "0",class:"blue-bar color-bar") 
          %br
        .color-edit__rgb
          RGB
          .color-edit__rgb__red
            0
          .color-edit__rgb__green
            0
          .color-edit__rgb__blue
            0
        =link_to "reset","",class:"color-edit__reset"

      .color-edit__registration
        = form_with url: {controller: :color, action: :create} ,method: :post do |f|
          = f.text_field :name,class:"color-edit__registration__name",placeholder: "色に名前をつけましょう"
          = f.text_area :text,class:"color-edit__registration__text",placeholder: "それはどんな色ですか?"
          = f.hidden_field :red, value: "0",class: "color-edit__registration__red"
          = f.hidden_field :green, value: "0",class: "color-edit__registration__green"
          = f.hidden_field :blue, value: "0",class: "color-edit__registration__blue"
          = f.submit value:"Save",class:"color-edit__registration__submit blue" 
$(function(){
  function getRGB(){
    var red = $('.red-bar').val();
    var green = $('.green-bar').val();
    var blue = $('.blue-bar').val();
    var RGB = 'rgb(' + red + ','+ green + ','+ blue + ')';
    return RGB;
  }

  $('.red-bar').change(function(){
    var red = this.value
    $('.color-edit__rgb__red').empty();
    $('.color-edit__rgb__red').append(red);
    $('.color-edit__box').css('background-color', getRGB);
    $('.color-edit__registration__red').val(red);
  });

  $('.green-bar').change(function(){
    var green = this.value
    $('.color-edit__rgb__green').empty();
    $('.color-edit__rgb__green').append(green);
    $('.color-edit__box').css('background-color', getRGB);
    $('.color-edit__registration__green').val(green);
  });

  $('.blue-bar').change(function(){
    var blue = this.value
    $('.color-edit__rgb__blue').empty();
    $('.color-edit__rgb__blue').append(blue);
    $('.color-edit__box').css('background-color', getRGB);
    $('.color-edit__registration__blue').val(blue);
  });
});

終わりに

ありがとうございました!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした