授業/H20/情報処理/13

データベースとウェブページ †

前回授業ではDNAデータベースを検索して、自分が必要とするデータを取り出し（検索・ダウンロード）、加工し（アラインメント）、目的とする解析（系統解析）を行った。アンケートでの結果「理解できた」という人が多かったのは、皆さんが、インターネットを使って何かを検索し、データを取り出すという作業に慣れているからだろう。

ところで、授業で使ったDNAデータベースやYahoo、Amazonなどのサイトで、キーワードを入力して検索をかけた時、どうやってデータが取り出されているか想像したことはあるだろうか？DNAデータベースの場合、数千万件のデータ（配列にすると数百億！）という、実感がわかないほど大量のデータが、インターネットを介して処理されていることになる。

自分の実験で沢山のデータを処理する場合も、データの量が多くなるほど目的のものを取り出すのが大変になってきて、１つ１つ手作業で処理するということは難しくなる。では、どうすれば良いか？そんなとき役に立ってくれるのが「データベース」だ。先週使ったDNAデータベースでも、Yahooでも、Amazonでも、いずれもリレーショナルデータベースというシステムを利用することで、ものすごく大量のデータから、一瞬にして必要な情報を検索し、抽出し、並び替えるという処理をおこなっています。この、

と

というのが、データベースには簡単にできて、テキストエディタやワープロには簡単にできないことだ。
おそらく、今現在の時点でデータベースを使うことはあまりないだろうが、この技術は知っておいて、絶対に損はない。将来的に自由に使えるようになれば、心と時間に余裕が生じる。

せっかく情報処理を勉強するのだから、こういう便利な方法があるということを知っておかなければ勿体ないので、今日の授業の前半部分ではとにかく、データベースを使って簡単なデータ処理に挑戦してみる。

また、授業の後半では、普段皆さんが使っているインターネットとウェブページの仕組みを解説して、自分でも簡単なウェブページを作成・公開できるようになってもらう。

今日の授業は普段よりも盛りだくさんだが、前半は挑戦、後半は習得という点に注意して、授業に集中してほしい。

授業の前に：TOEIC IPの結果返却 †

学生証番号順に返却
時間があったら、以下を解説

• 参考資料
• 英語学習の強い味方： iTune + iPod （さらには、iTune U (iTunes Storeの中の無料コンテンツ）　（参考）
• 無料で楽しく英語学習：iKnow! http://www.iknow.co.jp/intro

第13回授業の獲得目標： †

• 1. リレーショナルデータベース（SQLite）をインストールして、操作出来るようになる。
• 2. SQLiteを使って、情報の検索・抽出・並び替え・複数テーブルの結合に挑戦する
• 3. ウェブページを利用するときに、どのようにして情報が伝達されているかを理解する
• 4. HTMLを用いて自分でウェブページを作成し、インターネットに公開できるようになる

大量データの一括処理：SQLiteによるリレーショナルデータベースを初体験 †

データベースという言葉は、保存されたデータのまとまりそのものを指すことも、データを管理するシステムのことを指すこともある。この授業でも特に厳密な定義はしない。授業で使うのは、リレーショナルデータベースというシステム（RDBS: Relational Data Base System）を無料で簡単に構築できるソフトウェア、SQLite。このソフトウェアを使って、実際のデータからデータベースを構築し、必要なデータを検索・抽出・並び替えすることを学ぶ。その過程でSQL言語という、データベースとお話するための言葉を使う。

関連リンク †

• SQLite http://www.sqlite.org/
  • マニュアルの日本語訳：　http://www.3rd-impact.net/Document/SQLite/Translation/Current/
  • SQLite3 Windows用実行ファイル http://www.sqlite.org/sqlite-3_4_0.zip
• SQLite　SQL日本語リファレンス（日本語だけど古い）：http://www.net-newbie.com/sqlite/lang.html
  • コマンドチュートリアル（日本語だけど古い）：http://www.net-newbie.com/sqlite/sqlite.html
• rakutoネット：　SQLiteの使用例と解説：http://study.rakuto.net/php/command/
  • SQLite CC http://www.takke.jp/soft/sqliteccj.html
    • 日本語表示も可能なSQLite用GUI

まずはともかく、SQLiteを使ってみよう †

あれこれ説明を聞くよりも、まずは手を動かして作業してみよう。まずはリレーショナルデータベースシステムを利用するために必要なフリーソフトウェアSQLiteをインストールする。皆さんが大学で使っているコンピュータにはAccessというデータベースソフトも入っているが、自分のパソコンでも無料で使えるという点を重視して、SQLiteを使うことにした。SQLiteはダウンロードした実行ファイルをクリックするだけで、データベースを扱うことができる。また、データベースのデータ本体が１つのファイルに保存されるので、コピーやバックアップが簡単にできるという特徴を持っている。

とはいうものの、世間一般のパソコンユーザにはそれほど使われていない。なぜかというと

コマンドラインからSQLという命令文を入力しなくてはならない
説明が英語
データの入出力が面倒(エクセルやエディタで前もって編集が必要）

だろう。ただ、Rの操作でコマンドラインに慣れた皆さんにとっては、それほど苦にはならないはずだし、データの入出力が面倒なのは大問題だが、SQLiteは、エクセルやテキストエディタと合わせて使うものと位置づけておけば良いだろう。

SQLiteのインストール †

では、以下のリンクから、SQLiteの実行形式ファイルをダウンロードしよう。

• SQLite3 WindowsXP用実行ファイル http://www.sqlite.org/sqlite-3_5_9.zip
  ダウンロードが成功すればデスクトップにsqlite3.exeというファイルができているはず。
• マイドキュメントにsqliteという名前のフォルダを作って、その中に先ほどのsqlite3.exeを入れる。

  この操作は別にやらなくてもSQLiteは動くが、後々データベースファイルがどこにあるのか探すのが面倒なので、あらかじめ入れ場所を作った。

• これでインストールは完了した。

SQLiteを使って何をやるか？：　最終目標は２つのテーブルの連結 †

これから実際にSQLiteを使って何ができるかを体験してもらう。目標とするのは、次のようなケースを簡単にSQLiteで簡単に処理することだ。

モデルケース：　あなたは参加者が2000人ぐらいの学会の会計をやることになった。参加者はウェブから氏名や所属などの参加登録データを送信する。送信されたデータはエクセルの表として保存されている。また、参加費は銀行振り込みで支払われる。振り込みデータもエクセルの表として保存されている。
右の表をダウンロードしてエクセルで開いてみよう。#13_table.xls
（この表に記述されているデータは、全て架空のものです)
２つのシート（下の方にあるタブ）　「Web登録データ」と「銀行振り込み」が入っている。
会計係のあなたは、２つの表を比較して、参加費未納者や、振り込み金額間違いのリストを作らなければならない。また、メールアドレスを抜き出して、督促状を送らなければならない。

さて、どうすれば良いだろうか？

このケースでは、２つの表がる。

ウェブ登録で得られた参加者のデータ：　氏名、よみがな、所属、メールアドレス（後にmeiboと呼ぶ表） 銀行から得られた振り込みリスト：　日付、振り込み人氏名（カナ）、振り込み金額（後にfurikomiと呼ぶ表）

手作業で解決するならば、それぞれの表をエクセルで１つのシートにまとめ、氏名で並び替え、上から順に、会費未納の人はいないか（あるいは、２回振り込んでしまっている人がいないか）、振り込み金額が間違っている人がいないかをチェックする。
しかし、この例で用いた100件のデータでもかなり大変な作業になる。これが2000件とか1万件とかのデータを対象に手作業でやるとなると、、、、ちょっと気が遠くなってしまう。

こういうときこそ、データベースソフトウェアであるSQLiteの出番だ。まず答えだけを言ってしまうと、SQLiteを使って２つのテーブルを連結して、２つを比較する次の命令を与えれば、上の作業をコンピュータにやらせることができる。

select name, email, shozoku, date, amount from web left outer join ginko on name_kana = ginko_name;
では、２つのテーブルが連結できるところまで、話しを進めてみよう。全体の流れは次のようになる。

上のような操作で２つのテーブルを連結することで、次のような表が得られ、Web登録をしたのに銀行振り込みしていない人がいるかどうかや、間違った金額を支払っている人がどれくらいいるかなどを知ることができる。

というテーブルが得られることを期待している。上をみると、2番目の人は払いすぎ、4番目の人は払っていないことがわかる。

SQLiteの起動：コマンドプロンプトから起動し、テーブルを作成 †

エクセルにあるデータをSQLiteで処理するには、まず、SQLiteを起動してテーブルを作成し、エクセルのデータを入れなければならない。

  エクセルの表のデータをSQLiteに移す
 そのために、SQLiteを立ち上げ、エクセルの表に対応するテーブルを作る

• まずコマンドプロンプトを起動。ウィンドウズのスタートメニューから、「すべてのプログラム／アクセサリ／コマンドプロンプト」を選ぶ。
  
  そうすると黒いウィンドウが開き、Rで使ったようなプロンプトが表示される。これはWindowsXPというOSを動かすもとになっているDOSのコマンドプロンプト（キーボードから命令を入力する処理系）。ここに命令を文字で入力することで、コンピュータに命令を与えることができる。試しに下の囲みの中の３文字を入力すると、ディレクトリの内容一覧が表示される。

  dir

• SQLiteを起動する前に、コマンドプロンプトからまず、カレントディレクトリ(現在、自分が閲覧しているディレクトリのこと）をZ:\sqlite に変更する。そうすると、プロンプトのところが、Z:\sqlite> に変わる。

  > cd z:\sqlite
  Z:\sqlite>

  ついでに、dirと打って、sqlite3.exeというファイルが入っていることを確認しておこう。

   Z:\sqlite>dir

  文字がいろいろと表示されますが、その中に

  2007/06/19  02:45           375,974 sqlite3.exe

  という行があれば、準備は完了です。

• SQLiteの起動
  では、コマンドプロンプトからSQLite3を起動して、ついでに終了の方法も覚えよう。（手続き通りに終了しないとデータが消えてしまうことがあるので、要注意）
• 起動

   Z:\sqlite>sqlite3

  上のように入力して、下のようなメッセージが表示されたら、正常に起動されている。

  SQLite version 3.5.9
  Enter ".help" for instructions
  sqlite>

• 終了　　終了はsqlite>というプロンプトの後に.quitか.exitと入力。

  sqlite>quit

  .を入力するのを忘れないように。これでプロンプトは

   Z:\sqlite>

  に戻ったはず。

• SQLiteの起動とデータベース ex1 の作成（作成済みのデータベースの場合、オープン）
  それではいよいよ、データベース中にデータを保存するテーブルを作ろう。今回のテストケースで作るデータベース以下のような構成になっている。

データベース名：　　　ex1.db　（コマンドプロンプトから「sqlite3 データベース名」で作成
    テーブル:       web   (起動後（プロンプトはsqlite> ）SQL命令（create table...)を入力
    テーブル:       ginko  (起動後（プロンプトはsqlite> ）SQL命令（create table...)を入力
    ※１つのデータベースは１つまたは複数のテーブルがあつまってできている
      エクセルのそれぞれの表は、データベースのテーブルのそれぞれに相当

データベースを作成する命令: Windowsのコマンドプロンプトから、次のように入力。

Z:\sqlite>sqlite3 ex1.db

sqlite3 ＜データベース名＞は、新しいデータベースを作ったり、もしすでに作成済みのデータベースがあれば、それを開く命令。上の命令を入力すると、画面がSQLiteのコマンドプロンプト（sqlite>）に変わる。 (注意：このとき、ex1.dbというデータベースは、z:\sqlite\というフォルダの中にできている）

• SQLiteのシステムの中で、データベースに命令を与える
  ここから先は、実際にSQLを入力してデータベースの操作を行う。

• テーブルの作成
  プロンプトが

  sqlite>

  になっているのを確認して、エクセルの表に対応するテーブルを２つ作る。 今はex1.dbという名前のデータベースに対していろんな命令を与える準備ができている。今から入力する命令は、ex1.dbというデータベースの中にテーブルを作る命令。作成するテーブルには、それぞれ次のようなデータを入れる。テーブルの作成には、列の名前であるカラム名が必要

  web:

  name	name_kana	shozoku	email
  金田勝年	カネダカツトシ	インディアナ大学・植物	06S4043@gmail.com
  山本条太	ヤマモトジョウタ	愛知教育大・生物	06S4076@gmail.com
  河野章	コウノアキラ	横浜市大・院・総合理学研究科	06S4025@gmail.com

  ginko:

  date	ginko_name	amount
  2008-05-09(Fri)	イワイフミオ	6000
  2008-05-09(Fri)	マツナガカズヨシ	6000
  2008-05-09(Fri)	イチカワトミコ	6000

  テーブルの作成に使うSQL命令は、create table ＜テーブル名＞ (カラム名, カラム名...);。 sqlite> 以下をコピーペーストしよう。

  sqlite> create table web (name, name_kana, shozoku, email);

  意味は、「name, name_kana, shozoku, email という列（カラム）を持ったwebとういテーブルを作りなさい」というもの。命令はけっこう長いし、入力まちがいがあると、うまく動かない。でも、間違ってしまった場合、↑キーでもう一度命令を呼び出して編集できる。
  良くやる間違い：　命令文の最後のセミコロン ; を忘れる人が多い!
  作成したテーブルを削除してもう一度やり直したい場合は、

  sqlite> drop table web;

  
  とやれば先ほど作ったwebというテーブルを消すことができる。作成済みのテーブルの一覧は

  sqlite> .table

  と入力すれば見ることができる。.で始まるコマンドのことを、ドットコマンドという。ドットコマンドはSQLiteでのいろんな設定を行います。
  上と同様にして、もう一つのテーブル、ginkoも作っておこう。コマンドは下の通り。

  sqlite> create table ginko (date, ginko_name, amount);

• エクセルからSQLiteへのデータの移動：　タブ区切りテキストファイルを介して一括登録
  エクセルのデータをSQLiteに移動させるには、一度、タブ区切りテキストファイルを作成する必要がある。

  エクセルのテーブル(Web登録データ） → K2Editorでタブ区切りテキストファイルに → SQLiteに読み込み

  • エクセルの表からデータ部分をコピーして、K2Editorの新しい文書にペースト。２つの表をそれぞれ、

    web.txt  と  ginko.txt

    という名前で、「マイドキュメントのsqliteフォルダ」に保存。
  • 《重要》　区切り文字の設定：
    次にSQLiteに移動して区切り文字をタブに設定する。この設定を忘れると、うまくファイルが読み込まれない。

    sqlite> .mode tab

  • SQLiteへのデータのインポート：　先ほど作成したテキストファイルから、データをテーブルに読み込む。また、select命令を使って内容を一覧。

    sqlite> .import 'z:\sqlite\web.txt' web

    同様の操作を、もう一つのテーブル ginko についても行う。

    sqlite> .import 'z:\sqlite\ginko.txt' ginko

• ''SQL文を使ったデータの検索と表示
  SQLiteでは、リレーショナルデータベースを操作するための標準的な命令文であるSQL文を使う。簡単な英単語を並べたものになっており、例えば、

  webというテーブルから、　全てのデータを　選び出せ

  という命令は、SQL文を使うと

  select * from web;

  と書くことができる。「全て」に「*」を使うのは、正規表現でおなじみだ。では、下の２つの命令文を実行してみよう。

  sqlite> select * from web;
  sqlite> select * from ginko;

  このとき、*の部分をカラム名にすると、選んだカラムの内容だけが表示される

   sqlite> select name from web;

• 演習：下の空欄を埋めてSQL文を完成させ、指定のデータ抽出をやってみよう

  1. テーブル web から 氏名とメールアドレスを名前
   　注： order by カラム名でそのカラム名を使った並べ替えができる
    select name, name_kana, ____ from ____ order by name_kana;
  2. テーブル ginko から 振り込み金額が6000円では無い人の名前と金額を表示
     注： where ＜条件式＞ で条件式に一致したデータだけが表示される
             演算子：　=  <  >  !=（異なるという意味）
   select ginko_name, ___ from ___ where amount != '6000';
  3. テーブル webから氏名だけを10件だけ抽出
     注：　limit 数字　で数字の数の件数だけデータを表示できる
   select  ___ from web limit __;

• ''キーを用いた２つのテーブルの連結
  エクセルからデータベースに２つのテーブルを移動することができたので、いよいよ、両者に共通する「ヨミガナ」で、２つのテーブルを結びつけてみよう。２つのテーブルの連結には、次のようなSQL文を使う。
  

  select name, email, shozoku, date, amount from web left outer join ginko on name_kana = ginko_name;

  意味は、

  webというテーブルとginkoというテーブルをnama_kanaとginko_nameが同じであるデータを連結
  name, email, shozoku, date, amountを表示

• 演習：下の空欄を埋めてSQL文を完成させてみよう

  1. ginkoの全てのデータにたいして、ヨミガナが一致するデータをwebと連結し、
      振り込み者名、日付、振り込み金額、メールアドレスを、振り込み者名で並べ替えて表示
   select ginko_name, ___, amount, email from  ___ left outer join ___ on ___ = ___ order by ____;
  2. 上の命令に以下を追加し、払込金額が6000円の人だけを表示させてみよう
    where ____ = '___'
  

  これで、今回の挑戦の最終目標である、２つのレコードの連結はできた。このデータをエクセルで見やすく表示するには、
  • 得られた結果をコピーして、K2Editorにペースト

     検索文字列:   +（空白の連続)
     置換文字列:   ¥t

    でタブ区切りに変更。全てを選択してコピー
  • エクセルにペースト

先ほどの操作のまとめ †

上で行った操作とコマンドをまとめておこう。

SQLの最後は ; （半角セミコロン）で終わる
ドットコマンドの最初は . （半角ドット）で始まる　（セミコロンは不要）
値は ' ' （シングルクォーツ）で囲む　（※省略できる場合も多々ある）

1. SQLiteの起動とデータベースを作成

   Z:\sqlite> ''sqlite3 ex1.db''

   • 意味：　ex1.dbというデータベースファイルを作成（または既存の場合は開く）。OSのコマンドラインから入力された。場所はsqliteフォルダの中
2. テーブルの作成:SQL: create table

   create table web (name, name_kana, shozoku, email);

   • 意味：name, name_kana, shozoku, email という4つのカラムを持つwebというテーブルを作成
3. 外部ファイルの区切り文字を指定:ドットコマンド: .mode

   .mode tab

   • 意味：入出力に使われるファイルでは、カラム同士はタブで区切られていると設定する
4. 外部データのインポート：ドットコマンド .import

   .import 'z:\sqlite\web.txt' web

   • 意味：sqliteフォルダに入っているweb.txtをテーブルwebに読み込み
5. テーブル内容の表示：SQL: select

    select * from web;

   • 意味：webの全てのカラム（*で示されている）を選択して表示
6. ２つのテーブルを連結して表示：SQL: select

   select name, email, shozoku, date, amount from web left outer join ginko on name_kana = ginko_name;

   • 意味：webとginkoからname, email, shozoku, date, amount を表示する。但し、webのデータは全部表示させ、ヨミガナが一致するデータがあるものについてだけ、ginkoのデータも表示させる

• それぞれのSQL命令の使い方の例は、以下を参考にしよう。
  • SQLite コマンドの文法（英語）http://www.sqlite.org/lang.html
  • やや古いが上記の日本語説明 http://www.net-newbie.com/sqlite/lang.html
  • rakutoネット：　SQLコマンド　http://study.rakuto.net/php/command/
  • PostgreSQLの日本語ドキュメント：http://www.postgresql.jp/document/pg824doc/html/sql-commands.html
    • 全てがSQLiteで使えるわけでは無いが、createとかselectの例は参考になる

• ※joinについて、 「[[PostgreSQL 8.2.4文書　第 7章問い合わせ> http://www.postgresql.jp/document/pg824doc/html/queries-table-expressions.html]]」では下のような説明と例が挙げられている。

  INNER JOIN（内部結合）
  T1の各R1行に対して、T2においてR1との結合条件を満たしている行が、結合されたテーブルに含まれます。 
  
  LEFT OUTER JOIN（左外部結合）
  まず、内部結合が行われます。その後、T2のどの行との結合条件も満たさないT1の各行については、T2の列をNULL値と
  して結合した行が追加されます。したがって、連結されたテーブルは無条件にT1の行それぞれに少なくとも1つの行があります。 
  

  例（注：[[PostgreSQL 8.2.4文書　第 7章問い合わせ> http://www.postgresql.jp/document/pg824doc/html/queries-table-expressions.html]]から一部のみ引用。

   以下のテーブルt1
  
   num | name
  -----+------
     1 | a
     2 | b
     3 | c
  
  および、テーブルt2
  
   num | value
  -----+-------
     1 | xxx
     3 | yyy
     5 | zzz
  
  を想定すると、以下のように様々な結合に関する結果が得られます。
  
  => SELECT * FROM t1 CROSS JOIN t2;
   num | name | num | value
  -----+------+-----+-------
     1 | a    |   1 | xxx
     1 | a    |   3 | yyy
     1 | a    |   5 | zzz
     2 | b    |   1 | xxx
     2 | b    |   3 | yyy
     2 | b    |   5 | zzz
     3 | c    |   1 | xxx
     3 | c    |   3 | yyy
     3 | c    |   5 | zzz
  (9 rows)
  
  => SELECT * FROM t1 INNER JOIN t2 ON t1.num = t2.num;
   num | name | num | value
  -----+------+-----+-------
     1 | a    |   1 | xxx
     3 | c    |   3 | yyy
  (2 rows)
  
  
  => SELECT * FROM t1 LEFT JOIN t2 ON t1.num = t2.num;
   num | name | num | value
  -----+------+-----+-------
     1 | a    |   1 | xxx
     2 | b    |     |
     3 | c    |   3 | yyy
  (3 rows)
  
  => SELECT * FROM t1 RIGHT JOIN t2 ON t1.num = t2.num;
   num | name | num | value
  -----+------+-----+-------
     1 | a    |   1 | xxx
     3 | c    |   3 | yyy
       |      |   5 | zzz
  (3 rows)
  
  => SELECT * FROM t1 FULL JOIN t2 ON t1.num = t2.num;
   num | name | num | value
  -----+------+-----+-------
     1 | a    |   1 | xxx
     2 | b    |     |
     3 | c    |   3 | yyy
       |      |   5 | zzz
  (4 rows)

命令文を知りたい時は †

　ここまでで説明した命令文についてもっと知りたいときは、

• SQLite　SQL日本語リファレンス：http://www.net-newbie.com/sqlite/lang.html を見てください。

以上、駆け足でSQLiteの使い方を見てきたが、データベースはどのパソコンでも使えるし、大量データの一括処理という意味では、これに勝る方法は無いのだが、一般ユーザーにはあまり使われていないのが現状だろう。皆さんも、今回の挑戦で行った操作をなんとなくで良いから覚えておき、今後のデータ処理に役立てて欲しい。

ドットコマンドの説明（よく使うものだけを抜粋） †

#ヘルプと現在の設定を表示
   .help                  ヘルプの表示
   .show                  様々な項目の現在の設定値を表示
#プログラムの終了
   .exit                  プログラムの終了
   .quit                  プログラムの終了
#外部ファイルからのデータ取り込み・データ書き出し
   .import FILE TABLE     TABLEにFILEの内容をインポートする
   .output FILENAME       出力結果をFILENAMEという名前のファイルに保存
#外部ファイルのデータ区切り文字を設定
   .mode MODE ?TABLE?     入力・出力ファイルの区切り文字切り替え。以下（一部のみ解説）のいずれか
                            csv      コンマ区切り（Comma-separated values)
                            column   左揃えの列
                            html     HTMLの<table>タグ
                            line     １行に１つの値
                            list     .separator（下の指定） 指定された文字で区切る
                            tabs     タブ区切り
   .separator STRING      ".mode"と".import"で使うファイルの区切り文字をSTRINGで指定されたものに設定
#画面に表示される出力文字列の設定
   .output stdout         出力結果をスクリーンに表示
   .header(s) ON|OFF      ヘッダーのオン・オフ切り替え
   .nullvalue STRING      STRING で指定された文字列を NULL（ヌル・データ無しのこと）のところで表示
   .width NUM NUM ...    　"column" modeのときのカラムの幅を指定
#テーブル一覧とテーブルの設定表示
   .tables ?PATTERN?      PATTERNにマッチするテーブルを一覧
   .schema ?TABLE?        TABLEが作られた時のCREATE命令を表示
   .dump ?TABLE? ...      テーブルの内容をSQLで表示
#その他
   .prompt MAIN CONTINUE  標準プロンプトを入れ替える
   .read FILENAME         FILENAMEに書かれたSQLを実行

ウェブページの仕組み †

ウェブページで考えるインターネットのこちらとあちら †

　普段皆さんがいつも使っているインターネット。非常に便利なもので、インターネットの普及前後で、世界は変わったとすらいわれている。ここで、インターネットがどのようなコンピュータで成立しているかを少し考えてみよう。
インターネットで使われている通信ケーブルのこちら側（ローカルといいます）には、皆さんが使っているコンピュータがある。ケーブルのあちら側（リモートといいます）にもコンピュータがあることは、おぼろげながら理解しているだろう。このとき、こちら側のコンピュータをクライアント、あちら側のコンピュータをサーバ（＊サーバーともいう。コンピュータ関係の人は割と、最後の長音記号を省略することが多い）と呼ぶ。
では、ここで質問。

あなたが普段使っているPukiwikiのレポート提出ページの置き場所は、サーバ？それともクライアント？
Pukiwikiのページで見出しを青色にしたり太字にしたりする処理をするのは、サーバ？それともクライアント？
レポート提出ページに貼った画像はサーバから直接画面に表示されるか、クライアントに保存されてから表示されるか？

この質問に全部答えられれば、たぶん、ネットのこちらとあちらを正しく理解できているだろうと思う。

URLってなに？ †

　インターネットを介してリモートのサーバにアクセスするときには、URLを使って場所の指定をする。最近はとても一般的に使われるようになったURLという言葉、一度ぐらいは聞いたことがあるだろう。URLとは Uniform Resource Locatorの略で、インターネット上にある情報（resource）の場所を表す(locate)、統一的な(uniform)記述方式だ。例えば、今見ているページのURL:

http://bean.bio.chiba-u.jp/lab/index.php

というの示している内容は、

http://　この後に書かれている情報にどうやってアクセスするかという手段をしめすところ。
         httpはWebサーバとクライアント(Webブラウザなど)がデータを送受信するのに用いる通信手段(プロトコル）
         （HyperText Transfer Protocol)
         　皆さんが他に使う可能性がある通信手段は、
         httpsは暗号化されたhttp
　　ftp ファイル転送のためのプロトコル (File Transfer Protocol)　など
bean.bio.chiba-u.jp　://の直後に来る文字列はウェブサーバのドメイン名。ドメイン名というのは、サーバに着けられた
　　　　　　　　　　　名前。jpは日本を、chiba-uは千葉大を、bioは生物学科の、beanはサーバ（機械）に着けられた名前
                      サーバ１台の住所を指定するのに、国名、県名、市町村を書くようなもの
/lab/index.php　：　ドメイン名の後に来るのは、ディレクトリ名やファイル名。/  /で挟まれた部分は、一番最後の文字列で
　　　　　　　　　　示されたファイル名が入っているディレクトリを示しており、パスと呼ばれる。

　つまり、上のURLは、全部で、

bean.bio.chiba-u.jpというサーバの中のlabというディレクトリにあるindex.phpにhttpで接続しなさい

ということを表している。インターネットを介した情報へのアクセスのほとんどは、URLによるアドレス指定が必要。

• 演習問題：

  www.chiba-u.jp　はどのようなドメイン名か説明しなさい。

http://bean.bio.chiba-u.jp/lab/　というドメイン名を使った書き方をしなくても、 http://133.82.xxx.xxx/lab/ というアクセス指定をしても同じページが表示される。実は、インターネットを介してアクセスできるコンピュータの１台１台は、固有のIPアドレスという、0から255までの数字が４つ並んだ名前を持っている。でも、数字じゃ分かりにくいので、上のURLで説明したドメイン名という理解しやすい文字列に変換して使っている。IPアドレスは数字を見ても分かるように個数が限られており、大切な資産になっている。なお、上の演習問題にある www.chiba-u.jp のIPアドレスは、172.26.1.133 だ。

• 演習： http://172.26.1.133/　に接続してみよう

ウェブページは１つのファイル。サーバ上にウェブページ公開用ディレクトリに置かれている †

　さて、http://172.26.1.133/　にアクセスすると、千葉大学のホームページが表示される。

• 質問：http://172.26.1.133/ はウェブサーバというコンピュータのアドレスだと説明した。では、どうしてホームページというファイルが表示されるだろう？

• 答え：ウェブサーバに対して、URL（又はIPアドレス）だけでhttpアクセスがあったら、index.htmlやindex.htmなどのページが表示されるようになっている。

上の例だと、

千葉大のウェブサーバは(www.chiba-u.jp, 172.26.1.133)というアドレスで番地指定されている
このサーバに対して、http:接続しろという情報がインターネットを介して流れてきて、
しかも、どのファイルに接続しろという情報が書かれていなかったので
index.htmlというページを表示した

ということだ。試しに、次の接続をやってみよう。

• http://www.chiba-u.jp/index.html 　先ほどと同じページが表示された。ではこのページは千葉大のウェブサーバの何処に入っているのでしょうか？詳しくは分かりませんが、たぶん、

  /usr/local/apache/html/　とか
  /var/www/html/　　　　　

  に入っているのだろうと想像している。この書き方は、コンピュータの中のディレクトリ（「フォルダ」とほぼ同義）を示すもので、

  /var/www/html/　は
   /　ルートディレクトリ（そのコンピュータのディスクの最も上位階層のディレクトリのこと）の
   www/ 　wwwというディレクトリの（こういう名前は特に定められている訳ではない）
   html/  htmlディレクトリの中
  を示します。

  　例えば、http://www.chiba-u.jp/contact.html　で問い合わせ一覧にアクセスすると、自動的に

   /var/www/html/

  　というディレクトリの中を探し、

   contact.html

  というファイルがあったら、表示してくれるわけだ。http://www.chiba-u.jp/contact2.htmlとやっても、contact2.htmlというファイルが見つからなければ、表示されない。

ウェブページはHTML(Hyper Text Markup Language)という言語で書かれている †

皆さんが普段みているウェブページには、文字の大きさを様々に変えて分かりやすく表示してあったり、色や配置が工夫されているものも多い。こういう文字の書式やレイアウトは、HTMLという言語を使って指定されている。ここで理解して欲しいのは、次の２点。

この授業では、どういうタグを使えばどのようなウェブページが作れるかということは、詳しくは説明しない。ウェブページでのいろんな表現手段に関しては、ウェブ上にとても丁寧で分かりやすい説明があるので、下のサイトを見て、必要に応じて勉強してほしい。非常に詳しい解説が載っているので、独学でも大丈夫。

• とほほのWWW入門　http://www.tohoho-web.com/　初心者から上級者まで使える。HTMLのリファレンスが充実している。
  • ホームページ入門　http://www.tohoho-web.com/wwwbeg.htm　から読み始めると理解しやすい。

簡単なHTML書類の作成 †

　でも、せっかくなので、これからとても簡単なウェブページを作成してみる。ウェブページの本体はテキストファイルなので、K2Editorを使って作成してみよう。

• K2Editorを立ち上げる
• 次の内容をコピーペーストする。<body>と</body>の間なら、新しく何かすきな文字を書き込んでも構わない。

  <html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
  <title> My First Web Page </title>
  </head>
  <body>
  <img src="logo_chiba-u.gif" alt="千葉大学 Chiba university" border="0">
  <h1> あなたの名前をここに書く　</h1>
  <hr>
  <ul>
   <li><p><a href="http://life.s.chiba-u.jp/bio/">千葉大学理学部生物学科</a></p></li>
   <li><p>趣味：。。。。</p></li>
  </ul>
  <hr>
  <h2> 第10回予習課題の答え</h2>
  <font size="3"><i><b>HTMLの世界にようこそ！</b></i></font>
  </body>
  </html>

• マイドキュメントに　index.html　という名前で保存（必ず半角文字にすること）
• logo_chiba-u.gifを右クリックでダウンロードして、上のindex.htmlと同じフォルダに保存する。
• では、できあがったページをFireFoxで開いて（メニューバー／ファイル／ファイルを開く）内容を確認してみよう

自分のホームページを公開しよう †

では、今作成したウェブページを実際にインターネットで公開してみましょう。千葉大学で使っている教育用計算機システムでは、学生個人が作ったウェブページを簡単にインターネット公開することができる（公序良俗に反するようなものは公開しないこと。また、著作権にも注意）。

• ウェブサイトの公開設定の方法
  • http://cuweb.imit.chiba-u.jp/cgi-bin/mkpub.cgi にアクセス。下のような画面が表示される。

    
    システムへのログインIDとパスワードを入力。

• ウェブページの設置：　上の操作を行うことで、

  z:\public_html

  というディレクトリが作成される。このディレクトリに入れたファイルは全て、インターネットに公開されるので要注意。

  このディレクトリに、先ほど作成したindex.htmlとlogo_chiba-u.gifを入れてください。

• ウェブページへのアクセス
  • http://cuweb.imit.chiba-u.jp/~ユーザ名/HTMLファイル名
    でアクセスすることができる。自分や友達のユーザ名（ID)を入力してアクセスしてみよう。

• ウェブページの非公開設定の方法
  • http://cuweb.imit.chiba-u.jp/cgi-bin/mkpub.cgi にアクセスして、ユーザ名とパスワードを入力し、「close」をクリック。

• パーミッションの変更
  publich_htmlフォルダに移動し、作成したindex.htmlを右クリックしてプロパティを表示。
  
  セキュリティタブをクリックしてEveryoneを選択し、読み出しのボックスをチェック
  
  

ここまででウェブページを介した情報伝達の基本の解説は終わり。今回の復習課題の一つはHTMLファイルを作成して、自分のウェブサイトで公開すること。詳しい内容は、課題のところを見てみよう。

第13回授業の課題 †

• 提出期限：7月16日水曜正午（提出期限を水曜にしました）

課題１．意見調査 †

1. http://bean.bio.chiba-u.jp/joho/index.php?joho20 に、「自分のID」/13　という新しいページを作成し、下の囲みの中にあるアンケートをコピー・ペーストして、「回答：」の後に答えを書き込むこと。

*第13回授業・基本課題 
**氏名：
**課題への回答
-今日の授業の進み方は？（はやい、丁度いい、おそい）
--回答：
-今日の授業の難しさはどう感じましたか（簡単　丁度いい　難しい）：
--回答：
-難しいと答えた人は、特にどの点が難しかったですか？：
--回答：
-今日の授業は（分かった　半分ぐらいは分かった　分からなかった）：
--回答：
-分からないと答えた人は、特にどの点が分からなかったですか？：
--回答：
-今日の講義で分からなかった用語があったら挙げてください：
--回答：
-授業に関する要望・質問があったらなんでもどうぞ：
--回答：
-課題2の答え
--2-1:
--2-2:
-課題3の答え:

課題2（復習）：SQLiteへの挑戦の結果 †

• 授業で作成したwebとginkoというテーブルについて、下の指示にあるようにSQL文を完成させ、実行して得られた結果をページに貼り付けなさい
• 2-1: webというテーブルから全部のカラムをメールドレスで並べ替えて、最初の5件を表示

   select ____  from web order by email limit _;

• 2-2: webとginkoを氏名のヨミガナで連結させ、払い込み金額で並び替えて、最初の5件の氏名と金額を表示

   select ____, ____ from ____ left outer join ginko on ____ = ginko_name ____ by ____ limit 5;

• 評価：
  • 授業の解説通りにテーブルを作成し、SQL文を実行できているかどうか
  • 4点で評価

課題3（予習）：ウェブページの作成と公開 †

• HTMLファイルを１つ作って、授業で解説した方法に従って作成し、レポート提出ページに添付すること。但し、作成するウェブページには、
  • ページタイトルをつけること（<title> </title>というタグで指定する）
  • タイトルと内容が一致していること（「自己紹介」というタイトルのページにRの説明だけが書いてあるのはだめ）
  • 画像の使用も可
  • 授業で作ったindex.htmlを変更すればできるはず。
• 評価：
  • 細かい指定はしないので、条件さえ満たしていれば、どれだけページを修飾してもらってもいいです
  • どれだけ見やすいか・内容が分かりやすいか、どれだけHTML作成に挑戦しているかなど
  • 3点で評価