スタートページへアプリの実行へ

「(素人による)花の名しらべ」にようこそ

目次
1 ご利用にあたって:操作仕様書です。
2 ツールの仕組み:このツールの詳細説明でもありますが、むしろ、私が保守・改訂を行うための忘備録です。
3 作成のいきさつ:「花の名しらべ」には優れたサイトが多くあるのに、素人の私があえて作成したのは?


1 ご利用にあたって

機能概要(画面遷移)

4つの画面(処理)があり、通常は次の手順で花の名を探します。
   選択指定 → 候補表示 → 決定画像 → 地図表示
     ↑      ↑     ↓      ↓
     └──────┴─────┴──────┘

選択指定
知りたい花の特徴を各項目ごとに指定します。
項目により[説明]があります。クリックすると説明が表示されます。再度クリックすると非表示になります。
多様な選択項目があり、それぞれに「重み」をつけて、「自分は何を特徴と思ったか」に基づく検索ができるようにしました。
「指定完了」をクリックすると、選択された候補数が表示されます。
候補が複数あるときは[候補表示]、1個のときは「決定された」として[決定画面]へ進みます。
他画面から戻ったときは、以前の指定が残っています。「リセット」で初期状態になります。
候補表示
[選択指定」で選択された候補リストが、得点の高い順に名称と得点が表示されます。
さらに「画面表示」をクリックすると、各候補の写真のサムネイルが表示されます。
特定の候補をリストあるいはサムネイルでクリックすると、それに「決定された」として[決定画面]が表示されます。
決定画面
「決定された」花について、拡大写真と、追加情報が表示されます。
これらを参照にして、この花に同定してよいかどうかを検討します。
ここで示された他の花について[決定画面]を表示するには「他花表示」を指定します。
これで同定できないときは、[候補表示」に戻り、他の候補について同様な手順を行ないます。
条件設定を変更したいときは[選択指定」に戻ります。
地図表示
[地図表示]は、多分に私個人のニーズによる機能です。
ここでの位置情報は、必ずしも表示写真の位置ではなく、「よく見かけた場所」を最大2カ所をデータベースに設定した位置を用いています。
「ケース1」と「ケース2」は、撮影場所を確認することにより、該当花を思い出すキッカケにできます。季節が合えば再確認のために出かけることもできます。
「ケース3」は、これから出かけるときに、「あそこにどんな花があったっけ」を知るためのものです。
ストックしている全写真を自動的に位置情報を編集して表示できればよいのですが、同一場所での写真が多くかえって見にくいものになることもあり、このような中途半端なものにしました。

特徴

信頼性

信頼性の低さをカバーするために、外部Webサイトへのリンクを重視しています。これらのリンク先は私が同定するときに参考にさせていただいたものです。

条件のAND/ORについて

[選択指定]での各項目の関係は、「AかつB(AND)」と「AあるいはB(OR)」が考えられますが、ここではORにしました。
 両者を組み合わせるのは、指定方法が複雑になるし、プログラミングが面倒なので敬遠しました。
 未定義な項目が多いので、ANDにすると、未定義項目をもつ花が選択されず、結果として「候補がない」が頻発します。このツールでは候補列挙が目的なので、不適切な花が選択されても容認できるし、「重み」を調整することにより、不適切なものの相対的なランクを下げ、表示を抑えられると考えました。信頼性が低いことをカバーする手段でもあります。

←目次へ


2 ツールの仕組み

この章は、このツールの詳細説明でもありますが、むしろ、私が保守・改訂を行うための忘備録です。
 フォルダ flower 全体をダウンロードして、ローカル(パソコン)環境で保守・改訂を行ない、結果をアップロードすることを想定しています。
 実は、あなたにもっと花数が多く信頼性の高いツールを開発して公開していただきたいのです。そのときの参考にしてください。その用途に限り、このフォルダ(第三者開発のecl.js、jquery.js、googlemap.jsを除く)の構成要素をすべてオープンソースとします。

ローカル環境でのブラウザは Firefox を薦めます。IE および Safari では画像が表示されません。Chrome では「参考URLs」が表示されません(インターネット環境では、これらすべてのブラウザで正常に動作します)。

フォルダ flower 全体の構成

このページを含むフォルダ flower は、次の構造になっています。
 .htmlや.jsなどのテキストファイルはすべて文字コードが UTF-8 でなければなりません。
  flower
  ├readme.html このページ
  ├index.html ツールソフト
  ├picture   写真フォルダ
  │├アサガオ 登録した花のフォルダ
  ││├h.JPG   選択されたときに表示される縦長写真(height=400)
  ││└W.JPG   同上。横長写真(width=400)
  │├アザミ    これ以外に任意の写真があってもよい
  │├アヤメ    決定画面での「フォルダ全画像表示」で表示される
  │└:
  ├library   index.html に組み込まれるJSファイル等
  │├table.js  登録した花に関するデータベース
  │├urls.html  決定画面「参照URLs」でのリンク先一覧表
  │├ecl.js   日本語の花フォルダ名をインターネットで扱うための変換関数
  │├jquery.js  参照URLsから必要な部分を選択表示するために用いている
  │└googlemap.js 地図表示のために用いている
  ├help-fig    指定画面での[説明]で使われる画像のフォルダです
  │├xxxx.jpg     画像ファイル
  │└:
  ├map-icon  地図表示でのマーカー画像が入っているフォルダ
  │├n001.png
  │├n002.png
  │└:
  └tool    このツール構築用のデータやソフト(ローカル環境だけで使用)
   ├table.xlsx データベース table.js 構築の元本となる Excel ファイル
   ├table.csv  table.xlsxからtable.jsを作成するための中間csvファイル
   ├ローカルindex.html
   ├csvからjsを作る.html
   ├項目の表示とチェック.html
   ├
   :

このツールの中核になるのが、データベース table.js です。ツールソフトindex.htmlは、データベースが設定した各項目について、利用者が指定した項目に一致したものをデータベースから選び、ヒットした得点の高いもの候補として表示するのが主機能です。写真 picture は、選択されたもの、一致したものを画像で示す補助的な位置づけです。それ以外のものは、ツールソフトを支援する副次的なものです。

花フォルダ picture について

Googleドライブとの連携(「決定画面」での「他写真表示」)

私は、撮影した花の写真を、Googleドライブに保管しています。
私のGoogleドライブ内容
   ├「花」フォルダ(共有ファイル)
   │ ├「アサガオ」フォルダ
   │ ├「アザミ」フォルダ
   │ ├「アヤメ」フォルダ
   │ ├ :
   ├他の非共有フォルダ
   │
「花」フォルダ内の「アサガオ」や「アザミ」のフォルダは、pinctureと同じ名称になっています。「決定画面」の「他写真表示」は、このフォルダの内容を表示しています。なお、pinctureでの写真は、これらのフォルダにある写真を抜粋・加工したものです。

これらのフォルダは公開(共有)に設定しており、「フォルダへのリンク先を知っている閲覧者全員に表示を許可する」方式になっています。
 そのリンク先は、
  https://drive.google.com/folderview?id=○○○&usp=sharing
の形式で、○○○の部分はフォルダを示す文字列です。
 例えば「アサガオ」フォルダでは「0BzGDFcgNtOc4TnJUNmczdGJXb0E」のように、Googleドライブが長い文字列を設定しています。

データベース table.js の作成

table.jsは、次のように連想配列の形式でデータベースの内容が定義されています(抜粋)。
   var 表 = new Array();
   :
   表['名称'] = new Array();
   表['区分'] = new Array();
   表['花形状'] = new Array();
   :
   表['名称'][27] = 'アサガオ';
   表['区分'][27] = '蔓園芸、蔓野草';
   表['花形状'][27] = '漏斗形';
   :
   表['名称'][29] = 'アザミ';
   表['区分'][29] = '中野草';
   表['花形状'][29] = '筒状形、針棒形';
   :

 作成や改訂をするには、元本をExcelの形式でもつのが便利です(table.xlsx)。

 
名称区分花形状・・・
27アサガオ蔓園芸、蔓野草漏斗形・・・
30アザミ中野草筒状形、針棒形・・・
・・・

次の手順によりtable.xlsxからtable.js を作成します。

  1. table.xlsxを、ファイル名「table.csv」ファイルの種類「CSV(カンマ区切り)(*.csv)」として「名前を付けて保存」します。
  2. table.csvをメモ帳で開き、名前を付けて保存、文字コードを UTF-8 にして保存します。
  3. FirefoxあるいはSafariで「csvからjsを作る.html」を開くと、連想配列形式が画面表示されます。それを table.js にコピーアンドペーストします。
  4. table.js を文字コードUTF-8に変換します。

table.js のチェック

このようにして作成した table.js について、
  ・各項目での要素の誤字などのミス
  ・違う項目への要素の記入
  ・要素のうち対応する花が少ないものの削除あるいは他要素への併合
  ・[選択指定]でのリストとの整合性
などをチェックします。
 それには、toolの「項目の表示とチェック.html」を用います。実行すれば内容は明白でしょう。
 修正が必要ならば、table.xlsxの更新に戻ります。

データベース table.xlsx 作成での注意

項目設定上の注意

このツールは、作成者も利用者も花の素人(私)を対象にしており、利用者は「見たことだけしか知らない」ことを原則にしています。そのため、項目の設定やその要素について、次のような留意が必要です。

名称と別名の関係

花には多くの別名があります。ここでは、私がよく聞くものを「名称」にし、他を「別名」としました。ところが名称と別名の間には微妙な関係があります。それをここでは「関係子」で示しました。
  = ほとんど同じ花
  ≒ 厳密には違うらしいが、世間では同じとしていることが多い
  ⊆ 別名は名称を含む上位概念らしいが、多くの場合、別名は名称のことを指している
  | 違う花なのだが、私にはその違いがわからないので同じ花とした

処理上では、名称と別名は同等としています。文字列で指定した場合、名称だけでなく別名も調べ、どちらかに一致すれば選択されます。そのため、別名も名称と同様に一意でなければなりません。

記述上の注意

参照URLsファイル urls.html について

urls.htmlは、単にリンクを並べただけですが、[決定画面]で決定した花の名称に該当するものだけを表示させるたえに、jQueryを使っています。

HTML index.html の記述
 Script部
   <script src="library/jquery.js"></script>
   <script>
     :
     var クラス名 = new String(".");
     クラス名 = クラス名 + 名称;
     $("#参照URLS表示場所").load("library/urls.html" + " " + クラス名);
     :
   </script>
 Body部
   :
   <div id="参照URLS表示場所"></div>
   :

 これにより、library/urls.htmlの内部に散在している「<div id="名称">~</div>」の部分がすべて、「参照URLS表示場所」に表示されます。

urls.htmlの記述
   <div class="アサガオ">               ・・・A
   ◆<a href="http://shokubutsu-zukan.net/blogs/kyohana/2011/07/post-2282.html" target="_blank">
   龍 花図鑑「朝顔(アサガオ)」</a><br>
   ◆<a href="https://minhana.net/wiki/アサガオ" target="_blank">
   みんなの花図鑑「アサガオ [朝顔]」</a><br>
   ◆<a href="http://matsue-hana.com/hana/asagao.html" target="_blank">
   松江の花図鑑「アサガオ(朝顔)」</a>
   </div>
   :
   <div class="アサガオ ペチュニア">          ・・・B
   ●<a href="http://borancha.exblog.jp/21061528/" target="_blank">
   花と葉っぱ「花が似ている!アサガオとペチュニア 」</a>
   </div>
   :
   <div class="アサガオ セイヨウアサガオ ノアサガオ">  ・・・C
   ●<a href="http://leafstemroot.oldpandaspace.com/asagao/contents.html" target="_blank">
   根・茎・葉の壺「「朝顔(アサガオ、セイヨウアサガオ、リュウキュウアサガオ)の葉、茎、根」</a>
   </div>
   :

←目次へ


3 作成のいきさつ

経緯

数年前に後期高齢者になり、完全な年金生活に入りました。
 時間つぶしの趣味が必要なのですが、諸般の事情により、次の三原則を定めました。
  1 自分ひとりでできること
  2 カネがかからず、時間がかかること
  3 人畜無害だけでなく人畜無益なこと
 定番通り散歩から始めたのですが・・・

着眼点

花検索サイトは多くあり、大変お世話になったのですが、私のような素人にとっては、難しいことがいくつかありました。

それで「私個人にマッチした」ツールを作ろうと思い立った次第です。ローカル環境では、それなりに使えているのですが、あえてWebに公開する意義があるのだろうか・・・「人畜無益」だとしてご容赦ください。

←目次へ