Blog Parts

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

2008年9月19日 13:40 | more...

レンタルブログやレンタルホームページといった、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）

2007年12月21日 10:22 | more...

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

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

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

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

■GateClock2
[▼ダウンロード]

■サンプル画像（幅240px、高さ320px）

■サンプルコード（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色

2007年12月19日 15:07 | more...

FLASHを使ったブログパーツ（GateClock）全5色

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

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

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

赤 [▼ダウンロード]

青 [▼ダウンロード]

黒 [▼ダウンロード]

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

メインページ | アーカイブ