~モバイルを知る~ 日常生活とモバイルコンピューティング ·...
TRANSCRIPT
テーマ研究会(2011/04/27)~ Webアプリ・プログラミング入門(2)~
政策情報学部
渡辺恭人
資料ページ: 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)(1)
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)(2)
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)(3)
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)(1)
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)(2)
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)(3)
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
課題(1)
• 紹介した情報源から、面白いと思ったITに関する技術、新製品、Webサービス、文化、社会についての記事を見つけ、記事を要約して、感想を述べなさい。– 記事はいくつでも可– サンプルファイルを参考にする
• Wordなどのワープロでまとめて、メールで[email protected]に提出
• ファイル名:kadai0427-1-学籍番号.doc(x)• 締切:5/10 18:00まで
18
課題(2)
• 今回の作業1,2,(3)を試し、実行結果とプログラムをWordなどのワープロでまとめて、メールで[email protected]に提出– それぞれ試して、説明を付ける。– サンプルファイルを参考にする。– 作業3は、できればやってみてください。
• 締切:5/10 18:00まで• ファイル名:kadai0427-2-学籍番号.doc(x)• 実行画面を画像として取得するには
– 取得したいウィンドウをクリック– その後、[ALT]+[PrintScreen]キーでクリップボードにコピーされるので、その後Wordで[Ctrl]+[V]貼り付ける。
19図形が大きい場合は、トリミングや縮小などで調整すること。