らっきー！　っておもってたら各オブジェクトの関数説明のところがちらほら「不明」とある。
翻訳がまだ完璧じゃないのかなっておもったら公式の英語ドキュメントですら空欄になってた。
未実装なんだろうか・・
とりあえずgoogle maps api v3の日本語ドキュメントを読みながらがんばってみた。

つくったものはこれです。

作ったシステムの仕様は以下のとおり。

—動作概要—
ページに地図を表示し、地図内の任意の場所にクリックでマーカーを設置することができ、そのマーカーが位置座標を返してくれるってもの。
マーカーはドラッグで位置変更可能。　
ダブルクリックでも移動してくれる。
——————-

あまり必要性はなかったかもしれないけど今回もjQuery使ってます。
なのでこのソースそのまま使いたい場合はjQueryダウンロードしてgoogle_map_v3.jsより手前でインクルードしといてください。

gmap_v3.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript" src="google_map_v3.js"></script>
<title>Google Maps V3</title>
</head>

<body>
<h1>地図上の座標取得ぷろぐらむ</h1>
任意の場所をクリックするとマーカーがあらわれます。　マーカーが位置とってくれます。<br/>
<div id="maps" style="width:500px; height:500px; border:1px solid #333;"></div>
<div id="flag">true</div>

<p>
	<h3>マーカーの座標（単位：緯度経度）</h3><br/>
	x座標 : <span id="x">地図上でクリックしてください。</span><br/>
	y座標 : <span id="y">地図上でクリックしてください。</span>
</p>
</body>
</html>

google_map_v3.js

$(function(){

	var marker;

    var mapdiv = document.getElementById('maps');
    var myOptions = {
        zoom: 5,//縮尺
        center: new google.maps.LatLng(38.680816,138.767537),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDoubleClickZoom : true,
        scaleControl: true,
        scrollwheel: true
    };
    var map = new google.maps.Map(mapdiv, myOptions);

    google.maps.event.addListener(map,'click',function(event){

    	if($("#flag").text()=="true"){

			var x = event.latLng.lat();
    		var y = event.latLng.lng();

			marker = createMarker(map,x,y);

    		$("#flag").text("false");

    		echoPoint(event.latLng);
    	}
    });    

});

function createMarker(map,x,y){
	 var marker = new google.maps.Marker({
		position: new google.maps.LatLng(x,y),
    	map: map,
    	title: "マーカーのタイトル",
    	draggable: true //なんかV3での動作が超遅いきがする
	 });

    google.maps.event.addListener(marker,'mouseup',function(){
    	echoPoint(marker.position);
    });		 

    google.maps.event.addListener(map,'dblclick',function(event){
    	marker.setPosition(event.latLng);
    	echoPoint(marker.position);
    });  

	return marker;

}

function echoPoint(point){

	var y = point.lat();
	var x = point.lng();

	$("#x").text(x);

	$("#y").text(y);

}

[解説]

gmap_v3.html

05行目
Google maps api v3のインクルードです。

06行目
jQueryをインクルードしてます。

07行目
今回作ったjsファイルをインクルードしてます。

14行目
このDiv要素に地図を流し込みます。　idでmapsを割り振ってます。　どうもサイズ指定したげないとGoogleさんが怒って変な表示にするみたいなんでスタイルシートいれて指定してます。

15行目
後述しますが、マーカーの表示処理の分岐に使います。

19/20行目
ここに緯度経度が表示されます。

google_map_v3.js

01～31行目
$(function(){
//処理
});
jQueryの書き方なんですが要するにgmap_v3.htmの読み込みが終わったらここに書かれた処理をするよってことです。

14行目
var map = new google.maps.Map(mapdiv, myOptions);

これでマップがでます。
MAPクラスのインスタンス化にmapdiv,myOptionsの二つの引数つけてますが、mapdivってのがgmap_v3.htmlの14行目に指定した地図を流し込むdiv要素になります。　型はHTMLコンテナでブロック要素なら多分なんでもおｋです。
05行目のvar mapdiv = document.getElementById(‘maps’);でHTMLコンテナを取得してます。

mapOptionsが地図に付加されるオプションです。
ここでは
—
zoom: 5,
center: new google.maps.LatLng(38.680816,138.767537),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDoubleClickZoom : true,
scaleControl: true,
scrollwheel: true
—
としてます。
上から３つまでが必須項目です。

zoomは地図の初期ズーム値です。　指定する数字が若いと縮尺がでかくなります。その逆もしかり。

centerは地図の中心座標です。　指定の型はLatLngっていうGoogleさんの提供してくれてるオブジェクトでこのオブジェクトを作るときの引数が緯度経度になります。　今はとりあえず日本がみれるような座標にしてます。

mapTypeIdはどんな地図にするかってもので今回はロードマップを使いたかったのでgoogle.maps.MapTypeId.ROADMAPと指定しています。

disableDoubleClickZoom : true,
ダブルクリックでのズームはオフにしてます。　うざいよねこれ。

scaleControl: true,
地図のコントロールバーを表示してます。

scrollwheel: true
マウスのスクロールホイールで縮尺を変更できるようにしてます。

16行目
イベントリスナの登録です。
google maps上でのイベントの登録はaddListenerで行います。
引数は
1.イベントが発生するオブジェクト
2.イベントの種類
3.処理（関数）

これは地図上をクリックした時の処理について記述しているので第一引数にMapオブジェクトのはいってるmap、第二引数にclickを指定しています。
第三引数は処理関数です。
clickイベントのときはマウスイベントオブジェクトが関数の引数として指定できます。
マウスイベントオブジェクトは以下の二つのプロパティを持ってます。
latLng　….前述のとおり緯度経度を含むオブジェクトです。
pixel ….これまたGoogleさんの作ったオブジェクトでPointオブジェクトというものです。　これはイベントが発生した位置のカーソルのピクセル値を返します。

18行目if
手前のaddListnerが地図をクリックしたときにマーカーを表示するっていう目的のものなんだけど、クリックするたびにマーカーがどんどんでてきたらマーカーだらけになるので初めてのクリックだけにマーカーを出すというための条件分岐です。

gmap_v3.htmlの15行目のdivの中身がtrueだったら～という分岐です。
ちなみにマーカーが入ったと同時に25行目の$(“#flag”).text(“false”);という処理でdivの中身がfalseにかわるのでこの分岐は一度しか適応されません。

20/21行目
マウスイベントオブジェクトのプロパティであるlatLngオブジェクトのメソッドlat()で緯度をlng()で経度を取得してそれぞれを変数x,yにいれてます。

23行目
createMarker(map,x,y);でマーカーを作ってます。
このcreateMarkerは僕の定義した関数で33行目のところの関数です。

google.maps.Marker({});でマーカーをインスタンス化してます。
地図同様にオプションが指定できます。
positionがマーカーを設置する緯度、経度でLatLngオブジェクトで指定します。
mapはマーカーを設置するマップオブジェクトを指定します。
titleはマーカーのタイトル
draggableはマーカーがドラッグで移動できるかどうかをbool値で指定できます。

41/45行目
前述のaddListenerを使ってマーカーのmouseupイベント、マップにdblclickイベント時に座標を出力するようにイベント処理を登録してます。
mouseupイベントはマーカーをドラッグしてるとき、ドラッグをやめた瞬間に発生するイベントです。　
dblclickはダブルクリック時に発生します。
これは第三引数の関数に対してまた、マウスイベントオブジェクトを与えることができます。

mouseupのときとdblclickの時の両方で行ってるのがechoPoint関数でこれは引数にlatLngオブジェクトを与えることでその座標をgmap_v3.htmlの19/20行目のspan要素に流し込む関数で54行目で定義してます。

ちなみにdblclickイベントでは地図上でダブルクリックが生じたところにマーカーを移動させるというシステムの仕様のためにsetPositionメソッドを使ってマーカーの位置をイベント発生した場所に移動させてます。
これもまた引数はLatLngオブジェクトです。
マウスイベントオブジェクトのプロパティから取得しています。

なんとなく作ってみたものの感想としてはV2のがさくさく動いたって印象。
通信速度がある程度速いPCでだったらほとんどかわらず動くけどゴミスペックのPCだったら結構しんどいかもです。

誰かぼくにモンスターPCをかってください＞m＜

ps
今度ジオコードの使い方に関する記事もかきます～

No Comments

5月 23, 2010 by nazomikan in ajax, javascript

リアルタイム同期チャット

今回はリアルタイムな同期チャットを作ってみました。

考え方的にはぐーぐるさんが使ったことで有名なコメットとよく似ています。

ただPHPを使ってやりたかったのでcometは用いません。

そもそもコメットの特徴はクライアントサイドからサーバーへの要求の投げかけを一回にしてるところなのでその一回を半無限ループ使って常時接続状態にすればいいわけです。

以下がソースです。

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-script-type" content="text/javascript" />

<link rel="stylesheet" href="css/main.css" charset="utf-8" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/chat.js"></script>
</head>

<body>
<div class="chat" id="chat"></div>
		<div class="commentarea" id="commentarea">
        	<textarea class="comment" id="comment"></textarea>
			<input type="button" class="submit" value="発言" onclick="remark();" />
        </div>

</div><!-- end Chat Program -->
</body>
</html>

chat.js

$(function(){
	$("#submit").click(remark);
	$.post("get_chat_log.php",{},get_message,"text");
});

function remark(){
	var txt = $("#comment").val();
	$.post("write_chat_log.php",{name:"oppai星人",message:txt});
	$("#comment").val("");
}

function get_message(text){

	var recs = eval(text);
	n = recs.length;

	for(var i = 0; i<n; i++){
		data = $("#chat").html();
		$("#chat").html(data +"<span class=\"name\">" +recs[i]["name"]+"</span> さんの発言:<br />"+"<span class=\"message\">"+recs[i]["message"]+"</span><br />\n");
	}
	$.post("get_chat_log.php",{},get_message,"text");
}

get_chat_log.php

<?php
set_time_limit(0);

$file_name = "log/chatlog.txt";

//ファイルの最終更新時間を取得
$o_time = filemtime($file_name);
$o_filesize = filesize($file_name);

while(TRUE){

	//キャッシュ削除
	clearstatcache();

	//今現在のファイルの最終更新時間を取得
	$n_time = filemtime($file_name);

	//アクセス時の最終更新時間と比較
	if($o_time!==$n_time){
		$n_filesize = filesize($file_name);
		$fp = fopen($file_name,"r+");
		$fp2 = fseek($fp,$o_filesize);

		//通常ファイルサイズ文読み込むがEOFになると終了する。
		$body = fread($fp,$n_filesize);
		fclose($fp);
		break;
	}
	//遅延
	sleep(1);
}

$new_line = explode("\n",$body);
$n = count($new_line);

$res = array();

for($i=0; $i<$n; $i++){
	$data = explode(">",$new_line[$i]);
	$account = $data[0];
	$message = trim($data[1]);

	$message = str_replace("&gt;",">",$message);
	$message = str_replace("&lt;","<",$message);

	$arr = array("name"=>$account,"message"=>$message);
	array_push($res,$arr);
}

$n = count($res);

$txt ="";
for($i=0; $i<$n-1; $i++){
	if($i==0 && ($n-1)!=1){
		$txt .= '\'[{"name":"'.$res[$i]["name"].'","message":"'.$res[$i]["message"].'"}';
	}elseif($i==0 && ($n-1)==1){
		$txt .= '[{"name":"'.$res[$i]["name"].'","message":"'.$res[$i]["message"].'"}]';
	}elseif($i==$n-2){
		$txt .= ',{"name":"'.$res[$i]["name"].'","message":"'.$res[$i]["message"].'"}]';
	}else{
		$txt .= ',{"name":"'.$res[$i]["name"].'","message":"'.$res[$i]["message"].'"}';
	}
}

echo $txt;
?>

write_chat_log.php

<?php
$name = $_POST["name"];

$msg = str_replace("\n","<br />",$_POST["message"]);
$msg = htmlspecialchars($msg,ENT_QUOTES);

$body = $name.">".$msg."\r\n";

$file_name = "log/chatlog.txt";

$fp = fopen($file_name,'a');
fwrite($fp,$body);
fclose($fp);
echo $body;
?>

以上の4ファイルです。

index.htmlのページ読み込みと同時にchat.js内でget_chat_log.phpへのajax通信が始まります。

set_time_limit関数の引数に0を代入することでphpの実行時間の制約を無限大に伸ばしてます。

そしてwhile(true)を用いて無限ループ。
sleepで引数時間に一回ずつループします。
ログファイルに更新があればbreakして差分をjsのコールバック関数にjsonフォーマットで受け渡し、js側で整形して出力します。
出力後、またget_chat_log.phpにアクセスして次の更新を待ち続けます。

次に発言時、index.htmlのonclickイベントでchat.jsのremark関数が動きwrite_chat_log.phpにajax通信し、入力情報をログに書き出しします。

これでリアルタイムなチャットが更新されます。
まぁ結構サーバーに負荷かかりますが。笑

2 Comments

5月 7, 2010 by nazomikan in PHP, ajax, javascript

Linux上でのPHP開発環境

ほんとんど自分用のメモです。

ちょっとCent-OS上で二週間ほど開発しなきゃならない事態が起きたので開発環境の整え方をメモ

[.PHP]

もともとPHPは入ってるんで最新版にアップします。
と、ここで問題が。
CentOS3.4ではyumでいれられるPHPが5.1x？（小数点第二位は忘れた）までなんですね。
MySQLをphpMyAdminで扱うときにphpMyAdminの最新版はphp5.2x以降じゃないとうまく動作しないんですね。
そのためにちょっといじります。

まずレッドハッドのパッケージマネージャーからRPM-GPG-KEYをインポートしてきます。

# rpm –import http://www.jasonlitka.com/media/RPM-GPG-KEY-jlitka

リポジトリの設定します。

# vi /etc/yum.repos.d/utterramblings.repo

viでファイル開くんで下をこぴぺで貼り付けして保存

[utterramblings]
name=Jason’s Utter Ramblings Repo
baseurl=http://www.jasonlitka.com/media/EL$releasever/$basearch/
enabled=1
gpgcheck=1
gpgkey=http://www.jasonlitka.com/media/RPM-GPG-KEY-jlitka

それからphpアップデートします。

# yum update php

そしてapache再起動

# service httpd restart

[MySQL]

そして次にMySQL

これもyumでインストールできます。

# yum install mysql-server

MySQL起動してログインしてさらにパスワード設定します。

# service mysqld start
# mysql

mysql> set password for root@localhost=password(‘ここにパスワード設定しよう。’);
mysqlから離脱
mysql>\q

次からMysqlにはいるときは

# mysql -u root -p

と入力します。　するとパスワード求められるので設定したものを入力してエンターすればおｋ

それからmysql拡張もいれときます。　これもphpMyAdminで必要になってきます。

# yum install php-mysql

そしてまたアパッチ再起動

# service httpd restart

[PhpMyAdmin]

phpmyadminを入れたいけどその前にphp-mbstringとphp-mcryptがないとエラーおきるとかいうことをどこかの賢い人がいってたのでインスコ

# yum -y install php-mbstring
# yum -y install php-mcrypt

そしてまたアパッチ再起動

# service httpd restart

ほんでPHPmyadminのダウンロード

2010/05/06現在じゃphpMyAdmin-3.3.2-all-languages.tar.gzってのが最新っぽいのでこれをダウンロード。
最新情報はここでわかります。

# wget http://jaist.dl.sourceforge.net/sourceforge/phpmyadmin/phpMyAdmin-3.3.2-all-languages.tar.gz

解凍、そしてdocs内に移動、apache様が触れるように権限変更

# tar zxvf phpMyAdmin-3.3.2-all-languages.tar.gz
# mv phpMyAdmin-3.3.2-all-languages /var/www/phpMyAdmin
# chown -R root.apache /var/www/phpMyAdmin/

設定ファイルの作成(アクセス権とエイリアスの設定)

# vi /etc/httpd/conf.d/phpMyAdmin.conf

Alias /phpMyAdmin "/var/www/phpMyAdmin"

<Directory "/var/www/phpMyAdmin">
    order deny,allow
    deny from all
    allow from 127.0.0.1
</Directory>

一応これで動くはずなのでアクセス。

http://localhost/phpmyadmin

アカウントはroot , さっきmysqlのところで自分が設定したパス

[Eclipse]

ここからEclipse IDE for Java EE Developers の中の Linux 32bit を選択してダウンロードします。

なんか周りみてると /usr/local/share/に設置してる人が多いのでmv使ってダウンロードしたtar.gzファイルを移動します。
そして解凍

# tar zxvf eclipse-jee-galileo-linux-gtk.tar.gz　（ファイル名は若干異なるかも）

普通ならこれでもう動かせるんだけどCentOSにはSun純正のJava SDKが入ってないとかで動かないらしいのでここから純正をとってくる。

そしてまたmv使って /usr/local/share/ に移動させます。

そして権限変えて解凍して実行しちゃいます。　バージョンが微妙に違うとかあれば各自補間してください。（2010/05/06現在はこれでいい）

# chmod a+x jdk-6u20-linux-i586-rpm.bin
# ./jdk-6u20-linux-i586-rpm.bin

これでうまく動くはずなのでEclipseを動かします。(jdk1.6.0_20はDLしたバージョンによって違うので確認してください。)

# /usr/local/share/eclipse/eclipse -vm /usr/java/jdk1.6.0_20/bin/java &

うまく立ち上がるとワークスペース聞かれるんで /var/www/html/　らへんにしといたら楽です。

起動コマンドが長いのでエイリアスつけときます。

# alias eclipse='/usr/local/share/eclipse/eclipse -vm /usr/java/jdk1.5.0_06/bin/java &'

これで
# eclipse
とすりゃEclipse立ち上がります。　

しかしこのままではElipseはPHPファイル作れません。　この記事のタイトルPHP開発環境なのに。

そもそもEclipseいれるなら何故　Eclipse for PHP Developers　いれないの？って話ですよね。
なんかまだ開発中で不安定らしく、Eclipseからプラグインで「phpeclipse」なるものを入れたほうがいいとのこと。

ちなみにphpeclipseはSourceForge.netさんのところにあります。
これをダウンロードしてきて解凍します。

# unzip PHPEclipse-1.2.3.200910091456PRD-bin.zip

すると「plugins」「features」の二つのフォルダがあります。
この中にcdコマンドで移動します。

中身をEclipseの「plugins」「features」に全部いれちゃいます。

まず（ダウンロードして解凍したほうの）pluginsフォルダに入って全部Eclipseにいれちゃいます。

# cd plugins
# mv * /usr/local/share/eclipse/plugins/

次にfeaturesも同様に移し変えます。

# cd ../features
# mv * /usr/local/share/eclipse/features/

これで
#eclipse
でphpファイル作れるようになってます。

よかったね！　jsとかも追記していきます。

No Comments

5月 6, 2010 by nazomikan in Linux, PHP

ニャンまげをこよなく愛す

CSS Editer [Eclipse plugin]のインスコ

JSEclipseのインスコ手順

Google maps api V3 を使ってみた。

リアルタイム同期チャット

Linux上でのPHP開発環境

著者

カレンダー

twitter

アーカイブ

カテゴリー

リンク

2010年5月
月	火	水	木	金	土	日
« 1月
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31