人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Google系のサービスやhttp://www.sleipnirstart.com/、はてぶの検索ボックスに入力したらインクリメンタルサーチされるもの、など、Ajaxなサービスが増えてきていますが、どうすればこんなクールなサービスを作れるのでしょうか。(発想の問題ではなく、技術的に)
プログラミングはある程度できますし(C, C#, VB, PHP, Javascriptなど)、HTMLやCSSも書けます。
たとえば、PHP + Ajaxでページを作るとしたら、どのような書籍・サイトを勉強すればよいかを教えていただきたいです。

●質問者: sensepicker
●カテゴリ:ウェブ制作
✍キーワード:Ajax C# CSS Google HTML
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● たまたん
●27ポイント

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

◎質問者からの返答

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

参考になります。

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


2 ● pahoo
●27ポイント

PHPによるJavaScriptを書かないAjax

PHPによるJavaScriptを書かないAjax

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

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

◎質問者からの返答

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


3 ● hadashikick
●26ポイント

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%...

◎質問者からの返答

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


4 ● ymlab
●10ポイント ベストアンサー

みなさんのお書きの通り、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

がんばってください。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ