20140902_KIC専門学校出前講義CGI

Download Report

Transcript 20140902_KIC専門学校出前講義CGI 

特別講義：
体験しようCGI！
神戸情報大学院大学
講師 横山輝明
1
自己紹介
• 自己紹介
– 横山輝明、山口県出身、芦屋在住
– サイバー大学 IT学部 講師
– 奈良先端科学技術大学院大学
情報科学研究科 インターネット工学講座
研究員
• 経歴
– 1995/3 宇部工業高等専門学校 3年次修了
– 2000/3 立命館大学理工学部情報学科 卒業
– 2007/3 奈良先端科学技術大学院大学
情報科学研究科 博士課程 卒業
– 2007/4 サイバー大学 教員
• 専門： インターネット技術 （基盤から応用まで）
– サービス/システム開発、教育工学
– Delay Tolerant Network 技術の利用 （災害、途上国支援）
2
講義紹介
3
今日の予定
• WWWとは
– WWWの仕組み
– URL, HTTP, HTMLについて
– CGIについて
• Rubyとは
– Rubyの紹介
– 式、変数、配列、繰り返し、条件分岐、乱数、日時
• CGIプログラミング演習
– CGIの基本
– プログラム処理
– 応用
4
Raspberry PI
• Raspberry PIとは
– イギリス ラズペリーパイ財団が設計・開発したシ
ングルボードコンピュータ
– Broadcom BCM2835 SoC
CPU, GPU, メモリ等をワンチップ化
– 主に教育用、Linuxが動作
– $35で販売
5
心構え
• 手を動かそう！
– 動かしてから考える
– ためらわない、工夫する
• 考えよう！
– 知識ではなく理解
– 「手順」より「何をしているのか」を把握する
– なぜ？と考える、納得する
• コミュニケーションしよう！
– 疑問に思ったらいつでも尋ねる
– 脱線は大歓迎！
6
グループ分け
• プログラミング詳しい人
– プログラム作ったことがある
• if, for, while 分かる？
– Rubyを触ったことがある
• 自信無い人手を挙げて
– プログラム作ったことがない、よく覚えていない
• 6チーム作ろう
– プログラムしたことある人＆自信無い人はペア
– なるべく混ざろう、知らない人のいるチームへ参加
7
HTTP講義
8
WWW
9
World Wide Web
• 世界規模の文書共有システム
– HyperText文書
– 世界中の文書間でのリンク構造
• 最も一般的なインターネットアプリケーション
– 情報公開/コミュニケーション/商用利用などさま
ざまなアプリケーションが登場
– 巨大なアプリケーションプラットホームへと変化
10
WWW (1)
• ホームページ
– 自由に作成・安価
– 世界中に公開
– 多彩な表現力
– 双方向性
- 島根県立大学-島根県立大学短期大学部
http://www.u-shimane.ac.jp/
11
WWW (2)
• さまざまなサービス
– 双方向性の利用
– 表現力の向上
– CMSとしてシステム化
掲示板: http://www.2ch.net/
チャット: KentWebチャットシステム
http://www.kent-web.com/chat/sample/windy.cgi
Wikipedia: http://a.wikipedia.org/
Mixi: http://www.mixi.jp
12
WWWの誕生
I promised to post a short summary of the
WorldWideWeb project. Mail me with any queries.
WorldWideWeb - Executive Summary
The WWW project merges the techniques of information
retrieval and hypertext to make an easy but powerful
global information system.
The project started with the philosophy that much
academic information should be freely available to
anyone. It aims to allow information sharing within
internationally dispersed teams, and the dissemination
of information by support groups.
1992/11/3時点のCERN Webページ
欧州核物理研究機構
スイスジュネーブ
1991/8/7にTim Berners-Leeが
ネットニュースへ投稿したメッセージ
出典： http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
13
インターネットとWWW
• インターネット
– 世界中に普及した通信基盤
• WWW
– インターネット上の情報公開システム
• WWWコンテンツ
– WWW上で提供されるコンテンツ
– 動的なサービスも提供される
コンテンツ
WWW
インターネット
14
WWW構成要素
15
WWWの構成要素
• 構成要素は３つ
– URL: データの場所を記す方法
– HTTP: データを転送する方法
– HTML: Webページを記述する方法
16
URI (Uniform Resource Identifier)
• HTML文書の場所を表す表記法
– URL（Uniform Resource Locator）とも呼ばれる
• Webページを表現する場合はURL
• その他一般的な表現がURI
– アクセス手段 +
– RFC 3968として定義
http://www.cyber-u.ac.jp/faculty/it/index.html
mailto:[email protected]
tel:+81-120-948-318
17
URI書式
• スキーム部
– 対象リソースへのアクセス手段
– WWWではhttp/https (ファイル取得ではftpが利用されることも)
• リソース部
– 対象リソースの識別子
– WWWではHTML文書
– HTML文書を格納するサーバの所在とサーバ内のファイル格納場所
スキーム部
リソース部
http : //www.u-shimane.ac.jp/faculty/it/index.html
ホスト所在
（DNSからIPアドレス）
ファイルパス
18
HTTP
• Webサーバとブラウザ間での通信プロトコル
– HyperText Transfer Protocol
– HTML文書やその他のファイル伝送に利用
– 通信形態
• クライアントサーバ型
• リクエストレスポンス型
– RFC 2616
19
クライアントサーバ
• 仕事の依頼と遂行を行うコンピュータ
– クライアント： 仕事を依頼
– サーバ： 仕事を遂行
• 非対称な関係
インターネット
20
Webサーバ
• Webサービスを提供す
るコンピュータ
– ＷＷＷシステムで情報
配信を行うコンピュータ
– ＨＴＭＬなどの情報を格
納しており、クライアント
からの要求に従って適
切な情報を送信する
• Webサーバとは
– インターネットのエンド
ノード
– ただのパソコン
21
WWWイメージ
• URI: Webページの場所を記す記法
• HTML: Webページを記述する言語
• HTTP: Webページを転送する通信手順
http://www-u-shimane.ac.jp/index.html
<HTML>
<TITLE>自己紹介</TITLE>
<BODY>
<H1>
名前
</H1>
<P>横山輝明</P>
<H1>
挨拶
</H1>
<P>
みなさん
こんにちは。
<A HREF="http://www.cyber-u.ac.jp/">
サイバー大学
</A>
の横山です。
</P>
</BODY>
</HTML>
② 格納HTMLファイルの取出
GET /index.html HTTP/1.1
① HTTPリクエストの送信
④ 取得HTMLファイルの表示
③ HTTPレスポンスの送信
Webサーバ
インターネット
ブラウザ
（Webクライアント）
22
HTTPリクエスト
• リクエストメッセージ
– クライアントからサーバへデータを要求
– 「GET」命令とアクセスヘッダ（任意の補助情報）
http://www.u-shimane.ac.jp/index.html へアクセスした場合
リクエストメッセージ
GET /index.html HTTP/1.1
Accept: image/gif, image/jpeg, */*
Accept-Language: ja
レスポンスヘッダ
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (Compatible; MSIE 6.0; Windows NT 5.1;)
Host: www.u-shimane.ac.jp
Connection: Keep-Alive
23
HTTPレスポンス
• レスポンスメッセージ
– サーバからクライアントへデータを返信
– レスポンスヘッダとデータそのもの
– レスポンスコード: 200番台成功、400番台失敗
レスポンスメッセージ （レスポンスコード）
HTTP/1.1 200 OK
Date: Wed, 20 Jan 2011 17:16:25 GMT
Server: Apache/1.3.24 (Unix) (Red-Hat/Linux)
Last-Modified: Sun, 03 Dec 2003 12:34:18 GMT
Content-Length: 5121
Keep-Alive: timeout=15, max=100
レスポンスヘッダ
Connection: Keep-Alive
Content-Type: text/html
<html>
:
</html>
データ
24
WWWのHyperText構造
• HyperText構造：文書と文書の関係性
• WWW文書構造
– HTMLで記述された文書
– 他文書への参照をハイパーリンクとして設定
文書
文書
（HTMLで記述された文書）
（HTMLで記述された文書）
アンカー
アンカー
文書
（文書内に被リンク箇所を持
つ場合もある）
フラグメント箇所
25
HTML
• HyperText Markup Language
• WWWの文書記述記法
• タグと呼ばれる命令文
– 「＜」「＞」で囲まれた命令文
– 「＜（開始タグ）＞」「＜／（終了タグ）＞」
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="keywords" content="サイバー大学,サイバー,CU,インターネット大学,吉村作治,吉村教授
,世界遺産学部,世界遺産,エジプト,IT総合学部,ソフトバンク,ソフトバンクのインターネット大学,オンデマン
ド,動画,大学,教育,学部,講座">
<meta name="description" content="サイバー大学。インターネットを使って学ぶ、日本で初めての大
学、2007年4月開学。">
<title>IT総合学部 | サイバー大学</title>
26
HTMLのレンダリング
<HTML>
<TITLE>自己紹介</TITLE>
<BODY>
<H1>
名前
</H1>
<P>横山輝明</P>
<H1>
挨拶
</H1>
<P>
みなさん
こんにちは。
<A HREF="http://www.cyber-u.ac.jp/">
サイバー大学
</A>
の横山です。
</P>
</BODY>
</HTML>
簡単なHTMLファイルの例
• HTMLの特徴
– テキストファイル, タグ
– 意味構造のみを記述
(見出し、リンクなど)
ブラウザ出力例
27
日本初めてのWebページ
• 文部省高エネルギー
加速器研究機構計算科学センター
– 1992年9月30日に開設
– ftp://kekux.kek.jp/kek/html/kek.html （当時）
– 当時 文部省高エネルギー加速器研究機
構計算科学センターに勤務していた森田
洋平氏が開設
28
初期のWebページ
29
Yahoo!ページの変遷
Yahoo!トップページ (1994)
Yahoo!トップページ (2000)
Yahoo!トップページ (2011)
• 画像、動画、Flashの導入
• HTMLの表現力向上
Yahoo!トップページ (1995)
Images: Yahoo's steady home page transformation
http://news.cnet.com/2300-1032_3-6072801-1.html?tag=mncol
30
Trojan room Coffee-Pot
• コーヒー残量確認サービス
– 英ケンブリッジ大学
コンピュータ研究所内の
コーヒーポットの残量表示
– WWW最初期のWebカメラアプ
リケーション
– １９９３年～２００１年
• http://www.cl.cam.ac.uk/coffee/c
offee.html
31
WWWシステム
•
•
•
•
クライアントはURLホスト部からアクセス先サーバアドレスを調べる
クライアントはアクセス先サーバに要求を送信する
アクセス先サーバはデータを返信する
クライアントは受け取ったデータを表示する
<HTML>
<TITLE>自己紹介</TITLE>
<BODY>
<H1>
名前
</H1>
<P>横山輝明</P>
<H1>
挨拶
</H1>
<P>
みなさん
こんにちは。
<A HREF="http://www.cyber-u.ac.jp/">
サイバー大学
</A>
の横山です。
</P>
</BODY>
</HTML>
② HTMLデータを取得
④ 取得HTMLファイルの表示
① HTTPリクエストの送信
③ HTTPレスポンスの返信
ブラウザ
（Webクライアント）
Webサーバ
32
WWWシステム全体像
• WWWにおけるハイパーテキストシステム
クライアント
コンテンツ
コンテンツ
ハイパーリンク
サーバ
コンテンツ
WWW
サーバ
インターネット
サーバ
33
Ruby講義
34
Ruby説明
• Ruby言語
– Ruby（ルビー）は、まつもとゆきひろ（通称Matz）
により開発されたオブジェクト指向スクリプト言語
– 言語仕様が単純で習得が容易
– 簡単な命令で高度な処理が可能
– WindowsやPC-UNIXなどさまざまな環境で利用可
能
35
Rubyインタプリタ
プログラム
Ruby
Ruby言語で書かれたプログラム
みんなにはこのプログラムを書いてもらう
（人間が理解できる言語）
Rubyインタプリタ（翻訳機）
Ruby言語プログラムをコンピュータが理解できる
内容に変換する
（コンピュータが理解する言語）
36
Rubyインタプリタの利用
• Shellから実行例（バージョン表示）
– 「ruby -v」 (version: バージョン)
– rubyのバージョンが表示
• ソースコードの保存と実行
– エディタで編集して任意の名前で保存
– rubyコマンドでプログラムを実行
% ruby (ファイル名)
37
エラー修正
• エラー発生
– エラーメッセージを読む
– 修正して再実行
エラーの行数
この前後にエラーがある
• エラーは当たり前
– 起きてから考える
– 直しながら考える
エラーメッセージ
エラーの意味を説明
38
Ruby基本:
変数
39
変数
• 変数とは
– データを格納しておく箱、変数名という名前を持つ
– 数値や文字などデータ種類によって区別する
– データ種類を型、格納することを代入と呼ぶ
変数名A
データ
データの「格納」や
「取り出し」ができる
40
変数の型
• データには種類がある
– 整数: Interger
– 小数: Float
– 文字列: String
• 数値データ
– 整数と小数、計算式を作ることができる
• 文字列データ
– 文字列、「"～"」で囲んで指定
– さまざまな文字列操作が存在
41
変数の利用例
• 代入方法
変数名 = データ
– 変数名を左、データを右、イコールで結ぶ
– 右辺から左辺へ代入
• 変数への代入例
– 数値変数aに整数12345を代入
数値変数pointに小数1.45を代入
– 文字変数nameに文字列「横山輝明」を代入
a = 12345
b = 100
point = 1.45
name = "横山輝明"
testdata = "文字列データ"
42
画面への表示 (1)
• 表示命令: puts命令
– 文字列や変数内容を画面に表示する
– "～"が文字列、足し算で連結できる
• 文字列は必ず「"」で囲む
• "あいう" + "かきく" → "あいうかきく"
puts("テスト")
a = 12345
puts(a)
name = "横山輝明"
puts("名前は"+name+"です。")
テスト
12345
名前は横山輝明です。
43
画面への表示 (2)
• 書式付き表示命令
– printf命令では表示書式を指定できる
• 「%s」の部分には文字列
• 「%d」の部分には数値
• 「\n」で改行
– 変数へ出力するsprintf命令もある
• 整形結果を変数へ出力
name = "横山輝明"
age = 37
printf("名前は%s、%d才です。\n", name, age)
Printfでの表示指定の中にある、
「%s」「%d」の部分に変数が当てはまる。
変数は左から順番に。
name = "横山輝明"
age = 37
output = sprintf("名前は%s、%d才です。\n", name, age)
puts(output)
名前は横山輝明、37才です
44
Ruby基本:
式
45
変数の操作
• 計算
– 和差積商が利用可能 → 「+」「-」「*」「/」
– 同一の「型」でしか計算できない
• 整数同士、小数同士、文字列同士
• 「型変換」で変換する （後述）
• 文字列処理
– 連結分解、大小文字変換、置換
46
変数の操作例
• 数値
– 計算式を用いて処理できる
– 計算結果をそのまま表示
– 計算結果を変数に代入
a = 12345
b = 100
puts(a*b)
c=a+b
puts(c)
puts(a+100)
• 文字
– 文字同士で連結できる
– 式の順序で文字を連結できる
– 文字列との足し算ができる
firstname = "横山"
lastname = "輝明"
name = firstname + lastname
puts(name+"です")
47
式を利用する
• 右のそれぞれにおいて
– 普通に実行する
– 変数内容を変えてみる
• 赤字の部分を変えて
何が起こるか確かめる
• 内容の変更など
– 計算式を変えてみる
• 黄色の部分を変えてみる
• 別の計算をしてみる
a = 12345
b = 100
puts(a*b)
c=a+b
puts(c)
puts(a+100)
firstname = "横山"
lastname = "輝明"
name = firstname + lastname
puts(name)
puts(firstname+"です")
printf("名前は%sです。\n", name)
48
データ構造：配列
• 一次元で並ぶ番号のついた箱
– コンピュータのメモリそのもの
– 番号を指定してデータ入出力
– Rubyでは角カッコで番号を指定
• 番号でデータ位置を指定、使い方は変数と同じ
• 番号には変数や式を利用可能
x = Array.new
x[0] = 10
puts(x[0])
①
n = 11
x[n] = 10
puts(x[n])
②
③
④
49
データ構造：連想配列
• 名前で管理する箱
– 名前（キー）を指定して内容を読み書き
– Rubyでは角カッコで番号を指定
• 名前でデータ位置を指定、使い方は変数と同じ
• 角カッコに名前を入れる（文字列なのでダブルクオーテーションで囲む）
x = Hash.new
x[“test”] = 10
puts(x[“test”])
abc
xxx
n = “abc”
x[“abc”] = 10
puts(x[“abc”])
123
横山
50
条件分岐
51
条件分岐のイメージ
逐次処理
上から下にひとつづつ実行
処理A
処理B
条件分岐
条件に応じて処理を切り替え
どちらか一方を実行する
処理A
条件X
N
Y
処理C
処理B
処理C
52
if文の説明
• 条件に基づいて処理を分岐させる命令
条件式
Y
N
条件に応じて
処理をスキップ
（するか
しないか）
処理
if (条件式) then
真の時に実行する部分
end
条件式
条件に応じて
処理を切り替え
（どちらか）
N
Y
処理
処理
if (条件式) then
真の時に実行する部分
else
偽の時に実行する部分
end
53
条件式
• 条件式とは
– 条件を記述するための式
– 「真」(true)「偽」(false) が決まる
• 条件式の要素
– 変数、計算式、比較演算子
– 「==」 等しい、「!=」 異なる、
「>=」「<=」 以上/以下、「>」「<」 より大きい/より小さい
• 条件式の例
–
–
–
–
a == 100 : 変数aの内容が100と等しい
b != "横山" : 変数bの内容が「横山」と異なる
x < 123 : 変数xの内容が123より小さい
y >= 456 : 変数yの内容が456以上
54
条件分岐の例
• 条件分岐
– 普通に実行する
– 変数aを101に変更する
– 条件式(レッド)を変更する (例: 「a < 100」)
a = 100
if (a == 100) then
puts(“TRUE”)
puts(“あああ”)
else
puts(“FALSE”)
puts(“いいい”)
end
55
条件分岐の応用例
• 細かな条件分岐の表現
– ① if文を組み合わせる
• thenブロックやelseブロック内でif文
• if~then~else~endの対応関係に注意
– ② 条件式を組み合わせる
• 「and」や「or」の利用
if (条件式1) then
if (条件式2) then
条件式1が真 → 条件式2が真
end
else
if (条件式3) then
条件式1が偽 ＆ 条件式3が真
end
end
if ((条件式1) and (条件式2)) then
条件式1と条件式2が真のとき
else
条件式1と条件式3が真でないとき
end
56
If文の組み合わせ
「else」のなかでif文
条件X
N
条件1
N
Y
Y
処理B
処理C
処理B
条件2
N
Y
if (条件1) then
処理B
else
if (条件2) then
処理X
else
処理Y
end
end
処理X
処理Y
57
繰り返し
58
繰り返し
• 同じ処理を繰り返す方法
– 条件に基づいて繰り返す
– 「カウンタが10になるまで繰り返す」 （＝10回繰り返し）
逐次処理
上から下にひとつづつ実行
繰り返し
条件成立の間は処理を繰り返す
処理A
処理A
処理B
条件Y
N
Y
処理C
処理B
59
for文の説明
• 条件（i in 1..10）の間、処理を繰り返す命令
– doからendの間を繰り返す
– iは1から10まで変化する
– 繰り返し回数を指定
条件
N
Y
処理
for 変数 in 条件 do
処理内容
end
条件が真の間
処理を繰り返し
（何度も実行）
for i in 1..10 do
puts(i)
end
iが1から10まで、puts(i)を繰り返す
i=1 → puts(i)
i=2 → puts(i)
…
i=10 → puts(i)
60
while文の説明
• 条件の間、処理を繰り返す命令
– doからendの間を繰り返す
– さまざまな条件を指定可能
– 条件を自分で作る必要がある（for文との違い）
条件
Y
処理
while (条件) do
処理内容
end
N
条件が真の間
処理を繰り返し
（何度も実行）
i=0
while (i<10) do
puts(i)
i++
end
iが1から10まで、puts(i)を繰り返す
i=1 → puts(i)
i=2 → puts(i)
…
i=10 → puts(i)
61
制御構造について学習
• 繰り返し命令
– for文, while文
– 条件の間繰り返す
– カウンタ変数が変化する （例：iは0から10まで変化）
• 条件分岐
– If文
– 条件に応じて、then/elseのいずれかを実行する
• 確認事項
– 「繰り返し」の意味を理解する
• for文を使うことができるようになる
– 「条件分岐」の意味を理解する
• if文を使うことができるようになる
62
ファイル操作
63
ファイル書き込み
• ファイルへの書き込み
– ファイルをオープン: open命令
• a (append) を指定
– ファイルの最後に追記: puts命令
• オープンしたファイルオブジェクトの指定に注意
– f.puts() 命令、fはオープンしたファイルを表すオブジェクト
text = “abcdefg”
f = open(“test.txt”, “a”)
f.puts(text)
f.close
64
ファイル読み込み
• ファイルへの書き込み
– ファイルをオープン: open命令
• r (read) を指定
– ファイルの1行読み込み: gets命令
• gets命令1回で1行読み込み、複数回で複数行読み込み
• オープンしたファイルオブジェクトの指定に注意
– f.gets() 命令、fはオープンしたファイルを表すオブジェクト
f = open(“test.txt”, “r”)
text = f.gets()
puts(text)
text = f.gets()
puts(text)
f.close
65
その他の命令
66
乱数の取り扱い
• 乱数
– でたらめな数のこと
• 乱数の生成
– rand()命令を使う
– 指定した数までの数字を作る
• 例: rand(100)だと、0~99の数字を作る
number = rand(100)
puts(number)
67
日付の取り扱い
• 日付
– 現在時刻の取得ができる
– Time.now 命令
• 日付の利用
– 変数名 = Time.now で時刻取得
– 変数名.year など指定
• 「year」の部分を変えることができる
• 右図参照のこと
• 例: 日付を表示する例
– a = Time.now
puts(a.day)
tt = Time.now
tt.year
tt.month
tt.day
tt.hour
tt.min
tt.sec
←
←
←
←
←
←
年
月
日
時
分
秒
68
CGI講義
69
WWWシステム
•
•
•
•
クライアントはURLホスト部からアクセス先サーバアドレスを調べる
クライアントはアクセス先サーバに要求を送信する
アクセス先サーバはデータを返信する
クライアントは受け取ったデータを表示する
<HTML>
<TITLE>自己紹介</TITLE>
<BODY>
<H1>
名前
</H1>
<P>横山輝明</P>
<H1>
挨拶
</H1>
<P>
みなさん
こんにちは。
<A HREF="http://www.cyber-u.ac.jp/">
サイバー大学
</A>
の横山です。
</P>
</BODY>
</HTML>
② HTMLデータを取得
④ 取得HTMLファイルの表示
① HTTPリクエストの送信
③ HTTPレスポンスの返信
ブラウザ
（Webクライアント）
Webサーバ
70
Web上でのサービス提供
• インタラクティブ（対話型）のWebサービス
– 操作可能なコンテンツ
– 反応が返ってくるコンテンツ
– ゲーム など
掲示板: http://www.2ch.net/
サイバー大学:
http://www.cyber-u.ac.jp/
71
CGI
• CGI (Common Gateway Interface)の略
• CGIはWebサーバ内で動作させたプログラムの
出力（表示）をブラウザへと伝える機構
– Webサーバが拡張子で判断する
– 例： http://localhost/webp/test.cgi
• プログラムの動作結果をWebページにする
CGI機構
(Common Gateway Interface)
2. プログラム
呼び出し
1. HTTPリクエスト
3. プログラム実行
CGI
プログラム
5. HTTPレスポンス
Webクライアント
（ブラウザ）
HTML
データ
4. HTML生成
Webサーバ
HTML
データ
72
演習: CGI
73
0. sshでリモートアクセス
• Webサーバへアクセス
– sshプロトコルでWebサーバへアクセス
– Webサーバ上で操作, IPアドレス: 210.146.64.152
– team1~team8, パスワードは#teamX!
• ssh (Secure Shell) コマンド
– ネットワーク経由で遠隔端末へアクセスする命令
– telnetの暗号化接続版のようなもの
– 多機能なので、いろいろ勉強するとよい
• Putty
– Windows版sshクライアント
– 検索してダウンロード
• 「putty」で検索、「putty.exe」をダウンロード
74
putty使い方
• puttyを使ったsshアクセス方法
– グループ用セグメントからRPIへアクセス
– PCをグループ用セグメントに接続する
– RPIのIPアドレスへSSHでアクセスする
• 210.146.64.152
75
1. CGIのサンプル
• 作業場所
– ホームディレクトリの public_html/cgi-bin で作業
• team[1-8].rb
– プログラムが文字列を出力 → ブラウザへ送信
– ローカルで実行
– ブラウザからアクセス
• 改造してみる
– 表示内容を変える、printfを複数個使う
#!/usr/bin/ruby
# HTTPレスポンス（データの種類を表す、text/html）
printf("Content-Type: text/html\n\n”)
# ここからHTTPレスポンスのデータ
printf(“123”)
76
CGIプログラム作成の注意
• ファイルの先頭にrubyインタプリタを指定
– #!/usr/bin/ruby
• 出力の先頭でコンテンツ種類を指定
– printf("Content-Type: text/html\n\n”)
– 改行が2回に注意
• ファイル名の拡張子は.rbにする
• ファイルに実行権限
– ls –l で確認、chmod a+x （ファイル名） で指定
#!/usr/bin/ruby
puts("Content-type:text/html”)
puts
（ここから下にメイン処理を記述）
77
2. HTML出力の練習
• HTMLを出力する
– printfで下記のHTML文を出力
– ローカルで実行、ブラウザ経由で閲覧
• 改造する
– HTML文を改変する
• 赤字の部分を変更、文章、リンク先、HTMLタグ追加
– 続く課題でも、HTMLとして表示したい場合は白文字
の部分は出力すること
<html>
<head><title>リンク作成</title></head>
<body>
<a href='http://www.kic.ac.jp'>KICへのリンク</a>
</body>
</html>
78
3. プログラム制御： HTMLタグの整形
• HTMLタグの整形
– 乱数で数値を生成
– 生成した数値からタグ表記を生成
• <body>〜</body>タグの内側に<img src=“testX.jpg”>
• 適当なjpeg画像をtest[0-2].jpgという名前で設置
– wgetコマンドを利用してファイル収集、3つくらい
– printfを利用
• 書式付き出力
• %dの場所に数値を表示
r = rand(3)
printf(”<img src=‘test%d.jpg’>\n", r)
79
4. プログラム制御： 時刻
• 時間の表示
– Rubyで現在時刻を取得
– 取得した時刻を表示
– printfを利用
• 書式付き出力
• %dの場所に数値を表示
– HTMLタグで整形してみる
• 数字の画像素材を使って画像表示
• imgタグで画像ファイルを表示
tt = Time.now
tt.year
tt.month
tt.day
tt.hour
tt.min
tt.sec
←
←
←
←
←
←
年
月
日
時
分
秒
t = Time.now
printf("%d %d %d\n", t.year, t.month, t.day)
printf("%d %d %d\n", t.hour, t.min, t.sec)
80
5. プログラム制御： 制御構造
• 制御構造の利用
– if文の利用, for文の利用
– サイコロ振って「丁」「半」表示
• 丁：偶数、半：奇数
– 改造
• サイコロ3つ、for文で3回
• HTMLタグで画像表示
# 乱数, rand(6)で0~5を作って+1
r = rand(6)+1
if (r%2 == 0) then
printf(“丁”)
else
printf(“半”)
end
81
6. HTTPリクエスト表示
• HTTPリクエスト情報を表示
– ENV連想配列に格納済
– p命令で全部表示
• デバッグ用の強力な表示
• 配列内を一覧できる
– 利用方法
• ENV[“REMOTE_ADDR”] 等
• 連想配列として利用可能
#!/usr/bin/ruby
puts "Content-type:text/html"
puts
p ENV
{"HTTP_HOST"=>"192.168.99.125",
"HTTP_CONNECTION"=>"keep-alive",
"HTTP_CACHE_CONTROL"=>"max-age=0",
"HTTP_ACCEPT"=>"text/html,application/xhtml+xml,applicatio
n/xml;q=0.9,image/webp,*/*;q=0.8",
"HTTP_USER_AGENT"=>"Mozilla/5.0 (Macintosh; Intel Mac OS
X 10_8_5) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/37.0.2062.94 Safari/537.36",
"HTTP_ACCEPT_ENCODING"=>"gzip,deflate,sdch",
"HTTP_ACCEPT_LANGUAGE"=>"ja,en-US;q=0.8,en;q=0.6",
"PATH"=>"/usr/local/bin:/usr/bin:/bin",
"SERVER_SIGNATURE"=>"
Apache/2.2.22 (Debian) Server at 192.168.99.125 Port 80
\n", "SERVER_SOFTWARE"=>"Apache/2.2.22 (Debian)",
"SERVER_NAME"=>"192.168.99.125",
"SERVER_ADDR"=>"192.168.99.125", "SERVER_PORT"=>"80",
"REMOTE_ADDR"=>"192.168.99.128",
"DOCUMENT_ROOT"=>"/var/www",
"SERVER_ADMIN"=>"webmaster@localhost",
"SCRIPT_FILENAME"=>"/home/pi/public_html/cgibin/request.rb", "REMOTE_PORT"=>"59309",
"GATEWAY_INTERFACE"=>"CGI/1.1",
"SERVER_PROTOCOL"=>"HTTP/1.1",
"REQUEST_METHOD"=>"GET", "QUERY_STRING"=>"",
"REQUEST_URI"=>"/~pi/cgi-bin/request.rb",
"SCRIPT_NAME"=>"/~pi/cgi-bin/request.rb”}
82
7. データアップロード
• クライアントからサーバへのデータ送信
– ブラウザ側からサーバへデータを伝える
– ユーザの選択や入力情報など
– アップロード用のHTMLページを用意（FORMタグ）
• ~teamX/public_html/ に設置
<form action=”cgi-bin/XXX.rb" method="post">
名前：<input type="text" name="name" size="30”> <br>
性別：
<input type="radio" name=”gender" value="male"> 男
<input type=“radio” name=”gender“ value=”female“> 女 <br>
メッセージ：<br>
<textarea name=”message" rows="4" cols="40"></textarea> <br>
<input type="submit" value="送信">
<input type="reset" value="リセット">
</form>
HTMLでFORMタグを用意
・呼び出すCGIプログラム
cgi-bin/XXX.rb
・通知方法を指定
post/get (後述)
・データ名を指定
name, gender, message
83
7. データアップロード
• GET利用
– HTTPリクエストURLにデータを組み込んで通知
• 例： http://xxx.jp/~team1/abc.cgi?text=hello&id=ytel
• textデータを「hello」、idデータを「ytel」として通知
– 検索の指示などで利用、短いデータしかやりとりでき
ない
– 日本語などは文字コードでやりとり（URLエンコード）
https://www.google.co.jp/search?q=%E7%A5%9E%E6%88%B8%E6%83%85%E5%A0%B1%
E5%A4%A7%E5%AD%A6%E9%99%A2%E5%A4%A7%E5%AD%A6&oq=%E7%A5%9E%E6%8
8%B8%E6%83%85%E5%A0%B1%E5%A4%A7%E5%AD%A6%E9%99%A2%E5%A4%A7%E5%
AD%A6&aqs=chrome..69i57j69i61l3j69i65j0.4456j0j7&sourceid=chrome&es_sm=119&ie
=UTF-8
84
7. データアップロード
• POST利用
– HTTPリクエスト本体にてデータを通知
– リクエスト送信用のHTMLページが必要（FORMタグを利用）
• データ受け取り方 （CGIプログラム側）
– CGIライブラリを利用
– CGIオブジェクトにデータ
– FORMタグで指定した名前でデータ取得
#!/usr/bin/ruby
require 'cgi’
puts "Content-type:text/html"
puts
# CGIオブジェクトobjを作成
obj = CGI.new
p obj.params
puts(obj.params[“name”])
85
やってみよう
•
基本編
– これまでのプログラムの改造
– (1) スロットゲーム
•
3つの乱数を作成して、数字の画像ファイルを表示
– (2) 時計サービス
•
•
時刻情報を取得して、数字の画像ファイルを表示
応用編1
– (3) いつ、どこで、誰が、何をしたゲーム
•
いつ、どこで、誰が、何をしたのかを表示
– (4) アクセス判定
•
•
HTTPリクエストデータを用いて機種判別
iPhoneのときには何か表示など
– (5) アクセスカウンタ
•
•
プログラム起動毎に回数をファイルに記録
応用編2
– (6) 掲示板
•
•
掲示板htmlからformでデータをpost、ファイルに記録
ファイルから書き込み一覧を表示
86
ヒント
• (1) スロットゲーム
– 3つの乱数を作成して、数字の画像ファイルを表示
• 数字の画像ファイルを用意
• rand命令で乱数を作成
• printf命令で画像ファイルを表示するHTMLタグを表示
– imgタグを利用: <img src=(ファイル名)>
• (2) 時計サービス
– 時刻情報を取得して、数字の画像ファイルを表示
• Time.now命令で時刻を取得
• printf命令で画像ファイルを表示するHTMLタグを表示
– imgタグを利用: <img src=(ファイル名)>
87
ヒント： (3) いつどこで誰が何をした
• 応用：「いつ、どこで、誰が、何をした」
– 配列、rand、printfを利用
– 「いつ」「どこで」「誰が」「何をした」ゲーム
– CGIに組み込んでみよう
# 配列にデータが格納
when = Array.new
where = Array.new
who = Array.new
what = Array.new
# 配列のデータを利用
r1=rand(X)
r2=rand(X)
r3=rand(X)
r4=rand(X)
when = [“昨日”, “今日”, ... ]
where = [“KICで”, “三宮で”, ... ]
who = [“俺が”, “山田が”, ... ]
what = [“食事した”, “踊った”, ... ]
printf(“%s %s %s %s\n”,
when[r1], where[r2], who[r3], what[r4])
88
ヒント: (4) アクセス判定
• アクセス元を判定して何か処理
– ENV環境変数を利用
– USER_AGENTを見て機種判定など
• Macintoshが含まれていたら「こんにちはMac」など
#!/usr/bin/ruby
puts "Content-type:text/html"
puts
if (ENV[“HTTP_USER_AGENT”].index(“検索ワード”)) then
検索ワードに一致する場合
end
p ENV[“HTTP_USER_AGENT”]
89
ヒント: (5) アクセスカウンタ
• ユーザーからのアクセス数を記録
– ファイルにアクセス数を記録
• counterファイルを用意、内容に「0」
• chmod a+rw counter
– アクセスがあったら
ファイルからアクセス数読み込み
– アクセス数を加算して
ファイルに書き込み
# アクセス数の読み込み
f=open("counter", "r")
n = f.gets
count = n.to_i
f.close
# アクセス数の表示
puts(count)
# アクセス数の書き込み
output = sprintf("%d", count+1)
f=open("counter", "w")
f.puts(output)
f.close
90
ヒント： (6) 掲示板
• FORM用のHTMLページを作成
– 入力欄の用意、データ名の指定、cgiプログラム
の指定
• CGIプログラムの作成
– FORMからのデータを受け取るプログラム
• データの受け取り方、受け取ったデータをファイル保
存
– 保存したデータを表示するプログラム
• ファイルからデータを読み込んで表示
91
本当の戦いはこれから！
• Rubyを活用する
– Rubyを手元にもインストールしてみる
– プログラミングに慣れる
• CGIを活用する
– 今回の課題を自作する
– オリジナルなプログラム作成に挑戦する
• 研究する
– Webセキュリティ
92
おつかれさま！
• いつでも連絡どうぞ
– 大学院にいます
– 連絡もどうぞ、[email protected]、Facebook
• やりたいこともどうぞ
– 勉強、開発、研究などなど
– 月一で勉強会開催中
93
94
95
演習: スクレイピング
96
スクレイピング
• スクレイピングとは？
– Webサイトの情報を抽出する技術
– ブラウザの代わりにプログラムからWebアクセス
• スクレイピング応用
– 天気予報や株価などを抜き出して通知
– 情報収集の自動化、継続的に収集
97
スクレイピングのサンプル
• sample_scraping01.rb
– サイトにアクセスしてタイトルを取得する例
– doc. ... も試してみよう
# URLにアクセスするためのライブラリの読み込み
require 'open-uri'
# Nokogiriライブラリの読み込み
require 'nokogiri'
# スクレイピング先のURL
url = 'http://www.yahoo.co.jp/'
charset = nil
html = nil
open(url) do |f|
charset = f.charset # 文字種別を取得
html = f.read # htmlを読み込んで変数htmlに渡す
end
# htmlをパース(解析)してオブジェクトを生成
doc = Nokogiri::HTML.parse(html, nil, charset)
# タイトルを表示
p doc.title
98
スクレイピングの実験
• 任意のタグを取り出す
– xpathを使ってタグや属性を指定
#h2タグでclassが「title」のものを表示
puts doc.xpath("//h2[@class='title']")
#リンク先のURLを抜き出す
# aタグを取り出す → その結果をひとつづつ確認（item） → href部分を表示
doc.xpath('//a').each do |item|
puts item[:href]
end
# 画像ファイルを保存する
# imgタグを取り出す → その結果をひとつづつ確認（item） → src部分を取得
# src部分で指定されたURLからデータ取得して保存
doc.xpath('//a').each do |item|
puts item[:href]
end
99
データ保存方法
100
今後の勉強
• Rubyを活用する
– Rubyを手元にもインストールしてみる
– 手元からスクレイピングしてみる
• スクレイピングを活用する
– アプリケーションを作ってみる、コマンドライン、GUI
– サーバ側で継続的な情報収集に挑戦する
• より高度なスクレイピングのために
– サーバ上で動作させる方法を調べる
– Xpathを勉強する
– メール、twitter等、他サービスとの連携を考える
101
参考
• ウェブスクレイピング - Wikipedia
– http://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E
3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83
%B3%E3%82%B0
• Nokogiri を使った Rubyスクレイピング [初心者向けチュートリアル]
– http://morizyun.github.io/blog/ruby-nokogiri-scraping-tutorial/
• スクレイピングのためのNokogiri利用メモ
– http://d.hatena.ne.jp/otn/20090509/p1
• Ruby + Nokogiri で 気象庁スクレイピング
– http://cockscomb.info/scrape_kishocho_with_ruby_and_nokogiri/
• - [Ruby] Nokogiriで、Wikipediaの記事をパースする
– http://beyond.cocolog-nifty.com/akutoku/2009/04/rubynokogiriwi.html
• ああ
102
103
• 2日火15時〜18時の部屋確保
– 30人
• 会場ネットワーク用意
– WiFi + RPI
– インターネットアクセス＆RPIアクセス可能に
• RPIセットアップ
– Apache, Ruby
– グローバルセグメント
– 6チーム分、ユーザ作成
104