javascript

投稿を登録

Google サジェストを組み込む　その２（サーバーサイドにGAE-Python）

2010/11/10 5:29 に いつかはちょうになる が投稿

前回投稿したサジェスト組み込みに比べサーバーへの負荷がかなり減った。と、いうのも、今まではキーが押されるたびにサーバーへ問い合わせを行っていた（単に手抜きしただけ）。これを０．５秒間入力待ちが続いたときにサーバーへ問い合わせるように変更した。ソースコードを添付しておく。

| 添付ファイル: suggest.js suggest.py

Google サジェストを組み込む（サーバーサイドにPHP）

2010/11/08 3:29 に いつかはちょうになる が投稿   [ 2010/11/08 3:37 に更新しました ]

Google の補完サービス、Googleサジェストを組み込む方法について記載します。動作させるにはJavascriptとPHPを利用しています。Javascriptだけでも利用できますが、ブラウザのセキュリティ強化によって使えなくなるのは困るのでサーバー側でデータを取得する方法にしています。また、クライアントスクリプトのライブラリとしてPrototype.jsを使っています。

Javascript
var mTemplateHeader ='<table style="width:100%;">';
var mTemplateRecord ='<tr>'
+'<td style="padding:4px;cursor:hand;" onclick="fSuggestSelectItem(\'#TEXT#\');" onmouseover="fSuggestOnMouseOver(this);" onmouseout="fSuggestOnMouseOut(this);">'
+'#TEXT#'
+'</td>'
+'</tr>';
var mTemplateFooter='</table>';
var mSuggest;
var mSuggestTarget;

function fSuggestOnMouseOver(s){
s.style.backgroundColor="#EEEEEE";
}
function fSuggestOnMouseOut(s){
s.style.backgroundColor="#FFFFFF";
}
/*
サジェストのレスポンス処理
取得したXMLデータを解析してHTMLで表示する
*/
function fSuggestShowResponse(originalRequest)
{
if (!mSuggest){
var o=$(mSuggestTarget);
var offsetTop = 0;
var el = o;
if (Prototype.Browser.IE){
offsetTop=0;
do {
offsetTop += el.offsetTop || 0;
el = el.offsetParent;
} while (el);
}else{
offsetTop=o.offsetTop;
}
var offsetLeft = 0;
var el = o;
if (Prototype.Browser.IE){
offsetLeft=0;
do {
offsetLeft += el.offsetLeft || 0;
el = el.offsetParent;
} while (el);
}else{
offsetLeft=o.offsetLeft;
}
mSuggest=document.createElement("div");
mSuggest.style.position="absolute";
mSuggest.style.border="solid 1px gray";
mSuggest.style.left=(offsetLeft)+"px";
mSuggest.style.top=(o.offsetHeight+offsetTop)+"px";
mSuggest.style.width=(o.offsetWidth)+"px";
mSuggest.style.backgroundColor="#FFFFFF";
o.parentNode.appendChild(mSuggest);
}
var xml=originalRequest.responseXML;
var CompleteSuggestions=xml.getElementsByTagName("CompleteSuggestion");
var mhtml="";
var imax=CompleteSuggestions.length;
if (imax==0){
}else{
for (var i=0; i<imax; i++){
var suggestions=CompleteSuggestions[i].getElementsByTagName("suggestion");
var t=suggestions[0].getAttribute("data");
mhtml+=mTemplateRecord.replace(/#TEXT#/g, t);
}
}
mSuggest.innerHTML=mTemplateHeader+mhtml+mTemplateFooter;
}
/*
ターゲットがフォーカスをロストした際に呼び出される
*/
function fSuggestFin(){
setTimeout(fSuggestClose, 250);
}
/*
サジェスト非表示
*/
function fSuggestClose(){
if (mSuggest){
mSuggest.innerHTML="";
var o=$(mSuggestTarget);
o.parentNode.removeChild(mSuggest);
mSuggest=undefined;
}
}
/*
サジェスト初期値設定
*/
function fSuggest(id){
mSuggestTarget=id;
var o=$(mSuggestTarget);
if (o.addEventListener){
o.addEventListener('blur', fSuggestFin, false);
} else if (o.attachEvent){
o.attachEvent('onblur', fSuggestFin);
}
}
/*
入力されている文字を送信してサジェストの候補リストを取得する
*/
function fSuggestSubmit(){
var url="http://localhost/sample/index.php";
var pars="p="+encodeURI($(mSuggestTarget).value);
var myAjax = new Ajax.Request(
url, 
{
method: 'post', 
parameters: pars, 
onComplete: fSuggestShowResponse
});
}
/*
キー入力があった際に表示される
*/
function fSuggestOnChange(){
fSuggestSubmit();
}
/*
サジェストが選択されたときの処理
選択された文字をテキストへ入れる
*/
function fSuggestSelectItem(v){
var o=$(mSuggestTarget);
o.value=v;
fSuggestClose();
}
/*
サジェスト初期設定
*/
window.onload=function(){
fSuggest("in_text");
}

HTML
<div>
<input type="text" id="in_text" value="" onkeyup="fSuggestOnChange();" />
<input type="button" id="in_submit" value="検索" />
</div>


参考にしたサイト
 参考 http://code.google.com/intl/ja/more/
 PHP で HTTP リクエスト
 
 参考 http://u823.net/wordpress/archives/330
 ie だけ表示位置がおかしい、offsetTopの値を取得
 
 参考 http://phpspot.org/blog/archives/2007/04/javascriptie1.html
 ie かどうかの判別

| 添付ファイル: index.html index.php

正規表現意味わからない。。。

2010/11/05 4:05 に いつかはちょうになる が投稿

正規表現は慣れていないとほんとうに理解しづらい。と、いうことでトライアンドエラーで試せるページを見つけたので載せておく。


Ajaxで日本語をサーバーへ送信（GET/POST）する際にエラー？？？

2010/10/21 5:15 に いつかはちょうになる が投稿

実行されている環境はサーバーサイドがPHP5、クライアントサイドがJavascriptでPrototype.jsをライブラリに利用している。サーバーサイドのデータベースはMySQL5でどの環境も指定できる文字コードはすべてUTF-8に設定されている。この状態で、クライアントサイドからAjaxで日本語をPOSTしようとした際にサーバーサイドのスクリプトが正常に動作しなかった。英数字だけの場合は正常に動作する。送信前に日本語が入る可能性のある部分についてはescapeを入れているので大丈夫だと思っていたのだが、なぜかPHPで送信したPOSTの要素を参照するとそこでプログラムが止まってしまう。原因は送信前に行っていたescapeにあり、ここで利用しなければならないのはescapeではなくencodeURIだった。encodeURIは&が変換対象に含まれないのは有名なところなので、以下のような処理を実行しPOSTに加えるようにしたところ、正常にサーバーサイドでも動作するようになった。

（xhtmlにはあらかじめ送信したい文字列が格納されている）
xhtml=encodeURI(xhtml).replace(/&/g , "%26")

/&/g は正規表現と呼ばれるパターンマッチ文になり、「文字列中に含まれているすべての&を対象とする」という意味を示す。


HT-03A:Google Phone(Android) でAjax

2010/01/19 18:12 に いつかはちょうになる が投稿   [ 2010/01/19 18:16 に更新しました ]

Google Phone でもPC版コーディングのままで Ajax が利用可能。
使い方も非常に簡単。prototype.js を使うだけ。

<script language="javascript" charset="UTF-8" src="/js/prototype.js"></script>

<script>
<!--
window.onload=function(){

  var act=new Ajax.Request('./3594/env.xml', {
            "method":"get",
            "onComplete":fRecv
            });
}
function fRecv(res){
try{
  mXML=res.responseXML;
  [あとは普通にコーディングできます。]
}catch(e){
  alert(e.description);
}
}

ページにソースコードを表示する

2010/01/13 6:35 に いつかはちょうになる が投稿   [ 2010/01/18 11:41 に更新しました ]

ページにソースコードを掲載する際、色分けが非常に面倒です。
無料で利用できるスクリプトがいろいろあるようですが、imomushi.com では Google Code でも公開されているprettifyを使います。


とは言うものの、ソースコードを掲載することがあるのだろうか疑問。

1-6 of 6