innerHTMLとXMLHttpRequestを利用してKWICを作ってみましょう。
http://ja.wikipedia.org/wiki/KWIC
簡単に言うとテキスト検索ですが、その前後の文字ごと表示することによって実際に探している文脈をみつけやすくするものです。
Google検索結果でいうところの検出サイトの下に出てくる文字列、まさにあれです。
実のところJavaScriptで行う部分はXMLHttpRequestの送受信とinnerHTMLの変更だけなので、JavaScript2-1でやってることとほぼ同じです。
具体的な文書解析やらHTML構文作成やらはどうしてもPHPのほうが楽なので、そちらに任せてしまいます。
本来ならばXMLやDOMツリー等を使ってJavaScript側で行うべきなのですが、個人的にXML嫌いなので。
XMLといいJavaといいcssといいどうして面倒なほうに進んでいくのでしょうかね。
HTML構文とかは相当適当なので気にしない方針で。
あとJavaScriptももっと構造化すべきなのですがそこらへんもスルーの方向で。
上から順につらつら書いているとどうしてもこんな再利用が困難な書き方になってしまいます。
大事なHTML生成部分はすべてPHPに投げ渡してしまっているので、次回はPHP部分を作りましょう。
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0.1//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html;charset=Shift_JIS">
<link rel=stylesheet type="text/css" href="./index.css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="./index.js"></script>
<title>いんくりめんと</title>
<script type="text/javascript">
<!--
function openFile(){
//検索して表示
peekQuery('gingatetsudono_yoru.txt');
//1秒毎に実行
window.setTimeout("openFile();",1000);
}
-->
</script>
</head>
<body onload="openFile()">
<div id="inclementWatch2"></div>
<h2>いんくりめんと</h2><br />
<form>
<div id="ooooo" style="display:none;"></div>
<input type="text" name="sampleWatch" size="60" style="display:none;">
検索ワードを入力
<input type="text" size="30" maxlength="30" onClick="true" id="searchText">
<br />
<div id="searchField" style="display:none;"></div>
<br />
<input type="button" value="全文を読む" onClick="loadText('gingatetsudono_yoru.txt')" id="dispButton">
</form>
<div id="dispField" style="display:none;"></div>
</body>
</html> |
index.js
|
/*==========================================================*/
//インライン検索を行うJavaScript
//
//使用方法
//
//・検索文字列入力用フィールドのID
// <input type="text" onClick="true" id="searchText">
//
//・検索結果表示用フィールドのID
// <div id="searchField" style="display:none;"></div>
//
//・検索実行
// peekQuery('読み込むファイル名');
/*==========================================================*/
//グローバル変数定義
var oldquery = "";
var xmlhttp = 0;
var timeout=0;
/*==========================================================*/
//メインルーチン
/*----------------------------------------------------------*/
/* HTTPリクエスト作成関数 */
function peekQuery(title){
//引数が無ければ終了
if(title==""){
return;
}
//前回の処理が終わっていれば新しいクエリを作成
if (! xmlhttp){xmlhttp = createXmlHttpRequest();}
//返事待ち状態なら
if (! xmlhttp || xmlhttp.readyState == 1 ||
xmlhttp.readyState == 2 || xmlhttp.readyState == 3){
//タイムアウトカウント
timeout++;
//クエリから5秒反応がなければクエリを破棄
if(timeout>5){
xmlhttp.abort();
timeout=0;
var result = document.getElementById("searchField");
result.style.display = "block";
result.innerHTML = "タイムアウト";
}
//何も無い状態、返事が来た状態なら
}else{
//現在時刻の取得
var time_start=new Date();
//タイムアウト関数の初期化
timeout=0;
//結果表示部分取得
var result = document.getElementById("searchField");
//検索文字列取得
var textbox = document.getElementById('searchText');
var query = encodeURI(textbox.value);
//検索文字列が空なら何も出力しない
if (query==""){
result.style.display = "none";
//検索文字が更新されたら
} else if (oldquery != query) {
//クエリを作成
xmlhttp.open("GET", "inclemental_server.php?title="+title+"&query="+query, true);
//クエリの返答が帰ってきたら表示を更新する無名関数
xmlhttp.onreadystatechange = function() {
//正しいレスポンスが来た
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//返り値が空白でなければ
if(xmlhttp.responseText){
//現在時刻の取得
var time_end=new Date();
var time_interval=(time_end-time_start)/1000;
//画面表示
result.style.display = "block";
result.innerHTML = xmlhttp.responseText
+"<br>Searchtime:"
+time_interval+"s";
//返り値が空白ならば
}else if(xmlhttp.readyState == 4){
result.style.display = "block";
result.innerHTML = "ファイルが見つかりません"+xmlhttp.status;
}else{
result.style.display = "none";
}
}
}
//クエリ送信
xmlhttp.send(null);
}
//検索文字のチェック用
oldquery = query;
}
}
/*==========================================================*/
//サブルーチン
/*----------------------------------------------------------*/
/* HTTPリクエスト作成関数 */
function createXmlHttpRequest() {
var xmlhttp = false;
if( window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else if(window.ActiveXObject) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlhttp;
}
|
index.css
body{
background:#fafafa;
margin:10px 3% 0px;
}
div{
margin:2px;
padding:3px;
border-width:1px 1px 1px 1px;
border-style:solid;
}
div a{
text-decoration:none;
}
div:hover{
background:#eff;
} |
PR
