今回は、バイクの外装の色を簡単にいい感じに変えて外装シミュレーションできるよ！というWebアプリを作りました！という記事です。
バイクをカスタムしたい、というかバイクを塗装したい！という方向けのWebアプリで、「バイクの塗装したい！でも結果の色感が掴み切れないなあ…シミュレーションをするのにPhotoshopでマスク作ってバイクの部品に被せて…ああめんどい！！」という経験があるかと思います。ないか。
そうした時に、さっくりバイクのカラーリングを変更してみたい…というニーズがあると思います！主に私から！
作った外装の色変更アプリについて
そういう時にこのWebアプリです。現在対応しているバイクの車種としては下記となります。
- レブル250/500(純正状態とカスタム状態)
- YZF-R25/YZF-R3
- DUKE390
- GN125(純正状態とカフェレーサースタイル)
- グラディウス400/グラディウス650
の5車種、7タイプとなっております。
いい感じにバイクの色を変更できます。こんな感じになります。
実際の編集画面はこちら↓
左側に、編集可能な部品名が表示されます。そこをクリックすれば編集可能要素(今のところは3個)が表示されるので、ツマミをお好みで調整するだけです。
- 色
- 色相が変更できます
- 色自体を赤色や黄色などに変更したい場合はここを変更します
- 鮮やかさ
- まんまですね。彩度を変更できます
- ツマミを一番左に設定すると灰色となります
- 明るさ
- こちらもまんまですね。明るさを変更できます
- ツマミを一番左に設定すると真っ黒になります
その時の設定がイケてる！と思ったら、一番左下の設定「現在の設定を保存」ボタンで保存できます。
保存しておけば、再度このページを開けば前回保存時の内容で初期表示されます。
画面右下のボタンを押下すれば、現在表示されている画像をダウンロードできます。
ただし！
残念ながら、ダウンロードに対応しているのは、Google Chrome又はFirefoxのブラウザだけです…
ので、iOSの皆様、すみません。スクショ撮ってください…
このアプリを使用して出来たバイクの画像サンプル
レブル250/レブル500
レブルのカスタムされた状態のモノをカラーリング調整してみました。イエローっぽい感じでレーシーな雰囲気を醸し出してみようかなと狙ってみました。アメリカンxイエローは流石にイマイチかなあ…と思っていましたが、これがなかなかどうして、良いぞ…!!こうした点がやる前に分かるというのはカスタム大好きマンとしては嬉しいですね…!!
YZF-R25/YZF-R3
おそらく純正カラーには無いオレンジカラーをメインとして使用してみました！YZF-R25です！HONDAのレプソルで使用されるようなカラーになってしまいますが…レーシー感じを強めたいならオレンジはアリですね…!!いいぞ…!!
GN125H(カフェレーサー)
これは完全に私専用の機能で、GNのカフェレーサーカスタムスタイルをグリーンxブラウンに変更してみました！悪くないですね。しかし、落ち着きすぎているような…ううむ。
一応参考までにアプリ本体についての説明(プログラム的な)
私のための備忘のために、一応残しておきます。
最低限の機能を作るまでにかかった工数
8h程度でした。
部品を切り出して、画像をいい感じに重ねて、色を変えて、ダウンロードするだけなので、アプリ自体はシンプルでさくっといけました。
途中、方針を変えたところで時間がかかってしまいました…反省しないと…
使ったフレームワークなど
アプリというほどのアレじゃないですが、使ったjsフレームワークはVue.jsで、cssフレームワークとしてはMaterializeを使っています。
普段、業務ではReact.jsを使っていますが、今回みたいなあまりスケールしないであろうアプリを作るならReactはちょっと大げさかなあと。
じゃあ小さなアプリを作るときはどうするかと考えた時に、pure.jsでいくか、jQueryでいくか、またはVue.jsだろうと。
前者2つじゃ面白くないので、Vue.jsにしました。といっても、jQueryも使ってるんですけどね。えへへ。
ロジックについて
当初の方針は、全部canvasに画像を表示して画像加工して終わりでしょ！のつもりだったのですが、意外とcanvasで画像編集が簡単んではなくて…(Fabric.jsとかを使えばいい感じにできそうでしたが)
他、canvasにはfilterプロパティが容易されており(2019年5月時点では「試験実装」)ましたが、こちらはiOSでは動かないということに気づき…
やっぱり、純粋DOMでimgを表示してcssプロパティのfilter方針にしました。
cssプロパティのfilterとは、画像に簡単にfilterをかけられるもので、例えば、grayscale(100%)などの値をセットしてあげるだけで白黒風の画像にできたりします。これに、左下のツマミ(input type=range)を対応させてあげているだけですね。
簡単です。
おわりに
というところで、今回はバイクの外装をいい感じのカラーリングに変更できるよ！というWebアプリを作りましたよ！という話でした。
とりあえず今後としては、
- バイクの角度を増やす
- バイクの種類を増やす
をちょっとだけ進めていこうと思っています。
はい。ほかに何か要望があれば、あまり難しくなければ修正していこうかなと思ってます！
今回は以上です！
