Google AJAX Search API(3)-いろいろ検索をまとめてタブだ

Ads/Widgets:
サイト情報:
QLOOKアクセス解析
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
動画だ画像だと検索処理を記事の中に置く方法を調べてきて、WEBとかブログも調べたいじゃないの、などと思いながら更にGoogle AJAX Search APIを調べていくと、WEBやら画像やら動画やら、それぞれ検索してタブにまとめることができるらしい、というこが判明。

さっそくいろいろ組み込んで、コードを動かしてみると簡単にタブに表示になりました。

Loading...

今回はタブが出るまでは短かったけれど、納得してこれでいいと思えるまでは時間かかってます。ハマったのは、タブになったのはいいけど今ひとつ横幅が狭い、と思ってはじめた結果表示部の横幅調整でした。

オプションの設定とか見てもタブ含めた検索結果表示の横幅設定なし。どうやらスタイルシートで指定しろということのようなので、該当するらしいセレクタをインラインで指定してみても効果なし。記載したHTMLとかCSSの何がどう効いているかを表示してくれるChromeの『要素の検証』という機能で確認していくと、ターゲットの名前を間違えたりしているわけでもないのに、指定した値は無効になっている。。。

一番近いところで指定した数値が有効になって当たり前、と思い込んでいたことに気づいて、もしかしてと『CSS 優先順位』とググってみて…ありました。こちらのページにそのものズバリの答えが。…しかしなんなんだこの意味わかんねえ仕様。

ちょっと疲れた今回のコードはこんな感じでした。

  <style type="text/css">
    #content .gsc-control { width: 460px(お好みで調整); }
    #content .gsc-tabsArea{ width: 460px(お好みで調整); }
    .gtab-root
    {
    	clear: both;
    	margin: 10px(お好みで調整);
    	font-size: 90%(お好みで調整);
    	border: solid 1px #AAAAFF(お好みで調整);
    }
  </style>

  <script src="http://www.google.com/jsapi?key=自分のキーで"></script>
  <script type="text/javascript">
  <!--
    /*
    *  The Hello World of the AJAX Search API
    */
    
    google.load('search', '1');
    
    function OnLoad() {
      // Create a search control
      var searchControl = new google.search.SearchControl();
    
    
      var searchFormElement = document.getElementById("content");
      var drawOptions = new google.search.DrawOptions();
      var searchOptions = new google.search.SearcherOptions();
    
      searchOptions.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);
      //searchOptions.setImageResultsTbHeight(100);
    
      searchControl.addSearcher(new google.search.WebSearch(), searchOptions);
      searchControl.addSearcher(new google.search.BlogSearch(), searchOptions);
      searchControl.addSearcher(new google.search.NewsSearch(), searchOptions);
      searchControl.addSearcher(new google.search.ImageSearch(), searchOptions);
      searchControl.addSearcher(new google.search.VideoSearch(), searchOptions);

      drawOptions.setSearchFormRoot(searchFormElement);
      drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
    
      // tell the searcher to draw itself and tell it where to attach
      searchControl.draw(searchFormElement, drawOptions);
      //searchControl.draw(document.getElementById("content"));
    
      // execute an inital search
      searchControl.execute("アラキバ(検索させたい言葉に置き換える)");
    }
    
    google.setOnLoadCallback(OnLoad);
  -->
  </script>
  <div class="gtab-root" id="content">Loading...</div>

  <div style="clear:both;"> </div>

解決方法は分かったけど、仕様に納得いかん
この記事へのコメント
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
この記事のトラックバックURL
http://arakiba.blog62.fc2.com/tb.php/132-b8476026
この記事にトラックバックする(FC2ブログユーザー)
この記事へのトラックバック

 Copyright © アラキバ All rights reserved. 

 / Template by 無料ブログ テンプレート カスタマイズ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。