Blog Parts

Google AJAX Feed APIを使ってブログパーツを作る(その1)

レンタルブログやレンタルホームページといった、PerlやPHP等のプログラムが使えないサイトの中に、外部にある他のサイト(他ドメイン)で公開されているRSSを、Javascriptのみを使って掲載する方法。

通常Javascriptでは別ドメインのファイル(RSS)を取得すること(クロスドメイン処理)は難しいので、Googleが提供しているGoogle AJAX Feed APIを使う。

Google AJAX Feed
http://code.google.com/apis/ajaxfeeds/

■API Keyの取得

Googleのアカウントでログインし、Sign up for the Google AJAX Feed API
http://code.google.com/apis/ajaxfeeds/signup.html
にアクセス。規約を読みチェックを入れたら、掲載するサイトのURLを入れて、「Generate API Key」をクリック。

Thanks for Signing up for a Google AJAX Feed API key!
と共に以下の情報が提供される。

Your key is:あなたのAPI key

This key is good for all URLs in this directory:あなたが入力したURL

サンプルコード
Here is an example web page to get you started:
<!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=あなたのKey”></script>
    <script type=”text/javascript”>
    google.load(“feeds”, “1”);
    function initialize() {
      var feed = new google.feeds.Feed(“http://www.digg.com/rss/index.xml”);
      feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById(“feed”);
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            var div = document.createElement(“div”);
            div.appendChild(document.createTextNode(entry.title));
            container.appendChild(div);
          }
        }
      });
    }
    google.setOnLoadCallback(initialize);
    </script>
  </head>
  <body>
    <div id=”feed”></div>
  </body>
</html>

着せ替えできる時計ブログパーツ(GateClock2)

メインエリアの画像に、好きな画像を読み込んで表示させることのできる「着せ替えできる時計ブログパーツ」

年月日の表示+リアルタイムで時間を刻みます。
携帯で用意しやすい240×320ピクセルの画像を用意するだけで着せ替えが簡単。
登録不要です。無料でお使いいただけます。
ダウンロードしてお使いください(改変は不可)
ご利用の際は【免責事項】をお読みください。

ダウンロード
Macの方は[▼ダウンロード]にカーソルを合わせてオプション+クリック。
Windowsの方は[▼ダウンロード]にカーソルを合わせて右クリックから。

設置方法
「gc2photo.jpg」という名前の画像を用意し、GateClock2を表示させる階層にアップロード。
画像はjpeg(非プログレッシブ)

■GateClock2
[▼ダウンロード]


■サンプル画像(幅240px、高さ320px)
gc2photo.jpg

■サンプルコード(HTMLと同階層の場合)
<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0″ width=”161″ height=”241″ id=”GateClock2″ align=”middle”>
<param name=”movie” value=”GateClock2.swf” />
<param name=”quality” value=”high” />
<param name=”wmode” value=”transparent” />
<embed src=”GateClock2.swf” quality=”high” wmode=”transparent” width=”161″ height=”241″ name=”GateClock2″ align=”middle” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” />
</object>

FLASHを使ったブログパーツ(GateClock)全5色

FLASHを使ったブログパーツ(GateClock)全5色

年月日の表示+リアルタイムで時間を刻みます。
登録不要です。無料でお使いいただけます。
ダウンロードしてお使いください(改変は不可)
ご利用の際は【免責事項】をお読みください。

ダウンロード
Macの方は[▼ダウンロード]にカーソルを合わせてオプション+クリック。
Windowsの方は[▼ダウンロード]にカーソルを合わせて右クリックから。

グレー [▼ダウンロード]

 
[▼ダウンロード]

 
[▼ダウンロード]

 
[▼ダウンロード]

 
ピンク [▼ダウンロード]