バイクの外装の色を簡単に変えられるWebアプリを作りました!まずはGN125Hから!

公開日:2019.05.09
更新日:2019.06.05
バイクの外装の色を簡単に変えられるWebアプリを作りました!まずはGN125Hから!

今回は、バイクの外装の色を簡単にいい感じに変えて外装シミュレーションできるよ!というWebアプリを作りました!という記事です。

着せ替えMOTO!!

バイクをカスタムしたい、というかバイクを塗装したい!という方向けのWebアプリで、

「バイクの塗装したい!でも結果の色感が掴み切れないなあ…シミュレーションをするのにPhotoshopでマスク作ってバイクの部品に被せて…ああめんどい!!」

という経験があるかと思います。ないか。

作ったアプリについて

そういう時に、このWebアプリです。

いい感じにバイクの色を変更できます。こんな感じになります。ちなみに、現状はGN125Hだけです。ええ。

実際の編集画面はこちら↓

左側に、編集可能な部品名が表示されます。そこをクリックすれば編集可能要素(今のところは3個)が表示されるので、ツマミをお好みで調整するだけです。

    • 色相が変更できます
    • 色自体を赤色や黄色などに変更したい場合はここを変更します
  • 鮮やかさ
    • まんまですね。彩度を変更できます
    • ツマミを一番左に設定すると灰色となります
  • 明るさ
    • こちらもまんまですね。明るさを変更できます
    • ツマミを一番左に設定すると真っ黒になります

その時の設定がイケてる!と思ったら、一番左下の設定「現在の設定を保存」ボタンで保存できます。

保存しておけば、再度このページを開けば前回保存時の内容で初期表示されます。

画面右下のボタンを押下すれば、現在表示されている画像をダウンロードできます。

ただし!

残念ながら、ダウンロードに対応しているのは、Google Chrome又はFirefoxのブラウザだけです…

ので、iOSの皆様、すみません。スクショ撮ってください…

着せ替えMOTO!!

一応参考までにアプリ本体についての説明(プログラム的な)

私のための備忘のために、一応残しておきます。

最低限の機能を作るまでにかかった工数

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アプリを作りましたよ!という話でした。

とりあえず今後としては、

  • バイクの角度を増やす
  • バイクの種類を増やす

をちょっとだけ進めていこうと思っています。

はい。ほかに何か要望があれば、あまり難しくなければ修正していこうかなと思ってます!

今回は以上です!

着せ替えMOTO!!

【文字数:1819文字】

バイクカテゴリの最新記事