Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

RSSリーダーの作成から学ぶ、はじめてのiGoogleガジェット開発

RSSリーダーの作成を通して、iGoogleガジェットの作成方法を理解する

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2008/02/07 14:00

iGoogleは、Googleが提供するWebサービスで、ユーザがニュースや天気予報をはじめとした任意のコンテンツをブラウザ上で閲覧できるサービスです。 iGoogleガジェットはサンプルを見ながら簡単に作成することができます。 RSSリーダを作成しながらiGoogleガジェットの開発方法に触れてみたいと思います。

目次

はじめに

 iGoogleは、Googleが提供するWebサービスで、ユーザーがニュースや天気予報をはじめとした任意のコンテンツをブラウザ上で閲覧できるサービスです。

 既に多数のコンテンツが公開されていますが、これらのiGoogleガジェットは簡単に作成することができます

 自分で開発したアプリケーションやサービスの一部をiGoogleガジェットのコンテンツとして公開することで、コンテンツの使い勝手や付加価値を向上させることが可能です。

 この記事では、RSSリーダーを作成しながらiGoogleガジェットの開発方法に触れてみたいと思います。今回作成するiGoogleガジェットのイメージを以下に示します。

RSSを表示するiGoogleガジェット
RSSを表示するiGoogleガジェット
タブを切り替えたところ
タブを切り替えたところ

 本記事は、以下の順序で進みます。

  1. iGoogleガジェットでHello World
  2. RSSリーダを実装する
  3. ユーザーの設定情報を扱う
  4. 複数のRSSをタブ切り替えを利用して表示する

対象読者

 JavaScriptおよびHTML・CSSに関して基本的な知識がある方を対象にしています。

必要な環境

 UTF-8に対応したエディタ(TeraPadなど)と外部に公開されたWebサーバ(レンタルサーバなど)が必要です。

 また、本プログラムはWindows XP+Firefox 2環境でテストしています。

iGoogleガジェットでHello World 1

 Hellow Worldガジェットの作成を通じて、オリジナルのガジェットを作成する手順について説明します。

スクラッチパッドを使う

 Google ガジェット API開発者向けガイドには、スクラッチパッドという、iGoogleガジェットの動作確認を行うためのページが用意されています。

スクラッチパッド
スクラッチパッド

 スクラッチパッドにはHello Worldを表示するサンプルガジェットが表示されているので、これを見てみましょう。

Hellow Worldガジェット
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="hello world example" />
<Content type="html"><![CDATA[
Hello, world!
]]></Content>
</Module>

 このように、iGoogleガジェットの作成に特別なツールは必要なく、xml形式のテキストだけで作成できます。

 [Preview]タブをクリックすると大まかな完成のイメージを見ることができます。

スクラッチパッドでのプレビュー
スクラッチパッドでのプレビュー

Hello Worldガジェットをサーバに配置する

 では、このHello WorldガジェットをiGoogleに組み込むために、自分のサーバに配置してみましょう。

ガジェットの作成

 TeraPadなどのUTF-8に対応したエディタにHello Worldガジェットを貼り付け、UTF-8形式で「hello.xml」という名前を付けて保存します。

UTF-8形式で保存する
UTF-8形式で保存する

アップロードする

 外部に公開されているサーバ(レンタルサーバなど)にFTPなどを利用してアップロードします。


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

修正履歴

  • 2009/11/16 23:34 タイトル誤り。Goolge→Google

著者プロフィール

  • 我妻 隆志(ワガツマ タカシ)

    宮城県仙台市在住 トライポッドワークス株式会社(本社:仙台市)に所属。 JavaやPHP、データベースを利用したアプリケーション開発技術を生かし、製品開発・サポート業務に従事。

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5