自分のホームページ内で写真データを検索する方法を教えてください

[新着] Webテンプレートを仮オープンしました



0   名前: グラスホッパー : 2007/10/19(金) 06:31  ID:JByrqgVK sub-Cl
はじめまして
自分のホームページ内にたくさんの写真データを保存しておいて、それらの中から1枚をキーワードで検索するにはどうしたらよいでしょうか。
写真データは“071017_umi_kaisuiyoku01.jpg”というようにファイル名(日付_カテゴリー_内容)をつけます。
検索方法は検索のトップページにキーワードとして“071017”とか“umi”とか“kaisuiyoku”を入力するとこの写真だけを新しいページに表示するようにしたいです。いわゆるデータベース的な使い方です。
よろしくお願いします。


これまではアルバムとしてサムネール画像をページ全体に一覧表示させておいてクリックした画像だけを別ページで表示するというのを作ったことがあります。

1   名前: カヅサツ ◆ThCi95HEzw : 2007/10/19(金) 06:31  [URL]  ID:O5hEMlpW sub-r2
> 自分のホームページ内にたくさんの写真データを保存しておいて、それらの中から1枚をキーワードで検索するにはどうしたらよいでしょうか。

原則的には CGI や PHP などのサーバ・サイド・スクリプトを使うことになります。ので、プログラムの知識が必要になります。

> 検索方法は検索のトップページにキーワードとして“071017”とか“umi”とか“kaisuiyoku”を入力するとこの写真だけを新しいページに表示するようにしたいです。

例えば、万一、“umi”という文字を含む画像が複数あったらどうすべきか、ということは考えておく必要があると思います。

2   名前: グラスホッパー : 2007/10/19(金) 06:31  ID:g/ejkG12 sub-3e
カヅサツさま

早速のご回答ありがとうございます。
やっぱりサーバ・サイド・スクリプトが必要ですか。

簡単な方法としてインデックスページにリンク元の写真名称を一覧表示させておいて、ブラウザの検索機能を使えば同様のことができると気づきました。
しかし、この方法では検索するたびに“編集→このページの検索”としなければならず少々面倒だと気づきました。
そこで、インデックスページの中(上部)にGoogle検索のような入力欄を設定し、検索すると検索された写真のリンク元にジャンプする方法だと楽かなと思いました。このような方法(検索欄の設定)をHTMLタグで書くことができますか。
重ねてご教授ください。

3   名前: カヅサツ ◆ThCi95HEzw : 2007/10/19(金) 06:31  [URL]  ID:Ehfvypix sub-r2
> HTMLタグで書くことができますか。

HTMLが提供できるのは、せいぜいフォームコントロールを提供するところまでで、コントロールに文字列を入力しボタンを押下した後の処理はプログラムの役目です。

4   名前: グラスホッパー : 2007/10/19(金) 06:31  ID:g/ejkG12 sub-3e
カヅサツさま

本格的な検索方法となるとプログラムの勉強が必要ですね。
たいへん参考になりました。
ありがとうございました。

5   名前: Chips : 2007/10/19(金) 06:31  ID:iXTrKUp6 sub-FV
簡易的にはgoogleのイメージ検索を利用するのはどうだろう?
(イメージ検索のロジックがわからんので検索精度としてファイル名の一部で検索して使い物になるかどうかわかりませんが)

例) 検索ワード「title」 site:www.tagindex.com
http://images.google.co.jp/images?q=title+site%3Awww.tagindex.com

6   名前: グラスホッパー : 2007/10/19(金) 06:31  ID:g/ejkG12 sub-3e
Chipsさま

>簡易的にはgoogleのイメージ検索を利用するのはどうだろう?

ありがとうございます。早速試してみたところ、機能は簡単で十分だと感じました。
しかし、構想しているものはインターネット接続をせずに写真(またはPDFデータ)検索をすることを考えています。データそのものがインターネットに接続するとデータ流出するとまずいものですので(決してアングラなデータではありません)。

知らないことだらけでたいへん勉強になりました。
ありがとうございました。

7   名前: miz : 2007/10/19(金) 06:31  ID:IbuIoV/z sub-.G
ローカルで、先に対象ファイル名をリストアップ出来るならJavaScriptで出来るでしょう。
とりあえず、配列の先頭から調べて、検索値を含むファイル名を一個見つけたら、画像表示して完了
<script type="text/javascript">
//  まずは画像ファイル名リスト作成
var image_list = new Array(
	"071017_umi_kaisuiyoku01.jpg",
	"071018_uml_summer02.jpg"
  );
var img_id = 'result';
function search(search_text){
	if(! search_text ){
		alert('検索値を入力して下さい');
		return;
	}
	var len = image_list.length;
	for( var i=0, i<len; i++){
		if( image_list[i].indexOf( search_text,0 ) >=0 ){
			document.getElementById(img_id).src = image_list[i];
			break;
		}
	}
}
</script>

html抜粋
<form>
<input type="text" id="search_word">
<input type="button" value="search start" onclick="search(document.getElementById('search_word').value">
<img id="result" src="" alt="search result">
</form>
実行チェックはしてないので、つっこみどころ満載でしょうが、適宜応用して下さい。

8   名前: 匿名 : 2007/10/19(金) 06:31  ID:D7.1n3cN sub-Cz
ローカルでの実行メインなら、XPath を使うのが一番手っ取り早いかもしれない。検索フォームを用意し、写真集ドキュメントを XMLDocument として取得、その中で src 属性値に検索文字列を含む img 要素をかき集めて XSLT で HTML 変換、という形にすれば良い。
http://www.mlab.im.dendai.ac.jp/~yamada/web/xml/xslt/scripting.html

MSXML なら自作関数で正規表現を使うこともできる。
http://members.jcom.home.ne.jp/jintrick/Personal/d20031l.html#d22_4

一覧へ戻る