このページの本文へ

jQueryでDashboardウィジェットを作ろう (3/4)

2011年04月04日 13時00分更新

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

簡易RSSリーダーを作る

 最後に、簡易RSSリーダーを作成しましょう。ここでは、ASCII.jpで配信されているRSS (XML) を取得してウィジェット上に表示します。

ASCII.jpが配信しているRSS
feed://www.ascii.jp/cate/1/rss.xml

 Webブラウザーの場合、JavaScriptでRSSリーダーを作ろうと思っても、セキュリティの制約上、異なるドメインにあるXMLデータを取得できません(IE8以降やFirefoxなどでは可能)。Dashboardのウィジェットの場合、ドメインの制約はありませんので、外部からアクセス可能なサーバー上であれば、XMLに限らず、さまざまなデータを取得し処理できます。

 ただし、Web上にあるデータを取得するには「Info.plist」のAllowNetworkAccessをtrueにする必要があります(プロパティエディタではチェックを入れる)。

 今回作成するRSSリーダーは以下のように設定しています。

【図】fig3-1.png

RSSリーダーのプロパティ設定

 Info.plistの設定が終わったら、ウィジェットに必要な「Default.png」「Icon.png」を用意します。

 HTMLはRSSのタイトル文字を表示するだけなので、<div id="rss"></div>として表示領域を用意しておきます。RSSの記事はdivタグで囲んで個別に表示するようにします。これらのスタイルシートも設定しておきます。

 ここまでをまとめたのがサンプル2です。

■サンプル2[HTML:index.html]

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>Dashboard RSS Sample</title>
        <link rel="stylesheet" href="css/main.css" type="text/css" media="all">
        <script type="text/javascript" src="js/sample.js"></script>
    </head>
    <body>
        <div id="rss"></div>
    </body>
</html>

■サンプル2[CSS:main.css]

body {
    margin:0;
    padding:0;
    background-color: white;
    width:580px;
    height: 338px;
}
div {
    margin:0;
    padding:0;
    border : 1px #ddddff solid;
    width : 580px;
    height : 16px;
    background-color:#ffffee;
    font-size:9pt;
    line-height:170%;
}
#rss {
    background-color: #ffe0e0;
    color: black;
}
div:hover {
    background-color:#ffddcc;
}

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています