Google Mapみたいな奴を作るとしたら？
「iPhone向けというか、新たに何か作るとしたら？」という自問自答で考えていたら「敷地内Mapを作ったら楽しい？」
どんな感じにしたいか、考えてみた。
まず、背景写真に矢印をいれてみる。
- 矢印をクリックしたら「方角はそのままで、矢印方向へ移動」
- 「・・・を見る」をクリックしたら「方角を変更」
こんな単純な動作を実現するために何が必要か考えたのがコレ
- 縦方向は「v1」「v2」「v3」と表現
- 横方向は「h1」「h2」「h3」と表現
- 北は「N」、南は「S」…
縦2、横2の北向きの写真だったら「v2h2-N.jpg」とする。
（後で方角の設定は変更しています）
3×3の場合で36枚の写真が必要になる。撮影が大変だね、、、
あとはJavaScriptでゴリゴリとやることになる。
（36個のHTMLなんて作っていられない）
「矢印」「見る」をクリックしたら、読み込む画像を変更する
ってな処理をやればよさそう。
GoogleMapに登録されていない場所（公共の道路）を実現しようと考え始めたネタだけど、需要ってあるのかな…
あと建物の中も表現できるから、あらかじめ考えておかないといけない。
上下方向だったら「f」かな？地下の考え方が面倒っぽいな…
建物もやるとなると、さらに大変だ。一人じゃ撮影できない。
作ってみる
写真を数枚用意してから作業を始めてみます。
矢印画像が必要になります。四方向の△が欲しいのですが、今時はHTML5を使ってみたいと思います。HTML4なら四方向の△を用意するだけです。
modoki001.html(utf8 cr+lf bomあり)
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>GoogleMapModoki</title> <script src="js/jquery.js" type="application/x-javascript" charset="utf-8"></script> <script src="js/change_img.js" type="text/javascript" charset="utf-8"></script> </head> <link rel="stylesheet" type="text/css" href="css/gmm.css"> <body> <div id="pict"> <div id="h1w1" class="arrowbox"></div> <div id="h1w2" class="arrowbox"></div> <div id="h1w3" class="arrowbox"></div> <div id="h2w1" class="arrowbox"></div> <div id="h2w2" class="arrowbox"></div> <div id="h2w3" class="arrowbox"></div> <div id="h3w1" class="arrowbox"></div> <div id="h3w2" class="arrowbox"></div> <div id="h3w3" class="arrowbox"></div> </div> </body> </html>
#pict{
width: 402px;
height: 300px;
border: 1px solid gray;
background: url(../img/sample/v1h1-N.gif);
float: left;
}
.arrowbox{
float: left;
width: 132px;
height: 99px;
border: 1px solid gray;
}
#h1w2, #h2w1, #h2w3, #h3w2{
background: url(../img/sample/arrow.gif) no-repeat center center;
}
#h2w1{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
#h2w3{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
}
#h3w2{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
}ちょいとCSSに不安が残りますが、表示されているのでOKとします。
js/change_img.js
$(function(){
var img_path="img/sample/";
$("#h1w2").click(function(){
//上に移動、vを1減らす
var getPath=$("#pict").css("background-image");
var tmpPath=getPath.split("/");
var filename=tmpPath[tmpPath.length-1].slice(0, tmpPath[tmpPath.length-1].length-2);
var v_tmp=filename.split("h");
var v=v_tmp[0].split("v");
var w_tmp=filename.split("-");
var w=w_tmp[0].split("h");
v=eval(v[1])-1;
var n_name="v"+v+"h"+v_tmp[1];
n_name="url('"+img_path+n_name+"')";
$("#pict").css("background-image", n_name);
return false;
});
$("#h3w2").click(function(){
//下に移動、vを1足す
var getPath=$("#pict").css("background-image");
var tmpPath=getPath.split("/");
var filename=tmpPath[tmpPath.length-1].slice(0, tmpPath[tmpPath.length-1].length-2);
var v_tmp=filename.split("h");
var v=v_tmp[0].split("v");
var w_tmp=filename.split("-");
var w=w_tmp[0].split("h");
v=eval(v[1])+1;
var n_name="v"+v+"h"+v_tmp[1];
n_name="url('"+img_path+n_name+"')";
$("#pict").css("background-image", n_name);
return false;
});
$("#h2w3").click(function(){
//右に移動 hに1を足す
var getPath=$("#pict").css("background-image");
var tmpPath=getPath.split("/");
var filename=tmpPath[tmpPath.length-1].slice(0, tmpPath[tmpPath.length-1].length-2);
var v_tmp=filename.split("h");
var v=v_tmp[0].split("v");
var w_tmp=filename.split("-");
var w=w_tmp[0].split("h");
w=eval(w[1])+1;
var n_name=v_tmp[0]+"h"+w+"-"+w_tmp[1];
n_name="url('"+img_path+n_name+"')";
$("#pict").css("background-image", n_name);
return false;
});
$("#h2w1").click(function(){
//左に移動 hから1を引く
var getPath=$("#pict").css("background-image");
var tmpPath=getPath.split("/");
var filename=tmpPath[tmpPath.length-1].slice(0, tmpPath[tmpPath.length-1].length-2);
var v_tmp=filename.split("h");
var v=v_tmp[0].split("v");
var w_tmp=filename.split("-");
var w=w_tmp[0].split("h");
w=eval(w[1])-1;
var n_name=v_tmp[0]+"h"+w+"-"+w_tmp[1];
n_name="url('"+img_path+n_name+"')";
$("#pict").css("background-image", n_name);
return false;
});
});これで4方向への移動（写真を変更する）はできた。
次は「方向転換」だね。
方向転換
ファイルに方位としてN,S,E,Wを仕込んでいたけど問題にぶち当たる
- 右って「+1」だけど、どうする？
- 反対って「+2」だけど、どうする？
文字列を判定して「Nなら1」「Sなら2」・・・として、「W方向から右のときは5だけど、1にする」ってな処理にすればできる。けれどもファイル名を作るときに文字を止めて「1から4で東西南北を表す」に変更することにした。
- 北(N)なら1
- 東(E)なら2
- 南(S)なら3
- 西(W)なら4
ファイル名も変更しておく。
スクリプトの変更
js/change_img.jsに追記する
$("#h1w1").click(function(){
//左に回転 hから1を引く
var getPath=$("#pict").css("background-image");
var tmpPath=getPath.split("/");
var filename=tmpPath[tmpPath.length-1].slice(0, tmpPath[tmpPath.length-1].length-2);
var v_tmp=filename.split("h");
var v=v_tmp[0].split("v");
var w_tmp=filename.split("-");
var w=w_tmp[0].split("h");
var d_tmp=filename.split(".");
var dd=d_tmp[0].split("-");
var d=eval(dd[1])-1;
if(d==0){d=4;}
var n_name=dd[0]+"-"+d+"."+d_tmp[1];
n_name="url('"+img_path+n_name+"')";
$("#pict").css("background-image", n_name);
return false;
});
$("#h1w3").click(function(){
//右に回転 hに1を足す
var getPath=$("#pict").css("background-image");
var tmpPath=getPath.split("/");
var filename=tmpPath[tmpPath.length-1].slice(0, tmpPath[tmpPath.length-1].length-2);
var v_tmp=filename.split("h");
var v=v_tmp[0].split("v");
var w_tmp=filename.split("-");
var w=w_tmp[0].split("h");
var d_tmp=filename.split(".");
var dd=d_tmp[0].split("-");
var d=eval(dd[1])+1;
if(d==5){d=1;}
var n_name=dd[0]+"-"+d+"."+d_tmp[1];
n_name="url('"+img_path+n_name+"')";
$("#pict").css("background-image", n_name);
return false;
});左右の処理を追加した。
#h1w1{
background: url(../img/sample/left.gif) no-repeat center center;
}
#h1w3{
background: url(../img/sample/right.gif) no-repeat center center;
}「真後ろを向く」を行うと分からなくなりそうなので、実装は止めた。
ここまで出来てくると、写真を用意したくなる。
次に必要なのは「そこの写真はありません」かな？
