第5回　（勢いだけで）ゼロからのウィジェット制作編　（その2）【特集サンデープログラミング】

myLab IDをお持ちでない方

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

>> ウェブウィジェット

>> 機能分類

第5回　（勢いだけで）ゼロからのウィジェット制作編
　　　　　（その2）　実装・完成・アップロード

実装開始！

先週に引き続き、『（勢いだけで）ゼロからのウィジェット制作』をお送りします。
『widgetownのRSSリーダウィジェット』をiGoogleガジェットで作る。ということでもりもり頑張っています。
先週は、「Hello World!」を表示させるところまでできました。今週からが本番、実装開始です。

ここから実際のプログラミングをしていきます。
これから出来上がるものは間違いなく世界でオンリーワンのウィジェットです。さあ、モノ作りを楽しみましょう！

と、意気込みたいところでしたが、実際に何をすればRSSリーダが仕上がるのか分かりません。
widgetown開発チームにお願いしてサンプルをいただきました。
これを元に作業をすることにしましょう。

ソースファイルはこちらから確認できます。

上のソースをGoogle Gadget Editorに貼り付けてみてください。
previewを見ると、widgetowNewsの新着フィードが5件表示されると思います。
おお、ちょっと感動。

もうこれで完成、でいいじゃないか、という声もありそうですが、そうもいきません。
それではこのソースを分解していきましょう。

※以下が私の入れた解説です。

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

※ここまでは「Hello World」と同じですね。

<div style="font-size: 80%; line-height: 1.4;">
<a id="entry0" href=""></a><br />

※ここは、スタイルシートを知っている人なら易しそうです。
表示される部分の指定がされています。先に表示部分を指定するんですね。

1行目でフォントのサイズや行の高さ、
2行目でリンクの指定がされています。

<a id="entry1" href=""></a><br />
<a id="entry2" href=""></a><br />
<a id="entry3" href=""></a><br />
<a id="entry4" href=""></a><br /><br />
from <a id="site" href="" target="_blank"></a>
</div>

※そしてそれが、</div>で囲まれて5回繰り返されて、最後にサイトのデータが入れられているということです。

<script type="text/javascript">

※ここからjavascriptです。

rssurl = "http://feeds.feedburner.jp/widgetown_news";

※ウィジェッタウンニュースからのRSSを取得しています。

_IG_FetchFeedAsJSON(rssurl, rss_loaded, 5, false);

※ここがこのウィジェット一番の肝ですね。
この、「_IG_FetchFeedAsJSON」がRSSを読み込む関数です。
（）に入る引数は、左からRSSのURL、RSSの読み込み完了後に呼び出される関数、読み込む記事の数の最大値、記事の概要を読み込むかどうか、になっています。

参考リンク：
JSON の処理
ガジェットを作ってみよう

function rss_loaded(feed) {
if (!feed || !feed.Entry || feed.Entry.length == 0) {
_gel("out").innerHTML = "No data";
return;
}

※function でrss_loaded という関数を定義しています。RSSの読み込み終了後に、取得したデータがが適正なものかをチェックする関数ですね。
フィード、フィードのエントリ、フィードのエントリの文字列がゼロの場合は、No dataと出力します。

for( var i = 0; i < 5; i++ ){
_gel("entry".concat(i)).href = feed.Entry[i].Link;
_gel("entry".concat(i)).target = "_blank";
_gel("entry".concat(i)).innerHTML = feed.Entry[i].Title;
}

※ここでid:"entry"のRSSフィードを5つ読み込んで、リンクとタイトルを取得・表示させています。

_gel("site").href = feed.Link;
_gel("site").innerHTML = feed.Title;
}

※ここでid:"site"のリンクとタイトルを取得・表示させていますね。

</script>

以上でjavascriptは実装完了。

]]>
</Content>
</Module>

以上で完成です。

ちょっとだけ改造

どうでしょうか。ご理解いただけているでしょうか？
ちなみに私はここまでで数時間かかっています。難しいです。

このサンプルをそのままiGoogleに掲載して、できたとは言えないので、ちょっとだけ改造しましょう。
簡単にレイアウトを変え、ウィジェットのタイトルの下に日付を表示させたいと思います。

まず、HTMLの表示部分を書き加えます。

<center>
<div style="font-size: 150%; color: #336600">widgetown<span style="font-size: 95%; color: #000000">&#26032;&#30528;&#24773;&#22577;</span>
</div>
<br />
<br />
<div style="font-size: 80%; line-height: 1.4;">
<a id="entry0" href=""></a><br />
<div id="pubDate0"></div>
<br />

<a id="entry1" href=""></a><br />
<div id="pubDate1"></div>
<br />

<a id="entry2" href=""></a><br />
<div id="pubDate2"></div>
<br />

<a id="entry3" href=""></a><br />
<div id="pubDate3"></div>
<br />

<a id="entry4" href=""></a><br />
<div id="pubDate4"></div>
<br />
</div>
<br />

<div style="font-size: 140%; color: #336600">
from <a id="site" href=""></a>
</div>
</center>

これでちょっとだけかっこよくなったと思います。
文字を数値文字参照に変換してあります。

参考リンク：
文字参照
数値文字参照変換スクリプト

この後、

<script type="text/javascript">

rssurl = "http://feeds.feedburner.jp/widgetown_news";
_IG_FetchFeedAsJSON(rssurl, rss_loaded, 5, false);
_gel("out").innerHTML = "Loading " + rssurl;

function rss_loaded(feed) {
if (!feed || !feed.Entry || feed.Entry.length == 0) {
_gel("out").innerHTML = "No data";
return;
}

for( var i = 0; i < 5; i++ ){
_gel("entry".concat(i)).href = feed.Entry[i].Link;
_gel("entry".concat(i)).innerHTML = feed.Entry[i].Title;

までは先ほどのものを踏襲して、
次は日付の表示です。

var time = feed.Entry[i].Date;

ここでDateを取得します。これで1970年の1月1日からの秒数が得られます。

time = time*1000;

Javascriptでは時刻をミリ秒（1ミリ秒＝1000分の１秒）という単位で扱う決まりなので秒数をミリ秒に直して、

var date = new Date(time);
_gel("pubDate".concat(i)).innerHTML = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
_gel("entry".concat(i)).parentNode.style.display = "block";
}

その秒数を年月日時分秒に変換させて表示させます。
月数に１を足すなど、ちょっとややこしいですね。

参考：
Core JavaScript 1.5 Reference:Global Objects:Date

あとは同じです。

_gel("site").href = feed.Link;
_gel("site").innerHTML = feed.Title;
}

</script>

]]>
</Content>
</Module>

以上です。

メタ情報作成で完成！

次は、<ModulePrefs .../>にガジェットの情報を入れましょう。
ここらへんの話は、サンデープログラミングの第2回でも触れているので、ぜひぜひ参考にしてください。
参考：
第2回サンデープログラミング
 公開の準備

今回は、タイトル・ディスクリプション・概要・作者・サムネイル画像などを設定しました。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs
title="widgetown RSS reader"
description="widgetown's RSS reader;"
author="widgetown"
author_affiliation="widgetown"
author_email="メールアドレス"
screenshot="http://widgetown.googlepages.com/widgetownd.jpg"
thumbnail="http://widgetown.googlepages.com/widgetownc.jpg"
author_link="http://www.widgetown.com/"
height="400"
scaling="false"
scrolling="false">
</ModulePrefs>

とりあえずの全コード

以下、widgetown RSS readerの全コードになります。

完成したソースファイルはこちらから確認できます。

完成！

これを開発チームに見せると、やはりプロフェッショナルには我慢できない点が多いらしく、
ここはこうしたほうがいい、そこはああしたほうがいい、と指示がたくさん入りました。
初心者なのであっぷあっぷしながら、何とかそれに対処。
結果出来上がったのが以下のものです。

まず、時刻の表示を見やすくし、時刻の表示の部分を関数化してまとめました。
また、取得したフィードのエントリが5件未満だった際の処理を入れています。

ちょっと高度になってしまいましたが、よりいいものになったかと思います。

今度こそ完成したソースファイルはこちらから確認できます。

公開しましょう

さて、早速公開です。
自分でwebサーバを持っている方なら、そこにファイルを置けばすぐに公開することができるのですが、
今回は、最後までGoogleのサービスを利用してしまいましょう。
またもGoogle Gadget Editorの恩恵にあずかります。

fileをクリックして、publishを選んでください。

- Add to my iGoogle page
- Publish to iGoogle Directory
- Add to a webpage

と出ます。上から、

「自分のiGoogleページに追加」
・ガジェットを自分だけが使いたい場合に選択。

「iGoogleディレクトリに追加」
・ガジェットを広く一般の人にも使って欲しい場合に選択。Google のプログラムガイドラインを満たすガジェットならば、1週間ほどでGoogleガジェットのディレクトリに追加されます。

「Webページに追加」
・自分のWebページ上にガジェットを貼り付けたい場合に選択。

というような意味です。

ここでは３番目の「Add to a webpage」を選びます。
幅や枠線などを設定し、「コードを取得」をクリックするとタグが出ます。それを適当なサイトに貼り付けると、

出来上がりです。やったー。

ガジェットを公開すれば、あなたの作った作品を世界中の誰かが使えるようになるのです。
夢が広がりますね。

参考：
ガジェットの公開

終わりに

以上で2週にわたってお送りした、サンデープログラミング『（勢いだけで）ゼロからのウィジェット制作』は終了です。
かなり分量が長くなってしまったのと、結構しっかりしたものが出来上がってしまったため、もしかしたら初めてウィジェット開発に挑戦する方には難しかったかもしれません。
私には相当きつかったです。

今回はこれで終わりですが、
これにめげずにウィジェットをがんがん作っていきたいと思いますので、これからにご期待ください。

ご意見やご感想、そのコードはおかしい、というご指摘などあれば、恐縮ですが、

widgetown問い合わせフォーム

にてご連絡いただければ大変嬉しいです。
どうぞよろしくお願いします。

文：widgetown編集部　下地　　監修：widgetown開発チーム　黒崎
2008年7月9日