～モバイルを知る～日常生活とモバイルコンピューティング · 2011-04-27 · 課題（2） •今回の作業1，2，（3）を試し、実行結果とプログラム

テーマ研究会（2011/04/27）~ Webアプリ・プログラミング入門（２）~

政策情報学部

渡辺恭人

[email protected]

資料ページ： http://www.cuc.ac.jp/~riho-m/rg11/

作業①：前回分を少し改造

• 1行目のplace = “那覇”の「那覇」の部分を他の地名に変えてみる。

• 南西諸島地域以外の場合は、2行目も変更する必要がある。– xmlFile =

http://weather.livedoor.com/forecast/rss/amedas/temp/10/47.xml

– http://weather.livedoor.com/weather_hacks/rss_feed_list.htmlを参照する

– 気温をクリック

– メニューバーの「表示」⇒「ソース」をクリックして確認

2

別のサンプル

• もう少し凝った表示にする–文字のサイズを大きくする

–文字に色をつける

–背景色を設定する

–日時も表示する

• ブラウザの機能を利用する– HTA（HyperText Applicatio

ns）化する。

– クリックすると再読み込み

3

サンプル（sample5.hta）（１）

4

<html><head>

<hta:application border="dialog" scroll="no">

<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">

<title>今の気温は？</title>

<script language="VBScript">

Call Window.ResizeTo(250,120+30)

place = "船橋"

Sub Window_onload

'処理準備xmlFile =

"http://weather.livedoor.com/forecast/rss/amedas/temp/3/12.xml"

Set xmlDoc = CreateObject("Microsoft.XMLDOM")

xmlDoc.async = False

returnCode = xmlDoc.Load(xmlFile)

If returnCode = False Then

MsgBox("読み込みエラー")

Else

Call xmlDoc.setProperty("SelectionLanguage","XPath")

サンプル（sample5.hta）（２）

5

'データ取得Set titleNodes =

xmlDoc.selectNodes("//item[title=contains(title,'"&place&"')]/title")

'整形line = titleNodes(0).text

If line = "" Or titleNodes.length > 1 Then

line = "エラー"

Else

pointer = InStr(line, "]")

Document.title = Left(line, pointer)

line = Right(line, Len(line)-pointer)

nowtime.innerHTML = Date & " " & Time

End If

'出力処理cont.innerHTML = line

End If

End Sub

サンプル（sample5.hta）（３）

6

Sub cont_onClick

location.reload()

End Sub

</script>

<style type="text/css">

body {background-color:#808080}

div#cont {font-size:60px;font-weight:bold;color:#ffff6a;text-

align:center;cursor:hand}

div#nowtime {color:#FFF;text-align:right}

</style>

</head>

<body>

<div id="cont"></div>

<div id="nowtime"></div>

</body>

</html>

作業②

• sample5.htaを書き換えて、別の場所の気温が表示できるようにする

–まず、http://weather.livedoor.com/weather_hacks/rss_feed_list.html を見て、見たい地方の気温のRSSファイルへのリンクを取得する

– place = ”船橋” を変更

7

応用

• 天気予報Webクライアントを作る–表示はシンプル

–天気を示す画像も加える

• 元になる情報の場所（東京の場合）– http://weather.livedoor.com/forecast/rss/13/63.x

ml

–他の地域も、http://weather.livedoor.com/weather_hacks/rss_feed_list.htmlから選べる

8

RSSの中身

9

ポイント

• 天気予報だから、翌日（明日）の情報を取得したい

–①「明日の日付」を文字列で作成

–②明日の日付に対応した”item/title”の行を探す。

• ”item/title”のitem下にあるdescriptionを天気予報の文章として抜き出す

• ”item/title”のitem下にあるimage/urlのGIF画像URLを抜き出して、天気画像とする

10

①「明日の日付」を文字列で作成

• VBScriptで作成– nextDate = DateAdd("d",1,Date)

• 今日の日付の「日」に1を加える

– tomorrow = MonthName(Month(nextDate))&Day(nextDate)&"日("&WeekdayName(Weekday(nextDate),True)&")“• 明日の日付の文字列をMonthName関数とDay関数と

WeekdayName関数の出力をつないで作成

11

②明日の日付に対応した”item/title”の行を探す

• ”item/title”のitem下にあるdescriptionを天気予報の文章として抜き出す– Set descriptNodes =

xmlDoc.selectNodes("//item[title=contains(title,'"&tomorrow&"')]/description")

• ”item/title”のitem下にあるimage/urlのGIF画像URLを抜き出して、天気画像とする– Set imgNode =

xmlDoc.selectNodes("//item[title=contains(title,'"&tomorrow&"')]/image/url")

12

プログラム（sample6.hta）（１）

13

<html><head>

<hta:application border="dialog" scroll="no">

<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">

<title>明日の天気</title>

<script language="VBScript">

Call Window.ResizeTo(200,150+30)

nextDate = DateAdd("d",1,Date)

tomorrow = MonthName(Month(nextDate))&Day(nextDate)&"日("&WeekdayName(Weekday(nextDate),True)&")"

プログラム（sample6.hta）（２）

14

Sub Window_onload

'処理準備xmlFile = "http://weather.livedoor.com/forecast/rss/13/63.xml" '東京Set xmlDoc = CreateObject("Microsoft.XMLDOM")

xmlDoc.async = False

returnCode = xmlDoc.Load(xmlFile)

If returnCode = False Then

MsgBox("読み込みエラー")

Else

Call xmlDoc.setProperty("SelectionLanguage","XPath")

'データ取得Set descriptNodes =

xmlDoc.selectNodes("//item[title=contains(title,'"&tomorrow&"')]/description

")

Set imgNode =

xmlDoc.selectNodes("//item[title=contains(title,'"&tomorrow&"')]/image/url")

プログラム（sample6.hta）（３）

15

'整形line = descriptNodes(0).text

If line = "" Or descriptNodes.length > 1 Then

line = "エラー"

Else

line = "明日、" & line

End If

'出力処理cont.innerHTML = line

mark.src = imgNode(0).text

End If

End Sub

プログラム

16

Sub cont_onClick

location.reload()

End Sub

</script>

</head>

<body>

<div id="cont"></div>

<div align="right"><img id="mark"></div>

</body>

</html>

作業③

• sample6.htaを書き換えて、別の場所の気温が表示できるようにする

–まず、http://weather.livedoor.com/weather_hacks/rss_feed_list.html を見て、見たい地方の気温のRSSファイルへのリンクを取得する

– xmlFile = "http://weather.livedoor.com/forecast/rss/13/63.xml" を変更

17

課題（１）

• 紹介した情報源から、面白いと思ったITに関する技術、新製品、Webサービス、文化、社会についての記事を見つけ、記事を要約して、感想を述べなさい。– 記事はいくつでも可– サンプルファイルを参考にする

• Wordなどのワープロでまとめて、メールで[email protected]に提出

• ファイル名：kadai0427-1-学籍番号.doc(x)• 締切：5/10 18:00まで

18

mailto:[email protected]





課題（２）

• 今回の作業１，２，（３）を試し、実行結果とプログラムをWordなどのワープロでまとめて、メールで[email protected]に提出– それぞれ試して、説明を付ける。– サンプルファイルを参考にする。– 作業３は、できればやってみてください。

• 締切：5/10 18:00まで• ファイル名：kadai0427-2-学籍番号.doc(x)• 実行画面を画像として取得するには

– 取得したいウィンドウをクリック– その後、[ALT]+[PrintScreen]キーでクリップボードにコピーされるので、その後Wordで[Ctrl]+[V]貼り付ける。

19図形が大きい場合は、トリミングや縮小などで調整すること。






Documents

～モバイルを知る～ 日常生活とモバイルコンピューティング · 2011-04-27 · 課題（2） •今回の作業1，2，（3）を試し、実行結果とプログラム

～モバイルを知る～日常生活とモバイルコンピューティング · 2011-04-27 · 課題（2） •今回の作業1，2，（3）を試し、実行結果とプログラム