Web APIを利用したスクリプトサイドバープラグインの開発

はじめに


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

解説で作成したサンプル
WEB APIを実行して取得したXMLにXSLを適用すると解析スクリプトをほとんど記述しなくても見栄えの良いプラグインが作れます。
このチュートリアルではWEB API(お天気Webサービス(Livedoor Weather Web Service / LWWS))を利用してXMLを取得し、そのXMLを処理できるXSLスタイルシートを作成して今日と明日の天気予報を表示するサンプルを解説します。

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


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

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

解析スクリプト


長い行は改行してあります。

'Lunascape Co., LTD. All rights reserved.

Function main()
main = forecast_for_today()
End Function

' Function forecast_for_today
Function forecast_for_today()
forecast_for_today = update_forecast(
"http://weather.livedoor.com/forecast/
webservice/rest/v1?city=63&day=today")
End Function

' Function forecast_for_tomorrow
Function forecast_for_tomorrow()
forecast_for_tomorrow = update_forecast(
"http://weather.livedoor.com/forecast/
webservice/rest/v1?city=63&day=tomorrow")
End Function

' Function update_forecast
Function update_forecast(strUrl)
update_forecast = True

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

' XMLを登録
LunaScriptSidebar.SetXml(oXML.xml)
LunaScriptSidebar.Update()

End Function

スクリプトの解説


Function main()
main = forecast_for_today()
End Function

LunaScriptSideBar.iniでフレームワークから最初に呼び出されるように定義してある関数です。
forecast_for_today関数を呼び出して今日の天気をサイドバーに表示します。

Function forecast_for_today()
forecast_for_today = update_forecast(
"http://weather.livedoor.com/forecast/
webservice/rest/v1?city=63&day=today")
End Function
Function forecast_for_tomorrow()
forecast_for_tomorrow = update_forecast(
"http://weather.livedoor.com/forecast/
webservice/rest/v1?city=63&day=tomorrow")
End Function

update_forecast関数に今日の天気もしくは明日の天気のURLを渡しています。

Function update_forecast(strUrl)
update_forecast = True

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

' XMLを登録
LunaScriptSidebar.SetXml(oXML.xml)
LunaScriptSidebar.Update()

End Function

指定されたURLからデータをダウンロードしてLunaScriptSidebarにXMLを登録しています。 WEB APIから取得したXMLをそのまま用いるので解析スクリプトの作業はここまでです。

XSLスタイルシートと解説


XSLスタイルシート

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:rss="http://purl.org/rss/1.0/">
<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>
<table>
<tr>
<td colspan="2">

<xsl:value-of select="lwws/title" />
<img src="./image/refresh.png"
onclick="LunaScriptSidebar.Reload()"
alt="更新" style="cursor:hand;" />
</td>
</tr>
<xsl:apply-templates select="lwws/image" />
<xsl:apply-templates select="lwws/temperature" />

</table>
</body>
</html>
</xsl:template>
<xsl:template match="lwws/temperature">
<tr style="color:#0000ff;">

<td>
最高気温
</td>
<td>
<xsl:choose>
<xsl:when test="self::node()[./max/celsius='']">
-
</xsl:when>

<xsl:otherwise>
<xsl:value-of select="./max/celsius" />

</xsl:otherwise>
</xsl:choose>
</td>
</tr>

<tr style="color:#ff0000;">
<td>
最低気温
</td>
<td>
<xsl:choose>
<xsl:when test="self::node()[./min/celsius='']">

-
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="./min/celsius" />

</xsl:otherwise>
</xsl:choose>

</td>
</tr>
</xsl:template>
<xsl:template match="lwws/image">
<tr>
<td>

<a>
<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>

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

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

</xsl:stylesheet>

スタイルシートの解説

< table>
<tr>
<td colspan="2">
<xsl:value-of select="lwws/title" />
<img src="./image/refresh.png"
onclick="LunaScriptSidebar.Reload()"
alt="更新" style="cursor:hand;" />
</td>

</tr>
<xsl:apply-templates select="lwws/image" />
<xsl:apply-templates select="lwws/temperature" />
</table>

lwws/titleノードからタイトルを取得して最上部表示しています。
タイトルの隣に表示されるイメージにはLunaScriptSidebarオブジェクトのReloadメソッドを用いてサイドバーの内容を更新するスクリプトを記述しています。
次に、lwws/imageノードとlwws/temperatureノードを処理します。

<xsl:template match="lwws/image">
<tr>
<td>
<a>
<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>
</a>
</td>
<td>

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

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

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

<xsl:template match="lwws/temperature">
<tr style="color:#0000ff;">
<td>
最高気温
</td>
<td>
<xsl:choose>

<xsl:when test="self::node()[./max/celsius=]"> - </xsl:when> <xsl:otherwise> <xsl:value-of select="./max/celsius" /> ℃ </xsl:otherwise> </xsl:choose> </td> </tr>

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

リンク