CGIで座標をセット。

質問

はじめまして。質問させて頂きます。
えっと、javascript等の着せ替えゲームのように、画像をスライドして好きな場所まで持ってきて、配置するようなものってありますよね。このサイトさんが使用してらっしゃるようなの。http://matsuyama.cool.ne.jp/kotechin2/g_kisekae.htm

あれをCGIで…その座標をデータにセットして、記憶させておきたいのですが、どうすれが良いのか、困ってしまっています。
イメージとしては、お部屋があって、そこに家具を配置させていきたいんですが、参考になるようなサイト様はありませんでしょうか？

どうぞ、ご指導宜しくお願いします<(_ _)>

回答No.2

feininger · ベストアンサー

JavaScriptとCGIとの連携ですね。

JavaScriptによるドラッグ＆ドロップで、
マウスボタンを上げた時のイベント(onMouseUp)が発生した際にCGIを呼び出してあげればOKです。

CGIを呼び出す際は、レイヤーの座標やレイヤーIDなども指定しておきます。こんな感じで。
　location.href='http://～/hoge.cgi?x=111&y=222&id=33'

JavaScriptのドラッグ＆ドロップ。
http://allabout.co.jp/career/javascript/closeup/CU20020417/index.htm

貼り付けるタイプの掲示板。
http://www2s.biglobe.ne.jp/~memo/cgi-bin/postit.cgi

お礼

ご回答有難うございます('▽'*)
まさに、この掲示板です!!有難うございます。
まだ、数字をセット以前の段階で…教えて頂いたJavaScriptのサイトを参考にしてやってみているんですが、CGI上では上手く動いてくれなくって初歩的なトコから苦労していますが(CGIのソースをコピペでHTMLにすると動くのに…(泣))もうちょっと粘ってみます。どうも、有難うございました!!(*>ω<)o

補足

補足というか、実物を…。PeoPleというゲームでペットがランダムに入手したアイテムを置きたいんですが。http://cgi.f19.aaacafe.ne.jp/~nyaroko/kaizou/people.cgi
このまま入って、緑の窓に、そのJSを置きたいんですが動きません。
print qq|<div style="background-image : url(img/k_yuka001.gif);width:300;height:300;"><div style="background-image : url(img/kabe001.png);width:300;height:300;"></div></div>\n|;
print qq|<SCRIPT language="JavaScript" src="draglay.js"></SCRIPT>\n|;
print qq|<script language='JavaScript'><!-- \n|;
$yoko=30;
foreach (@alllines) {
#↓見つけたアイテム。
($tnm,$timg,$fnd,$str,$rui0) = split(/<>/,$_);
#↓すべてt001とかになるように。
$home1 = substr($timg,0,4);
$yoko = $yoko + 50;
print qq|dragLay['$home1'] = new dragLay('$home1',$yoko,350,'<img src=$img/$timg alt=$tnm>')\n|;
}
print qq| //--></script>\n|;
undef @alllines;
print qq|何も持っていません。\n| if !$tnm;

こんな感じなのですが、もしお分かりでしたらご指摘いただけませんか？宜しくお願いします。

回答No.4

feininger

私ならまず↓のようなURLでアクセスすると・・・
http://～/hoge.cgi?x=111&y=222&id=k001

こんな出力をするCGIを作成します。
もちろん、$ENV{'QUERY_STRING'}から x=111&y=222&id=k001 を取得して処理する必要があります。

<SCRIPT language="JavaScript" src="draglay.js"></SCRIPT>
<script language='JavaScript'><!--
dragLay['k001'] = new dragLay('k001',111,222,'<img src=./img/k001.gif alt=家具１>')
//--></script>

上記の出力だけでは、ドラッグ＆ドロップしてもCGIが呼び出されないので、
次のステップとして draglay.js へ１行追加します。

//--マウスボタンを上げた時ドラッグ解除
var zcount = 0
function mup(e) {
if(!window.clickElement) return
if (getLayOj(clickElement)) {
zindexLAYOJ((!!document.layers)?getLayOj(clickElement)
:getLayOj(clickElement).style,zcount++)
location.href='http://～/hoge.cgi?x=333&y=111&id=k001'　←これを追加(とりあえずは固定値でテスト)
clickElement=null
}
}

こんな感じでじわじわステップアップしていきます。
「レイヤーのxy座標はどうやって取得するんだ？」っていろいろ謎は出てくるでしょうけど、
のんびりとJavaScriptのサイトを巡回すればきっと解決しますよ。
(draglay.jsはいろんなブラウザに対応するためのコードが含まれているので、難易度はちょっと高いです)

お礼

色々、答えて頂いたのにお礼が送れてスイマセン(・o+)
結局あの後、ずっとやっても出来ず、今は専門のカスタマイズ屋さんにメールを送っているのですが、待てども連絡が来ない状況で、時間が経ってしまっていました。

出来れば、完了のご連絡を書きたかったのですが、
無理そうなので、お礼と、質問の締め切りをさせて頂きます。
本当に、どうも有難うございました!!

回答No.3

feininger

いきなりCGIで出力すると原因がつかめないので、
手始めにはHTMLファイルを置いてテストすることをお勧めします。
こんな感じのシンプルなHTMLファイルで。

<SCRIPT language="JavaScript" src="draglay.js"></SCRIPT>
<script language='JavaScript'><!--
dragLay['k001'] = new dragLay('k001',80,350,'<img src=./img/k001.gif alt=家具１>')
//--></script>

これ↑で動かないようなら draglay.js を外部呼出ししているところがアヤシイかも。
外に出さず、draglay.js を丸ごとHTMLへ記述してみるとよいかもしれません。

補足

回答くださり有難うございますー!!教えて頂いたようにして、HTMLにしてみたら動きました♪
その後、CGIの方を色々見てみると、邪魔しているサブルーチンがあったようで、それを削除してみたら動きました(大丈夫なのかどうかわからないんですけど(苦笑))
ただ、データ書き込みの方法が調べてみてもいまいちわからず…(-ω-;)

↓CGIの中身です。一番下のSub homeが、問題の部屋です。
http://cgi.f19.aaacafe.ne.jp/~nyaroko/kaizou/01.html

↓教えていただいたサイト様のJSです。
ここに
$x=getMouseX(e);
$y=getMouseY(e);
とか
location.href='http://～/people.cgi?$x=getMouseX(e)&$y=getMouseY(e)'
と書いただけではやっぱりダメなようで…(getMouseXっていうのも間違っているかも？)
http://cgi.f19.aaacafe.ne.jp/~nyaroko/kaizou/js.html

やっと、動いてくれたのであきらめたくは無いし、でも全く行き詰ってしまいました。データのやりとりは複雑なんでしょうか？良ければ、間違ってしまってる所などありましたら教えてやってください。

回答No.1

noname#227796

その配置の場所は、サーバ側に保存しておきたいのでしょうか？
アクセスした人のみの状態が保存されていればいいのであれば、cookieに配置情報を保存しておき、次回アクセス時には、cookieから情報を取り出して配置する、という方法が考えられます。
これだと、Javascriptからcookieを操作するだけなので、わざわざCGIで実装しなくても済みますね。

配置情報の格納は、ご自分で考えて頂くしかないですが、cookieの操作については、下記のサイトが参考になると思います。

とほほのCookie入門 http://tohoho.wakusei.ne.jp/wwwcook.htm

イヌでもわかるJavaScript講座
http://www.red.oit-net.jp/tatsuya/java/cookie.htm

JavaScript Tips collection http://www.din.or.jp/~hagi3/JavaScript/JSTips/Default.htm

JavaScript basic samples http://www.sumnet.ne.jp/domp/jsbs/

また、以下のような書籍も有益ですね。
http://www.media-tech.co.jp/detail/in_danger2.htm

ただ、作成するに当たっては、cookieとJavascriptを有効にしてね、というような説明のページを設けた方が良いでしょう。
http://www.shizuoka-gh.jp/aspsrv/asp_brz_conf/
http://celsiorup.com/script/jc_check.htm

それから、サーバーサイドでcookieを利用する方法もあるので、うまく組み合わせれば、CGIでサーバ、クライアント側ともに配置情報を保存することができるかもしれません。
http://www.webkoza.com/doc1/cookie_a.htm
http://member.nifty.ne.jp/hippo2000/perltips/Cgi.htm

お礼

ご回答有難うございます('▽'*)
とても参考になるサイト様ばかりで、とても勉強になりました。ですが、残念ながらみんなが共用できない(自分しか見れない)になってしまうので私が探していたものとはちょっと違っているようでした(残念)
せっかく色々教えて頂いたのに活用できずにスイマセン!!(・o+)
クッキー自体にも興味がありますのでこれから少しずつ勉強していきたいと思います。
どうも、有難うございました。