たぶんラブドールのショップサイトに求められているのはこういう機能
↓こういうの。
※マウスまたはタッチ操作で回転します。もしくは一度画像をクリックしてからキーボードの矢印キーでも操作可能。
最初に提案したのは2015年4月頃に投稿した「Libidollのヘッドを360度ぐりぐり動かせるページを作ってみた」でした。
当時は一部のパソコンメーカーや車のページで導入されているくらいでしたが、実際導入するのは大した手間でもないのでドールの販売サイトでも頼んますよ、という投げかけでしたが、ほぼ無反応。
一部、写真家の方が「これ作るのに写真何枚くらい必要ですか？」と聞いてきたくらい。最低8枚、できれば12枚以上必要です。
しかし…
3面図も12面図も写真撮る手間は大して変わらない
今回撮った写真はこれで全部。
恥ずかしながら五十肩………整形外科いわく厳密には五十肩ではなく、石灰化らしいのですが、ともかく肩の調子がとても悪く、この撮影中も激痛でドールさん倒してしまったので、途中で顔の角度変わってしまっていますが、健康体の人ならそんなこともないはず。
ターンテーブルに載せれば良いだけの小物撮影に比べると手間ですが、いったん裸のドールさん用意したら30度ずつ角度変えてシャッター押すだけなんだから、簡単でしょ？
もちろん動画でも良いし、むしろ動画のほうが良いんだけど、あらゆるドールさんの動画撮影とかファイルサイズ、帯域幅等を考えると普通のショップサイトでやるのは現実的ではないように思います。ラブドールのショップサイト、4000商品とか扱ってるからね。
それに、少しでも魅力的な写真を撮って現像処理でコネコネ加工して魅力的に魅せたいというそんな思惑もあるはず。だから加工が面倒な動画はメーカーも作りたがらないのではないだろうか。実情は知らんけどｗ
いずれにせよ、静止画であれば正面写真を撮る→現像処理を頑張る→残りの角度違いの全部の写真に現像設定をコピペする、なんてことが可能なので、動画よりはだいぶ楽かと。
更に言うと背景加工も静止画のほうが楽でしょ。
上の12枚の写真、実際はこんな感じの部屋です。
電源コンセントや壁の影が気になるので背景をカットしました。
カット処理に使ったのは、rembgというPythonで作られたツール。AI学習モデルを利用してワンクリックで背景をカットしてくれます。12枚ほおり投げて数十秒待てば完了。よく見るとワリと雑な切り抜きで、ドールさんのまわりに灰色の影が残っています。だから背景も灰色にして誤魔化してる。
https://github.com/danielgatis/rembg
真面目にやりたいなら、Adobeなり何なりにしっかりお布施すればもっと良い加工できるんじゃないですかね。
導入方法1
2015年に使ったのは threesixtyjs というjQueryプラグインです。
https://github.com/nick-jonas/threesixtyjs
jQueryに抵抗がないなら、これが一番楽じゃないかしら。
個人的にはモダンブラウザが一般的になった今jQueryを使うことに抵抗があるので自分で作りました。
というわけで、
導入方法2
ジジ謹製スクリプト
20231211_zimage360.zip
使い方
中に入っているsample.htmlを見ればわかりますが、cssとjsを入れてこんな感じに書けばOK。
<link rel="stylesheet" type="text/css" href="zimage360.css">
<script src="zimage360.js" defer></script>
<div class="zimage360" tabindex="0" style="aspect-ratio:721/1080;background-color:#808080;">
<img src="/uploads/20231211_irokebijin_110cm_01.webp" loading="lazy">
<img src="/uploads/20231211_irokebijin_110cm_02.webp" loading="lazy">
<img src="/uploads/20231211_irokebijin_110cm_03.webp" loading="lazy">
<img src="/uploads/20231211_irokebijin_110cm_04.webp" loading="lazy">
<img src="/uploads/20231211_irokebijin_110cm_05.webp" loading="lazy">
<img src="/uploads/20231211_irokebijin_110cm_06.webp" loading="lazy">
<img src="/uploads/20231211_irokebijin_110cm_07.webp" loading="lazy">
<img src="/uploads/20231211_irokebijin_110cm_08.webp" loading="lazy">
<img src="/uploads/20231211_irokebijin_110cm_09.webp" loading="lazy">
<img src="/uploads/20231211_irokebijin_110cm_10.webp" loading="lazy">
<img src="/uploads/20231211_irokebijin_110cm_11.webp" loading="lazy">
<img src="/uploads/20231211_irokebijin_110cm_12.webp" loading="lazy">
</div>JavaScriptコード
そんなこと言われたって、どこの誰とも知らんヤツの配布したJavaScriptなんて怖くて使えるか！という方もおられるかと思います。
その認識は正しい。
中身のコードはついさっき書いた60行程度のものなので、JavaScript初心者でも理解できるはずです。
こんなものに著作権とか主張しないので、ご自由にお使いください。
堅苦しいコンプライアンスがあるところで使う場合は、MITライセンス扱いでOKです。
document.addEventListener('DOMContentLoaded',function () {
document.querySelectorAll('.zimage360').forEach (elm => { new zimage360(elm); });
});
class zimage360 {
constructor (elm) {
let thisObj = this;
this.elm = elm; //parent element
this.inDrag = false;
this.px = 0; //previous position
this.imgArray = []; //image elements
this.frameNo = 0;
this.threshold = elm.clientWidth / 200; //Sensitivity of rotation
elm.onpointerdown = function () {
thisObj.inDrag = true;
thisObj.px = event.clientX;
};
elm.ontouchmove = function () {
event.preventDefault();
};
elm.onpointerup = function () {
thisObj.inDrag = false;
};
elm.onpointerleave = function () {
thisObj.inDrag = false;
};
elm.oncontextmenu = function () {
return false;
};
elm.onpointermove = function () {
if (!thisObj.inDrag) return;
thisObj.imgArray[thisObj.frameNo].style.visibility = 'hidden';
if (thisObj.px - event.clientX < -(thisObj.threshold)) {
thisObj.frameNo++; //to the right
thisObj.px = event.clientX;
}
if (thisObj.px - event.clientX > (thisObj.threshold)) {
thisObj.frameNo--; //to the left
thisObj.px = event.clientX;
}
if (thisObj.frameNo >= thisObj.imgArray.length) thisObj.frameNo = 0;
if (thisObj.frameNo < 0) thisObj.frameNo = thisObj.imgArray.length - 1;
thisObj.imgArray[thisObj.frameNo].style.visibility = 'visible';
};
elm.onkeydown = function () {
thisObj.imgArray[thisObj.frameNo].style.visibility = 'hidden';
switch (event.keyCode) {
case 37://arrow left
thisObj.frameNo--;
break;
case 39://arrow right
thisObj.frameNo++;
break;
}
if (thisObj.frameNo >= thisObj.imgArray.length) thisObj.frameNo = 0;
if (thisObj.frameNo < 0) thisObj.frameNo = thisObj.imgArray.length - 1;
thisObj.imgArray[thisObj.frameNo].style.visibility = 'visible';
}
elm.querySelectorAll('img').forEach (elm => {
thisObj.imgArray.push(elm);
});
this.imgArray[0].style.visibility = 'visible';
}
}余談
IT系に関しては、どこまでが必要とされている知識で、どこからが難しいと感じさせてしまうのかが、いまいちよくわかりません。
むかーし、ブログシステム作るのを頼まれたので、ホイっと作ったら「お客様にHTML入力させるとはなにごとか」と上司に怒られたことがあり、はぁそうっすか、とワードやエクセルのような編集機能をWebに組み込んだことがあります。出来ないのか？と言われたら、出来らぁ！とその必要性はともかくとしてついやってしまうという若気の至りです。あ、いまも変わってないや。
一方、少し前のことですが、WordPressでWYSIWYGエディタ（ワードみたいな編集機能）しか使えなくなったとき、えらい炎上してました。そりゃするでしょうとも。やってみりゃわかりますが、WYSIWYGエディタだけでブログ運営とか正気の沙汰じゃないです。
どこかで書いた気もするけれど、1～10まで説明すると話長いから聞いてもらえないし、いきなり10を話しても理解してもらえないし、人とのコミュニケーションって難易度高すぎない？ プラグ挿したら理解しあえる未来はよ。
(́∀`(⊃*⊂)
まとめ
コメント欄で、写真によってチチケツサイズが違って見えるという話を聞いて、思いつきで作ってみました。
たぶん無理だろうなァとは思っているけれど、ラブドールでも360度写真増えてくれると良いなぁ。
