授業/H21/情報処理/15

インターネットを介した情報伝達：ウェブページ、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による番地指定が必要です。

• 演習問題：

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

　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 です。

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

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

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

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

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

• 質問：http://133.82.254.132/ はウェブサーバという機械のアドレスのはずなのに、どうしてホームページが表示されるだろう？

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

　上の例だと、

千葉大のウェブサーバ(www.chiba-u.jp, 133.82.254.132)というアドレスで番地指定されている
このサーバに対して、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自身はプログラミングとはそんなに関係ありません。ここで理解して欲しいのは、次の２点です。

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

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

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

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

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

  <html>
  <head>
  <title> My First Web Page </title>
  </head>
  <body>
  <img src="http://www.chiba-u.ac.jp/image_common/logo_chiba-u.gif" alt="千葉大学 Chiba university" border="0">
  <h1> あなたの名前をここに書く　</h1>
  <hr>
  <ul>
   <li><p>千葉大学理学部生物学科</p></li>
   <li><p>趣味：。。。。</p></li>
  </ul>
  <hr>
  <h2> <a href="http://bean.bio.chiba-u.jp/lab/index.php?%BC%F8%B6%C8%2FH18%2F%BE%F0%CA%F3%BD%E8%CD%FD%2F10#t8686d3c">
  第10回予習課題の答え</a></h2>
  <font size="16"><i><b>HTMLの世界にようこそ！</b></i></font>
  </body>
  </html>

• マイドキュメントに　index.html　という名前で保存（必ず半角文字にすること）

• では、できあがったページをFireFoxで内容を確認してみよう 　どうです？予習課題の１番目の答えはこれで分かりましたよね。

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

• スタートメニューからWinSCPを起動
• cuxxx.imit.chiba-u.jpに接続。アカウントとユーザー名は、教育用システムのものと同じ
  • メッセージウィンドウが表示されるが、構わずOK
• 右側のウィンドウがサーバにおけるあなたのホームディレクトリ
• ホームディレクトリを右クリックして、「新規フォルダ」を作成
  • 名前は必ず、下の通りにする

    public_html

• 左のウィンドウに先ほど作ったindex.htmlがあるので、これを右側の public.html にコピーする
• これでファイルの転送作業は完了

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

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

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

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

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

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

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

• &ref(): File not found: "defaults.cfg" at page "授業/H21/情報処理/15";　→　マイドキュメントのxitamiの中へ
• &ref(): File not found: "php.ini" at page "授業/H21/情報処理/15";　→　マイドキュメントの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タグに翻訳して、クライアントに送信してくれるというわけです。

• 提出期限：7月29日水曜正午（下記課題全て）

課題1：この授業での意見調査結果の集計： †

　授業/H21/情報処理/課題結果には、第2回から第13回までの、進行速度、難易度、理解度の集計結果があります。

• 課題1-1:　３項目のデータを集計して分かりやすいグラフを作成し、課題提出ページに画像を貼り付けなさい。
• 課題1-2:　集計結果とグラフから読み取れる内容を分かりやすく説明しなさい。
  • 評価ポイント：
    • データを集計して、分かりやすいグラフを作成できているかどうか
    • 集計結果を正しく解釈できているかどうか
    • 全部はできなくても、できたところまで提出してください。部分点をつけます。

おまけ：最近のOazawa-kenのスコア †

• Ozawa-kenでタイピング練習を行い、表示されたスコアの勲章画像をダウンロードして、課題提出ページの所定の位置に添付して下さい。