スタートページ＞
Javascript
画像ファイルの検索
膨大な写真ファイルがあり、探すのが大変だと感じている人が多いと思います。便利なフリーソフトもありますが、ここでは、画像目次のファイルを作成することにより、検索できるツールのひな型を作成しました。
地図（Google Maps）との連携ができます。「Google Maps による写真の整理」から起動してください。
操作方法
- 一覧表ファイル
- 検索対象となる画像の一覧表が入ったファイルです。
各画像一つにつき、１行のデータがあり、フォルダ名，画像ファイル名，メモの３つの要素が、記述されています。
このソフトでは、このファイルから「対象フォルダ」と「検索欄」で指定した画像を取り出します。
- 対象フォルダ
- 「yyyy」「yyyy-mm」「yyyy-mm-dd」のいづれかの形式で与えてください。
例えば、「2012」とすると、「2012-01-01」～「2012-12-31」のフォルダが対象になります。
To を空白（Null）にすることができますが、To を与えることにより、期間を設定できます。
Fromが空白の場合、Toは空白でなければなりません。
双方を空白にすると、全フォルダが対象になります。
- 検索欄
- 一覧表ファイルのメモ中に、ここで与えた文字列が存在する画像を取り出します。
複数の文字列を指定できます。「,」（半角カンマ）で区切ってください。
andの関係になります。例えば「公園, 花」とすれば、「公園」「花」の両方がメモに存在する画像だけが選択されます。
「公園 または 花」というような or の関係や「公園 ただし岩槻城址公園は除く」というよな not の関係は指定できません。
単純な文字上の検索をしています。「春」を指定しても「４月」や「５月」とは一致しません。
デモの環境
- 画像ファイル
- フォルダ名 画像ファイル
2012-05-05 Image101.jpg Image102.jpg
2012-05-15 Image201.jpg Image202.jpg
2012-06-10 Image301.jpg Image302.jpg
- 一覧表ファイル
- フォルダ名 画像ファイル名 メモ
2012-05-05, Image101.jpg, 岩槻城址公園の池と赤橋。４月には桜、６月にはハスの花
2012-05-05, Image102.jpg, 岩槻城址公園の広場。子供たちの遊戯施設、芝生、ここの池には噴水
2012-05-15, Image201.jpg, 岩槻文化公園の池
2012-05-15, Image202.jpg, 岩槻文化公園の遠景。子供たちのサッカー場、アスレティック設備
2012-06-10, Image301.jpg, 岩槻城址公園の黒門
2012-06-10, Image302.jpg, ハスの花。見頃は５月末～６月
- 一覧表ファイルは、このデモでは「ichiran.txt」一つに固定していますが、複数の一覧表ファイルを作成して使い分けることができます。
処理効率など実用化の考慮をしていません。一つの一覧表ファイルで取り扱える画像数はおそらく数百個程度が限界でしょう（そもそもローカルファイルを扱う環境になっていません）。
- 一覧表ファイルは、一つの画像につき１行で記述し、フォルダ名，画像ファイル名，メモの３つの要素が「,」（半角カンマ）を区切記号として記述されています。
メモの記述は任意ですが、その中に「,」があってはいけません。
見やすくするために、「,」の前後に空白文字を入れるのは自由ですが無視されます（空白文字に意味を持たせることはできません）。
- 画像が入っているフォルダ名は yyyy-mm-dd で始まっていることを前提にしています。
- それらのフォルダは、一覧表ファイルと同一のレベルにあり、フォルダの直後に画像ファイルがあること（多重のフォルダになっていないこと）を前提にしています。
一覧表ファイル
画像フォルダＡ
画像ファイル１
画像ファイル２
画像フォルダＢ
画像ファイル３
画像ファイル４
地図との連携
- 地図は「Google Maps による写真の整理」で作成しています。
例えば「岩槻城址公園」の吹き出しの［写真表示］をクリックすると、
<a href="index.html?岩槻城址公園">
として、このＨＴＭＬが表示されます。
- このＨＴＭＬが表示されると、「function パラメタ取得() 」が起動します。
function パラメタ取得() {
if (location.search != "") { // パラメタが存在するとき
var para = decodeURIComponent(location.search.split("?")[1]);
// パラメタを受け取る
検索欄 = para; // そのパラメタを検索欄の入力値だとする
：
応用テクニック