～モバイルを知る～日常生活とモバイルコンピューティング

Size: px

Start display at page:

Download "～モバイルを知る～日常生活とモバイルコンピューティング"

えりかこしの
6 years ago
Views:

1 テーマ研究会 (2011/04/27) ~ Web アプリプログラミング入門 (2)~ 政策情報学部渡辺恭人 riho-m@cuc.ac.jp 資料ページ :

2 作業 1: 前回分を少し改造 1 行目の place = 那覇の那覇の部分を他の地名に変えてみる南西諸島地域以外の場合は 2 行目も変更する必要がある xmlfile = 0/47.xml html を参照する気温をクリックメニューバーの表示ソースをクリックして確認 2

3 別のサンプルもう少し凝った表示にする文字のサイズを大きくする文字に色をつける背景色を設定する日時も表示するブラウザの機能を利用する HTA(HyperText Applicatio ns) 化するクリックすると再読み込み 3

4 サンプル (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 = " Set xmldoc = CreateObject("Microsoft.XMLDOM") xmldoc.async = False returncode = xmldoc.load(xmlfile) If returncode = False Then MsgBox(" 読み込みエラー ") Else Call xmldoc.setproperty("selectionlanguage","xpath") 4

5 サンプル (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

6 サンプル (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

7 作業 2 sample5.hta を書き換えて別の場所の気温が表示できるようにするまず eed_list.html を見て見たい地方の気温の RSS ファイルへのリンクを取得する place = 船橋を変更 7

8 応用天気予報 Web クライアントを作る表示はシンプル天気を示す画像も加える元になる情報の場所 ( 東京の場合 ) ml 他の地域も eed_list.html から選べる 8

9 RSS の中身 9

10 ポイント天気予報だから翌日 ( 明日 ) の情報を取得したい 1 明日の日付を文字列で作成 2 明日の日付に対応した item/title の行を探す item/title の item 下にある description を天気予報の文章として抜き出す item/title の item 下にある image/url の GIF 画像 URL を抜き出して天気画像とする 10

11 1 明日の日付を文字列で作成 VBScript で作成 nextdate = DateAdd("d",1,Date) 今日の日付の日に 1 を加える tomorrow = MonthName(Month(nextDate))&Day(nextDate)&" 日 ("&WeekdayName(Weekday(nextDate),True)&") 明日の日付の文字列を MonthName 関数と Day 関数と WeekdayName 関数の出力をつないで作成 11

12 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

13 プログラム (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

14 プログラム (sample6.hta)(2) Sub Window_onload ' 処理準備 xmlfile = " ' 東京 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

15 プログラム (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

16 プログラム Sub cont_onclick location.reload() End Sub </script> </head> <body> <div id="cont"></div> <div align="right"><img id="mark"></div> </body> </html> 16

17 作業 3 sample6.hta を書き換えて別の場所の気温が表示できるようにするまず eed_list.html を見て見たい地方の気温の RSS ファイルへのリンクを取得する xmlfile = " ml" を変更 17

18 課題 (1) 紹介した情報源から面白いと思った IT に関する技術新製品 Web サービス文化社会についての記事を見つけ記事を要約して感想を述べなさい記事はいくつでも可サンプルファイルを参考にする Word などのワープロでまとめてメールでに提出ファイル名 :kadai 学籍番号.doc(x) 締切 :5/10 18:00 まで 18

19 課題 (2) 今回の作業 1,2,(3) を試し実行結果とプログラムを Word などのワープロでまとめてメールでに提出それぞれ試して説明を付けるサンプルファイルを参考にする作業 3 はできればやってみてください締切 :5/10 18:00 までファイル名 :kadai 学籍番号.doc(x) 実行画面を画像として取得するには取得したいウィンドウをクリックその後 [ALT]+[PrintScreen] キーでクリップボードにコピーされるのでその後 Word で [Ctrl]+[V] 貼り付ける図形が大きい場合はトリミングや縮小などで調整すること 19

～モバイルを知る～日常生活とモバイルコンピューティング

～モバイルを知る～日常生活とモバイルコンピューティング政策情報学部渡辺恭人 riho-m@cuc.ac.jp 作業 1: 前回分を少し改造 1 行目の place = 那覇の那覇の部分を他の地名に変えてみる南西諸島地域以外の場合は 2 行目も変更する必要がある xmlfile = http://weather.livedoor.com/forecast/rss/amedas/temp/ 10/47.xml http://weather.livedoor.com/weather_hacks/rss_feed_lis

～モバイルを知る～ 日常生活とモバイルコンピューティング

～モバイルを知る～日常生活とモバイルコンピューティング