編集中です！！：インターネットを介した情報伝達：ウェブページ、HTML、CGI †

　この授業では、ウェブページを作る方法を学びます。また、インターネットを介して、情報がどのように伝達されているかを理解します。

どうしてウェブページの作成が生物学で必要なんだろう？と思うかもしれません。でも、今や、ウェブページを用いた情報発信は、生物学者に限らず、研究者全てに求められています。研究者になる人は、いつか必ず、ウェブページを作成することになるでしょう。研究の内容によっては、単純なウェブページでは無く、研究結果のデータベース公開（例：）研究者でなくても、一般の企業や、個人事業、あるいは単に趣味として、このクラスの半分以上の人が、将来、ウェブページの管理を経験することがあると思います。そんなときに、

コンテンツ（ウェブページの中身のこと）をいつも新鮮に保つにはどうすればよいか？
コンテンツとして利用可能な大量の情報をどうやって処理すればいいか？

というところで、できる人とできない人が感じるストレスや、かけなければいけない時間の違いは歴然としています。

　インターネットを介して、情報がどのように伝達されるかは、ウェブページを閲覧したり、メールを送受信したりするときには、特に意識していないとは思います。ウェブページの１カ所をクリックすれば、別のページを見ることができる。そこまでは、この授業を受けている人、全員が理解していことです。でも、インターネットを介して他の人のページを見るときに、あなたの情報もある程度、相手に送られていることを知っている人はどれくらいいるでしょうか？それに、もしかすると、あなたがどのページを見ているとか、どんな情報を送信したかとか、場合によっては見られてしまうこともあります。

　この授業では、ウェブページの仕組みと、HTMLの基本を理解した後、PHPというスクリプト言語を用いてHTMLを動的に生成することで、コンテンツの鮮度を保ち、情報を取捨選択してウェブページに載せる方法を学びます。さらに、次回で学ぶデータベースシステムと組み合わせれば、インターネットを介して自分のデータベースを公開できます。授業の成績返却ページや、私も関わっているYList（植物和名ー学名インデックス）で見られるように、いろいろと便利な技です。これらの事を学ぶ過程で、インターネットを介して、どのような情報が流れているのかの概略を理解します。

↑

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

#ref(): File not found: "slide11-1.gif" at page "授業/H21/情報処理/15"

　ところで、普段皆さんが使っているインターネット。何度か授業で説明しましたが、ネットワークをはさんでこちら側（ローカルといいます）のコンピュータとあちら側（リモートといいます）のコンピュータがあります。こちら側のコンピュータをクライアント、あちら側のコンピュータをサーバ（＊サーバーと言ってもいいですが、コンピュータ関係の人は割と、最後の長音記号を省略することが多いのです）と呼びます。では、ここでおさらい。

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

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

↑

URLってなに？ †

　URLっていう言葉、聞いたことがありますよね。Uniform Resource Locator　の略で、インターネット上にある情報（resource）の場所を表す(locate)、統一的な(uniform)記述方式です。例えば、

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

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

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による番地指定が必要です。

　http://bean.bioc.hiba-u.jp/lab/　というドメイン名を使った書き方をしなくても、 http://133.82.xxx.xxx/lab/ というアクセス指定をしても同じページが表示されます。実は、インターネットを介してアクセスできるコンピュータの１台１台には、固有のIPアドレスというもう一つの名前が付いています。IPアドレスは0〜255までの数字が４つ並んだものです。上の演習問題にある www.chiba-u.jp のIPアドレスは、133.82.254.132 です。

　インターネットを介してアクセスできるコンピュータが持つ固有のアドレスは、実は、IPアドレスです。でも、数字じゃ分かりにくいので、ドメイン名という理解しやすい文字列に変換して使っているのです。IPアドレスは数字を見ても分かるように有限個ですよね。IPアドレスは大切な資産なのですよ。詳しいことは教科書を見ましょう。

↑

インターネットを利用した情報の提示【p.108-124参照】 †

↑

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

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

　上の例だと、

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

ということです。試しに、次の接続をやってみましょう。

↑

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

　　また言語かー。。。 [sad]

という声が聞こえてきそうですが、HTML自身はプログラミングとはそんなに関係ありません。ここで理解して欲しいのは、次の２点です。

1. ウェブページの本体は、HTMLという書式で書かれたテキストファイルで、ウェブサーバに置かれている
2. タグ（< > で囲まれた書式指定用の命令）に従って、ブラウザが書式や画像の配置などを決めている

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

↑

でも、とりあえず、簡単なHTML書類を準備しよう †

　これからウェブページの作成をするのですが、とりあえず、最も簡単なサンプルを準備してみます。

↑

教育情報システムにSFTP接続して、ファイルを転送してみる †

これからSFTPによるサーバへのファイル転送を試します。転送作業の面倒さを体験してもらうだけで、公開はしません

　このままではindex.htmlの内容は公開されないが、ファイルメニューからプロパティを開いて、パーミッション（ファイルやレクトリに誰がどのようにアクセスできるか、制限をかけること）以下のように変更すると、公開できます。

自分のホームディレクトリ  全ての利用者に読み込み可能・実行可能に
先ほど作成したpublic_htmlディレクトリ  全ての利用者に読み込み可能・実行可能に
個々のウェブページ(index.html)など  全ての利用者に読み込み可能に

この授業では、パーミション変更の操作やファイル転送の操作が面倒なので、ローカルのコンピュータ（自分のコンピュータ）の中に仮想的なウェブサーバを作って、ウェブページの操作などを学ぶ。

↑

授業ではXitamiを使って、仮想的なウェブサーバをローカルのコンピュータ内に作る †

↑

XitamiとPHPの設定ファイルをコピー †

#ref(): File not found: "slide11-2.gif" at page "授業/H21/情報処理/15"

　では、ローカルマシンに仮想的なウェブサーバーを作ります。次の２つのファイルをダウンロードして、それぞれを指定する場所にコピーしてください。XitamiもPHPも教育用計算機システムの上で動かすには、いくつか設定が必要になります。いまコピーした２つの設定ファイル（テキストファイルです）には、私が設定を書き込んでおきました。

↑

仮想ウェブサーバの起動とhttp接続確認 †

　それでは、あなたのコンピュータで、仮想ウェブサーバを起動してみましょう。

  1. マイドキュメントのxitamiフォルダを開く
  2. Xitami32gui.exeをダブルクリックする
  3. セキュリティに関するメッセージが表示されるが、構わずOK
  4. タスクトレイの中に緑色のＸのマークが表示されたら起動は成功。マークが赤色だったり、表示されなかったら、インストールからやり直し

　起動が成功していたら、仮想ウェブサーバにアクセスしてみます。FireFoxを立ち上げて、アドレスバーに

http://localhost

　と入力してください。localhostというのは、名前の通り、ローカルのコンピュータ、つまり、あなたのコンピュータがサーバとしてhttp通信用に開いている部分にアクセスしなさいよということです。仮想ウェブサーバが立ち上がっていれば、Xitamiの説明が表示されます。

それでは、仮想ウェブサーバに先ほど作ったhtmlファイルをアップロード（とはいえ、自分のコンピュータの中でファイルを移動するだけですが）してみましょう。

  1. マイドキュメントのxitamiフォルダの中のwebpageフォルダに先ほどの、index.htmlというファイルをコピーする

これでけです。

では、もう一度、FireFoxから、　http://localhost　に接続してみましょう。先ほどのページが表示されたでしょうか？

↑

動的HTMLの作成 †

　皆さんに準備してもらったXitamiでは、PHPというスクリプト言語を使って、動的HTMLを作成できるようにしてあります。K2エディターで

<?php
 phpinfo();
?>

と書かれたファイルを作って、info.phpという名前でセーブし、先ほどのwebpageといフォルダにコピーして、fire foxでアクセスしてみて下さい。

↑

第15回授業の課題 †

全ての課題は、http://bean.bio.chiba-u.jp/joho21/ に、「自分のID/15」という新しいページを作成し、これまでの提出例にならって、分かりやすく書き込むこと。あまりに読みにくい回答は減点します。ページの書式を変更するには、編集ページで、「テキスト整形のルールを表示する」をクリックすると、（長くて読みづらいですが）ページの書式設定のルールが表示されます。Pukiwikiでは、専用の書式指定で書き込みすると、サーバ側のプログラムがそれをHTMLタグに翻訳して、クライアントに送信してくれるというわけです。

↑

課題１．意見調査 †

　下の囲みの中にあるアンケートをコピー・ペーストして、「回答：」の後に答えを書き込むこと。

*第11回授業アンケート
**氏名：
**課題への回答
-今日（6月29日）の授業の進み方は？（はやい、丁度いい、おそい）
--回答：
-今日の授業の難しさはどう感じましたか（簡単すぎ　簡単　丁度いい　難しい　難しすぎ）：
--回答：
-難しいと答えた人は、特にどの点が難しかったですか？：
--回答：
-今日の授業は（よく分かった　分かった　分からなかった）：
--回答：
-分からないと答えた人は、特にどの点が分からなかったですか？：
--回答：
-今日の講義で理解できなかった用語があったら挙げてください：
--回答：
↑

復習課題：ウェブページとHTMLについて †