第2回　今すぐブログパーツ編　たぶん完結版 iGoogleガジェット【特集サンデープログラミング】

myLab IDをお持ちでない方

>> デスクトップウィジェット

>> ウェブウィジェット

>> 機能分類

第2回　今すぐブログパーツ編　たぶん完結版

「時計」は作ったワケですが…

前回、ブログパーツ制作の第一歩として「時計」を作ったワケですが、大切なことが抜けちゃってます。前回までの状態では「時計Flash」でしかないのです。…そう、肝心の「ブログパーツとしての公開方法」の解説がまだでした。ブロガーさんに簡単に貼り付けて貰えないようじゃブログパーツとは呼べなーい！……というワケで今回は、作成したFlashコンテンツをiGoogleガジェットとして公開する方法を解説して行きます。

iGoogleガジェットとして公開しよう！

ブログパーツを公開する方法には、iGoogleガジェットとして公開する以外にも存在しますし、恐らくそちらの方が一般的でしょう。が、今回は、あえてiGoogleガジェットとしての公開を選んでみました。それは、ナゼなのか…

まずはコチラのコードをご覧下さい。

<script src="http://gmodules.com/ig/ifr?url=http://www.widgetown.com/contents/programming/20080116/gadget.xml&w=128&h=200&border=0px&output=js"></script>

これをブログやHTMLページにコピー＆ペーストして、ブラウザで表示させてみて下さい。
コードを書いた箇所にガジェット（ゆる時計）が挿入されたと思います。
つまり、この短いコードをコピー＆ペーストするだけでガジェットを設置できるワケです。

さらに、コチラをポチっと押してみて下さい。

「iGoogle ページに “ゆる時計（仮）”を追加します」というページが表示されたと思います。
そのまま「Googleに追加」をクリックしてやると、Googleのトップページに自動的にガジェットが追加されます。

…とこのように、1つ作ればブログパーツとしても、Googleトップ用のガジェットとしても公開できるので、公開する側にとっては、まさに一石二鳥。オイシイというワケです。
しかも、貼り付け方も簡単なので、貼る側にとってもラクなワケです。

iGoogleガジェットの作り方

「iGoogleガジェットを制作」というと、いかにも小難しそうですが、実は仕組みも作り方もとても簡単です。実は、iGoogleガジェットというのは、貼り付けたWebページの一部（貼り付けた箇所）に、HTMLコードを流し込んでいるだけなんです。…つまり、平たく言えば「単なるHTMLページ」なんですね。当然、普通のWebページ同様、HTMLコードで書けます。これに加えて、公開するガジェットの色々な属性と設定（例えばタイトルや幅や高さ）を記述したXMLファイルを用意してやれば、iGoogleガジェット完成です。

ガジェットの属性定義用のXMLの書式は以下の形になります。

<Module>
    <ModulePrefs>
    </ModulePrefs>
    
    <Content type="html"><![CDATA[
    
    ここに普通にHTMLコードを記述。
    
    ]]>
    </Content>
</Module>

ルートに Module ノードが1つ、
その中に ModulePrefs ノードと Content ノードが1つずつ…というシンプルな構造になっています。

ModulePrefsノードで、ガジェットの属性や設定を定義し、
Contentノードの中に、HTML形式で内容を記述します。

属性の定義

ModulePrefsノードで定義できる属性は以下のリファレンスを参照すると良いです。

http://code.google.com/apis/gadgets/docs/reference.html（英語版）
http://www.google.co.jp/intl/ja/apis/gadgets/reference.html（日本語版）

ただしリファレンスに書かれている全ての属性を定義しなければならないワケではありません。
一般的に定義しておいた方が良い属性は、

・title
　ガジェットのタイトルです

・title_url
　ガジェットのタイトルをクリックした際に飛ぶリンク先のURLです。

・description
　ガジェットの説明文です。

・author
　作者名です。

・author_affiliation
　作者の所属名です。

・author_email
　作者のメールアドレスです。

・author_link
　作者のWebサイトのURLです。

・width
　ガジェットの幅です。

・height
　ガジェットの高さです。

・scaling
　ガジェットの縦横比を自動変更する（true）か固定にする（false）かの指定です。
　falseが無難だと思います。

・scrolling
　スクロールバーを表示する（true）か否（false）かです。
　falseが無難だと思います。

辺りでしょうか。

Flashコンテンツの貼り付け方

Contentノードの type属性を“html”にすれば、ノードの中にHTMLコードをそのまま記述できます。 …ですので、パブリッシュ時に出力されるswf貼り付け用のHTMLコードをContentノード内にペーストすれば、そのままFlashコンテンツをガジェットにすることができます。

しかし、Flash CS3がパブリッシュ時に出力する貼り付けHTMLコードは、外部のJavaScriptファイルを使用していたりするので、そのままコピー＆ペーストしたのでは表示されません。
そこで、iGoogleが提供してくれているFlashコンテンツ貼り付け用のAPIを利用してしまいましょう。

Contentノード内に以下のように記述します。


<Content type="html">
<![CDATA[

<div id="divMain"><br /></div>

<script language="JavaScript">
	
	//	swfの流し込み
	_IG_EmbedFlash('http://www.widgetown.com/contents/programming/20080116/yuru_clock.swf', 'divMain', {width:128, height:200});
	
</script>

]]>
</Content>

簡単に解説をしますと、
_IG_EmbedFlashというのがswfを貼り付けるための関数です。
1つ目の引数がswfファイルのURLです。
width、heightという部分には、それぞれ幅と高さを指定してください。

貼り付けタグと iGoogle追加ボタン

最終的にガジェット定義用のXMLは、以下のような形になります。


<?xml version="1.0" encoding="UTF-8"?>
<Module>
	
	<ModulePrefs
	 title="ゆる時計（仮）"
	 title_url="http://www.widgetown.com/search_widget/37b4720ab8938bd94dd0bded7cd0ea2bbefaf87c.html"
	 description="時間に追われる現代人に贈る アレでソレな時計。"
	 author="widgetown"
	 author_affiliation="widgetown"
	 author_link="http://www.widgetown.com/"
	 width="128"
	 height="200"
	 scaling="false"
	 scrolling="false"
	>
		 <Require feature="flash" />
	</ModulePrefs>
	
	
	<Content type="html">
	<![CDATA[
	
	<div id="divMain"><br /></div>
	
	<script language="JavaScript">
		
		//	swfの流し込み
		_IG_EmbedFlash('http://www.widgetown.com/contents/programming/20080116/yuru_clock.swf', 'divMain', {width:128, height:200});
		
	</script>
	
	]]>
	</Content>
	
</Module>

このXMLファイルを、適当にアップロードして下さい。
アップロード先のURLをhttp://www.widgetown.com/contents/programming/20080116/gadget.xmlとした場合、
ブログパーツ用の貼り付けタグと、iGoogle追加用のリンクは、以下のようになります。

＜ブログパーツ用　貼り付けタグ＞

<script src="http://gmodules.com/ig/ifr?url=http://www.widgetown.com/contents/programming/20080116/gadget.xml&output=js"></script>

＜iGoogle追加用リンク＞

http://www.google.com/ig/adde?synd=open&source=ggyp&moduleurl=http://www.widgetown.com/contents/programming/20080116/gadget.xml

「url=」、「moduleurl=」の部分を、自分がアップロードしたXMLファイルのURLに書き換えれば、そのまま動作すると思います。
これでiGoogleガジェット、完成！

おわりに

今回は作ったFlashをiGoogleガジェットとして公開する方法でした。
これで、ブログパーツだけじゃなくって、iGoogle追加用のガジェット（ユニバーサルガジェット）も一緒に出来ちゃいましたね。

これで作ったブログパーツやユニバーサルガジェットは、どしどしwidgetownに投稿しちゃって下さい！
もちろん、時計以外のものでも全然OKですよ。

今回の特集や「ゆる時計（仮）」のご意見・ご感想がありましたら、
「ゆる時計（仮）」詳細ページの下部にあるコメント欄まで、どしどしお寄せください。
「ゆる時計（仮）」詳細ページはコチラ

文：widgetown編集部
2008年1月15日

特集 : 昼下がりのレポート