ストリートビューの実装方法と、アマゾンのトップページにあるリング状の選択ボックスの実装方法について

解決済

質問者：miraise
質問日時：2008/09/07 21:48
回答数：6件

いつもお世話になっています。
過去ログをあさってみたのですが見つけられなかったので質問します。

二点あります。

1.googleストリートビューのような、360度回転できる機能はどのライブラリを用いて実装されているのでしょうか？複数の写真を撮り、Ajaxで読み込み表示しているのだろう、ということはわかるのですが、写真と写真のつなぎ目がないし、単に写真をつないだだけではなくて、写真画像を変形させてつないでいるようにも見えます(いろいろ調べてみると、この機能自体はずいぶん昔からあったようですね。ホテルの内装とかを見やすくするために導入されていたりしたようです)。

2.アマゾンのトップページをなんどかリロードすると、奥行きのあるドーナツ状に商品画像が並んでいて、それを回転させることができます。
これはどのライブラリで実現しているのでしょうか？
ソースを見ると、該当する場所は
<div class="asinTextBlock">
<p class="seeMore">
<span class="carat">
のようになっている？ようなのですが、追いきれません。。

まだまだ未熟なのですが、志を高く勉強して行きたいので、どのライブラリで実現できるのか、またはライブラリなしで可能なのか、アマゾンオリジナルのライブラリを使用しているのか、、教えてください。

よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

ベストアンサー優先
最新から表示
回答順に表示

No.5ベストアンサー

回答者： _pipi_
回答日時：2008/09/09 20:20

ちょっといじっているうちに、はまってきた！

<html>
<head>
<style>
</style>
<script>
var x=[],y=[],b=[],o=[],n=[];
var sp=1;
setInterval(c,50);
window.onload=function(){
for(i=0;i<=360;i++){
zx=Math.sin(i*3.14159/180)*300;
zz=Math.cos(i*3.14159/180)*300;
zy=-150;
zk=(1000-zz)/800;
x[i]=251-zx/zk;
y[i]=-zy/zk-80;
b[i]=((700+zz)/1000)*120|0;
}
o=document.getElementById('a').getElementsByTagName('img');
p=(360/o.length)|0;
for(var i=0,m=o.length;i<m;i++){
o[i].style.position='absolute';
o[i].style.top=y[p*i];
o[i].style.left=x[p*i];
n[i]=p*i;
}
}

function c(){
for(i=0;i<o.length;i++){
o[i].style.left=x[n[i]];
o[i].style.top =y[n[i]];
o[i].style.width =b[n[i]];
o[i].style.height=b[n[i]];
o[i].style.zIndex=b[n[i]];
n[i]=(sp+n[i])%360;
}
}

</script>
</head>
<body>
<div id="a" style="width:600px;height:230px;border:1px #080 solid;position:absolute;top:50px;">
<input type="button" value="回転" onClick="sp=1;">
<input type="button" value="停止" onClick="sp=0;">
<img src="./img/0.gif" width=120" height="120" alt="ぐ～ぐるに！" onClick="location.href='http://www.google.co.jp/webhp?complete=1&hl=ja'">
<img src="./img/1.gif" width=120" height="120" alt="2">
<img src="./img/2.gif" width=120" height="120" alt="3">
<img src="./img/3.gif" width=120" height="120" alt="4">
<img src="./img/4.gif" width=120" height="120" alt="5">
<img src="./img/5.gif" width=120" height="120" alt="6">
<img src="./img/6.gif" width=120" height="120" alt="7">
<img src="./img/7.gif" width=120" height="120" alt="8">
<img src="./img/8.gif" width=120" height="120" alt="9">
<img src="./img/9.gif" width=120" height="120" alt="10">
</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます！
ハマってしまいましたか(笑)
コピペして動かしてみました。
アマゾンのドーナツリングと同じですね！
もっと複雑なもの(数百行のコードとかライブラリ活用とか)で作られているのかと思っていました。
技術と実現するアイデアと頭脳があれば、作れるんですね。
私はまだまだ駆け出しだと再認識しました＞＜

職場では、
onClickで数値チェック関数を呼ぶ、
スタイルはあらかじめ決められているものをclassに指定、
BOMはwindow.openerだけ、
DOMは未使用、Ajaxなんてとんでもない・・・
という環境ですので、身に着く技術が少ない、それに何より、楽しくない！と思って独習中です。

解説も書いていただきありがとうございました。
また、360度ずつにしていただき、私にも(なんとなく)理解できるようになりました。特に、
n[i]=(sp+n[i])%360;
のところは、(たぶん)spの値ずつ増やしていくのに剰余をうまく使っていて、spの値を変えることでc()自体の処理結果を無効にしてしまう、というテクニックでとても勉強になりました。

よいご回答者様に出会えてよかったです。
もう一つの、上下左右ぐるぐる回転のものも、いろいろ調べて、知恵を絞って考えてみます。
ご回答ありがとうございましたm(_ _)m
＃〆切りは週末を予定しています。

通報する

お礼日時：2008/09/09 23:02

No.6

回答者： _pipi_
回答日時：2008/09/09 23:19

http://mike.teczno.com/giant/pan/
これはどうでしょう？
大きい画像を分割して表示します。
まるでぐ～ぐるマップみたいな感じ

実はこれ、俺が探してました！
町内の細かい地図をスキャンして・・・・^^;

よい回答者かは微妙？！
違う掲示板では、文法違反の続出で駄目出しされました！
ちなみにぐるぐる回るやつの画像に数字の画像を割り振って
時計にしてみました！自己満足の世界ですね^^;

- 0
- 件

通報する

この回答へのお礼

ご回答いただきありがとうございます！

お返事が遅れました。
いまはFlexとか出てきてますけど、JavaScriptでもいろいろなことができるんですよね。もっと勉強したいと思います。
探していただきありがとうございましたm(_ _)m

通報する

お礼日時：2008/09/14 11:42

No.4

回答者： _pipi_
回答日時：2008/09/09 08:30

どのあたりがIE用、という理由なのでしょうか？

＞zoomかな？

>x[],y[],b[]配列の意味は座標とズームの値が入っている配列だとわかったのですが(その算出ロジックの意味はわかりませんが・・・)、

zx,zy,zzの配列は仮想空間での座標系。
x,yは２次元座標系に戻したもの
bは見た目の大きさ（遠くほど係数は小さくなる）
zx,zyをそれぞれzzで割ります。それだと小さくなるので適当な大きさの数値を適当に乗算してます。
これらはスピードが要求される計算なので、あらかじめ計算しておくためです

＞var p=(90/o.length)|0;
|0としても演算のビットは変化しませんが、小数点以降が削除されます
つまりMath.floorと同じで短いから最近使ってます。
前もって配列に格納する点座標は９０個。
便宜上、３６０度を９０度にして計算してます。
だから３６０個の配列を用意して、細かく制御すると
いきなり停止するのではなく
加速したり減速したりする動作が実現できますね！

- 0
- 件

通報する

No.3

回答者： _pipi_
回答日時：2008/09/08 16:21

もうひとつ

http://www.virtual-gadjo.com/mooVRotatingMenu.php

この回答への補足

「360度　javascript」でググると、左右に一回転できるパノラマ風のサンプルは出てくるのですが、ストリートビューで実装されているような、上下にも動かせるのはないみたいですね。
いろいろ探していて、大人のホテル案内で実装しているページを見つけました。ただ、
直リンクはどうかな・・とおもったのでhを外してあります。
ttp://www.hotel-mw.com/heya_kyakushitsu.html
ソースを見ると、appletのようですね。Javaではなく、javascriptでは実装できないのでしょうか。もしご存知でしたらよろしくお願いいたします。

補足日時：2008/09/09 07:16

通報する

- 0
- 件

通報する

この回答へのお礼

こちらは、マウスの位置でリングの傾きが変わるタイプですね。
こんなこともできるのですね。
サイトは英語ではない？ようなので(ドイツ語かな・・)、異境に迷い込んだ気がしてしまいましたが、参考になりました。
このサイトはいろいろとアクションがついていて、
「やる気になればなんでもできる！」(猪木風ですね。。)
という気になりました。ご紹介いただきありがとうございました！

通報する

お礼日時：2008/09/08 21:36

No.2

回答者： _pipi_
回答日時：2008/09/08 16:17

２のアマゾンみたいなやつ

http://www.coswest.com/c/jquery/carousel3d/

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。
参考サイト、見させていただきました。
このサイトではjQueryを使っているようですね。
prototype.jsしかまだ触れていないので、これから勉強していこうと思います。とても参考になるサイトを紹介してくださりありがとうございました！

通報する

お礼日時：2008/09/08 21:33

No.1

回答者： _pipi_
回答日時：2008/09/08 09:35

＞志を高く勉強して

という意気込みは好感がもてますね～！
全然質問の答えになっていませんが・・
奥行きのあるリング状に回転するやつを書いてみました！(IE用)
もちろん私も日々勉強中です。
<html>
<head>
<style>
.m{ position:absolute;left:0px;top:0px;}
</style>
<script>
var x=[],y=[],z=[],b=[];
for(i=0;i<90;i++){
zx=Math.sin(i*3.14159/45)*220;
zz=-Math.cos(i*3.14159/45)*220;
zy=-30;
zk=(300-zz)/200;
x[i]=250+zx/zk;
y[i]=100-zy/zk;
b[i]=1/(700-zz)*400;
}
var o=[];
var n=[];
var f;
function c(){
for(i=0;i<o.length;i++){
o[i].style.left=x[n[i]];
o[i].style.top =y[n[i]];
o[i].style.zoom=b[n[i]];
n[i]=(++n[i])%90;
}
}

window.onload=function(){
o=document.getElementById('a').getElementsByTagName('img');
var p=(90/o.length)|0;
for(var i=0,m=o.length;i<m;i++){
o[i].style.top=y[p*i];
o[i].style.left=x[p*i];
n[i]=p*i;
}
f=setInterval("c()",10);
}
</script>
</head>
<body>
<input type="button" value="回転" onClick="if(!f)f=setInterval(c,10)">
<input type="button" value="停止" onClick="clearInterval(f);f=0;">

<div id="a" style="width:600px;height:300px;">
<img src="0.gif" width=120" height="120" alt="1" class="m">
<img src="1.gif" width=120" height="120" alt="2" class="m">
<img src="2.gif" width=120" height="120" alt="3" class="m">
<img src="3.gif" width=120" height="120" alt="4" class="m">
<img src="4.gif" width=120" height="120" alt="5" class="m">
<img src="5.gif" width=120" height="120" alt="6" class="m">
<img src="6.gif" width=120" height="120" alt="7" class="m">
</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。
携帯で見ながら職場で手打ちしてみたところ、IE6で動きました!(当たり前か)。ですが、職場のFirefox3では動かなかったです。
で、帰宅してからコピペでhtmlを作ってみたところ、Firefox3でも動きました。手打ちしたのがよくなかったのかもしれません(職場はネットにつながっていないのです)。
どのあたりがIE用、という理由なのでしょうか？

また、
x[],y[],b[]配列の意味は座標とズームの値が入っている配列だとわかったのですが(その算出ロジックの意味はわかりませんが・・・)、
var p=(90/o.length)|0;
についてなのですが、最後の|0 はORのビット演算でしょうか？
他の部分は、数学的なものとして置いておいても、この|0 の意味だけがわかりません。よろしければご回答ください。

＃スタイルシートで指定して、見かけ上ドーナツリングになっているように見せている、というのは思いつきませんでした。またDOMやオブジェクトの扱いも参考になりました。あとは、数学的に理解すること、ですね。がんばります。
ご回答ありがとうございました！

通報する

お礼日時：2008/09/08 21:31

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！