ゆうあんのノート

今日の献立ガジェット

Googleが提供するiGoogleではガジェットというパーツを追加して楽しむことができますが、中でも美人時計みたいに写真が表示されるガジェットは華やかで良いですよね。そこで僕は、美味しそうな料理の写真が表示されるガジェットを作ってみました。

とはいえ、１年半くらい前によく知りもしないJavaScriptを試行錯誤して使って作ったものなので、コードは汚いと思いますが、思い切って公開します。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Ｅ・レシピ - 今日の献立" title_url="http://erecipe.woman.excite.co.jp/new_regulars/" height="100">
    <Require feature="dynamic-height"/>
</ModulePrefs>
<Content type="html">
<![CDATA[

<div id="out"></div>
<div id="timestamp" style="margin:2px 0 0;text-align:right;font-size:9pt;line-height:10pt;font-family:Ariel;color:dimgray;"></div>

<script type="text/javascript">
    _gel("out").innerHTML = "<font color='silver'>loading...</font>";

    _IG_FetchFeedAsJSON("http://erecipe.woman.excite.co.jp/api/new_regulars/regulars.xml", function(feed){
        if (!feed || !feed.Entry || feed.Entry.length == 0) {
            _gel("out").innerHTML = "<font color='dimgray'>No data</font>";
            return;
        }

        for (var i = 0; i < feed.Entry.length; i++) {
            var now = new Date();
            var date = new Date(feed.Entry[i].Date * 1000);
            if (now.getYear() == date.getYear() && now.getMonth() == date.getMonth() && now.getDate() == date.getDate()) {
                showRecipe(feed.Entry[i].Summary, date);
            }
        }

        _IG_AdjustIFrameHeight();
    }, 7, true);

    function showRecipe(summary, date) {
        var memo = summary.match(new RegExp("^[^<]+", "i"));
        var img = summary.match(new RegExp("\<img[ \t].+?\>", "i"));
        var link = summary.match(new RegExp("\<a[ \t].+?\>.*?\<\/a\>", "ig"));

        _gel("out").innerHTML = img[0].replace('<img', '<img width="130" height="147" align="left" style="margin-right:5px"');
        _gel("out").innerHTML += '<p style="margin:0;paddin:0;font-size:10pt;line-height:14pt;">' + memo[0] + '</p>';

        var text = '<ul style="margin:12px 0 4px;font-size:10pt;line-height:15pt;">';
        for (var i = 0; i < link.length; i++) {
            text += '<li>' + link[i] + '</li>';
        }
        text += '</ul>';
        _gel("out").innerHTML += text;

        var weeks = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
        var sdate = "";
        if (date.getMonth() <= 10) sdate += '0';
        sdate += (date.getMonth() + 1) + '/';
        if (date.getDate() < 10) sdate += '0';
        sdate += date.getDate();
        sdate += ' (' + weeks[date.getDay()] + ')';

        _gel("out").innerHTML += '<div style="font-size:9pt;color:silver;font-family:verdana;text-align:right;">' + sdate + '</div>';
    }
</script>
]]>
</Content>
</Module>

見ての通り、Woman Exciteが運営するＥ・レシピというサイトのRSSから情報を取ってきています。
他のレシピサイトもいくつか回ってみたのですが、RSSなどの分かりやすい形式でレシピと写真を公開してるサイトは見付かりませんでした。

さて、使い方ですが、このコードをコピペしたXMLファイルをどこかのWebサーバに保存して、iGoogleの「コンテンツを追加」から、左下の「フィードやガジェットを追加」をクリックし、そこにアップしたXMLファイルのパスを入れて「追加」ボタンを押せば完了です。
なので、Webサーバを持ってない人は簡単には使えなくて問題ですねえ。

-Programming