ページ

2011年2月10日木曜日

Feed API - 4

■　フィード検索窓付きを表示する例です。

■　サンプルです。 　


<html>
<head>
<title>
Feed API サンプル-4
</title>
    <style type="text/css">
      body *, table *,
      body {
        font-family: "Arial", sans-serif;
        font-size: 13px;<!-- フィード内のコンテンツのフォントサイズ -->
      }

      #main {
        width : 400px;<!-- 表示のサイズ設定です -->
        margin-left: 30px;
        overflow : hidden; <!-- または”visible,scroll” -->
       }

      input.search-input { <!-- 検索窓の表示設定 -->
        width : 400px;
        border: 1px solid #BCCDF0;
        color: #9CADD0;
        margin-bottom : 10px;
        margin-top : 10px;
      }

      #feedControl {
        width : 400px;<!-- こちらも表示サイズの設定です -->
        font-size: 16px;
        color: #9CADD0;
       }

      #main .gfc-title {
        line-height : 1em;
        overflow : hidden;
        white-space : nowrap;
        display : block;
       }

      .gfc-title,
      .gfc-title * {
        font-size: 16px;
       }

       .gfc-results {
        margin-bottom: 15px;
       }
    </style>

    <script  type="text/javascript" src="http://www.google.com/jsapi?key= API用のキーを取得してここに入力します">
    </script>

    <script type="text/javascript">//<![CDATA[

      var defaultQuery = 'インターネットラジオ'; <!-- 初期値の検索語 -->

      //  AJAX Feed APIをロードします,”1”はAPIのバージョン
      google.load("feeds", "1");
      google.setOnLoadCallback(function() {findFeeds(defaultQuery)});

      function findFeeds(query) {
        google.feeds.findFeeds(query, feedSearchDone);
      }

      function feedSearchDone(result) {
        var el = document.getElementById("feedControl");

        if (result.error || result.entries.length <= 0) {
<!-- エラーや検索結果ゼロの場合の表示 -->
          el.innerHTML = '<center>No Results Found</center>';
          return;
        }

        // create a feed control
        var feedControl = new google.feeds.FeedControl();

        // 検索結果上位３つまで表示します；4の値を変えて表示個数を決定します
        for (var i = 0; i < 4; i++) {
          feedControl.addFeed(result.entries[i].url, result.entries[i].title);
        }

<!-- フィードのリンクを表示するターゲットウィンドウの設定です -->
        feedControl.setLinkTarget(google.feeds.LINK_TARGET_BLANK);
        feedControl.setNumEntries(2);
        feedControl.draw(el);
      }

      function onSubmit() {
        inputChange(document.getElementById("input"));
        return false;
      }

      function inputChange(input) {
        var query = input.value.toLowerCase();

        var el = document.getElementById('feedControl');
        el.innerHTML = 'Loading...';

        if (!query) {
          query = defaultQuery;
          input.value = query;
        }
        findFeeds(query);
      }

    //]]>
    </script>

  </head>

  <body>
    <div id="main">
 <!-- ”value”は初期値で検索窓に表示される文字列,sizeは窓の長さです -->
    <form class="search-box" method="post" onsubmit="return onSubmit()">
    <input class="search-input" id="input"
  type="text"
  size="35"
  value="インターネットラジオ"
  onchange="inputChange(this)"/>
    </form>

    <div id="feedControl">Loading..</div>

    </div>

ラベル: