【Rails Colorpicker】カラーピッカーの選択色を特定要素の色と連動させる
この記事でできるようになること
以下のGIFのように、カラーピッカーで選択した色がリアルタイムで、何か特定の要素の持つ色と連動させることができるようになる!
GIFではちょっとわかりにくいですが、今回はFontawesomeで用意したピンの色と、カラーピッカーでの選択色とをリアルタイムで連携させてます。
考え方
以下のことをやっていくとなんかいけそうだとまず考える。
①カラーピッカーで選択している色を取得する
②その選択色をもってして、ピンの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プロパティの値を右辺の値にする。右辺の値とはすなわち、カラーピッカーでの選択値である。
});
コーディングもめっちゃシンプルでした。。。。
応用すれば、画面の背景を変えたりできるので是非に!
例えばこんな感じにしたかったら
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;
});
以上です!!
お疲れ様でした!!