1 / 104

特別講義： 体験しよう CGI ！

特別講義： 体験しよう CGI ！. 神戸情報大学院大学 講師 横山輝明. 自己紹介. 自己紹介 横山輝明 、 山口県出身 、 芦屋 在住 サイバー大学 IT学部 講師 奈良先端科学技術大学院大学 情報科学研究科 インターネット工学講座 研究員 経歴 1995/3 宇部工業高等専門学校 3 年次修了 2000/3 立命館大学理工学部情報学科 卒業 2007/3 奈良先端科学技術大学院大学 情報科学研究科 博士課程 卒業 2007/4 サイバー大学 教員 専門 ： インターネット技術 （基盤から応用まで） サービス / システム開発、 教育工学

hyacinth-patton
Download Presentation

特別講義： 体験しよう CGI ！

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 特別講義：体験しようCGI！ 神戸情報大学院大学講師横山輝明

  2. 自己紹介 • 自己紹介 • 横山輝明、山口県出身、芦屋在住 • サイバー大学IT学部講師 • 奈良先端科学技術大学院大学情報科学研究科インターネット工学講座研究員 • 経歴 • 1995/3 宇部工業高等専門学校 3年次修了 • 2000/3 立命館大学理工学部情報学科 卒業 • 2007/3 奈良先端科学技術大学院大学情報科学研究科博士課程 卒業 • 2007/4 サイバー大学教員 • 専門：インターネット技術（基盤から応用まで） • サービス/システム開発、教育工学 • Delay Tolerant Network 技術の利用（災害、途上国支援）

  3. 講義紹介

  4. 今日の予定 • WWWとは • WWWの仕組み • URL, HTTP, HTMLについて • CGIについて • Rubyとは • Rubyの紹介 • 式、変数、配列、繰り返し、条件分岐、乱数、日時 • CGIプログラミング演習 • CGIの基本 • プログラム処理 • 応用

  5. Raspberry PI • Raspberry PIとは • イギリスラズペリーパイ財団が設計・開発したシングルボードコンピュータ • Broadcom BCM2835 SoCCPU, GPU, メモリ等をワンチップ化 • 主に教育用、Linuxが動作 • $35で販売

  6. 心構え • 手を動かそう！ • 動かしてから考える • ためらわない、工夫する • 考えよう！ • 知識ではなく理解 • 「手順」より「何をしているのか」を把握する • なぜ？と考える、納得する • コミュニケーションしよう！ • 疑問に思ったらいつでも尋ねる • 脱線は大歓迎！

  7. グループ分け • プログラミング詳しい人 • プログラム作ったことがある • if, for, while 分かる？ • Rubyを触ったことがある • 自信無い人手を挙げて • プログラム作ったことがない、よく覚えていない • 6チーム作ろう • プログラムしたことある人＆自信無い人はペア • なるべく混ざろう、知らない人のいるチームへ参加

  8. HTTP講義

  9. WWW

  10. World Wide Web • 世界規模の文書共有システム • HyperText文書 • 世界中の文書間でのリンク構造 • 最も一般的なインターネットアプリケーション • 情報公開/コミュニケーション/商用利用などさまざまなアプリケーションが登場 • 巨大なアプリケーションプラットホームへと変化

  11. WWW (1) • ホームページ • 自由に作成・安価 • 世界中に公開 • 多彩な表現力 • 双方向性 - 島根県立大学-島根県立大学短期大学部http://www.u-shimane.ac.jp/

  12. WWW (2) • さまざまなサービス • 双方向性の利用 • 表現力の向上 • CMSとしてシステム化 チャット: KentWebチャットシステムhttp://www.kent-web.com/chat/sample/windy.cgi Mixi: http://www.mixi.jp 掲示板: http://www.2ch.net/ Wikipedia: 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. 1992/11/3時点のCERN Webページ欧州核物理研究機構スイスジュネーブ 1991/8/7にTim Berners-Leeがネットニュースへ投稿したメッセージ 出典： 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:teruaki_yokoyama@cyber-u.ac.jp 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://www-u-shimane.ac.jp/index.html ② 格納HTMLファイルの取出 GET /index.html HTTP/1.1 インターネット ① HTTPリクエストの送信 ③ HTTPレスポンスの送信 Webサーバ ④ 取得HTMLファイルの表示 ブラウザ（Webクライアント）

  23. HTTPリクエスト • リクエストメッセージ • クライアントからサーバへデータを要求 • 「GET」命令とアクセスヘッダ（任意の補助情報） http://www.u-shimane.ac.jp/index.html へアクセスした場合 リクエストメッセージ 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 レスポンスヘッダ

  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> <TITLE>自己紹介</TITLE> <BODY> <H1> 名前 </H1> <P>横山輝明</P> <H1> 挨拶 </H1> <P> みなさん こんにちは。 <A HREF="http://www.cyber-u.ac.jp/"> サイバー大学 </A> の横山です。 </P> </BODY> </HTML> • HTMLの特徴 • テキストファイル, タグ • 意味構造のみを記述 (見出し、リンクなど) ブラウザ出力例 簡単なHTMLファイルの例

  28. 日本初めてのWebページ • 文部省高エネルギー加速器研究機構計算科学センター • 1992年9月30日に開設 • ftp://kekux.kek.jp/kek/html/kek.html （当時） • 当時文部省高エネルギー加速器研究機構計算科学センターに勤務していた森田洋平氏が開設

  29. 初期のWebページ

  30. Yahoo!ページの変遷 • 画像、動画、Flashの導入 • HTMLの表現力向上 Yahoo!トップページ (1994) Yahoo!トップページ (2000) Yahoo!トップページ (2011) Images: Yahoo's steady home page transformationhttp://news.cnet.com/2300-1032_3-6072801-1.html?tag=mncol Yahoo!トップページ (1995)

  31. Trojan room Coffee-Pot • コーヒー残量確認サービス • 英ケンブリッジ大学コンピュータ研究所内のコーヒーポットの残量表示 • WWW最初期のWebカメラアプリケーション • １９９３年～２００１年 • http://www.cl.cam.ac.uk/coffee/coffee.html

  32. WWWシステム • クライアントはURLホスト部からアクセス先サーバアドレスを調べる • クライアントはアクセス先サーバに要求を送信する • アクセス先サーバはデータを返信する • クライアントは受け取ったデータを表示する ② HTMLデータを取得 ④ 取得HTMLファイルの表示 ① HTTPリクエストの送信 ③ HTTPレスポンスの返信 ブラウザ（Webクライアント） Webサーバ

  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.45name = "横山輝明"testdata = "文字列データ"

  43. 画面への表示 (1) • 表示命令: puts命令 • 文字列や変数内容を画面に表示する • "～"が文字列、足し算で連結できる • 文字列は必ず「"」で囲む • "あいう" + "かきく" → "あいうかきく" puts("テスト")a = 12345puts(a)name = "横山輝明"puts("名前は"+name+"です。") テスト12345名前は横山輝明です。

  44. 画面への表示 (2) • 書式付き表示命令 • printf命令では表示書式を指定できる • 「%s」の部分には文字列 • 「%d」の部分には数値 • 「\n」で改行 • 変数へ出力するsprintf命令もある • 整形結果を変数へ出力 Printfでの表示指定の中にある、「%s」「%d」の部分に変数が当てはまる。変数は左から順番に。 name = "横山輝明"age = 37printf("名前は%s、%d才です。\n", name, age) 名前は横山輝明、37才です name = "横山輝明"age = 37output = sprintf("名前は%s、%d才です。\n", name, age)puts(output)

  45. Ruby基本:式

  46. 変数の操作 • 計算 • 和差積商が利用可能 → 「+」「-」「*」「/」 • 同一の「型」でしか計算できない • 整数同士、小数同士、文字列同士 • 「型変換」で変換する（後述） • 文字列処理 • 連結分解、大小文字変換、置換

  47. 数値 計算式を用いて処理できる 計算結果をそのまま表示 計算結果を変数に代入 文字 文字同士で連結できる 式の順序で文字を連結できる 文字列との足し算ができる 変数の操作例 firstname = "横山"lastname = "輝明"name = firstname + lastnameputs(name+"です") a = 12345b = 100puts(a*b)c = a + bputs(c)puts(a+100)

  48. 式を利用する • 右のそれぞれにおいて • 普通に実行する • 変数内容を変えてみる • 赤字の部分を変えて何が起こるか確かめる • 内容の変更など • 計算式を変えてみる • 黄色の部分を変えてみる • 別の計算をしてみる a = 12345b = 100puts(a*b)c = a + bputs(c)puts(a+100) firstname = "横山"lastname = "輝明"name = firstname + lastnameputs(name)puts(firstname+"です")printf("名前は%sです。\n", name)

  49. データ構造：配列 • 一次元で並ぶ番号のついた箱 • コンピュータのメモリそのもの • 番号を指定してデータ入出力 • Rubyでは角カッコで番号を指定 • 番号でデータ位置を指定、使い方は変数と同じ • 番号には変数や式を利用可能 x = Array.newx[0] = 10puts(x[0]) n = 11x[n] = 10puts(x[n]) ① ② ③ ④

  50. データ構造：連想配列 • 名前で管理する箱 • 名前（キー）を指定して内容を読み書き • Rubyでは角カッコで番号を指定 • 名前でデータ位置を指定、使い方は変数と同じ • 角カッコに名前を入れる（文字列なのでダブルクオーテーションで囲む） x = Hash.newx[“test”] = 10puts(x[“test”]) n = “abc”x[“abc”] = 10puts(x[“abc”]) abc xxx 123 横山

More Related