テーマ研究会 (2011/04/27) ~ Web アプリ プログラミング入門 (2)~ 政策情報学部 渡辺恭人 riho-m@cuc.ac.jp 資料ページ : http://www.cuc.ac.jp/~riho-m/rg11/
作業 1: 前回分を少し改造 1 行目の place = 那覇 の 那覇 の部分を他の地名に変えてみる 南西諸島地域以外の場合は 2 行目も変更する必要がある xmlfile = http://weather.livedoor.com/forecast/rss/amedas/temp/1 0/47.xml http://weather.livedoor.com/weather_hacks/rss_feed_list. html を参照する 気温をクリック メニューバーの 表示 ソース をクリックして確認 2
別のサンプル もう少し凝った表示にする 文字のサイズを大きくする 文字に色をつける 背景色を設定する 日時も表示する ブラウザの機能を利用する HTA(HyperText Applicatio ns) 化する クリックすると再読み込み 3
サンプル (sample5.hta)(1) <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") 4
サンプル (sample5.hta)(2) ' データ取得 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 5
サンプル (sample5.hta)(3) 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;textalign:center;cursor:hand} div#nowtime {color:#fff;text-align:right} </style> </head> <body> <div id="cont"></div> <div id="nowtime"></div> </body> </html> 6
作業 2 sample5.hta を書き換えて 別の場所の気温が表示できるようにする まず http://weather.livedoor.com/weather_hacks/rss_f eed_list.html を見て 見たい地方の気温の RSS ファイルへのリンクを取得する place = 船橋 を変更 7
応用 天気予報 Web クライアントを作る 表示はシンプル 天気を示す画像も加える 元になる情報の場所 ( 東京の場合 ) http://weather.livedoor.com/forecast/rss/13/63.x ml 他の地域も http://weather.livedoor.com/weather_hacks/rss_f eed_list.html から選べる 8
RSS の中身 9
ポイント 天気予報だから 翌日 ( 明日 ) の情報を取得したい 1 明日の日付 を文字列で作成 2 明日の日付に対応した item/title の行を探す item/title の item 下にある description を天気予報の文章として抜き出す item/title の item 下にある image/url の GIF 画像 URL を抜き出して 天気画像とする 10
1 明日の日付 を文字列で作成 VBScript で作成 nextdate = DateAdd("d",1,Date) 今日の日付の 日 に 1 を加える tomorrow = MonthName(Month(nextDate))&Day(nextDate)&" 日 ("&WeekdayName(Weekday(nextDate),True)&") 明日の日付の文字列を MonthName 関数と Day 関数と WeekdayName 関数の出力をつないで作成 11
2 明日の日付に対応した 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) <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)&")" 13
プログラム (sample6.hta)(2) 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") 14
プログラム (sample6.hta)(3) ' 整形 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 15
プログラム Sub cont_onclick location.reload() End Sub </script> </head> <body> <div id="cont"></div> <div align="right"><img id="mark"></div> </body> </html> 16
作業 3 sample6.hta を書き換えて 別の場所の気温が表示できるようにする まず http://weather.livedoor.com/weather_hacks/rss_f eed_list.html を見て 見たい地方の気温の RSS ファイルへのリンクを取得する xmlfile = "http://weather.livedoor.com/forecast/rss/13/63.x ml" を変更 17
課題 (1) 紹介した情報源から 面白いと思った IT に関する技術 新製品 Web サービス 文化 社会についての記事を見つけ 記事を要約して 感想を述べなさい 記事はいくつでも可 サンプルファイルを参考にする Word などのワープロでまとめて メールで rihom-rg11@cuc.ac.jp に提出 ファイル名 :kadai0427-1- 学籍番号.doc(x) 締切 :5/10 18:00 まで 18
課題 (2) 今回の作業 1,2,(3) を試し 実行結果とプログラムを Word などのワープロでまとめて メールで riho-mrg11@cuc.ac.jp に提出 それぞれ試して 説明を付ける サンプルファイルを参考にする 作業 3 は できればやってみてください 締切 :5/10 18:00 まで ファイル名 :kadai0427-2- 学籍番号.doc(x) 実行画面を画像として取得するには 取得したいウィンドウをクリック その後 [ALT]+[PrintScreen] キーでクリップボードにコピーされるので その後 Word で [Ctrl]+[V] 貼り付ける 図形が大きい場合は トリミングや縮小などで調整すること 19