スクリプトサイドバープラグインフレームワークを活用した応用例

はじめに


このドキュメントはVBScript、JavaScript、XSLスタイルシート、HTMLDocument(DHTML)およびXML DOMの知識があることを前提に記述しています。

チュートリアルで解説するサンプル

単純にXMLにXSLを適用するだけでなく、LunaXmlUtilityやXMLDOMDocumentを組み合わせてXMLの作成をしてみましょう。
独自のXMLを作成すれば、WEB APIの仕様に縛られずに思い通りの表示をすることができます。
解析スクリプトを記述する作業が増えますがチャレンジしてみてはいかがでしょうか。

このチュートリアルではWEB APIからXMLを取得する方法と、独自のXMLを作成する方法を組み合わせたサンプルを解説します。
種類の異なるXMLを処理するために、LunaScriptSidebarオブジェクトのSetXsltFileNameメソッドを用いてサイドバーの表示を切り替えています。

お天気Webサービス(Livedoor Weather Web Service / LWWS)を利用して東京都の天気予報を表示し、さらに地域ごとのピンポイント予報を表示します。
LWWSを処理する部分ではAPIから取得したXMLを独自形式のXMLに変換し、ピンポイント予報を処理する部分ではWEBページを解析した結果を独自形式のXMLに変換してそれぞれLunaScriptSidebarオブジェクトに登録します。

使用するオブジェクトとメソッド


このチュートリアルで用いるオブジェクトとメソッドは以下のとおりです。

オブジェクト 利用するメソッド
Lunascape OutputAddString
LunaScriptSidebar Reload
BeginThread
SetData
GetData
SetXml
Update
SetXsltFileName
Execute
LunaHtmlUtility LoadHTML
LunaXmlUtility LoadXML

作成するXMLの形式


広域予報用XMLの定義

タグ名 内容
forecast 広域の予報

タグ名 内容
title 天気(晴れ、曇り、雨など)
link 天気情報のURL
url 天気アイコンのURL
width 天気アイコンの幅
height 天気アイコンの高さ
temperature 最高気温および最高気温

タグ名 内容
max 最高気温
タグ名 内容
min 最低気温
pinpoint 各ピンポイント予報ページの情報locationタグの繰り返しです。

タグ名 内容
title 市区町村名
link 対応する天気情報のURL
publictime ピンポイント天気予報の発表時間

広域予報用XMLのサンプル

<?xml version="1.0" encoding="UTF-16"?>
<root>
<items>
<forecast>
<title>曇のち晴</title>
<link>

http://weather.livedoor.com/area/13/63.html?v=1
</link>
<url>

</url>
<width>50</width>
<height>31</height>

</forecast>
<temperature>
<max></max>
<min></min>
</temperature>

<pinpoint>
<location>
<title>千代田区</title>
<link>
http://weather.livedoor.com/point/city/976.html
</link>

<publictime>Tue, 05 Jun 2007 06:00:00 +0900</publictime>
</location>



<location>
<title>奥多摩町</title>

<link>
http://weather.livedoor.com/point/city/1027.html
</link>
<publictime>Tue, 05 Jun 2007 06:00:00 +0900</publictime>
</location>
</pinpoint>

</items>
</root>

ピンポイント予報用XMLの定義

タグ名 内容
location ピンポイント地域名
link ピンポイント予報ページ
title ピンポイント予報のタイトル
date 予報発表日時
forecast 今日もしくは明日の時系列予報

タグ名 内容
today/tomorrow today:今日/tomorrow:明日
date 予報日
time 時間
title 天気(晴れ、曇り、雨など)
title_image 天気のアイコン
temperature 気温
precipitation 降水量
humidity 湿度
winddirection 風向
winddirection_image 風向アイコン
windspeed 風速
indexes
タグ名 内容
date 発表日

きょうの生活指数
indexタグの繰り返し

タグ名 内容
title 生活指数項目
url アイコンのURL
description 生活指数内容
pinpoint 各ピンポイント予報ページの情報locationタグの繰り返しです。

タグ名 内容
title 市区町村名
link 対応する天気情報のURL
publictime ピンポイント天気予報の発表時間

ピンポイント予報用XMLのサンプル

<?xml version="1.0" encoding="UTF-16"?>
<root>
<items>
<location>港区</location>
<title>港区の天気</title>

<date>6月8日0時0分発表</date>
<forecast type="today">
<date>今日の天気 - 6月8日 (金)</date>
<item>
<time>0時</time>

<title>
曇り
</title>
<title_image>

</title_image>
<temperature>21℃</temperature>

<precipitation>0mm</precipitation>
<humidity>---</humidity>
<winddirection>
南南西
</winddirection>

<winddirection_image>

</winddirection_image>
<windspeed>5m/s </windspeed>
</item>



<item>

<time>21時</time>
<title>
曇り
</title>
<title_image>

</title_image>

<temperature>22℃</temperature>
<precipitation>0mm</precipitation>
<humidity>74%</humidity>
<winddirection>

南南西
</winddirection>
<winddirection_image>

</winddirection_image>
<windspeed>3m/s </windspeed>
</item>

</forecast>
<forecast type="tomorrow">
<date>明日の天気 - 6月9日 (土)</date>
<item>
<time>0時</time>

<title>
曇り
</title>
<title_image>

</title_image>
<temperature>21℃</temperature>

<precipitation>0mm</precipitation>
<humidity>78%</humidity>
<winddirection>
南南西
</winddirection>

<winddirection_image>

</winddirection_image>
<windspeed>3m/s</windspeed>
</item>



<item>

<time>21時</time>
<title>---</title>
<title_image></title_image>
<temperature>---</temperature>

<precipitation>---</precipitation>
<humidity>---</humidity>
<winddirection>---</winddirection>
<winddirection_image></winddirection_image>

<windspeed>---</windspeed>
</item>
</forecast>
<indexes>
<date>6月7日18時0分発表</date>

<index>
<title>洗濯指数</title>
<url>

</url>
<description>90</description>

</index>



<index>
<title>汗かき指数</title>
<url>


</url>

<description>24.6</description>
</index>
</indexes>
<pinpoint>
<location>

<title>千代田区</title>
<link>
http://weather.livedoor.com/point/city/976.html
</link>
<publictime>Fri, 08 Jun 2007 00:00:00 +0900</publictime>

</location>



<location>
<title>奥多摩町</title>
<link>
http://weather.livedoor.com/point/city/1027.html
</link>

<publictime>Fri, 08 Jun 2007 00:00:00 +0900</publictime>
</location>
</pinpoint>
</items>
</root>

HTML内で利用するスクリプトファイル


本チュートリアルではXSLスタイルシートで生成されるHTML内にスクリプトファイル(forecast.js)をリンクしてあります。
スクリプトファイル内の重要な関数について解説をします。

function change_location(url, location)
{
LunaScriptSidebar.SetData("CurrentLocation", location);
LunaScriptSidebar.SetData("CurrentUrl", url);
LunaScriptSidebar.Execute("forecast.vbs", "change_location");
}

ピンポイント地域の一覧が格納されたドロップダウンリストの選択内容が変化した際に呼び出される関数です。
引数として受け取ったurlとlocationをそれぞれLunaScriptSidebarオブジェクトのSetDataメソッドを利用してデータとして格納しています。
格納したデータはLunaScriptSidebarオブジェクトのExecuteメソッドで呼び出されるchange_location関数内でGetDataメソッドを用いて取り出されます。

解析スクリプト


解析スクリプトの変更結果は以下のリンクから確認することができます。
フレームワークを活用した応用例の解析スクリプト

スクリプトの解説


独自形式のXMLを格納するオブジェクトの準備

Function create_output_xml_object()
Dim xmlObj
set xmlObj = CreateObject("Msxml2.DOMDocument")

' XMLを準備
Dim strData
strData = "version=""1.0"" encoding=""UTF-16"""

Dim oProcessingInstruction
Set oProcessingInstruction = _
xmlObj.createProcessingInstruction("xml", strData)
xmlObj.appendChild(oProcessingInstruction)

Set create_output_xml_object = xmlObj
End Function

この関数は独自に作成するXMLオブジェクトを作成します。
UTF-16形式の”Msxml2.DOMDocument”オブジェクトを作成しています。
広域予報の解析結果およびピンポイント予報の解析結果を格納する際にそれぞれ共通関数として利用されます。

WEB APIから独自形式のXMLを作成する部分

Function main()
main = True



End Function

LunaScriptSideBar.iniにおいて最初に呼び出されるように記述してある関数です。
Livedoor お天気Webサービスから東京の予報情報をXML形式で取得し、独自形式のXMLに変換しています。

Dim strUrl
strUrl = "http://weather.livedoor.com/forecast/_
webservice/rest/v1?day=tomorrow&city=63"

' XMLをダウンロード
Dim xmlArea
Set xmlArea = LunaXmlUtility.LoadXML(strUrl)

「東京の今日の天気」情報をお天気Webサービスからダウンロードします。
ダウンロードしたXMLはお天気Webサービスで定義された形式となっています。
このXMLをさらに解析して必要な情報を独自形式のXMLへと変換します。
本チュートリアルで抽出する情報は、

  • 今日の天気情報
  • 今日の最高気温/最低気温情報

となります。
お天気WebサービスのXMLの定義はお天気Webサービス仕様 – Weather Hacks – livedoor 天気情報を参照してください。

今日の天気情報の抽出と登録
' 天気予報要素を取得
Dim oImage
Set oImage = xmlArea.selectSingleNode("/lwws/image")

' 最高気温アイテムを追加
Dim nodeForecast
Set nodeForecast = xmlOutput.createElement("forecast")
nodeForecast.appendChild(oImage.selectSingleNode("title"))
nodeForecast.appendChild(oImage.selectSingleNode("link"))
nodeForecast.appendChild(oImage.selectSingleNode("url"))
nodeForecast.appendChild(oImage.selectSingleNode("width"))
nodeForecast.appendChild(oImage.selectSingleNode("height"))
nodeItems.appendChild(nodeForecast)

今日の天気の予報内容をWebサービスから取得したXMLから抽出して登録しています。
お天気Webサービスから取得したXMLのノードを独自形式のXMLに直接登録しています。
登録内容は、

  • 予報
  • 予報ページのURL
  • 予報イメージ
  • 予報イメージの大きさ

となります。
登録結果は、

<root>
<items>
<forecast>
<title>曇のち晴</title>
<link>http://weather.livedoor.com/area/13/63.html?v=1</link&gt;

<url>http://image.weather.livedoor.com/img/icon/12.gif</url&gt;
<width>50</width>
<height>31</height>
</forecast>

のようになります。

今日の最高気温/最低気温情報の抽出と登録

次に、 今日の天気の予報内容をWebサービスから取得したXMLから最高気温と最低気温の情報を抽出して独自形式のXMLに登録します。

Dim oTemperature
Set oTemperature = xmlArea.getElementsByTagName("temperature")

最高気温と最低気温の情報はtemperatureノード以下に格納されています。

Dim XmlNode
For Each XmlNode In oTemperature
Dim child
For Each child In XmlNode.childNodes
Dim node
If child.tagName = "max" Then
For Each node In child.childNodes
If node.tagName = "celsius" Then
' 最高気温アイテムを追加
Dim nodeMaxTemp
Set nodeMaxTemp = xmlOutput.createElement("max")
nodeMaxTemp.text = node.text
nodeTemperature.appendChild(nodeMaxTemp)
End If
Next

temperatureノードは、

<temperature>
<max>
<celsius>27</celsius>
<fahrenheit>80.6</fahrenheit>
</max>

のようになっています。以下に摂氏と華氏で気温情報が登録されていますが、チュートリアルで必要な情報は摂氏なので、摂氏のみを抽出しています。
引き続き、最低気温も同様にして抽出して登録しています。
登録した結果は、

<root>
<items>



<temperature>
<max>27</max>
<min>19</min>

</temperature>

のようになります。

ピンポイント地域の抽出と登録
Dim oPinpoint
Set oPinpoint = xmlArea.selectSingleNode("/lwws/pinpoint")

ピンポイント地域の情報は<lwws>-<pinpoint>ノード以下に<location>要素の繰り返しで格納されています。

Dim oPinpoint
Set oPinpoint = xmlArea.selectSingleNode("/lwws/pinpoint")

格納元オブジェクトから抽出した<pinpoint>ノードをそのまま登録します。
登録した結果は、

<root>
<items>



<location>
<title>千代田区</title>
<link>http://weather.livedoor.com/point/city/976.html</link&gt;

<publictime>Tue, 05 Jun 2007 06:00:00 +0900</publictime>
</location>

のようになります。

' 解析結果をLunascapeの出力ウィンドウに出力
Lunascape.OutputAddString(xmlOutput.xml)

この行ではLunascapeオブジェクトのOutputAddStringメソッドを用いて、Lunascapeの出力ウィンドウに作成したXMLを出力しています。
OutputAddStringメソッドを利用すれば解析の経過を確認する容易に確認することができます。有効に活用してみてください。

LunaScriptSidebarオブジェクトのBeginThreadメソッドで実行される処理においてはLunascapeオブジェクトを利用することはできません。

' XSLスタイルシートを登録
LunaScriptSidebar.SetXsltFileName("forecast.xsl")
' XMLを登録
LunaScriptSidebar.SetXml(xmlOutput.xml)
LunaScriptSidebar.Update()

独自に作成したXMLを処理できるXSLスタイルシートをLunaScriptSidebarオブジェクトのSetXsltFileNameメソッドを通じて登録しています。
次にLunaScriptSidebarオブジェクトSetXmlメソッドを用いて、出力する内容を格納しているXMLを登録しています。
LunaScriptSidebarのUpdateメソッドを用いて、登録したアイテムがサイドバーに反映されます。

ピンポイント予報ページを解析して独自形式のXMLを作成する部分

Function change_location()
change_location = False
LunaScriptSidebar.BeginThread "forecast.vbs", "pinpoint", ""
End Function

この関数はサイドバーに表示されているHTML内のスクリプトから呼び出されます。
実際の解析作業を行うpinpoint関数を呼び出しています。
解析作業は時間がかかる場合があるために、LunaScriptSidebarオブジェクトのBeginThreadメソッドを用いて別のスレッドで実行するようにしています。
また、この関数が完了した時点でサイドバーの内容が更新されないように、実行結果はFalseとしています。

Function pinpoint()



End Function

ピンポイント予報解析のメイン関数です。
情報登録ノードを準備してタイトル、今日の予報、明日の予報およびきょうの生活指数情報処理を呼び出します。
最後に、他の予報へのリンク情報も登録します。

Dim strLocation
strLocation = LunaScriptSidebar.GetData("CurrentLocation")

サイドバー内のHTMLのスクリプトであらかじめ”CurrentLocation”というキー名で登録しておいたデータをピンポイント地域名として取得しています。

Dim strUrl
strUrl = LunaScriptSidebar.GetData("CurrentUrl")

サイドバー内のHTMLのスクリプトであらかじめ”CurrentUrl”というキー名で登録しておいたデータをピンポイント予報ページへのURLとして取得しています。

Dim docForecast
Set docForecast = LunaHtmlUtility.LoadHTML(strUrl)

取得したURLでページをダウノードします。

Dim xmlPinpoint
set xmlPinpoint = create_output_xml_object()

続いて、独自形式のXMLを格納するオブジェクトを準備します。

pinpoint_title strUrl, strLocation, tableTitle,
xmlPinpoint, docForecast, nodeItems
pinpoint_today tableTitle, xmlPinpoint, docForecast, nodeItems
pinpoint_tomorrow tableTitle, xmlPinpoint, docForecast, nodeItems
pinpoint_indexes tableTitle, xmlPinpoint, docForecast, nodeItems

タイトル、今日の予報、明日の予報およびきょうの生活指数情報を処理します。

' 広域予報をダウンロードするURL
Dim strAreaUrl
strAreaUrl = "http://weather.livedoor.com/
forecast/webservice/rest/v1?day=tomorrow&city=63"

' XMLをダウンロード
Dim xmlArea
Set xmlArea = LunaXmlUtility.LoadXML(strAreaUrl)

' 各地の天気詳細を処理
Dim oPinpoint
Set oPinpoint = xmlArea.selectSingleNode("/lwws/pinpoint")

nodeItems.appendChild(oPinpoint)

別の地域へリンクするための情報をお天気Webサービスを利用して取得しています。
この処理は前出の広域情報における処理と同一です。

' XSLスタイルシートを登録
LunaScriptSidebar.SetXsltFileName("pinpoint.xsl")
' XMLを登録
LunaScriptSidebar.SetXml(xmlPinpoint.xml)
LunaScriptSidebar.Update()

作成した独自のXMLを処理できるXSLを登録し、独自に作成したXMLを登録しています。
広域情報用のXMLとは違うXSLスタイルシートになっていることに注意してください。

XSLスタイルシートと解説


XSLスタイルシート

広域予報用XSLスタイルシート
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8" />
<xsl:template match="/">
<html>
<head>
<base href="%BASE%" />

<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body>
<script type="text/javascript" src="./script/forecast.js"></script>
< table>

<xsl:apply-templates select="root/items/pinpoint" />
</table>
< table>
<xsl:apply-templates select="root/items/forecast" />
<xsl:apply-templates select="root/items/temperature" />
</table>

</body>
</html>
</xsl:template>
<xsl:template match="forecast">
<tr>
<td>

<xsl:attribute name="href">
<xsl:value-of select="./link" />
</xsl:attribute>
<img border="0">
<xsl:attribute name="src">
<xsl:value-of select="./url" />

</xsl:attribute>
<xsl:attribute name="alt">
<xsl:value-of select="./title" />
</xsl:attribute>
<xsl:attribute name="width">
<xsl:value-of select="./width" />

</xsl:attribute>
<xsl:attribute name="height">
<xsl:value-of select="./height" />
</xsl:attribute>
</img>
<xsl:attribute name="href">

<xsl:value-of select="./link" />
</xsl:attribute>
<xsl:value-of select="./title" />
</td>
</tr>
</xsl:template>

<xsl:template match="temperature">
<tr>
<td style="color:#ff0000;">
最高気温
<xsl:choose>
<xsl:when test="self::node()[./max=]"> - </xsl:when> <xsl:otherwise> <xsl:value-of select="./max" /> ℃ </xsl:otherwise> </xsl:choose> </td> <td style="color:#0000ff;"> 最低気温 <xsl:choose> <xsl:when test="self::node()[./min=]"> - </xsl:when> <xsl:otherwise> <xsl:value-of select="./min" /> ℃ </xsl:otherwise> </xsl:choose> </td> </tr> </xsl:template> <xsl:template match="pinpoint"> <tr> <td> <form> <select id="oLocations"> <xsl:attribute name="id"> <xsl:text>oLocation</xsl:text> </xsl:attribute> <xsl:attribute name="onchange"> <xsl:text>on_change_location(this, selectedIndex);</xsl:text> </xsl:attribute> <option> <xsl:attribute name="value">http://weather.livedoor.com/forecast/webservice/rest/v1?day=tomorrow&city=63</xsl:attribute&gt; <xsl:text>東京の天気</xsl:text> </option> <xsl:for-each select="location"> <option> <xsl:attribute name="value"> <xsl:value-of select="./link" /> </xsl:attribute> <xsl:value-of select="./title" /> </option> </xsl:for-each> </select> </form> </td> <td> <img src="./image/refresh.png" onclick="LunaScriptSidebar.Reload()" alt="更新" style="cursor:hand;" /> </td> </tr> </xsl:template> </xsl:stylesheet>

ピンポイント予報用XSLスタイルシート
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8" />
<xsl:template match="/">
<html>
<head>
<base href="%BASE%" />

<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="./css/forecast.css" />
</head>
<body id="oBody">
<script type="text/javascript" src="./script/forecast.js"></script>
< table>

<xsl:apply-templates select="root/items/pinpoint" />
</table>
<xsl:apply-templates select="root/items/title" />
<xsl:apply-templates select="root/items/date" />
< div>
< span
class="active"
id="oPinpointTab_today"
onclick="change_tab('today')">

今日の天気
</span>
< span
class="active"
id="oPinpointTab_tomorrow"
onclick="change_tab('tomorrow')">
明日の天気
</span>
</div>
<xsl:apply-templates select="root/items/forecast" />

</body>
</html>
</xsl:template>
<xsl:template match="root/items/title">
<script for="oBody" event="onload()">
change_tab('today');
</script>

< h1>
<xsl:value-of select="." />
</h1>
</xsl:template>
<xsl:template match="root/items/date">
< h2>

<xsl:value-of select="." />
</h2>
</xsl:template>
<xsl:template match="root/items/forecast">
< table border="1">
<xsl:attribute name="id">

oPinpointTable_<xsl:value-of select="./@type" />
</xsl:attribute>
<xsl:for-each select="item">
<tr>
<td>
<xsl:value-of select="time" />

</td>
<td align="center">
<xsl:if test="./title != '---'">
<img>
<xsl:attribute name="src">
<xsl:value-of select="title_image" />

</xsl:attribute>
<xsl:attribute name="alt">
<xsl:value-of select="title" />
</xsl:attribute>
<xsl:attribute name="title">
<xsl:value-of select="title" />

</xsl:attribute>
</img>
</xsl:if>
<xsl:value-of select="title" />
</td>
<td align="center">

<xsl:value-of select="temperature" />
</td>
<td align="center">
<xsl:value-of select="precipitation" />
</td>
<td align="center">

<xsl:value-of select="humidity" />
</td>
<td align="center">
<xsl:if test="./winddirection != '---'">
<img>
<xsl:attribute name="src">

<xsl:value-of select="winddirection_image" />
</xsl:attribute>
<xsl:attribute name="alt">
<xsl:value-of select="winddirection" />
</xsl:attribute>
<xsl:attribute name="title">

<xsl:value-of select="winddirection" />
</xsl:attribute>
</img>
</xsl:if>
</td>
<td align="center">

<xsl:value-of select="winddirection" />
</td>
<td align="center">
<xsl:value-of select="windspeed" />
</td>
</tr>

</xsl:for-each>
</table>
</xsl:template>
<xsl:template match="pinpoint">
<tr>
<td>

<form>
<select>
<xsl:attribute name="id">
<xsl:text>oLocation</xsl:text>
</xsl:attribute>

<xsl:attribute name="onchange">
<xsl:text>on_change_location(this);</xsl:text>
</xsl:attribute>
<option>
<xsl:attribute name="value">

http://weather.livedoor.com/forecast/webservice/rest/v1?day=tomorrow&city=63
</xsl:attribute>
<xsl:text>東京の天気</xsl:text>
</option>
<xsl:for-each select="location">
<option>

<xsl:attribute name="value">
<xsl:value-of select="./link" />
</xsl:attribute>
<xsl:if test="./title=/root/items/location">
<xsl:attribute name="selected">
<xsl:text>true</xsl:text>

</xsl:attribute>
</xsl:if>
<xsl:value-of select="./title" />
</option>
</xsl:for-each>
</select>

</form>
</td>
<td>
<img src="./image/refresh.png" style="cursor:hand;">
<xsl:attribute name="onclick">
change_location(
'<xsl:value-of select="/root/items/link" />',
'<xsl:value-of select="/root/items/location" />'
);
</xsl:attribute>

</img>
</td>
</tr>
</xsl:template>
</xsl:stylesheet>

スタイルシートの解説

広域予報用XSLスタイルシートの解説
< table>
<xsl:apply-templates select="root/items/pinpoint" />
</table>
< table>
<xsl:apply-templates select="root/items/forecast" />

<xsl:apply-templates select="root/items/temperature" />
</table>

最上部に他のピンポイント情報へ移動するためのリストを表示し、その下に予報と最高気温および最低気温を表示します。

<xsl:template match="forecast">
<tr>
<td>
<xsl:attribute name="href">
<xsl:value-of select="./link" />
</xsl:attribute>

<img border="0">
<xsl:attribute name="src">
<xsl:value-of select="./url" />
</xsl:attribute>
<xsl:attribute name="alt">
<xsl:value-of select="./title" />

</xsl:attribute>
<xsl:attribute name="width">
<xsl:value-of select="./width" />
</xsl:attribute>
<xsl:attribute name="height">
<xsl:value-of select="./height" />

</xsl:attribute>
</img>
<xsl:attribute name="href">
<xsl:value-of select="./link" />
</xsl:attribute>
<xsl:value-of select="./title" />

</td>
</tr>
</xsl:template>

予報内容と予報内容イメージを出力する処理です。
<a>タグのhref属性にはlinkノードのテキストを用いています。
<img>タグのsrc属性にはurlノードの内容、alt、width、height属性にはそれぞれtitle、width、heightノードの内容を用いています。

<xsl:template match="temperature">
<tr>
<td style="color:#ff0000;">
最高気温
<xsl:choose>
<xsl:when test="self::node()[./max=]"> - </xsl:when> <xsl:otherwise> <xsl:value-of select="./max" /> ℃ </xsl:otherwise> </xsl:choose> </td> <td style="color:#0000ff;"> 最低気温 <xsl:choose> <xsl:when test="self::node()[./min=]"> - </xsl:when> <xsl:otherwise> <xsl:value-of select="./min" /> ℃ </xsl:otherwise> </xsl:choose> </td> </tr> </xsl:template>

最高気温を出力する処理です。
有効な予報内容が格納されていれば「~℃」を出力し、そうでなければ「-」を出力します。

<xsl:template match="pinpoint">
<tr>
<td>
<form>
<select id="oLocations">
<xsl:attribute name="id">

<xsl:text>oLocation</xsl:text>
</xsl:attribute>
<xsl:attribute name="onchange">
<xsl:text>on_change_location(this, selectedIndex);</xsl:text>
</xsl:attribute>

<option>
<xsl:attribute name="value">http://weather.livedoor.com/forecast/webservice/rest/v1?day=tomorrow&city=63</xsl:attribute&gt;
<xsl:text>東京の天気</xsl:text>
</option>

<xsl:for-each select="location">
<option>
<xsl:attribute name="value">
<xsl:value-of select="./link" />
</xsl:attribute>
<xsl:value-of select="./title" />

</option>
</xsl:for-each>
</select>
</form>
</td>
<td>

<img src="./image/refresh.png"
onclick="LunaScriptSidebar.Reload()" alt="更新"
style="cursor:hand;" />
</td>
</tr>
</xsl:template>

別のピンポイント地域一覧をリストに登録しています。
ピンポイント地域一覧の隣に表示されるイメージにはLunaScriptSidebarオブジェクトのReloadメソッドを用いてサイドバーの内容を更新するスクリプトを記述しています。

ピンポイント予報用XSLスタイルシートの解説
< table>
<xsl:apply-templates select="root/items/pinpoint" />
</table>
<xsl:apply-templates select="root/items/title" />
<xsl:apply-templates select="root/items/date" />

< div>
< span
class="active"
id="oPinpointTab_today"
onclick="change_tab('today')">
今日の天気
</span>
< span
class="active"
id="oPinpointTab_tomorrow"
onclick="change_tab('tomorrow')">
明日の天気
</span>

</div>
<xsl:apply-templates select="root/items/forecast" />

最上部に他のピンポイント情報へ移動するためのリストを表示し、その下に予報ページのタイトルと予報発表日を出力、その下に今日の天気と明日の天気を切り替えるタブを出力し、その下に天気予報の詳細を出力します。
今日の天気と明日の天気はタブによって切り替え可能で、初期状態では今日の天気が表示されます。

<xsl:template match="root/items/title">
<script for="oBody" event="onload()">
change_tab('today');
</script>
< h1>
<xsl:value-of select="." />

</h1>
</xsl:template>

予報ページのタイトルを出力する部分です。

<xsl:template match="root/items/date">
< h2>
<xsl:value-of select="." />
</h2>
</xsl:template>

予報発表日を出力する部分です。

<xsl:template match="root/items/forecast">



</xsl:template>

今日もしくは明日の天気の詳細情報を出力する部分です。

< table border="1">
<xsl:attribute name="id">
oPinpointTable_<xsl:value-of select="./@type" />
</xsl:attribute>

今日もしくは明日の天気の詳細情報が格納される<TABLE>タグを出力します。
<TABLE>タグは今日と明日の2つ分が生成されます。
出力の際、タブを切り替えるスクリプトから識別可能にするために固有の識別子をid属性に埋め込んでいます。識別子の生成には<forecast type=”today”>のtype属性を組み合わせて実現しています。

<xsl:for-each select="item">

<TABLE>ノードに時系列順に格納されたピンポイント予報を列挙します。

<td>
<xsl:value-of select="time" />
</td>

予報時間を主強くします。

<td align="center">
<xsl:if test="./title != '---'">
<img>
<xsl:attribute name="src">
<xsl:value-of select="title_image" />
</xsl:attribute>

<xsl:attribute name="alt">
<xsl:value-of select="title" />
</xsl:attribute>
<xsl:attribute name="title">
<xsl:value-of select="title" />
</xsl:attribute>

</img>
</xsl:if>
<xsl:value-of select="title" />
</td>

予報イメージを出力します。
有効な予報がある場合にのみイメージが出力されるように「—」との比較を行っています。

<td align="center">
<xsl:value-of select="temperature" />
</td>

気温を出力します。

<td align="center">
<xsl:value-of select="precipitation" />
</td>

降水確率を出力します。

<td align="center">
<xsl:value-of select="humidity" />
</td>

湿度を出力します。

<td align="center">
<xsl:if test="./winddirection != '---'">
<img>
<xsl:attribute name="src">
<xsl:value-of select="winddirection_image" />
</xsl:attribute>

<xsl:attribute name="alt">
<xsl:value-of select="winddirection" />
</xsl:attribute>
<xsl:attribute name="title">
<xsl:value-of select="winddirection" />
</xsl:attribute>

</img>
</xsl:if>

風向イメージを出力します。
有効な風向予報がある場合にのみイメージが出力されるように「—」との比較を行っています。

</td>
<td align="center">
<xsl:value-of select="winddirection" />
</td>

風向を出力します。

<td align="center">
<xsl:value-of select="windspeed" />
</td>

風速を出力します。

以上がXSLスタイルシートの解説になります。

リンク