「iGoogleのRSSフィードガジェットを作ってみよう」

| 0 comments

  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

iGoogleヘビーユーザーです。
takumart.netガジェット作成しました。
Takumaです。
 

【iGoogle】
iGoogleはGoogleのサービスの1つで、カスタマイズ可能なAjaxベースのホームページまたはポータルサイトである。同様のサービスとしては、Netvibes、Alot.com、Pageflakes、My Yahoo!、MySurfPad、Live.com などがある。2005年5月に公開され、当初は Google Personalized Homepage あるいは Google IG と称していた。フィードを追加することができ、Google Desktopと似たようなガジェットを追加することができる。 (by ウィキペディア)

 

様々なガジェットという機能拡張ができるAjaxホームページサービス(パーソナライズドホーム)iGoogle。
職場と家とのシームレスに利用できることから、日本語対応リリースしてすぐにヘビーユーザーとなりました。

が・・・

ガジェットを自作したことなかったんですよね。

■概要:自分のサイトのRSS配信ガジェットを作ろう ■■■■■■

「Google AJAX Feed API」を先日利用してtakumart.netのHOMEに設置したのです。
以前から、iGoogleのガジェットは複雑でない限り、極端に難しくないという話を目に耳にしてたので、勢い余って作る事に。

ちなみに、iGoogle専用ガジェットの利用方法としては
(1)iGoogleを登録してガジェット登録。

(2)Google デスクトップのサイドバーまたはデスクトップにガジェット追加。

等々があります。
つまりは、様々なサードパーティーの開発アプリが追加できカスタマイズできちゃうというわけです。

▼Google AJAX Feed API▼
http://code.google.com/intl/ja/apis/ajaxfeeds/

というわけで、ネット上で公開されている参考文献をみながら作ってみた手順メモを今回はお送りします。

■Step.1:テストガジェットをアップしてみよう■■■■■■■

まずは、ガジェット自体を作成することから。

多くのサイトでは、基礎のテンプレートとして提供されている「Hello World!」をサーバーや公開環境にアップ。

それをiGoogleからフィードして閲覧するという流れです。
(※この時点では「”Hello World!」としか表示されません。)

●step.1-1
「Hello World!」のソースを記載したxmlファイルを作成。
自分で保有しているサーバスペースにアップ。

●step.1-2
igoogleをブラウザで表示。(Googleアカウントがない場合は取得から)
ページ右上の「コンテンツを追加」をクリックして移動。

●step.1-3
「自分のホームページにがジェットを追加」ページの左カラム下にある「フィードやガジェットを追加」で、先ほどサーバーアップしたxmlファイルURLを登録。

そして、igoogleのホームに戻ると追加されて表示しているはずです。

▼参考記事▼
はじめてのiGoogleガジェット開発 – [Z]ZAPAブロ~グ2.0

■Step.2:RSSフィードガジェットを作成しよう ■■■■■■■

様々なHPやブログで開発方法が紹介されていますが、今回一番参考にした記事は下記です。主に開発準備からガジェット開発までを詳しく紹介しています。

▼参考記事▼
RSSリーダーの作成から学ぶ、はじめてのiGoolgeガジェット開発(1/5):CodeZine

ポイントとしては、
●step.2-1(※ここはStep.1で出来てれば問題なし。)
「Hellow World」公開表示までの詳細解説。コード指定と開発必要アプリの紹介。

●step.2-2
リーダーのソース提供(xmlファイル)とそのコードと変数の解説。

●step.2-3
ユーザーの設定情報追加(何件表示するかを選ぶとか)とタブ切り替えで複数のフィードをできるガジェットのソース提供(xmlファイル)。

とずいぶん気前のいい記事を書いています。(step2-2以降は会員登録が必要ですがw)

■Step.3:ガジェットを正式公開して自分のHPで紹介 ■■■■■

ここまでで、タブで複数フィードを読み込みえる高機能ガジェットが作れてしまいました。次は、ガジェットを正式公開して自分のHPで紹介するプロセスです。

せっかくガジェットを作ったのなら公開しちゃいましょう。

▼参考記事▼
はじめてのiGoogleガジェット開発 – [Z]ZAPAブロ~グ2.0

●step.3-1
・スクリーンショット画像URL(横幅280 ピクセル。PNG、GIF、JPG画像)
・サムネイル画像URL(120×60 ピクセル。PNG、GIF、JPG画像)
を作成します。Googleのガジェット紹介ページで公開する際に必要になります。

●step.3-2
Google ガジェット API – ガジェットの送信へアクセス。
ただし、すぐに送信しません。

ここに記載されている、ガジェットメタ情報(ModulePrefs)をxmlファイルに記載する必要があります。(※記載しないと注意されます。えーされましたとも。)

その他にも参考記事には、豊富なメタ情報の種類解説があります。

●step.3-3
メタ情報のxml記載が終わったら、再びサーバースペースのファイルを上書き。
その後、そのURLを先ほどのガジェット送信ページから送信します。
(Googleで正式に登録には少々時間がかかるようです。)

●step.3-4
送信が問題なく行われると、「このガジェットを自分のウェブページに追加」というページに行けるようになります。

個別のHPに埋め込み可能なコードの生成ジェネレーターです。
そこで、調整した埋め込み用ソースを自分のHPに埋め込めば完了!!

▼公式マニュアル▼
ガジェットの公開 – ガジェット – Google Code

デベロッパー ツール – ガジェット – Google Code

■まとめ■■■■■■■■■■■■■■■■■■■■■■■■■

これを実装したのが、Takumart.netのトップページです。
「Takumart.net – Takumart.netについて」のアコーディオンを開くと一番下にあります。

▼takumart.net▼
http://www.takumart.net/

このうち、ガジェットへのリンクアイコンだけ抜き出してブログのほうにもつけました。
▼takumaの「デザインはあれでアートはそれで」▼
http://www.takumart.net/wordpress/

そして、それらのリンク先が以下のガジェット配布ページです。

▼takuma.net新着情報:iGoogleガジェット▼
ホームページのカスタマイズ

実質の作成時間としては「約3時間程度」でした。
ソース等を探すのに少々手間取りましたが。

また、Google Page CreatorというHP作成サービスを利用してもiGoogleガジェットへの登録が簡単なようです。今回は利用しませんでしたがw

▼参考記事▼
Personal Server with Gentoo Linux – Google Page Creator レビュー

よろしければ、ご登録くださいな。
おまけで、タブを切り替えるとtakumaの「はてなブックマーク」が読み込まれてますのでw

■P.S:今日の気になったサイト■■■■■■■■■■■■■■■■

▼ピックアップサイト▼
のりかえキャンペーン

●んで、一言

SoftBankのキャンペーンコンテンツ。
キャリアの乗り換えを推進するないようですが・・・

ネタコンテンツがなかなか面白い。
CMでも人気の家族の一人。「お兄さん」が携帯番号から似顔絵をかいてくれる。

んで、Takumaも描いてもらったのだが・・・


・・・こんなんじゃないわw

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

コメントを残す

Required fields are marked *.


▲このページトップへ

takumaの「デザインはあれでアートはそれで」