記事の詳細
ファッション系のECサイトで役立つ!服やアクセサリー画像の「着せ替えアプリ」機能の実装方法
ファッション系のECサイトと相性の良さそうな「着せ替え」機能を簡単に実装するプログラムを作ってみました。
今回のブログの見出しはコチラです!
使用する言語
- HTML
- CSS
- JavaScript
- jQuery
※JavaScriptやjQueryの基本的な使い方は割愛させてただきます。
着せ替え機能のサンプル
服の画像をクリックすると、服を組み合わせた画像を上部に表示します。
各種コードの説明
HTMLコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div id="kisekae-area"> <img class="base-img" src="https://incloop.com/wp-content/uploads/2020/07/base.png"> </div> <div id="select-img-area"> <p class="select-img"> <img src="https://incloop.com/wp-content/uploads/2020/07/item1-cutout.png"> <img src="https://incloop.com/wp-content/uploads/2020/07/item1.png"> </p> <p class="select-img"> <img src="https://incloop.com/wp-content/uploads/2020/07/item2-cutout.png"> <img src="https://incloop.com/wp-content/uploads/2020/07/item2.png"> </p> <p class="select-img"> <img src="https://incloop.com/wp-content/uploads/2020/07/item3-cutout.png"> <img src="https://incloop.com/wp-content/uploads/2020/07/item3.png"> </p> <p class="select-img"> <img src="https://incloop.com/wp-content/uploads/2020/07/item4-cutout.png"> <img src="https://incloop.com/wp-content/uploads/2020/07/item4.png"> </p> </div> |
class「select-img」の二枚の画像は、一枚目がユーザーがクリックする選択用の画像、二枚目は着せ替え用の画像として使います。
二枚目の画像は着せ替えのみに使いますので、CSSの設定で非表示化しておきます。
着せ替え用の画像を作成する際には、基準となる画像と同じサイズで、レイヤーのように組み合わせた際に違和感が無いような位置に調整して作成します。
jQuery(JavaScript)コード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<script> <!-- jQuery(function($) { // 画像エリアクリックイベント $('.select-img').on('click', function(){ $(this).toggleClass('selected'); change_img(); }); // 画像変更処理 function change_img(){ var s_html = ''; var i_z_index = 1; $('.select-img.selected').each(function(index, element){ s_html += '<img src="' + $(element).find('img').eq(1).attr('src') + '" style="z-index:' + i_z_index + '">'; i_z_index++; }); // 要素削除 $('#kisekae-area img').each(function(index, element){ if(!$(this).hasClass('base-img')){ $(this).remove(); } }); // 要素追加 $('#kisekae-area').append(s_html); } }); --> </script> |
選択済みのimgタグを全て取得したら、class「base-img」以外の画像を一度消して、選択された画像のみで取得したimgタグを着せ替え画像のエリアに埋め込みます。
※z-indexは後半に取得した要素ほど上にくるような処理になっているため、画像の順番に気を付けてください。
CSS(スタイルシート)の設定
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<style> #kisekae-area { border: solid; margin-bottom: 10px; text-align: center; position: relative; } #select-img-area { display: -webkit-box; display: -ms-flexbox; display: flex; } .select-img { border: solid 1px #000; text-align: center; padding: 10px; width: 20%; margin-right: 5px; cursor: pointer; } .select-img img { display: none; } .select-img img:first-child { display: inline-block; } .select-img:hover { background-color: #e6e6e6; opacity: 0.6; } .select-img.selected { background-color: #e6e6e6; } #kisekae-area img { position: absolute; top: 0; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); } #kisekae-area img.base-img { position: relative !important; top: auto; left: auto; transform: none; -webkit-transform: none; -ms-transform: none; } </style> |
位置を調整しないとレスポンシブの際に表示が崩れてしまうため、leftやtransformで真ん中に表示されるように調整しています。
今回は簡易的なコードで組みましたが、画像の命名規則などをしっかり決めることができれば、隠している画像も不要になるかもしれませんね。
コロナの影響でECサイトが盛り上がっていますので、今回の着せ替えプログラムはECサイトで役立つかもしれません!
弊社では本記事のようなシステムの実装に関するご相談も承っておりますので、もし興味がありましたらお問い合わせまでお気軽にご連絡ください。
ではまた!