遊ぶブログ＋ Javaスクリプト小技集

ブログ
リンク
フリーエリア
動画･音楽
楽天

ブログ

Entries

レシピ検索

ジャンル : ブログ
スレッドテーマ : ブログパーツ

Googleの画像検索を利用して、Yahoo!グルメとgooグルメのレシピ画像を検索表示するプラグイン。

画像をクリックするとサムネイル表示、URLをクリックすると、詳細ページに飛びます。

サイト指定で検索してるため、たまに料理じゃない画像も表示されます。

サンプルはサイドバー参照。

table.search-control {
        width : 100%;
      }

table.search-control .gsc-control {
        width : 100%;
      }

td.left {
        width : 160px;
        padding-right : 20px;
      }

td {
        vertical-align : top;
      }

/* Disable built in search forms */
      .gsc-control form.gsc-search-box {
        display : none;
      }

/* restrict global search form width */
      #searchForm {
        width : 160px;
      }

#leftSearchControl .gsc-resultsRoot {
        padding-top : 6px;
      }

/* for demonstration purposes ONLY. This is not ok by the terms */
      #rightSearchControl .gsc-ad-box {
        display : none;
      }

/* long form visible urls should be on */
      .gsc-webResult div.gs-visibleUrl-long {
        display : block;
      }

.gsc-webResult div.gs-visibleUrl-short {
        display : none;
      }

</style>
    <script type="text/javascript">

// the se class encapsulates a left and right search control
      // both controls are driven by a shared search form
      function se() {
        var sFormDiv = document.getElementById("searchForm");
        var leftScDiv = document.getElementById("leftSearchControl");

// create a left, right search control
        // create a custom search form
        this.leftControl = new GSearchControl();
        this.searchForm = new GSearchForm(true, sFormDiv);

// bind clear and submit functions
        this.searchForm.setOnSubmitCallback(this, se.prototype.onSubmit);
        this.searchForm.setOnClearCallback(this, se.prototype.onClear);

// set up for large result sets
        this.leftControl.setResultSetSize(GSearch.LARGE_RESULTSET);

var searcher;
        var options;

var searchControl = new GSearchControl();

var siteSearch = new GimageSearch();
      siteSearch.setUserDefinedLabel("Yahoo!");
      siteSearch.setUserDefinedClassSuffix("siteSearch");
      siteSearch.setSiteRestriction("recipe.gourmet.yahoo.co.jp");

var siteSearch2 = new GimageSearch();
      siteSearch2.setUserDefinedLabel("goo");
      siteSearch2.setUserDefinedClassSuffix("siteSearch");
      siteSearch2.setSiteRestriction("gourmet.goo.ne.jp");

// configure left control
        // vertical layout, image and blog

this.leftControl.addSearcher(siteSearch);
        this.leftControl.addSearcher(siteSearch2);

var drawOptions = new GdrawOptions();
        drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);

this.leftControl.setNoResultsString(GSearchControl.NO_RESULTS_DEFAULT_STRING);
        this.leftControl.draw(leftScDiv);

// execute a starter search
        this.searchForm.execute("パスタ");

}

// when the form fires a submit, grab its
      // value and call the left and right control
      se.prototype.onSubmit = function(form) {
        var q = form.input.value;
        if (q && q!= "") {
          this.leftControl.execute(q);
        }
        return false;
      }

// when the form fires a clear, call the left and right control
      se.prototype.onClear = function(form) {
        this.leftControl.clearAllResults();
        form.input.value = "";
        return false;
      }

function OnLoad() {
        new se();
      }
      GSearch.setOnLoadCallback(OnLoad);
    </script>

<div id="searchForm">Loading...</div>
    <table class="search-control">
      <td class="left">
        <div id="leftSearchControl" class="search-control">Loading...</div>
      </td>
    </table>
<span style="font-size:8px;margin:10px;">
developed by <a href="http://blogsquare256.blog85.fc2.com/" terget="_blank">遊ぶブログ</a>
</span>