LoginSignup
2
1

More than 3 years have passed since last update.

【Rails Colorpicker】カラーピッカーの選択色を特定要素の色と連動させる

Last updated at Posted at 2020-12-12

【Rails Colorpicker】カラーピッカーの選択色を特定要素の色と連動させる

この記事でできるようになること

以下のGIFのように、カラーピッカーで選択した色がリアルタイムで、何か特定の要素の持つ色と連動させることができるようになる!
GIFではちょっとわかりにくいですが、今回はFontawesomeで用意したピンの色と、カラーピッカーでの選択色とをリアルタイムで連携させてます。

カラーピッカーとの連携.gif

考え方

以下のことをやっていくとなんかいけそうだとまず考える。
①カラーピッカーで選択している色を取得する
②その選択色をもってして、ピンのcolorを変更する

んー簡単そう。
とりあえず、やってみよ

あ、ちなみにカラーピッカーはHTML5の標準搭載の機能でした
めっちゃすごない???!!
これだけでカラーピッカー実装できるんですよ?。。。

index.html
<input type="color">

実装コーディング

index.html.erb
<%# ↓これがアイコン %>
<i class="fas fa-location-arrow" id="arrow-icon"></i>

<%# ↓これがカラーピッカー %>
<input type="color" class="arrow-icon-color-selector" id="arrow-icon-colorーselector" value="#e66465">
index.js
  // まずカラーピッカーの要素をcolorpickerという変数に入れる
  const colorpicker = document.querySelector('.arrow-icon-color-selector');

  // 次に、ピンの要素をarrowiconという変数に入れる
  const arrowicon = document.getElementById('arrow-icon');

  colorpicker.addEventListener('input', function(e) {  // カラーピッカーの入力値(inputの値)が変更されたら{}内の処理を実行する
    arrowicon.style.color = e.target.value; // アイコンのCSSのcolorプロパティの値を右辺の値にする。右辺の値とはすなわち、カラーピッカーでの選択値である。
 });

コーディングもめっちゃシンプルでした。。。。
応用すれば、画面の背景を変えたりできるので是非に!

例えばこんな感じにしたかったら

カラーピッカーと背景の連動.gif

index.js
  const colorpicker = document.querySelector('.arrow-icon-color-selector');
  const arrowicon = document.getElementById('arrow-icon');

  colorpicker.addEventListener('input', function(e) {
    document.body.style.backgroundColor = e.target.value;
  });

以上です!!
お疲れ様でした!!

2
1
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
1