- ベストアンサー
ストリートビューの実装方法と、アマゾンのトップページにあるリング状の選択ボックスの実装方法について
- googleストリートビューの実装方法や、アマゾンのトップページにあるリング状の選択ボックスの実装方法について教えてください。
- googleストリートビューは、複数の写真を撮ってAjaxで読み込み表示しているようですが、写真と写真のつなぎ目がなく、写真画像を変形させてつないでいるようにも見えます。アマゾンのトップページでは、商品画像が奥行きのあるドーナツ状に並んでおり、回転させることができます。どのライブラリを使用してこれらの機能を実現しているのか、またはライブラリなしで可能なのか教えてください。
- ストリートビューやアマゾンのトップページの実装方法について教えてください。
- miraise
- お礼率83% (152/183)
- JavaScript
- 回答数6
- ありがとう数13
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
ちょっといじっているうちに、はまってきた！ <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>
その他の回答 (5)
http://mike.teczno.com/giant/pan/ これはどうでしょう？ 大きい画像を分割して表示します。 まるでぐ～ぐるマップみたいな感じ 実はこれ、俺が探してました！ 町内の細かい地図をスキャンして・・・・^^; よい回答者かは微妙？！ 違う掲示板では、文法違反の続出で駄目出しされました！ ちなみにぐるぐる回るやつの画像に数字の画像を割り振って 時計にしてみました！自己満足の世界ですね^^;
お礼
ご回答いただきありがとうございます！ お返事が遅れました。 いまはFlexとか出てきてますけど、JavaScriptでもいろいろなことができるんですよね。もっと勉強したいと思います。 探していただきありがとうございましたm(_ _)m
どのあたりがIE用、という理由なのでしょうか？ ＞zoomかな？ >x[],y[],b[]配列の意味は座標とズームの値が入っている配列だとわかったのですが(その算出ロジックの意味はわかりませんが・・・)、 zx,zy,zzの配列は仮想空間での座標系。 x,yは２次元座標系に戻したもの bは見た目の大きさ（遠くほど係数は小さくなる） zx,zyをそれぞれzzで割ります。それだと小さくなるので適当な大きさの数値を適当に乗算してます。 これらはスピードが要求される計算なので、あらかじめ計算しておくためです ＞var p=(90/o.length)|0; |0としても演算のビットは変化しませんが、小数点以降が削除されます つまりMath.floorと同じで短いから最近使ってます。 前もって配列に格納する点座標は９０個。 便宜上、３６０度を９０度にして計算してます。 だから３６０個の配列を用意して、細かく制御すると いきなり停止するのではなく 加速したり減速したりする動作が実現できますね！
お礼
こちらは、マウスの位置でリングの傾きが変わるタイプですね。 こんなこともできるのですね。 サイトは英語ではない？ようなので(ドイツ語かな・・)、異境に迷い込んだ気がしてしまいましたが、参考になりました。 このサイトはいろいろとアクションがついていて、 「やる気になればなんでもできる！」(猪木風ですね。。) という気になりました。ご紹介いただきありがとうございました！
補足
「360度 javascript」でググると、左右に一回転できるパノラマ風のサンプルは出てくるのですが、ストリートビューで実装されているような、上下にも動かせるのはないみたいですね。 いろいろ探していて、大人のホテル案内で実装しているページを見つけました。ただ、 直リンクはどうかな・・とおもったのでhを外してあります。 ttp://www.hotel-mw.com/heya_kyakushitsu.html ソースを見ると、appletのようですね。Javaではなく、javascriptでは実装できないのでしょうか。もしご存知でしたらよろしくお願いいたします。
２のアマゾンみたいなやつ http://www.coswest.com/c/jquery/carousel3d/
お礼
ご回答ありがとうございます。 参考サイト、見させていただきました。 このサイトではjQueryを使っているようですね。 prototype.jsしかまだ触れていないので、これから勉強していこうと思います。とても参考になるサイトを紹介してくださりありがとうございました！
＞志を高く勉強して という意気込みは好感がもてますね～！ 全然質問の答えになっていませんが・・ 奥行きのあるリング状に回転するやつを書いてみました！(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>
お礼
ご回答ありがとうございます。 携帯で見ながら職場で手打ちしてみたところ、IE6で動きました!(当たり前か)。ですが、職場のFirefox3では動かなかったです。 で、帰宅してからコピペでhtmlを作ってみたところ、Firefox3でも動きました。手打ちしたのがよくなかったのかもしれません(職場はネットにつながっていないのです)。 どのあたりがIE用、という理由なのでしょうか？ また、 x[],y[],b[]配列の意味は座標とズームの値が入っている配列だとわかったのですが(その算出ロジックの意味はわかりませんが・・・)、 var p=(90/o.length)|0; についてなのですが、最後の|0 はORのビット演算でしょうか？ 他の部分は、数学的なものとして置いておいても、この|0 の意味だけがわかりません。よろしければご回答ください。 ＃スタイルシートで指定して、見かけ上ドーナツリングになっているように見せている、というのは思いつきませんでした。またDOMやオブジェクトの扱いも参考になりました。あとは、数学的に理解すること、ですね。がんばります。 ご回答ありがとうございました！
お礼
ご回答ありがとうございます！ ハマってしまいましたか(笑) コピペして動かしてみました。 アマゾンのドーナツリングと同じですね！ もっと複雑なもの(数百行のコードとかライブラリ活用とか)で作られているのかと思っていました。 技術と実現するアイデアと頭脳があれば、作れるんですね。 私はまだまだ駆け出しだと再認識しました＞＜ 職場では、 onClickで数値チェック関数を呼ぶ、 スタイルはあらかじめ決められているものをclassに指定、 BOMはwindow.openerだけ、 DOMは未使用、Ajaxなんてとんでもない・・・ という環境ですので、身に着く技術が少ない、それに何より、楽しくない！と思って独習中です。 解説も書いていただきありがとうございました。 また、360度ずつにしていただき、私にも(なんとなく)理解できるようになりました。特に、 n[i]=(sp+n[i])%360; のところは、(たぶん)spの値ずつ増やしていくのに剰余をうまく使っていて、spの値を変えることでc()自体の処理結果を無効にしてしまう、というテクニックでとても勉強になりました。 よいご回答者様に出会えてよかったです。 もう一つの、上下左右ぐるぐる回転のものも、いろいろ調べて、知恵を絞って考えてみます。 ご回答ありがとうございましたm(_ _)m ＃〆切りは週末を予定しています。