特別講義： 体験しよう cgi ！
DESCRIPTION
特別講義： 体験しよう CGI ！. 神戸情報大学院大学 講師 横山輝明. 自己紹介. 自己紹介 横山輝明 、 山口県出身 、 芦屋 在住 サイバー大学 IT学部 講師 奈良先端科学技術大学院大学 情報科学研究科 インターネット工学講座 研究員 経歴 1995/3 宇部工業高等専門学校 3 年次修了 2000/3 立命館大学理工学部情報学科 卒業 2007/3 奈良先端科学技術大学院大学 情報科学研究科 博士課程 卒業 2007/4 サイバー大学 教員 専門 ： インターネット技術 （基盤から応用まで） サービス / システム開発、 教育工学 - PowerPoint PPT PresentationTRANSCRIPT
特別講義：体験しよう 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
9
WWW
10
World Wide Web
• 世界規模の文書共有システム– HyperText 文書– 世界中の文書間でのリンク構造
• 最も一般的なインターネットアプリケーション– 情報公開 / コミュニケーション / 商用利用な
どさまざまなアプリケーションが登場–巨大なアプリケーションプラットホームへと
変化
11
WWW (1)
• ホームページ– 自由に作成・安価– 世界中に公開–多彩な表現力–双方向性
- 島根県立大学 -島根県立大学短期大学部http://www.u-shimane.ac.jp/
12
WWW (2)
• さまざまなサービス–双方向性の利用–表現力の向上– CMS としてシステム化
掲示板 : http://www.2ch.net/
チャット : KentWeb チャットシステムhttp://www.kent-web.com/chat/sample/windy.cgi
Mixi: http://www.mixi.jpWikipedia: http://a.wikipedia.org/
13
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.
1991/8/7 に Tim Berners-Lee がネットニュースへ投稿したメッセー
ジ
1992/11/3 時点の CERN Web ページ
欧州核物理研究機構スイスジュネーブ
出典： http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
14
インターネットと WWW• インターネット
– 世界中に普及した通信基盤• WWW
– インターネット上の情報公開システム• WWW コンテンツ
– WWW 上で提供されるコンテンツ– 動的なサービスも提供される
インターネット
WWW
コンテンツ
15
WWW 構成要素
16
WWW の構成要素• 構成要素は３つ
– URL: データの場所を記す方法– HTTP: データを転送する方法– HTML: Web ページを記述する方法
17
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
18
URI 書式• スキーム部
– 対象リソースへのアクセス手段– WWW では http/https (ファイル取得では ftp が利用されること
も )• リソース部
– 対象リソースの識別子– WWW では HTML 文書– HTML 文書を格納するサーバの所在とサーバ内のファイル格納場所
http : //www.u-shimane.ac.jp/faculty/it/index.html
スキーム部 リソース部
ホスト所在（ DNS から IP アドレ
ス）
ファイルパス
19
HTTP
• Web サーバとブラウザ間での通信プロトコル– HyperText Transfer Protocol– HTML 文書やその他のファイル伝送に利用–通信形態
• クライアントサーバ型• リクエストレスポンス型
– RFC 2616
20
クライアントサーバ• 仕事の依頼と遂行を行うコンピュータ
– クライアント： 仕事を依頼– サーバ： 仕事を遂行
• 非対称な関係
インターネット
21
Web サーバ• Web サービスを提供す
るコンピュータ– ＷＷＷシステムで情報配
信を行うコンピュータ– ＨＴＭＬなどの情報を格納しており、クライアントからの要求に従って適切な情報を送信する
• Web サーバとは– インターネットのエン
ドノード– ただのパソコン
22
WWW イメージ• URI: Web ページの場所を記す記法• HTML: Web ページを記述する言語• HTTP: Web ページを転送する通信
手順
インターネット
① HTTP リクエストの送信
③ HTTPレスポンスの送信
ブラウザ（Webクライアン
ト）
Webサーバ④ 取得 HTMLファイルの表示
② 格納 HTMLファイルの取出
<HTML><TITLE>自己紹介</TITLE><BODY><H1>
名前</H1><P>横山輝明</P><H1>
挨拶</H1><P>
みなさんこんにちは。<A HREF="http://www.cyber-u.ac.jp/">
サイバー大学</A>の横山です。</P>
</BODY></HTML>
GET /index.html HTTP/1.1
http://www-u-shimane.ac.jp/index.html
23
HTTP リクエスト• リクエストメッセージ
– クライアントからサーバへデータを要求– 「 GET 」命令とアクセスヘッダ（任意の補助
情報）
GET /index.html HTTP/1.1Accept: image/gif, image/jpeg, */*Accept-Language: jaAccept-Encoding: gzip, deflateUser-Agent: Mozilla/4.0 (Compatible; MSIE 6.0; Windows NT 5.1;)Host: www.u-shimane.ac.jpConnection: Keep-Alive
http://www.u-shimane.ac.jp/index.html へアクセスした場合リクエストメッセージ
レスポンスヘッダ
24
HTTPレスポンス• レスポンスメッセージ
– サーバからクライアントへデータを返信– レスポンスヘッダとデータそのもの– レスポンスコード : 200番台成功、 400番台失敗
HTTP/1.1 200 OKDate: Wed, 20 Jan 2011 17:16:25 GMTServer: Apache/1.3.24 (Unix) (Red-Hat/Linux)Last-Modified: Sun, 03 Dec 2003 12:34:18 GMTContent-Length: 5121Keep-Alive: timeout=15, max=100Connection: Keep-AliveContent-Type: text/html
<html> :</html>
レスポンスメッセージ （レスポンスコード）
レスポンスヘッダ
データ
25
WWW の HyperText 構造
• HyperText 構造：文書と文書の関係性• WWW 文書構造
– HTML で記述された文書–他文書への参照をハイパーリンクとして設定
文書（ HTML で記述された文書）
文書（ HTML で記述された文書）
文書（文書内に被リンク箇所を持つ場合もある）
フラグメント箇所
アンカー
アンカー
26
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>
27
HTML のレンダリング
• HTML の特徴– テキストファイル , タグ– 意味構造のみを記述
(見出し、リンクなど )
簡単な HTMLファイルの例ブラウザ出力例
<HTML> <TITLE>自己紹介</TITLE> <BODY> <H1> 名前 </H1> <P>横山輝明</P> <H1> 挨拶 </H1> <P> みなさん こんにちは。 <A HREF="http://www.cyber-u.ac.jp/"> サイバー大学 </A> の横山です。 </P> </BODY></HTML>
28
日本初めての Web ページ
• 文部省高エネルギー加速器研究機構計算科学センター– 1992 年 9月 30 日に開設– ftp://kekux.kek.jp/kek/html/kek.html （当時）– 当時 文部省高エネルギー加速器研究機
構計算科学センターに勤務していた森田洋平氏が開設
29
初期の Web ページ
30
Yahoo! ページの変遷
Yahoo! トップページ (1995)
Yahoo! トップページ (2000)
Yahoo! トップページ (2011)
• 画像、動画、 Flash の導入• HTML の表現力向上
Images: Yahoo's steady home page transformationhttp://news.cnet.com/2300-1032_3-6072801-1.html?tag=mncol
Yahoo! トップページ (1994)
31
Trojan room Coffee-Pot• コーヒー残量確認サービス
– 英ケンブリッジ大学コンピュータ研究所内のコーヒーポットの残量表示
– WWW 最初期の Webカメラアプリケーション
– １９９３年～２００１年• http://www.cl.cam.ac.uk/coffee/c
offee.html
32
WWW システム• クライアントは URLホスト部からアクセス先サーバアドレスを調べ
る• クライアントはアクセス先サーバに要求を送信する• アクセス先サーバはデータを返信する• クライアントは受け取ったデータを表示する
① HTTP リクエストの送信
③ HTTPレスポンスの返信
ブラウザ（Webクライアン
ト）Webサーバ
④ 取得 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データを取得
33
WWW システム全体像• WWW におけるハイパーテキストシステム
インターネット
WWW
コンテンツコンテンツコンテンツハイパーリンク
クライアント
サーバサーバ サーバ
34
Ruby 講義
35
Ruby説明• Ruby言語
– Ruby （ルビー）は、まつもとゆきひろ（通称Matz ）により開発されたオブジェクト指向スクリプト言語
–言語仕様が単純で習得が容易–簡単な命令で高度な処理が可能– Windowsや PC-UNIX などさまざまな環境で利
用可能
36
Ruby インタプリタ
Ruby
プログラムRuby言語で書かれたプログラム
みんなにはこのプログラムを書いてもらう（人間が理解できる言語）
Ruby インタプリタ（翻訳機）Ruby言語プログラムをコンピュータが理解で
きる内容に変換する（コンピュータが理解する言語）
37
Ruby インタプリタの利用• Shell から実行例（バージョン表示）
– 「 ruby -v 」 (version: バージョン ) – ruby のバージョンが表示
• ソースコードの保存と実行– エディタで編集して任意の名前で保存– ruby コマンドでプログラムを実行
% ruby (ファイル名 )
エラー修正• エラー発生
–エラーメッセージを読む– 修正して再実行
• エラーは当たり前–起きてから考える–直しながら考える
38
エラーの行数この前後にエラーがある
エラーメッセージエラーの意味を説明
39
Ruby 基本 :変数
40
変数• 変数とは
– データを格納しておく箱、変数名という名前を持つ– 数値や文字などデータ種類によって区別する– データ種類を型、格納することを代入と呼ぶ
変数名 A
データの「格納」や「取り出し」ができる
データ
41
変数の型• データには種類がある
– 整数 : Interger– 小数 : Float– 文字列 : String
• 数値データ– 整数と小数、計算式を作ることができる
• 文字列データ– 文字列、「 "～ " 」で囲んで指定– さまざまな文字列操作が存在
42
変数の利用例• 代入方法
– 変数名を左、データを右、イコールで結ぶ– 右辺から左辺へ代入
• 変数への代入例– 数値変数 a に整数 12345 を代入
数値変数 point に小数 1.45 を代入– 文字変数 name に文字列「横山輝明」を代入
a = 12345b = 100point = 1.45
name = " 横山輝明 "testdata = " 文字列データ "
変数名 = データ
43
画面への表示 (1)
• 表示命令 : puts 命令– 文字列や変数内容を画面に表示する– "～ " が文字列、足し算で連結できる
• 文字列は必ず「 " 」で囲む• " あいう " + " かきく " → " あいうかきく "
puts(" テスト ")
a = 12345puts(a)
name = " 横山輝明 "puts("名前は "+name+" です。")
テスト12345名前は横山輝明です。
44
画面への表示 (2)• 書式付き表示命令
– printf 命令では表示書式を指定できる• 「 %s 」の部分には文字列• 「 %d 」の部分には数値• 「 \n 」で改行
– 変数へ出力する sprintf 命令もある• 整形結果を変数へ出力
名前は横山輝明、 37才です
name = " 横山輝明 "age = 37printf("名前は %s 、 %d才です。 \n", name, age)
Printf での表示指定の中にある、「 %s 」「 %d 」の部分に変数が当てはまる。変数は左から順番に。
name = " 横山輝明 "age = 37output = sprintf("名前は %s 、 %d才です。 \n", name, age)puts(output)
45
Ruby 基本 :式
46
変数の操作• 計算
–和差積商が利用可能 → 「 + 」「 - 」「 * 」「 / 」
–同一の「型」でしか計算できない• 整数同士、小数同士、文字列同士• 「型変換」で変換する （後述）
• 文字列処理–連結分解、大小文字変換、置換
47
変数の操作例• 数値
– 計算式を用いて処理できる
– 計算結果をそのまま表示– 計算結果を変数に代入
• 文字– 文字同士で連結できる– 式の順序で文字を連結できる– 文字列との足し算ができる
a = 12345b = 100
puts(a*b)c = a + bputs(c)puts(a+100)
firstname = " 横山 "lastname = " 輝明 "name = firstname + lastname
puts(name+" です ")
48
式を利用する• 右のそれぞれにおいて
–普通に実行する– 変数内容を変えてみる
•赤字の部分を変えて何が起こるか確かめる
•内容の変更など– 計算式を変えてみる
•黄色の部分を変えてみる• 別の計算をしてみる
a = 12345b = 100
puts(a*b)c = a + bputs(c)puts(a+100)
firstname = " 横山 "lastname = " 輝明 "name = firstname + lastname
puts(name)puts(firstname+" です ")printf("名前は %s です。 \n", name)
49
データ構造：配列• 一次元で並ぶ番号のついた箱
– コンピュータのメモリそのもの– 番号を指定してデータ入出力– Ruby では角カッコで番号を指定
• 番号でデータ位置を指定、使い方は変数と同じ• 番号には変数や式を利用可能
① ② ③ ④
x = Array.newx[0] = 10puts(x[0])
n = 11x[n] = 10puts(x[n])
50
データ構造：連想配列• 名前で管理する箱
– 名前（キー）を指定して内容を読み書き– Ruby では角カッコで番号を指定
• 名前でデータ位置を指定、使い方は変数と同じ• 角カッコに名前を入れる（文字列なのでダブルクオーテーションで囲む）
abc xxx 123 横山
x = Hash.newx[“test”] = 10puts(x[“test”])
n = “abc”x[“abc”] = 10puts(x[“abc”])
51
条件分岐
52
条件分岐のイメージ
逐次処理上から下にひとつづつ実行
条件分岐条件に応じて処理を切り替えどちらか一方を実行する
条件 X
Y
N
処理 A
処理 B 処理 C
処理 A
処理 B
処理 C
53
if 文の説明• 条件に基づいて処理を分岐させる命令
if ( 条件式 ) then 真の時に実行する部分else 偽の時に実行する部分end
if ( 条件式 ) then 真の時に実行する部分end
条件式
Y
N
処理
条件式
Y
N
処理 処理
条件に応じて処理をスキッ
プ（するかしないか）
条件に応じて処理を切り替え
（どちらか）
54
条件式• 条件式とは
– 条件を記述するための式– 「真」 (true) 「偽」 (false) が決まる
• 条件式の要素– 変数、計算式、比較演算子– 「 == 」 等しい、「 != 」 異なる、
「 >= 」「 <= 」 以上 /以下、「 > 」「 < 」 より大きい / より小さい
• 条件式の例– a == 100 : 変数 a の内容が 100 と等しい– b != " 横山 " : 変数 b の内容が「横山」と異なる– x < 123 : 変数 x の内容が 123 より小さい– y >= 456 : 変数 y の内容が 456以上
55
条件分岐の例• 条件分岐
–普通に実行する– 変数 a を 101 に変更する– 条件式 (レッド ) を変更する (例 : 「 a <
100 」 )a = 100
if (a == 100) then puts(“TRUE”) puts(“ あああ” )else puts(“FALSE”) puts(“ いいい” )end
条件分岐の応用例• 細かな条件分岐の表現
– ① if 文を組み合わせる• thenブロックや elseブロック内で if 文• if~then~else~end の対応関係に注意
– ② 条件式を組み合わせる• 「 and 」や「 or 」の利用
56
if ( 条件式 1) then if ( 条件式 2) then 条件式 1 が真 → 条件式 2 が真 endelse if ( 条件式 3) then 条件式 1 が偽 ＆ 条件式 3 が真 endend
if (( 条件式 1) and ( 条件式 2)) then 条件式 1 と条件式 2 が真のときelse 条件式 1 と条件式 3 が真でないときend
If 文の組み合わせ
57
条件 1
Y
N
処理 B 条件 2
Y
N
処理 X 処理 Y
「 else 」のなかで if文
条件 X
Y
N
処理 B 処理 C
if ( 条件 1) then 処理 Belse if ( 条件 2) then 処理 X else 処理 Y endend
58
繰り返し
繰り返し• 同じ処理を繰り返す方法
– 条件に基づいて繰り返す– 「カウンタが 10 になるまで繰り返す」 （＝ 10回繰
り返し）
59
逐次処理上から下にひとつづつ実行
処理 A
処理 B
処理 C
条件 Y
Y
N
処理 A
処理 B
繰り返し条件成立の間は処理を繰り返す
60
for 文の説明• 条件（ i in 1..10 ）の間、処理を繰り返す命令
– do から end の間を繰り返す– i は 1 から 10 まで変化する– 繰り返し回数を指定
条件
Y
N
処理
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)
61
while 文の説明• 条件の間、処理を繰り返す命令
– do から end の間を繰り返す– さまざまな条件を指定可能– 条件を自分で作る必要がある（ for 文との違い）
条件
Y
N
処理
while ( 条件 ) do 処理内容end
i = 0while (i<10) do puts(i) i++end
条件が真の間処理を繰り返し（何度も実行）
i が 1 から 10 まで、 puts(i) を繰り返すi=1 → puts(i)i=2 → puts(i) …i=10 → puts(i)
62
制御構造について学習• 繰り返し命令
– for 文 , while 文– 条件の間繰り返す– カウンタ変数が変化する （例： i は 0 から 10 まで変化）
• 条件分岐– If 文– 条件に応じて、 then/else のいずれかを実行する
• 確認事項– 「繰り返し」の意味を理解する
• for 文を使うことができるようになる– 「条件分岐」の意味を理解する
• if 文を使うことができるようになる
63
ファイル操作
ファイル書き込み• ファイルへの書き込み
–ファイルをオープン : open 命令• a (append) を指定
–ファイルの最後に追記 : puts 命令• オープンしたファイルオブジェクトの指定に注意
– f.puts() 命令、 f はオープンしたファイルを表すオブジェクト
64
text = “abcdefg”
f = open(“test.txt”, “a”)f.puts(text)f.close
ファイル読み込み• ファイルへの書き込み
– ファイルをオープン : open 命令• r (read) を指定
– ファイルの 1行読み込み : gets 命令• gets 命令 1回で 1行読み込み、複数回で複数行読み込み• オープンしたファイルオブジェクトの指定に注意
– f.gets() 命令、 f はオープンしたファイルを表すオブジェクト
65
f = open(“test.txt”, “r”)text = f.gets()puts(text)text = f.gets()puts(text)f.close
66
その他の命令
67
乱数の取り扱い• 乱数
– でたらめな数のこと• 乱数の生成
– rand() 命令を使う–指定した数までの数字を作る
• 例 : rand(100)だと、 0~99 の数字を作る
number = rand(100)
puts(number)
68
日付の取り扱い• 日付
– 現在時刻の取得ができる– 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 ← 秒
69
CGI 講義
70
WWW システム• クライアントは URLホスト部からアクセス先サーバアドレスを調べ
る• クライアントはアクセス先サーバに要求を送信する• アクセス先サーバはデータを返信する• クライアントは受け取ったデータを表示する
① HTTP リクエストの送信
③ HTTPレスポンスの返信
ブラウザ（Webクライアン
ト）Webサーバ
④ 取得 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データを取得
Web 上でのサービス提供• インタラクティブ（対話型）の Web サー
ビス–操作可能なコンテンツ–反応が返ってくるコンテンツ–ゲーム など
71
サイバー大学 : http://www.cyber-u.ac.jp/
掲示板 : http://www.2ch.net/
72
CGI• CGI (Common Gateway Interface) の略• CGI は Web サーバ内で動作させたプログラムの出力（表示）をブラウザへと伝える機構– Web サーバが拡張子で判断する– 例： http://localhost/webp/test.cgi
• プログラムの動作結果を Web ページにする
Web クライアント
（ブラウザ）
1. HTTP リクエスト
5. HTTPレスポンスHTMLデータ
2. プログラム呼び出し
4. HTML生成
CGIプログラム
HTMLデータ
CGI機構(Common Gateway Interface)
3. プログラム実行
Webサーバ
73
演習 : CGI
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 （ファイル名） で指定
77
#!/usr/bin/ruby
puts("Content-type:text/html”)puts
（ここから下にメイン処理を記述）
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 タグで画像ファイルを表示
t = Time.nowprintf("%d %d %d\n", t.year, t.month, t.day)printf("%d %d %d\n", t.hour, t.min, t.sec)
tt = Time.now
tt.year ← 年
tt.month ← 月tt.day ← 日tt.hour
← 時tt.min ← 分tt.sec ← 秒
80
5. プログラム制御： 制御構造• 制御構造の利用
– if 文の利用 , for 文の利用– サイコロ振って「丁」「半」表示
• 丁：偶数、半：奇数–改造
• サイコロ 3 つ、 for 文で 3回• HTML タグで画像表示
# 乱数 , rand(6) で 0~5 を作って +1r = rand(6)+1if (r%2 == 0) then printf(“丁” )else printf(“半” )end
81
6. HTTP リクエスト表示• HTTP リクエスト情報を表示
– ENV連想配列に格納済– p 命令で全部表示
• デバッグ用の強力な表示• 配列内を一覧できる
– 利用方法• ENV[“REMOTE_ADDR”] 等• 連想配列として利用可能
82
{"HTTP_HOST"=>"192.168.99.125", "HTTP_CONNECTION"=>"keep-alive", "HTTP_CACHE_CONTROL"=>"max-age=0", "HTTP_ACCEPT"=>"text/html,application/xhtml+xml,application/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/cgi-bin/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”}
#!/usr/bin/ruby
puts "Content-type:text/html"puts
p ENV
83
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
7. データアップロード• GET 利用
– HTTP リクエスト URL にデータを組み込んで通知• 例： http://xxx.jp/~team1/abc.cgi?text=hello&id=ytel• textデータを「 hello 」、 idデータを「 ytel 」として通知
– 検索の指示などで利用、短いデータしかやりとりできない
– 日本語などは文字コードでやりとり（ URLエンコード）
84
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%88%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
85
7. データアップロード• POST 利用
– HTTP リクエスト本体にてデータを通知– リクエスト送信用の HTML ページが必要（ FORM タグを利用）
• データ受け取り方 （ CGI プログラム側）– CGI ライブラリを利用– CGIオブジェクトにデータ– FORM タグで指定した名前でデータ取得
#!/usr/bin/rubyrequire 'cgi’puts "Content-type:text/html"puts
# CGIオブジェクト obj を作成obj = CGI.newp obj.paramsputs(obj.params[“name”])
やってみよう• 基本編
– これまでのプログラムの改造– (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.newwhere = Array.newwho = Array.newwhat = Array.new
when = [“昨日” , “ 今日” , ... ]where = [“KIC で” , “三宮で” , ... ]who = [“俺が” , “ 山田が” , ... ]what = [“食事した” , “踊った” , ... ]
88
# 配列のデータを利用r1=rand(X)r2=rand(X)r3=rand(X)r4=rand(X)
printf(“%s %s %s %s\n”, when[r1], where[r2], who[r3], what[r4])
ヒント : (4) アクセス判定• アクセス元を判定して何か処理
– ENV環境変数を利用– USER_AGENT を見て機種判定など
• Macintosh が含まれていたら「こんにちは Mac 」など
89
#!/usr/bin/ruby
puts "Content-type:text/html"puts
p ENV[“HTTP_USER_AGENT”]
if (ENV[“HTTP_USER_AGENT”].index(“検索ワード” )) then 検索ワードに一致する場合end
ヒント : (5) アクセスカウンタ• ユーザーからのアクセス数を記録
– ファイルにアクセス数を記録• counterファイルを用意、内容に「 0 」• chmod a+rw counter
– アクセスがあったらファイルからアクセス数読み込み
– アクセス数を加算してファイルに書き込み
90
# アクセス数の読み込みf=open("counter", "r")n = f.getscount = n.to_if.close
# アクセス数の表示puts(count)
# アクセス数の書き込みoutput = sprintf("%d", count+1)f=open("counter", "w")f.puts(output)f.close
ヒント： (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'
# スクレイピング先の URLurl = 'http://www.yahoo.co.jp/'
charset = nilhtml = nilopen(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%E3%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/ruby-nokogiriwi.html
• ああ102
103
• 2 日火 15 時～ 18 時の部屋確保– 30 人
• 会場ネットワーク用意– WiFi + RPI– インターネットアクセス＆ RPI アクセス可能に
• RPIセットアップ– Apache, Ruby– グローバルセグメント– 6 チーム分、ユーザ作成
104