学名・和名からどんな植物かを一発画像検索するアドオンの作成

注)本記事はあまりサボテン・多肉植物とは関係ありません。




サボテンは原種だけでもおおよそ2500種ぐらいあるそうです。

もちろん、そんな多い種類の外観など暗記できているわけもありません。

よく業者さんのリストとか、植物データベースなど、写真がなく学名だけしか載っていないこともしばしばあります。

そんなとき、この名前のサボテンってどんな見た目なんだろうって思いますね。

そんなときは・・・



1.WEBページから学名をコピー

2.検索窓にペースト

3.画像検索結果を確認

「これはかっけえ!」

4.元のWEBページに戻る

1に戻る


こんなことをすると思います。

そう!この作業、実に面倒くさいのです!


特に海外の業者のSeed Listから種を選ぶときとか!








というわけで、そんな作業が少しでも楽になるように、Google Chrome用のExtension(いわゆるアドオンであり、いわゆる拡張機能)を作ってみました。以下はいつものように自分用の備忘録です。

ちなみにスマホではなくパソコン用です。


目的

WEBページから文字列を選択する。
マウスの中央クリック(ホイールを押す)で、別窓でその文字列の画像が表示される
(゚д゚)ウマー
 
※文字列を選択して、右クリックから「イメージ検索をする」→別タブに結果を表示、みたいなのはもう結構あるのですが、それでさえ面倒くさいので、なんとかボタン一発にして、連続で検索できるように別窓にしたかったのです。
 

ファイル構成

4つのファイルで構成しています。
 

【image-searchディレクトリ】
・manifest.json
・script.js
・background.js
・jquery.min.js


ファイルの中身

・manifest.json


{
  "manifest_version": 2,
  "name": "Image-search",
  "description": "Google image search by selecting text and wheel mouse click",
  "version": "1.0",
  "background": {
    "persistent": false,
    "scripts": [ "background.js" ]
  },
  "content_scripts": [{
    "matches": [ "http://*/*", "https://*/*", "file:///*" ],
    "js": [ "script.js" ]
  }]
}


・script.js


window.addEventListener('mousedown', function (e) {
    if (e.button == 1) {
        var text = window.getSelection().toString();
        if (text.length > 0) {
            chrome.extension.sendMessage({ text: text }, function (response) { });
        }
    }
}, false);


・background.js


chrome.extension.onMessage.addListener(function (req, sender, callback) {
        if (req.text !== undefined) {
            window.open("http://images.google.com/images?hl=ja&ie=UTF-8&oe=UTF-8&q=" + req.text, null, 'width=600, height=600, menubar=no, toolbar=no, scrollbars=yes');
        }
});


・jquery.min.js

Download jQuery | jQuery ここらへんからダウンロードしておく。
 
 

主な動き

1.選択文字列をwindow.getSelectionで取得。
2.取得した文字列をイメージ検索のURLパラメータに渡してwindow.open。

使い方

0.GoogleChromeを最新版にしておく。

1.アドレスバーに「chrome://extensions」と入力。
2.右上の「デベロッパーモード」にチェック。
3.「パッケージ化されていない拡張機能を読み込む」を押してディレクトリを読み込む。
4.下画像のようになればOK。
5.念のためブラウザ再起動。



適当なWEBページ上で知りたいサボテンの文字列を選択して、マウスのホイールボタンクリック!
ちなみに下画像はhttp://www.theplantlist.org/

 



別ウインドウの小窓でgoogle画像検索結果がでるのです!

 



というわけで自分用ですが、これでかなり楽になりましたとさ!


さぁ種選ぶぞ―!


※真似された結果、なにか不具合が起きましても責任は取れませんので、その点はご了承ください。

読んでいただきありがとうございます!実はブログランキングに参加しておりますので、ぜひ下のボタンをワンクリックお願い致しますっす!
にほんブログ村 花・園芸ブログ サボテンへ
にほんブログ村

スーパーサボテンタイム管理者

2013年に知人宅にあった金鯱の美しさに一目惚れして、サボテン栽培を開始する。栽培場所はベランダとルーフバルコニー。好きなサボテンは海王丸。

シェアする

フォローする

コメント

  1. weedy より:

    こんばんは。
    これは便利ですね。私もいつも面倒な作業を繰り返してます。
    次々と新しい試み、素晴らしいですね。
    私もやって見たいのですが、内容についていけず、
    できそうな気がしません。
    ところで、リンクの件、こちらこそ
    よろしくお願いします。

  2. 管理者 より:

    weedyさん、こんばんわ!

    お褒めいただきありがとうございます!!
    でもその面倒な作業が一番おもしろかったりしますよね。
    種や苗を選んでいる時ってとても幸せです。(*´∀`*)

    リンク貼らせていただきました!ありがとうございました!