授業/H18/情報処理/11

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

＊＊6月26日までこのページにあった「Ｒを使ったプログラミング（２）」は、授業/H18/情報処理/10に移動しました。

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

あれ？どうしてウェブページの作成が生物学で必要なんだろう？

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

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

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

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

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

ネットワーク【198-219参照】 †

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

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

あなたが普段使っている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の設定ファイルをコピー †

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

• defaults.cfg　→　マイドキュメントのxitamiの中へ
• php.ini　→　マイドキュメントの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でアクセスしてみて下さい。

第11回授業の課題 †

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

• 提出期限：7月5日水曜正午（下記課題全て）
  • 提出期限を過ぎたものでも、点数を半分にするなどで評価しています。

課題１．意見調査 †

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

*第11回授業アンケート
**氏名：
**課題への回答
-今日（6月29日）の授業の進み方は？（はやい、丁度いい、おそい）
--回答：
-今日の授業の難しさはどう感じましたか（簡単すぎ　簡単　丁度いい　難しい　難しすぎ）：
--回答：
-難しいと答えた人は、特にどの点が難しかったですか？：
--回答：
-今日の授業は（よく分かった　分かった　分からなかった）：
--回答：
-分からないと答えた人は、特にどの点が分からなかったですか？：
--回答：
-今日の講義で理解できなかった用語があったら挙げてください：
--回答：
-授業でDNAの塩基配列データベースについて習いましたか？
--回答：
-系統学入門の授業で習った系統樹作成法は何ですか？
--回答：
-５種類ぐらいの塩基配列データを渡されたとき、習ったうちのどれかの方法で系統樹を作れますか？
--回答：

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

• HTMLファイルを１つ作って、「自分のID.html｣という名前でレポート提出ページに添付しなさい。但し、
  • ページタイトルをつけること（<title> </title>というタグで指定する）
  • タイトルと内容が一致していること（「自己紹介」というタイトルのページにRの説明だけが書いてあるのはだめ）
  • 画像の使用も可（pukiwikiシステムでページに添付し、その画像のurlをページに書き込めばよい）
  • 基本的には授業で作ったindex.htmlを変更すればできると思います。

• 評価：
  • 細かい指定はしないので、条件さえ満たしていれば、どれだけページを修飾してもらってもいいです
  • HTMLを正しく作成できるかどうか
  • どれだけ見やすいか・内容が分かりやすいかなど

予習課題：DNAデータベース †

以下の設問に答えなさい（授業/H18/情報処理/12に関連ページへのリンクがあります）

• 問1：ゲノムプロジェクトなど、生物のDNA情報はものすごい勢いで明らかにされています。明らかになったDNAの塩基配列は、誰もがアクセスできるデータベースで公開されています。DNAデータベースとして有名なGenBank, EMBL, DDBJの関係として正しいのは、次の3つのうちのどれでしょうか？
  • a. GenBankはアメリカの、EMBLはヨーロッパの、DDBJは日本のデータベースで、それぞれ全く独立にデータを保存しており、ユーザーは、通常、この３つのそれぞれで別々にデータ検索を行う必要がある。
  • b. GenBankはアメリカの、EMBLはヨーロッパの、DDBJは日本のデータベースだが、３つとも同じもので、大本はGenBankを運営しているアメリカのNIHである。EMBLとDDBJはそれぞれの地域での受入窓口に過ぎない。
  • c. GenBankはアメリカの、EMBLはヨーロッパの、DDBJは日本のデータベースで、それぞれ独立にデータを保存しているが、データ検索の際には、全部を一括して検索できる。
• 問2：DNAデータベースには、日々、生物の塩基配列情報が登録されています。登録の際には、
  • a. データ登録は誰でもできる。登録者は、ウェブページの画面の指示に従って、自分でデータを送信する。それにより、データベースに自動的に登録される。
  • b. データ登録は誰でもできる。登録者は、ウェブページの画面の指示に従って、自分でデータを送信する。送信されたデータは、データベース管理者によってチェックされ、問題が無ければ登録される。
  • c. データ登録は、大学や研究所の職員などに限られている。研究者自らが全ての項目をチェックして、与えられたIDとパスワードで、データベースへの登録や修正が行える。
• 問3：日本のDNAデータベースであるDDBJには、あなたがレポートを作成する時点で、何件のデータが登録されているでしょうか？
• 評価：
  • DNAデータベースについて予習したかどうか