最速怪談選手権

他のスクリプトをまねて、は寿馬手書いたのですが、検索入力フォームは出ますが、結果が帰ってこないのです。 どこか文章が間違っているのでしょうが、どこをどう尚したらよいか、教えて戴きたいのです。

<html>
<head>
<META http-equiv="Content-Script-Type" content="text/javascript">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">
<title>花名検索</title>
<script language="javascript" src="link_db.js"></script>
<script language="javascript">
<!--
dm_dt="";
kaisu=-1;

//検索
function kensaku(){
se_dt=document.jhamel_form.input_name.value;
if(dm_dt!=se_dt){
st_no=0;
}else{
st_no=kaisu+1;
}
for(i=st_no;i<=n;i++){
iti=jhamel[i].indexOf(se_dt,0);
if(iti != -1){
kaisu=i;
break;
}
}
dm_dt=se_dt;

if(kaisu==i){
//照合した場合
dt=jhamel[kaisu].split(",");

document.jhamel_form.out_hname.value=dt[0];
document.jhamel_form.out_bm.value=dt[1];
document.jhamel_form.out_torno.value=dt[2];
document.jhamel_form.out_kijyun.value=dt[3];
document.jhamel_form.out_trourl.value=dt[4];
document.jhamel_form.out_kamei.value=dt[5];
document.jhamel_form.out_hphot.value=dt[6];

if(dt[1]){
document.jhamel_form.out_ml.value=dt[3];
}else{
document.jhamel_form.out_ml.value="";
}
}else{
//照合しない場合
document.jhamel_form.out_hname.value="";
document.jhamel_form.out_bm.value="";
document.jhamel_form.out_torno.value="";
document.jhamel_form.out_kijyun.value="";
document.jhamel_form.out_trourl.value="";
document.jhamel_form.out_kamei.value="";
document.jhamel_form.out_hphot.value="";

kaisu=-1;
}
}

//花写真鑑を開く
function trourl_link(){
window.open(document.jhamel_form.out_trourl.value);
}

//花写真を開く
function hphot_link(){
window.open(document.jhamel_form.out_hphot.value);
}
//-->
</script>
</head>

<body>
<center>
<h1>花名検索</h1>
<table border=0 width=600><tr><td>

<hr>

<form name="jhamel_form">
<table>
<tr><td>検 索 キーワード<br>.</td>
<td><input type=text name="input_name" value="" size=30>
<input type=button value="検 索" onClick="kensaku()"><hr></td></tr>

<tr><td>花名(別名含む)</td>
<td><input type=text name="out_hname" value="" size=30></td></tr>

<tr><td>別名=*</td>
<td><input type=text name="out_bm" value="" size=2></td></tr>

<tr><td>登録No</td>
<td><input type=text name="out_torno" value="" size=5></td></tr>

<tr><td>基準花名</td>
<td><input type=text name="out_kijyun" value="" size=30></td></tr>

<tr><td>花写真鑑アドレス</td>
<td><input type="text" name="out_trourl" value="" size=30>
<input type=button value="開 く" onClick="trourl_link()"></td></tr>

<tr><td>所属科名</td>
<td><input type=text name="out_kamei" value="" size=40></td></tr>

<tr><td>代表花写真アドレス</td>
<td><input type="text" name="out_hphot" value="" size=30>
<input type=button value="開 く" onClick="hphot_link()"></td></tr>
</table>
</form>

<hr>

<center>
<h1>検索一覧表</h1>

・花写真鑑をクリックすると写真屋解説が見られます。<br>
・花写真をクリックすると代表写真が見られます。<br>

<table border=1 width=600>
<tr><th>no</th><th>花名(別名含む)</th><th>別名</th><th>登録No</th>
<th>基準花名</th><th>花写真鑑</th><th>科名</th><th>花写真</th></tr>

<script language="javascript">
<!--
//あいうえお順並べ替え
jhamel.sort();

//一覧表用HTML生成
for(i=0;i<=n;i++){
dt=jhamel[i].split(",");
document.write("<tr><td align='center'>",i+1,"</td>");
document.write("<tr><td>",,"</td>");
document.write("<tr><td>",,"</td>");
document.write("<tr><td>",,"</td>");
document.write("<tr><td>",,"</td>");
document.write("<td><a href='mailto:",dt[3],"'>",dt[0],"</a></td>");
document.write("<tr><td>",,"</td>");
document.write("<td><a href='",dt[2],"' target='_new'>",dt[1],"</a></td></tr>\n");
}
//-->
</script>

</table>
</center>
</td></tr></table>
</center>
</body>
</html>

A 回答 (2件)

No1です。



>別のファイルにデーター(JavaScript)を集め
外部ファイルにスクリプトで直接記述しているものと推測します。
例えば、
 jhamel = [
  "最初のデータ項目(カンマ区切り)",
  "二番目のデータ項目(カンマ区切り)",
  "三番目のデータ項目(カンマ区切り)",
    ・・・・・・・・・・
 ];
のような記述になっているってことでしょうか。

>データーの数は3400件ほどであり
上記の形式で、3,400件はきついのではないでしょうか。
数十件程度なら力業でも行けるでしょうが、それだけの数あるとメンテもできないでしょうし、そもそも間違え(誤入力等)をチェックすることすら大変に思います。
データベースは使用しないにしても、例えば、元データを表計算ソフト(エクセル等)に整理しておいて、そこからCSVで出力したものをデータとして使用する程度のことは考慮した方が良さそうに思いますが…

一方で、
>が撮った花の写真集をホームページに出していますが
>これならサーバーを借りなくて済みそうなので
??ウェブに公開しているのなら、何らかの形でサーバを利用していると思うのですが、どちらなのでしょうね。

もしも、公開しておらずに(=サーバを使わずに)ローカルで自分用に作成したいというような意味でしたら、それこそHTMLにこだわる必要もなく、表計算ソフト等で直接管理すれば検索機能などを作成する必要もなくなるように思います。
エクセルを例にすれば、検索機能やフィルタ機能が基本機能として備わっていますし、ハイパーリンクもできるようになっています。
関数も利用できるので、絞り込みや範囲での検索など、もう少し複雑なことも実現可能でしょう。
javascriptでプログラムを組むことを考えれば、(言語は異なりますが)VBAでプログラムを作成すれば、さらに処理できる範囲(=内容)は広がります。

すでに公開していらっしゃるならサーバを利用しているはずですので、(そのサーバにデータベース機能があればベストですが)、最低でも上記同様のCSVファイル等をアップしておく方法にしておく方が良さそうに思います。
(CSVに限る必要はありませんが、扱いやすい中間ファイルという意味です。他にはJSONなど。)

どのような方法を用いるのかは、質問者様の利用できる環境や使用可能なツール(プログラム言語も含め)などから総合的に判断するべきものと思います。
とは言え、ご質問のように検索システムをゼロから構築しようとするのはそれなりに手間がかかるはずです。
探せば、先人たちが汎用化したものを公開している例が多くありますので、基本的な構造はそういったものを利用することを考えた方が早いのではないかと思います。

以下は、簡単に検索してみただけですが、javascriptによるデータベースライクな処理について
(記事の内容は確認していませんので、そのおつもりで。探せば沢山見つかると思います)
https://blog.goo.ne.jp/shurey/e/3b50adf1dcefd414 …
http://d.hatena.ne.jp/yoshiyuki_matsui/20061206/ …
https://www.buildinsider.net/web/bookjslib111/69
    • good
    • 0
この回答へのお礼

丁寧なご説明、大変ありがとうございました。
私は今、Niftyで、サーバーを借りて、HPを公開してますし、そこには500MBまではデーターベースが使えると書いてありますが、私にはそれが技術的に出来ないからなのです。
3400件のデーターは今。HTMLで公開してますが、これに検索を加えたいと思ったのですが、矢張り無理なんですねー!。
どれくらい理解できるか解りませんが、お示し戴いたサイトも含め、もう一度じっくり読ませて戴きます。
取り敢えず、お礼のみにて。

お礼日時:2019/03/15 13:07

こんにちは


回答が無いようですので・・・

>どこをどう尚したらよいか、教えて戴きたいのです。
う~~ん。あちこちありすぎなのと、記述法自体もかなり旧い感じですので。
まずは、
>は寿馬手書いたのですが
>どう尚したらよいか、
あたりから修正するのがよろしいかと。(意味がわからない→回答しにくい)

そもそも、データベースがどのように構成されているのかよくわかりません。
一般的には、サーバ側にデータベースを置いて、「クライアントとやり取りしながら検索結果などを表示する」というスタイルだと思いますが、ご提示の範囲では通信している様子も見られないので・・・
「link_db.js」の内容が不明ですが、そこにベタで記述してあるとかでしょうか??
CSVとかでもなく、スクリプトで記述してあるとなると、メンテをどうするつもりなのかとか、いらないことまで気になってきちゃいますね。
(扱う内容が、ごく少量のデータ数ということなのでしょか?)

ご提示のコードの後半(特に、「一覧表用HTML生成」あたり)はメタメタだと思いますが、ひとまず、配列のjhamelと変数nの内容さえ適切に設定できていれば、ご提示の内容のままでも検索も動作します。
ですので、想像するところ質問文に記載のない、link_db.js内でエラーが起きているなどで、変数の初期値設定ができていないものと推測します。(質問文に記載がないのでわかりませんが)

その他で、修正した方が良さそうなものの主な点として、
・(上にも書いた)一覧表用HTML生成あたり
 現状では、SyntaxErrorで実行されていないものと推測します。
 また、document.writeの乱用はなるべく避けた方が宜しいかと。(←間違えではありませんが)
 表の内容をどう埋めるつもりなのかわかりませんが、現状のデータ順は検索値の表示順と矛盾しているようですし、「mailto:」ってなんとも不可思議な内容まであったりします。

・要素の指定方法
 要素のname属性をそのまま固有名のようにして指定していますが、うっかりname属性にキーワードを用いると途端に取得できなくなります。
 forms[フォーム名].elements[要素名] のような確実な方法を用いるか、querySelector()メソッドなどを利用する方が宜しいと思います。

・メイン機能(?)である検索機能ですが、各項目のデータをまとめて.indexOfで引っかけていて、かつ、最初のひとつしか返さない仕組みになっているので、本当に検索の役に立つのかどうかはなはだ疑問です。
例えば、ラン(=蘭)で検索すると、アイスランドポピーとかアキランサスしかヒットしないというようなことが起こりそうです。
普通に考えれば、複数ヒットに対応して、さらに、絞り込みができるような機能などがないと、「探す」という本来の目的には役立たないのではないかと憂慮します。

・リンクを開く(?)のに、window.open() を利用しているようですが、最近のブラウザだとデフォルトでブロックされたりしませんか?


記述法が旧いこともあって、全体を再構築した方が良さそうに感じるというのが正直なところです。
>他のスクリプトをまねて~~
どこまでが元のスクリプトで、どこからが質問者様の改変した部分なのかが不明ですが、元のスクリプトは動作しているのですよね?(元から動かないものを改変しても、動く期待は薄い)

ご質問の様子から見て、改変するにしても少しずつ行うことをお勧めします。
1)元のスクリプトが動作しているとして、まず、まったく同じものを作成してみて(=コピーでOK)動作することを確認する。
2)一回の改変の範囲を絞って、全体を少し改変し動作することを確認する。
 (2)を繰り返して徐々に変更してゆくことにすれば、動作しなくなる直前に変更した部分がおかしいことがすぐにわかりますし、元に戻すことも可能です)
  1回の変更内容として、「データの表示項目数を変更」とか、「表示レイアウトの変更」程度で内容が複合的にならないように切り分けたものにして、それらを順に積み重ねていくのが宜しいように思います。
    • good
    • 0
この回答へのお礼

ありがとうございました。
意味不明の文章で誠に申し訳ありませんでした。

 JavaScriptやPHPの入門書は何冊も買ってますが、全く前進しないので、Qponさんと言う方がソースを開示されていたので、何もわからないままに、コピーし、データーのファイル名、カラム名だけを変えたので、何を意味するか解らないものは変えていないので、ご指摘のようなことになるのは当然です。
 データーベースやPHP言語を使わないで、別のファイルにデーター(JavaScript)を集め、同じホルダー内に置いたスクリプトが質問に出したものです。データーを添付すればもう少しご理解が深まったかも知れません。
 今、考えているのは、私が撮った花の写真集をホームページに出していますが、これに検索機能を付けたいのです。データーの数は3400件ほどであり、この先は多くは増えないと思っています。
 データーベースは使い方が理解出来ませんので、悩んでいた時に、上記サイトを見つけて、これならサーバーを借りなくて済みそうなので、やって見たのでした。
 もっと細かく区切って、質問すべきことは承知してる積りですが、それも知恵が無く難しいので、困っています。
 ここに質問を出す前に、Qponさんに質問しようとしましたが、正しい質問の仕方がわからずに、ここにおすがりしたのでした。ご指摘のように、もう一度最初から実習をやって見ます。 その後、再度ここにお尋ねするやも知れませんが、そのときはよろしくお願いいたします。ありがとうございました。

お礼日時:2019/03/14 08:40

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!