Google系のサービスやhttp://www.sleipnirstart.com/、はてぶの検索ボックスに入力したらインクリメンタルサーチされるもの、など、Ajaxなサービスが増えてきていますが、どうすればこんなクールなサービスを作れるのでしょうか。(発想の問題ではなく、技術的に)

プログラミングはある程度できますし(C, C#, VB, PHP, Javascriptなど)、HTMLやCSSも書けます。
たとえば、PHP + Ajaxでページを作るとしたら、どのような書籍・サイトを勉強すればよいかを教えていただきたいです。

回答の条件
  • 1人2回まで
  • 登録:2009/07/24 15:35:33
  • 終了:2009/07/31 15:40:02

ベストアンサー

id:ymlab No.4

ymlab回答回数507ベストアンサー獲得回数342009/07/30 23:53:14

ポイント10pt

みなさんのお書きの通り、Ajaxは、特別に新しい技術ではありません。

そのことは既に、id:sensepicker さんもご承知の通りだと思います。

どうすれば、こんなサービスを提供することができるのかについてですが、

htmlの中に、例えば<div id = "abc"></div>とかして<div>タグに idで名前をつけておきます。

また、<a>や<input type = "text" />などで、ユーザーに何らかのアクションを起こさせることもできます。

そのときも、 id = ""で名前をつけておきます。

そこで、何らかのアクションを起こさせたときに、javascriptでそれをキャッチさせるのです。

[例えば、テキストボックスに何か入力されたときの動作はjavascriptでキャッチできます。]

そのjavascriptの中に、ブラウザの違いを吸収するようなコードを書いておき、

XmlhttpRequest関数を呼び出し、phpをコールするのです。[フックとかいいます。]

このコールされたPHPの中に、ファイルを書き込んだり読み込んだりするようなことをして、

それをjavascriptで読み込めるようにすればよいのです。

例えばソースが見にくくて申し訳ないですが、javascriptの中にこんなことをしておきます。


/** 行事予定をAjaxライクに登録・更新・削除させる.
 * @param year 何年
 * @param month 何月
 * @param day 何日
 */
function decidePlan( year, month, day ) {
	//alert(year+":"+month+":"+day);
	//登録された情報を取得する.
	var Content = "";
	
	Content = document.plan.elements["planX"+year+"X"+month+"X"+day].value;
	//データの内容が空だったら、登録しない.
	//Content = Content.replace(/^\s+|\s+$/g, "");//trimの代わり.
	//if ( Content == "" ) {
		//データの内容が空だから、以下は実行しない.
	//	return;
	//}
	httpObj = createHttpRequest();
	if (httpObj) {
		httpObj.open("GET", "./gyouziajaxsave.php?year="+year+"&month="+month+"&day="+day+"&contents="+encodeURI(Content), true);
		httpObj.onreadystatechange = updatePage;
		httpObj.send(null);
	} else {
		alert("httprequest violation has occured. Call ymlab.");
	}

	/** メッセージ送信中の状態.
	 */
	function updatePage() {
		if (httpObj.readyState == 1 || httpObj.readyState == 2 || httpObj.readyState == 3) {
			document.getElementById("statusX"+year+"X"+month+"X"+day).innerHTML = "<img src = \"../img/ajax-loader.gif\" width = \"16\" height = \"16\" alt = \"loading\" />";
		}
		if ( httpObj.readyState == 4) {
			if ( httpObj.status == 200 ) {
				//alert("処理が完了しました.");
				document.getElementById("statusX"+year+"X"+month+"X"+day).innerHTML = "<img src = \"../img/accept.png\" width = \"16\" height = \"16\" alt = \"Accept\" />";
			}
		}
	}
}

//XMLHttpRequestオブジェクト生成
function createHttpRequest(){
	//Win ie用
	if(window.ActiveXObject){
		try {
			//MSXML2以降用
			return new ActiveXObject("Msxml2.XMLHTTP") 
		} catch (e) {
			try {
				//旧MSXML用
				return new ActiveXObject("Microsoft.XMLHTTP")
			} catch (e2) {
				return null
			}
		}
	} else if(window.XMLHttpRequest){
		//Win ie以外のXMLHttpRequestオブジェクト実装ブラウザ用
		return new XMLHttpRequest() 
	} else {
		return null
	}
}

httpObj.open("GET", "./gyouziajaxsave.php?year="+year+"&month="+month+"&day="+day+"&contents="+encodeURI(Content), true);

のところで、 phpをフックしています。

フックされたphpはこんなかんじです。

<?php
include_once("../db/xml.php");
include_once("./common.php");
$isLogin = sessionCheck();
	$year		= _hs( $_REQUEST['year'] );
	$month		= _hs( $_REQUEST['month'] );
	$day		= _hs( $_REQUEST['day'] );
	$contents	= ( $_REQUEST['contents'] ); //これを_hsすると文字化けする. ($_REQUESTは、URLエンコードされているはずの文字)下の方で無害かしているか大丈夫

	//年・月・日のチェック.
	if ( !preg_match("/^[0-9]+$/", $year ) ||
		!preg_match("/^[0-9]+$/", $month ) ||
		!preg_match("/^[0-9]+$/", $day	)) {
		//年月日に数字以外が入っている.
		return;
	}
	//サニタイズ.これはファイルに書き込む時にするべきか・・・
	//$content = htmlspecialchars($content);
	
	if ( $year >= 1 && $year <= 3 ) {
		$year--;
	} else {
	}
	
	if ( !file_exists("../db/plan/$year.xml") ) {
		//存在しないので、生成する.元旦だけ入れてやろう.
		$putData = <<<EM
<?xml version='1.0' encoding='UTF-8'?>
<doc>
	<article><month>-1</month><day>-1</day><contents>ダミー</contents></article>
	<article><month>-11</month><day>-11</day><contents>ダミー</contents></article>
	<article>
		<month>
			1
		</month>
		<day>
			1
		</day>
		<contents>
			元旦
		</contents>
	</article>
</doc>
EM;
		
		$fpout = fopen("../db/plan/$year.xml", 'w' ) or die;
		fputs( $fpout, $putData );
		chmod( "../db/plan/$year.xml", 0777 );
		fclose( $fpout );
	}
	
	
	$fp = fopen( "../db/plan/$year.xml", 'r' ) or die;
	while( !feof( $fp ) ) {
		$fBuf .= fgets($fp, 200 );
	}
	fclose( $fp );

	$fBuf = mb_convert_encoding( $fBuf, "UTF-8", "sjis-win" );
	$data = XML_unserialize( $fBuf );
	
	$n = count( $data['doc']['article'] );
	$p = $n;
	
	for( $iCounter = 0; $iCounter < $n; $iCounter++ ) {
		if ( trim( $month ) == trim( $data['doc']['article'][$iCounter]['month'] ) && trim( $day ) == trim( $data['doc']['article'][$iCounter]['day'] ) ) {
			$p = $iCounter;
			break;
		}
	}
	
	$forOutput = "";

	$contents = str_replace('&', '&amp;', $contents);
	$contents = str_replace('&','&amp;', $contents);
	$contents = str_replace('<','&lt;', $contents);
	$contents = str_replace('>','&gt;', $contents);
	$contents = str_replace('"','&quot;', $contents);
	$contents = str_replace('\'','&#39;', $contents);

	$data['doc']['article'][$p]['month']	= $month;
	$data['doc']['article'][$p]['day']		= $day;
	$data['doc']['article'][$p]['contents']	= $contents;
	//utfに変換しておく.
	$forOutput = htmlspecialchars($data['doc']['article'][$p]['contents']);
	$xml = XML_serialize( $data );
	$xml = mb_convert_encoding( $xml, "sjis-win", "UTF-8" );
	$fpout = fopen( "../db/plan/$year.xml", 'w' ) or die;
	fputs( $fpout, $xml );
	fclose( $fpout );
?>

私も見よう見まねで作ったのですが、

案外なんとかなるもんです。

いきなり、mootoolsとか、prototypeなどの便利なライブラリを使うのではなくて、

いったん自分で実装できるようになってからでも、使うのは遅くないかと思います。

といいながら、私の初めてのAjaxプログラミングは、Google map APIでしたけど^^;

http://www.openspc2.org/JavaScript/Ajax/GoogleMaps/index.html

がんばってください。

その他の回答(3件)

id:tama-jp No.1

たまたん回答回数36ベストアンサー獲得回数112009/07/24 15:57:55

ポイント27pt

http://www.sleipnirstart.com/で作成されているのは、

YUIというAJaxを使用されています。

最近、フリーでこういうライブラリがたくさん出ていますし、

かなり使い勝手がいいようです。

プログラミングは、JavaScriptは覚えておかなければなりません。

それ以外は、ライブラリの使い方を勉強すればいいと思います。

もし、プログラムを使用されるのであれば、.NETよりPHPやRuby,Perlなどの方が

ソースが見やすくなると考えます。(私は、Rubyを使用していますが・・・・)

それで、YUIのサイトは以下の通りです。

少し古いかもしれませんがどうぞ・・・・・

YUIの本家マニュアル(英語):サンプルもそのままおいてあります。

http://developer.yahoo.com/yui/

http://allabout.co.jp/internet/javascript/closeup/CU20070610A/

http://www.tuyudaku.net/javascript/yui.html

http://kdimension.system.cx/fwiki/wiki.cgi

http://japan.zdnet.com/sp/feature/07yui/story/0,3800080109,20356...

http://diaspar.jp/node/44

id:sensepicker

YUIですか。Yahoo!が提供しているライブラリなのですね。

参考になります。

ajaxのライブラリといえばjQueryぐらいしか知りませんでした。

2009/07/24 16:17:33
id:pahoo No.2

pahoo回答回数5960ベストアンサー獲得回数6332009/07/24 16:58:06

ポイント27pt

PHPによるJavaScriptを書かないAjax

PHPによるJavaScriptを書かないAjax

  • 作者: 佐久嶋 ひろみ
  • 出版社/メーカー: 九天社
  • メディア: 単行本

実戦で使える参考書です。

id:sensepicker

xajaxというライブラリは便利そうですが、まだ採用された実績があまりない&情報が少ないみたいですね。。

2009/07/24 17:19:28
id:hadashikick No.3

hadashikick回答回数2ベストアンサー獲得回数02009/07/25 21:25:53

ポイント26pt

Ajaxは複数の技術を組み合わせて実現するものなので、必要な技術を個々に習得すれば、その時点で8割方目標達成だと思います。

使える言語のなかにPHPとJavascriptを挙げてらっしゃるので、大分話は早いと思いますよ。

PHPとJavascriptを組み合わせるサンプルはたくさんみつかるので、インクリメンタル検索程度なら、それらを参照するだけでできるようになると思います。

http://e0166.blog89.fc2.com/blog-entry-363.html


現時点で、Ajaxなサイトを見て実装方法がわからないのなら、Javascriptの持つAjaxな機能に対しての知識が弱いのでは? と推測します。

Ajaxな動きを実装するには、Javascriptのブラウザごとの違いを吸収するため、Javascriptライブラリを使うのが一般的です。

jquery.js、prototype.js、mootools.js などなど、くさるほどありますが、もっとも軽量で、コードも短く書けて、人気もあるjquery.jsがおすすめです。

jquery.jsの解説をWebであされば、Ajaxの実装方法はかなり見えてくると思います。


その後、GoogleMapsとかそれくらい複雑なAjaxバリバリを作る必要があるなら、書籍の購入を検討するのが良いと思います。

おすすめばオライリー本ですけど。

http://www.amazon.co.jp/gp/product/4873113016%3ftag=kamawada-22%...

id:sensepicker

やっぱりオライリーがいいですか。買ってみます!

2009/07/25 21:56:35
id:ymlab No.4

ymlab回答回数507ベストアンサー獲得回数342009/07/30 23:53:14ここでベストアンサー

ポイント10pt

みなさんのお書きの通り、Ajaxは、特別に新しい技術ではありません。

そのことは既に、id:sensepicker さんもご承知の通りだと思います。

どうすれば、こんなサービスを提供することができるのかについてですが、

htmlの中に、例えば<div id = "abc"></div>とかして<div>タグに idで名前をつけておきます。

また、<a>や<input type = "text" />などで、ユーザーに何らかのアクションを起こさせることもできます。

そのときも、 id = ""で名前をつけておきます。

そこで、何らかのアクションを起こさせたときに、javascriptでそれをキャッチさせるのです。

[例えば、テキストボックスに何か入力されたときの動作はjavascriptでキャッチできます。]

そのjavascriptの中に、ブラウザの違いを吸収するようなコードを書いておき、

XmlhttpRequest関数を呼び出し、phpをコールするのです。[フックとかいいます。]

このコールされたPHPの中に、ファイルを書き込んだり読み込んだりするようなことをして、

それをjavascriptで読み込めるようにすればよいのです。

例えばソースが見にくくて申し訳ないですが、javascriptの中にこんなことをしておきます。


/** 行事予定をAjaxライクに登録・更新・削除させる.
 * @param year 何年
 * @param month 何月
 * @param day 何日
 */
function decidePlan( year, month, day ) {
	//alert(year+":"+month+":"+day);
	//登録された情報を取得する.
	var Content = "";
	
	Content = document.plan.elements["planX"+year+"X"+month+"X"+day].value;
	//データの内容が空だったら、登録しない.
	//Content = Content.replace(/^\s+|\s+$/g, "");//trimの代わり.
	//if ( Content == "" ) {
		//データの内容が空だから、以下は実行しない.
	//	return;
	//}
	httpObj = createHttpRequest();
	if (httpObj) {
		httpObj.open("GET", "./gyouziajaxsave.php?year="+year+"&month="+month+"&day="+day+"&contents="+encodeURI(Content), true);
		httpObj.onreadystatechange = updatePage;
		httpObj.send(null);
	} else {
		alert("httprequest violation has occured. Call ymlab.");
	}

	/** メッセージ送信中の状態.
	 */
	function updatePage() {
		if (httpObj.readyState == 1 || httpObj.readyState == 2 || httpObj.readyState == 3) {
			document.getElementById("statusX"+year+"X"+month+"X"+day).innerHTML = "<img src = \"../img/ajax-loader.gif\" width = \"16\" height = \"16\" alt = \"loading\" />";
		}
		if ( httpObj.readyState == 4) {
			if ( httpObj.status == 200 ) {
				//alert("処理が完了しました.");
				document.getElementById("statusX"+year+"X"+month+"X"+day).innerHTML = "<img src = \"../img/accept.png\" width = \"16\" height = \"16\" alt = \"Accept\" />";
			}
		}
	}
}

//XMLHttpRequestオブジェクト生成
function createHttpRequest(){
	//Win ie用
	if(window.ActiveXObject){
		try {
			//MSXML2以降用
			return new ActiveXObject("Msxml2.XMLHTTP") 
		} catch (e) {
			try {
				//旧MSXML用
				return new ActiveXObject("Microsoft.XMLHTTP")
			} catch (e2) {
				return null
			}
		}
	} else if(window.XMLHttpRequest){
		//Win ie以外のXMLHttpRequestオブジェクト実装ブラウザ用
		return new XMLHttpRequest() 
	} else {
		return null
	}
}

httpObj.open("GET", "./gyouziajaxsave.php?year="+year+"&month="+month+"&day="+day+"&contents="+encodeURI(Content), true);

のところで、 phpをフックしています。

フックされたphpはこんなかんじです。

<?php
include_once("../db/xml.php");
include_once("./common.php");
$isLogin = sessionCheck();
	$year		= _hs( $_REQUEST['year'] );
	$month		= _hs( $_REQUEST['month'] );
	$day		= _hs( $_REQUEST['day'] );
	$contents	= ( $_REQUEST['contents'] ); //これを_hsすると文字化けする. ($_REQUESTは、URLエンコードされているはずの文字)下の方で無害かしているか大丈夫

	//年・月・日のチェック.
	if ( !preg_match("/^[0-9]+$/", $year ) ||
		!preg_match("/^[0-9]+$/", $month ) ||
		!preg_match("/^[0-9]+$/", $day	)) {
		//年月日に数字以外が入っている.
		return;
	}
	//サニタイズ.これはファイルに書き込む時にするべきか・・・
	//$content = htmlspecialchars($content);
	
	if ( $year >= 1 && $year <= 3 ) {
		$year--;
	} else {
	}
	
	if ( !file_exists("../db/plan/$year.xml") ) {
		//存在しないので、生成する.元旦だけ入れてやろう.
		$putData = <<<EM
<?xml version='1.0' encoding='UTF-8'?>
<doc>
	<article><month>-1</month><day>-1</day><contents>ダミー</contents></article>
	<article><month>-11</month><day>-11</day><contents>ダミー</contents></article>
	<article>
		<month>
			1
		</month>
		<day>
			1
		</day>
		<contents>
			元旦
		</contents>
	</article>
</doc>
EM;
		
		$fpout = fopen("../db/plan/$year.xml", 'w' ) or die;
		fputs( $fpout, $putData );
		chmod( "../db/plan/$year.xml", 0777 );
		fclose( $fpout );
	}
	
	
	$fp = fopen( "../db/plan/$year.xml", 'r' ) or die;
	while( !feof( $fp ) ) {
		$fBuf .= fgets($fp, 200 );
	}
	fclose( $fp );

	$fBuf = mb_convert_encoding( $fBuf, "UTF-8", "sjis-win" );
	$data = XML_unserialize( $fBuf );
	
	$n = count( $data['doc']['article'] );
	$p = $n;
	
	for( $iCounter = 0; $iCounter < $n; $iCounter++ ) {
		if ( trim( $month ) == trim( $data['doc']['article'][$iCounter]['month'] ) && trim( $day ) == trim( $data['doc']['article'][$iCounter]['day'] ) ) {
			$p = $iCounter;
			break;
		}
	}
	
	$forOutput = "";

	$contents = str_replace('&', '&amp;', $contents);
	$contents = str_replace('&','&amp;', $contents);
	$contents = str_replace('<','&lt;', $contents);
	$contents = str_replace('>','&gt;', $contents);
	$contents = str_replace('"','&quot;', $contents);
	$contents = str_replace('\'','&#39;', $contents);

	$data['doc']['article'][$p]['month']	= $month;
	$data['doc']['article'][$p]['day']		= $day;
	$data['doc']['article'][$p]['contents']	= $contents;
	//utfに変換しておく.
	$forOutput = htmlspecialchars($data['doc']['article'][$p]['contents']);
	$xml = XML_serialize( $data );
	$xml = mb_convert_encoding( $xml, "sjis-win", "UTF-8" );
	$fpout = fopen( "../db/plan/$year.xml", 'w' ) or die;
	fputs( $fpout, $xml );
	fclose( $fpout );
?>

私も見よう見まねで作ったのですが、

案外なんとかなるもんです。

いきなり、mootoolsとか、prototypeなどの便利なライブラリを使うのではなくて、

いったん自分で実装できるようになってからでも、使うのは遅くないかと思います。

といいながら、私の初めてのAjaxプログラミングは、Google map APIでしたけど^^;

http://www.openspc2.org/JavaScript/Ajax/GoogleMaps/index.html

がんばってください。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません