F.Ko-Jiの「一秒後は未来」

Google AJAX Feed APIを使ってシンプルなガジェット型RSSリーダーを作成する方法(Windows only)

GoogleのAJAX系のAPI(Google AJAX Feed API, Google Maps API, Google AJAX Search API)は基本的にAPIキーが必要で、サイトに設置するときにAPIキーを設定していないと警告ダイアログが出てしまいます。しかし、ローカルで実行したときに限っては警告ダイアログは現れません。

そこで、Google AJAX Feed APIと、Windowsの「デスクトップにWebページを表示する機能」を利用して、デスクトップ上にシンプルなガジェット型RSSリーダーを設置してみます。

1. Google AJAX Feed APIでRSSを表示するページを作成

下記のサンプルコードは、「はてなブックマークの人気エントリー」と「livedoor クリップの人気ページ」を8件ずつ表示します。APIキーは正しいものでないと動作しないので、適当に取得してください。feed.Control.addFeedの引数を変えることで、お好みのRSSを表示させることができます。また、feedControl.addFeedは何個でも記述できます。

これを適当な場所にHTMLファイルとして保存してください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google AJAX Feed API - Simple Example</title>
    <script type="text/javascript" src="http://www.google.com/jsapi?key=[APIキーは取得してね]"></script>
    <script type="text/javascript">
 
    google.load("feeds", "1");
 
    function initialize() {
        var feedControl = new google.feeds.FeedControl();
        feedControl.addFeed("http://b.hatena.ne.jp/hotentry?mode=rss", "はてなブックマーク - 人気エントリー");
        feedControl.addFeed("http://clip.livedoor.com/rss/hot", "livedoor クリップ - 人気ページ一覧");
        /* 8件ずつ表示 */
        feedControl.setNumEntries(8);
        /* リンクを新規ブラウザで開く */
        feedControl.setLinkTarget(google.feeds.LINK_TARGET_BLANK);
        feedControl.draw(document.getElementById("feed"));
    }
    google.setOnLoadCallback(initialize);
 
    </script>
    <style type="text/css">
    <!--
    .gf-title {display:inline;} /* タイトルが改行されるようにinlineにする */
    .gf-snippet {display:none;} /* 概要部分は隠す */
    -->
    </style>
  </head>
  <body>
    <div id="feed" style="font-size:11px;width:100%;"></div>
  </body>
</html>

2. デスクトップに表示

次に先ほど保存したファイルをデスクトップに表示させます。

ajax-feed-desktop-1.gif

↑[画面のプロパティ] – [デスクトップ] タブにある 「デスクトップのカスタマイズ」をクリック

ajax-feed-desktop-2.gif

↑[Web] のタブにある「新規」をクリック

ajax-feed-desktop-3.gif

↑「参照」をクリックして先ほど保存したファイルを選択

ajax-feed-desktop-4.gif

↑ファイルが追加されるので、あとは「OK」を押してプロパティを閉じます

ajax-feed-desktop-5.gif

↑すると、デスクトップにこいつが現れるので、マウスでサイズを調整してください

ajax-feed-desktop-6.gif

↑出来上がり

スタイルはCSSで自由にカスタマイズできます。エレメントのクラス名を調べたい場合はFirefoxのWeb Developer ToolbarやFirebugなどの拡張機能でインスペクトしてください。

同じようにすれば、デスクトップにGoogle Mapsを置いたり、Google AJAX Searchを置いたりすることもできます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

著者について

fkoji

F.Ko-Ji

Webエンジニアやってます。最近は ドットインストール の開発がお仕事です。その傍ら、個人で Meity電車遅延なう梅酒.in#グラドル自画撮り部 の部室といったネットサービスを開発・運営してます。梅酒と草野球とリアル脱出ゲームが好きです。

» 詳しいプロフィールや運営サービスの一覧など