2007-06-01 Fri

これから15分でiGoogleガジェットを始めるための資料

iGoogleガジェットコンテストの記事を書いて「はじめようかなー」と思っ
たのでiGoogleガジェットを作ってみようと思います。

igoogle
iGoogle - 日本語

iGoogleにアクセスすると、時計やGmailが表示されていると思います。
それらと一緒に世界で自分しか使わない俺俺ガジェットを表示できるなん
て、楽しそうですよね。

iGoogleで、いよいよGoogleがスタートページ市場に本気モード突入

 Google Personalized HomepageがiGoogleという名称に変わり、複数の
新機能が追加されました。
 今回のiGoogleには、誰でも簡単にGoogleガジェットを作成できる
「Gadget Maker」が追加される上、YouTubeの動画表示や、Twitterっぽい
独り言ガジェットなど複数のガジェットが追加、さらに日本語版でもテー
マが選択できるようになったりと様々な機能追加がされているのですが。


以下ではiGoogleガジェットを自作し、そのガジェットをiGoogleに読み
込んでHello Worldを表示しようと思います。
そのための方法と関連記事へのリンクをまとめておきます。
15分でiGoogleガジェットを始めてみましょう。
# ちなみに今回の僕はtotowa用のガジェットを作って国際化していたら、
# あっという間に6時間くらい使ってしまいました。

iGoogleに自作ガジェットを使ってHello Worldを表示するまで


iGoogleの読み方

- アイグーグル(たぶんね
iGoogleとは何? - totowa(トトワ)
ガジェットと呼ばれる部品を組み合わせて自分用にカスタマイズしたペー
ジを作成できるサービスで、最新ニュースガジェットやゲームガジ ェッ
トなどが提供されています。

Googleガジェットとは - totowa(トトワ)
様々なコンテンツをGoogleパーソナライズホームに組み込めるようにした
もの。

iGoogleの特徴

- 通常のGoogleトップの右上からリンクされていて目立ってる #重要
- ログインすれば、どのPCからでも同じ設定のiGoogleを使える
- 誰でも簡単にGoogleガジェットを作成できる #本当
まずはガジェットのドキュメントを眺めよう(2分)

まずは説明書を眺めましょう。説明書にはすべてが詰まってるものです。
「XML構造」という項目の「属性」のテーブルを見て、
iGoogleではどんな属性を設定できるか見てましょう。

Google ガジェット API - ガジェットの設定
XML ファイルの <ModulePrefs> セクションには、タイトル、作者名、大
きさなど、ガジェットの特徴を記述します。 以下に例を示します。


author_photo属性でガジェット作者の写真を設定できるんですね。へえ。
Hello World!ガジェットのコードを書こう(2分)

エディタを起動して、以下のコードをコピペしましょう。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Hello World" />
  <Content type="html">
    <![CDATA[
      Hello World!
    ]]>
  </Content>
</Module>


iGoogleガジェットAPIドキュメントの基本手順の説明を書いてあるのですが、
Contentのtypeを「html」と設定して、Contentタグで囲んだ領域に、
「<![CDATA[・・・]]>」を記述してあげると、・・・に書いた
HTMLがガジェットに表示されるのです。

今回・・・には、「Hello World!」しか書いていないですが、
formタグ、imgタグやaタグなど、何でも書けるということです。
夢が膨らみますね。
先ほど書いたコードの前後にHTMLコードを挿入(2分)

以下は自分がXMLファイルをアップできるスペースを持っていない人のた
めのTipsです。XMLファイルをブラウザからアクセスできるスペースにアッ
プできる人は飛ばして次の作業へ移ってください。


いろいろ試しましたけれど、一番簡単なのはXMLでガジェットを書いたら、
その前後にHTMLコードを書いてWebスペースにアップロードするのが、
非常に手軽です。

ブログを使っている人は普段使っているブログなどと同じスペースにアッ
プすると良いのではないでしょうか。HTMLファイルなら大概のブラウザで
アクセスできるスペースにアップロードできると思います。

以下のコードは、先ほどコピペしたコードにHTMLを書き足したものです。
HTMLなので、XML部分に手を加えなければ何を書き加えても良いと思いま
す。

あ、アップロードするスペースによっては勝手に広告が挿入されるような
スペースもあるとおもうのですが、XML部分に余計なタグを挿入するよう
なスペースは使わないようにしてください。
XMLとして解釈できないコードになるとガジェットが動かないと思います。

<html>
<head><title>Hello World Gadget</title></head>
<body>
<!--

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Hello World" />
  <Content type="html">
    <![CDATA[
      Hello World!
    ]]>
  </Content>
</Module>

-->
</body>
</html>


文字コードを確認する(1分)

完成したXMLかHTMLをアップロードしたいのですが、
ファイルの文字コードは良く確かめてください。

ガジェットの文字コードはUTF-8にしてください。

エディタによってはUTF-8でコードを保存できないかもしれません。
今後のことも考えてファイルの文字コードを自由に変更できるエディタを
インストールしておくと良いでしょう。
ガジェットをアップロードする(3分)

ブラウザでアクセスできる場所に、XMLまたはHTMLをアップロードしましょう。

ちなみに僕が作ったガジェットは以下にアップしました。

- totowaガジェットのXML
- totowaガジェットのHTML

国際化して遊んだので良く分からないことも書いてあると思いますが、
要するにブラウザでアクセスして内容を確認できるところにファイルを
アップロードしてね、ということです。
iGoogleでURLを指定してガジェットを読み込む(2分)

まずは、iGoogleにアクセスします。

iGoogle - 日本語

アクセスしたら以下の手順でガジェットを追加しましょう。

1、画面の右の方に表示されている、コンテンツを追加をクリックします
2、「ホームページコンテンツの検索」ボタンの横の「URLを指定して追加」をクリックします。
3、URLを指定して追加、のフォームにガジェットのURLを入力し「追加」ボタンを押します
4、ダイアログで警告されますが「OK」をクリックします

画像
# こんな感じ

5、「追加しました」というメッセージが出たら、iGoogleにもどります。

追加したガジェットが表示されたら成功です。

画像

僕はHello Worldではなく、totowaガジェットを追加しました。
超簡単でしたね。
iGoogleガジェットに関する記事のまとめ

いつもどおり、iGoogleガジェット関連の記事をお好みチョイス。

- インプレスR&Dとグーグル、iGoogleのガジェットコンテストを共催
ガジェットコンテストのプレスリリース

- iGoogleの使い方まとめ
まとまってる。

- ガジェットの作り方 : ガジェットディレクトリに登録する
ガジェットをGoogleにサブミットするときに参考にしました。
前後のページも良い感じ。

- Googleグループ - Google Gadgets API

いろいろ記事を読んだけれど、日本は外国ほどガジェットが盛り上がって
いないなー。



iGoogleのガジェットは今回の例で設定したよりも細かな設定できます。
またXMLファイルを対応する言語分作れば、国際化も容易です。
作ったガジェットはいろいろ確かめたらURLを入力してボタンを押すだけ
で、Googleに投稿することができます。超簡単!!
iGoogleを使っていて「何で無いの?!」と思ったガジェットは、
自分で作ってさらに国際化すると、あっという間に世界デビューですよ。

ガジェットコンテストの締め切りまでに良いアイディアが浮かぶといいなー。

投稿者:としのり  日時:23:59:59 | パーマリンク | コメント | トラックバック() |

2007-05-31 Thu

iGoogleガジェットコンテスト開催

iGoogleガジェットコンテストが開催されるそうですよ。

iGoogleガジェットコンテスト

Googleが提供するパーソナライズドホームページ「iGoogle」。この
iGoogleは、ニュースや時計、さらにはゲームなどのガジェットを自由に
追加して、自分だけのホームページを作り上げることができます。
「iGoogleガジェットコンテスト」では、iGoogleで利用できるガジェット
を募集します。詳しい応募要項や開発情報などについては、本コンテスト
のサイトに6月中旬の掲載を予定しています。


Googleのトップにアクセスしたときに右上に出ている「iGoogle」という
テキストリンクをクリックするとパーソナライズドホームページである、
iGoogleにアクセスできます。その、iGoogleに表示できる便利なガジェッ
トを考えてくださいということですね。ちょっと作ってみようかな。

iGoogle - 日本語
iGoogle - 英語

iGoogleのガジェットは「Google ガジェット API」を使って作ります。
ま、使うというほど大げさではありませんけどね。
まずは、簡単なサンプル付きドキュメントを見てみましょう。

Google ガジェット API - 概要
Google ガジェット API を使用して、Google パーソナライズド ホーム
ページ、Google デスクトップ、Google Page Creator などの複数のサイ
ト、およびウェブページ用 Google ガジェットを使用する数千のウェブす
べてで動作する小規模なアプリケーションを簡単に作成できます。


ドキュメントを見ると簡単そうな気がします。
何か良いアイディアが浮かんだら応募してみようかなー。

投稿者:としのり  日時:23:59:59 | パーマリンク | コメント | トラックバック() |