<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>SNS開発者の雑記帳 &#187; ガジェット</title>
	<atom:link href="http://www.synapz.jp/mrsy/tag/%e3%82%ac%e3%82%b8%e3%82%a7%e3%83%83%e3%83%88/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.synapz.jp/mrsy</link>
	<description></description>
	<lastBuildDate>Fri, 05 Mar 2010 02:11:21 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Googleガジェットを作ってみる</title>
		<link>http://www.synapz.jp/mrsy/2008/02/google-gadget/</link>
		<comments>http://www.synapz.jp/mrsy/2008/02/google-gadget/#comments</comments>
		<pubDate>Wed, 06 Feb 2008 11:30:26 +0000</pubDate>
		<dc:creator>mrsy</dc:creator>
				<category><![CDATA[Webサービス]]></category>
		<category><![CDATA[API]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[OpenSocial]]></category>
		<category><![CDATA[ガジェット]]></category>

		<guid isPermaLink="false">http://www.synapz.jp/mrsy/2008/02/06/post42/</guid>
		<description><![CDATA[
皆さんはブラウザのスタートページを何にしていますか？　
私は以前MyYahoo!を使っていましたが、最近はiGoogleを利用しています。
iGoogleは「ガジェット」と呼ばれるブラウザ上で動作するミニアプリケーションをWebページ上に配置し、自分好みのページに仕立て上げることができます。

また、作成したガジェットは、以下のように簡単にブログに貼付けることができます。
今回はそのガジェットの作り方を書いていきます。


まずは環境を整えましょう。

iGoogle上に、GGE（Google Gadget Editor）と呼ばれるガジェット開発用ガジェットを登録します。

ここのページ下部の、「To add GGE to your iGoogle page, click here:」下部のボタンを押せば完了です。



おおお、追加されました。ただし、iGoogle上のガジェットは領域が狭いので好みに応じて使い分けましょう。

追加されたGGEを見ると、Hello Worldサンプルコードが登録されています。Previewタブをクリックするときちんと表示されるのが分かりますね。

Editorタブに戻ってソースを見ると、シンプルなXMLで記述されています。基本は下記のCDATA部分に処理を記述していきます。
&#60;Content type="html"&#62;&#60;![CDATA[
** ここにHTMLとCSSとJavascriptを記述する **
]]&#62;&#60;/Content&#62;



では簡単なガジェットを作ってみましょう。自分のはてなブックマークの最新5件を表示することにします。

下記のソースをeditor部分にコピペしてみてください。
ソース中の*****部分はご自分のものにするのをお忘れなく。
&#60;?xml version="1.0" encoding="UTF-8"?&#62;
&#60;Module&#62;
&#160;&#160;&#160; &#60;ModulePrefs
&#160;&#160;&#160;&#160; title="マイハテブ"
&#160;&#160;&#160;&#160; author="***** 自分の名前 *****"
&#160;&#160;&#160;&#160; author_email="***** メールアドレス *****" /&#62;
&#160;&#160;&#160; &#60;Content type="html"&#62;
&#160;&#160;&#160;&#160;&#160;&#160;&#160; &#60;![CDATA[
&#160;&#160;&#160; &#160;&#160;&#160; &#60;style&#62; #content_div { font-size: 90%;&#160; margin: 5px; background-color: #FFFFBF;} &#60;/style&#62;
&#160;&#160;&#160; &#160;&#160;&#160; &#60;div id=content_div&#62;&#60;/div&#62;
&#160;&#160;&#160; &#160;&#160;&#160; &#60;script type="text/javascript"&#62;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; // _IG_で始まる関数がGoogleガジェットAPIです。
&#160;&#160;&#160; &#160;&#160;&#160; &#160;&#160;&#160; _IG_FetchFeedAsJSON("***** ここに自分のはてブRSS *****",
&#160;&#160;&#160; &#160;&#160;&#160; &#160;&#160;&#160; [...]]]></description>
			<content:encoded><![CDATA[<p>
皆さんはブラウザのスタートページを何にしていますか？　<br />
私は以前MyYahoo!を使っていましたが、最近はiGoogleを利用しています。<br />
iGoogleは「ガジェット」と呼ばれるブラウザ上で動作するミニアプリケーションをWebページ上に配置し、自分好みのページに仕立て上げることができます。<br />
<br />
また、作成したガジェットは、以下のように簡単にブログに貼付けることができます。<br />
今回はそのガジェットの作り方を書いていきます。<br />
<br />
<br />
まずは環境を整えましょう。<br />
<br />
iGoogle上に、GGE（Google Gadget Editor）と呼ばれるガジェット開発用ガジェットを登録します。<br />
<br />
<a href="http://code.google.com/intl/en/apis/gadgets/docs/gs.html#GGE">ここ</a>のページ下部の、「To add GGE to your iGoogle page, click here:」下部のボタンを押せば完了です。<br />
<br />
<img alt="gge.png" src="http://www.synapz.jp/blog/mrsy/assets_c/2008/02/7-thumb-325x398.png" class="mt-image-center" style="margin: 0pt auto 20px;text-align: center" height="398" width="325" />
<br />
おおお、追加されました。ただし、iGoogle上のガジェットは領域が狭いので好みに応じて使い分けましょう。<br />
<br />
追加されたGGEを見ると、Hello Worldサンプルコードが登録されています。Previewタブをクリックするときちんと表示されるのが分かりますね。<br />
<br />
Editorタブに戻ってソースを見ると、シンプルなXMLで記述されています。基本は下記のCDATA部分に処理を記述していきます。<br />
<pre><code>&lt;Content type="html"&gt;&lt;![CDATA[
** ここにHTMLとCSSとJavascriptを記述する **
]]&gt;&lt;/Content&gt;
</code></pre>
<br />
<br />
では簡単なガジェットを作ってみましょう。自分のはてなブックマークの最新5件を表示することにします。<br />
<br />
下記のソースをeditor部分にコピペしてみてください。<br />
ソース中の*****部分はご自分のものにするのをお忘れなく。<br />
<pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;Module&gt;
&nbsp;&nbsp;&nbsp; &lt;ModulePrefs
&nbsp;&nbsp;&nbsp;&nbsp; title="マイハテブ"
&nbsp;&nbsp;&nbsp;&nbsp; author="***** 自分の名前 *****"
&nbsp;&nbsp;&nbsp;&nbsp; author_email="***** メールアドレス *****" /&gt;
&nbsp;&nbsp;&nbsp; &lt;Content type="html"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;![CDATA[
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;style&gt; #content_div { font-size: 90%;&nbsp; margin: 5px; background-color: #FFFFBF;} &lt;/style&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;div id=content_div&gt;&lt;/div&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;script type="text/javascript"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // _IG_で始まる関数がGoogleガジェットAPIです。
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _IG_FetchFeedAsJSON("***** ここに自分のはてブRSS *****",
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; function(feed) {
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if (feed == null){
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; alert("There is no data.");
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; return;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; // タイトル部分
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var html = "&lt;div&gt;&lt;b&gt;マイハテブ&lt;/b&gt;&lt;/div&gt;";
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; // ブックマークリストを作成
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; if (feed.Entry) {
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; html += '&lt;ul&gt;';
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; for (var i = 0; i &lt; feed.Entry.length; i++) {
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; html += '&lt;li&gt;&lt;a href="' + feed.Entry[i].Link + '" target="_blank"&gt;'
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; + feed.Entry[i].Title + '&lt;/a&gt;&lt;/li&gt;';
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; html += "&lt;/ul&gt;";
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; _gel("content_div").innerHTML = html;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; // ブックマーク取得件数
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }, 5);
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/script&gt;
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; ]]&gt;
&nbsp;&nbsp;&nbsp; &lt;/Content&gt;
&lt;/Module&gt;
</code></pre>
<br />
Editorに貼付けたら、Previewタブで確認してみましょう。はてなブックマークのRSSから、最新の5件取得されたと思います。うまく取得できない場合は、はてなブックマーク側で、公開設定が「パブリック」になっているかご確認ください。<br />
<br />
<br />
では、このガジェットをiGoogleに登録してみましょう。<br />
<br />
まずはFileプルダウン＞Save asをクリックして、名前を付けて保存します。<br />
<img alt="save_as.png" src="http://www.synapz.jp/blog/mrsy/2008/02/06/3.png" class="mt-image-center" style="margin: 0pt auto 20px;text-align: center" height="397" width="323" />
<br />
<br />
次に、Fileプルダウン＞Publish をクリックし、ダイアログから「Add to my iGoogle page」をクリック。<br />
<img alt="publish.png" src="http://www.synapz.jp/blog/mrsy/2008/02/06/4.png" class="mt-image-center" style="margin: 0pt auto 20px;text-align: center" height="396" width="322" />
<br />
<br />
次の画面で「Googleに追加」をクリック。<br />
<img src="http://www.synapz.jp/blog/mrsy/2008/02/06/5-thumb-400x102.png" alt="add_my_iGoogle.png" class="mt-image-center" style="margin: 0pt auto 20px;text-align: center" height="102" width="400" />
<br />
追加されましたね！（見栄えはよろしくないですが）<br />
<img src="http://www.synapz.jp/blog/mrsy/2008/02/06/6-thumb-400x332.png" alt="igoogle.png" class="mt-image-center" style="margin: 0pt auto 20px;text-align: center" height="332" width="400" />
<br />
<br />
思ったより簡単に作ることができました（かなり端折ってますが）。まだGoogleガジェットAPIのほんの一部しか使ってないので、もっと複雑な処理やUIを作ることができそうです。また、作成したガジェットは自分のブログにも簡単に貼付けることができます。<br />
<br />
次は、このガジェットでGoogle Open Social APIを使ってみたいと思います。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.synapz.jp/mrsy/2008/02/google-gadget/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

