【HTML+CSS3】filterプロパティが楽しい！早速活用してバイクの外装色変えWebアプリを作ってみた #JavaScript

最近は便利なCSSプロパティが増えてますね。filterとか。

いやあ、本当に10年前は考えられなかったような便利なモノや、高機能な(昔はJSがないとできなかったような)モノが、今ではCSSで簡単に実装できるようになりました。素晴らしいことです。

その1つ。個人的に便利だなあというか嬉しいなあと思うモノの1つに「filter」があります。filterのMDN web docsはこちら。

css filterとは

css filterとは、簡単に画像にエフェクトをかけることができるcssプロパティで、モダンブラウザでのみ使用することができます。(IE11以下はNG)

例えば、画像を白黒にするためには

img{
  filter: grayscale(100%);
}

画像をぼかすには


img{
  filter: blur(4px);
}

のようにすることで、簡単に簡単な画像加工ができます。

また、

url(): Takes an IRI pointing to an SVG filter, which may be embedded in an external XML file.
ということで、独自のfilterをxmlで定義して下記のように使用することもできます。

img{
  filter: url(resources.svg#c1);
}

filterプロパティを使ってバイクの外装色変えWebアプリを作ってみた

作ったもの

作ったWebアプリがこちら。

着せ替えMOTO!!

こんな感じの動きになっています。

ソースはGithubにあげてますので興味のある方はのぞいてみてください。こちらです。

仕組み

まあもう書くまでもないかとは思いますが...

バイクのパーツをPhotoshopで切り抜いく
HTML上に画像としていい感じに配置(position: absoluteとかでね)
左側の調整バーで色、鮮やかさ、明るさの変更イベントを検知してCSS filterの色(hue-rotate)，鮮やかさ(saturate)、明るさ(brightness)を変更して画像に適用する

というだけです。わおシンプル！

コアな部分のソースはこんな感じです。

            // 適用するfilterのスタイルを組み立て
            let filterStyle = ""

            // idを基に、部品に紐づく設定情報を取得
            $(`#${wrapperId} .controll-panel-input`)
                .each((i, v)=> {

                    // ホントはinput[type=range]で与えられた値をもとに構築する
                    filterStyle += "hue-rotate(90deg) saturate(120%) brightness(120%)"
                })

            // 作成した結果を適用
            $(`#moto-parts-${partsName}`).css("filter", filterStyle)

かなり割愛してますが、こんな感じで、各部品に対して

こんなシンプルなものですが、その車種のバイク乗りの方には地味に便利なアプリが出来上がりましたと、そんな感じの話でした。

また何か面白そうなものを作ったら更新していきます。