三木研究室基礎ゼミ「ホームページゼミ」（第２回）

前回のホームページゼミは，単純なホームページを作ってみることが目的でした．今回は，もうすこし凝ったホームページを作るための方法をいくつか紹介します．

具体的な内容．

レイアウトの変更．（文字寄せ，画像の貼り付け，表組み）
アクセスカウンタの設置方法．
アクセス制限について．
プラグインについて．
JavaScriptについて．

１．レイアウとの変更

この節では，レイアウトに関するタグを３つ紹介します．

１．１　<DIV>

このタグは文字揃えを指定するためのものです．このタグのALIGNという属性に「right」「center」「left」という値を指定することで文字揃えを実現します．

表1.1.1 <DIV>タグ
HTMLの記述	結果
<DIV ALIGN="RIGHT">右揃え</DIV>	右揃え
<DIV ALIGN="CENTER">中央揃え</DIV>	中央揃え
<DIV ALIGN="LEFT">左揃え</DIV>	左揃え

１．２　<MARQUEE>

文字が固定されているだけでは地味な印象があるので，文字を右端から左端のスクロールさせるタグを紹介します．スクロールする回数は自分で決めることもできます．

表1.2.1<MARQUEE>タグ
HTMLの記述	結果
<MARQUEE　LOOP＝回数>スクロール</MARQUEE>	←――――スクロール――――

１．3　<IMG　SRC＝"ファイル名">

ホームページに貼り付ける画像形式にはGIFやJPEGがよく使われます．このタグのSRCという属性に画像のURLを書き込むことでページ内にそういった画像を配置することができます．

表1.3.1 <IMG>タグ
HTMLの記述	結果
<IMG SRC="gif/ｃaｔ.gif">

WIDTH,HEIGHTの属性を指定すれば画像を伸縮表示させることができます．
サイズの指定の仕方にはピクセル数を指定する方法とブラウザの表示領域に対する割合を％で指定する方法があります．

表1.3.2 WIDTH,HEIGHT属性
HTMLの記述	結果
<IMG SRC="gif/cat.gif" WIDTH="67" HEIGHT="104">
<IMG SRC="gif/cat.gif" WIDTH="50">
<IMG SRC="gif/cat.gif" HEIGHT="80">
<IMG SRC="gif/cat.gif" WIDTH="100" HEIGHT="80">

ALIGN,HSPACE,VSPACE属性で画像周辺の文字の配置方法を指定できます．

表1.3.3 ALIGN,HSPACE,VSPACE属性
HTMLの記述と説明	結果
top<IMG SRC="gif/cat.gif" ALIGN="top">を指定しました．補足・縦方向のALIGNには他にmiddleとbottomがあります．	topを指定しました．補足・縦方向のALIGNには他にmiddleとbottomがあります．
<IMG SRC="gif/cat.gif" ALIGN="left">leftを指定しました．補足１・横方向のALIGNには他にrightがあります．補足２・回り込みを終了するときは<BR CLEAR=c>を使います．（ただし，c=right,left,all．rightなら右端に配置したイメージの下端を過ぎたところまで改行します．）	leftを指定しました．補足１・横方向のALIGNには他にrightがあります． <BR clear="left">で回り込み終了．
文章と画像の間にスペースを空けます．<IMG SRC="gif/cat.gif" ALIGN="right" HSPACE="5" VSPACE="5" >HSPACEで文字と画像の間の横方向のスペースを，VSPACEで縦方向のスペースをそれぞれピクセル数で指定します．	文章と画像の間にスペースを空けます．HSPACEで文字と画像の間の横方向のスペースを，VSPACEで縦方向のスペースをそれぞれピクセル数で指定します．

ALT属性で画像を表示できないブラウザでページを表示したときに，画像の代わりに文字を表示させることができます．

表1.3.4 ALT属性
HTMLの記述と説明	結果
<IMG SRC="gif/cat.gif" ALT="黒猫">ALT属性を指定しておけば，画像を表示できないブラウザで表示させたときに，画像の代わりに文字を表示させることができます．補足・ALTを指定しておけば，画像の上にカーソルをあわせたときにその文字がポップアップ表示されます．	ALT属性を指定しておけば，画像を表示できないブラウザで表示させたときに，・・・

BORDER属性で画像の枠線の太さを指定できます．

表1.3.5 BORDER属性
HTMLの記述と説明	結果
<IMG SRC="gif/cat.gif" BORDER="5">BORDER属性を指定すれば画像の枠線の太さを指定できます．補足・枠線の色を変えたいときは<font color="#FF0000"><img ...></font>のようにします．補足・画像にリンクを指定した場合はBORDER属性を指定していなくても枠線がついてしまいます．枠線をつけたくないときにはBORDER=0 を指定するようにします．	BORDER属性を指定すれば画像の枠線の太さを指定できます．

補足・ページの背景に画像を敷き詰めたい場合は<BODY>タグのBACKGROUND属性を用いて，<BODY BACKGROUND="gif/cat.gif">のようにします．
補足・写真のように色数の多い画像はJPEGを，イラストのように色数の少ない画像はGIFを使うようにするのが効果的です．

１．4　<TABLE>
このタグは表組みを作成するためのものです．

表1.4.1 <TABLE>タグ

HTMLの記述と説明

結果

基本的な書式は，


<TABLE>
  <TR>
    <TD>
      １行１列
    </TD>
    <TD>
      １行２列
    </TD>
  </TR>
  <TR>
    <TD>
      ２行１列
    </TD>
    <TD>
      ２行２列
    </TD>
  </TR>
</TABLE>

で，<TR></TR>が「行」，<TD></TD>は「列」を表します．

１行１列	１行２列
２行１列	２行２列

<TABLE>タグの属性はけっこう数がありますのでいくつかずつまとめて説明します．

表1.4.2 BORDER，CELLSPACING，CELLPADDING，BORDERCOLORと<CAPTION>タグ

HTMLの記述と説明

結果


<TABLE BORDER="10" CELLSPACING="5" CELLPADDING="3">
  <CAPTION ALIGN="top">CAPTION<CAPTION>
  <TR>
    <TD>
      １行１列
    </TD>
    <TD>
      １行２列
    </TD>
  </TR>
</TABLE>

BORDERは表の周囲の枠の太さ，CELLSPACINGは表の枠線の太さ，CELLPADDINGは枠線と文字との距離を指定するための属性です．それぞれピクセル数で指定します．

<CAPTION>は表にキャプションを付加したいときに使います．
ALIGN属性にtopを指定すればキャプションは表の上に，bottomを指定すれば表の下に表示されます．

CAPTION
１行１列	１行２列

表1.4.3 WIDTH，HEIGHT，BGCOLOR

HTMLの記述と説明

結果

<TABLE BORDER="1" WIDTH="200" height="100">
  <TR>
    <TD WIDTH="130" HEIGHT="80" BGCOLOR="#FF0000">
      １行１列
    </TD>
    <TD WIDTH="*" HEIGHT="80">
      １行２列
    </TD>
  </TR>
  <TR BGCOLOR="#00FFFF">
    <TD HEIGHT="*">
      ２行１列
    </TD>
    <TD HEIGHT="*">
      ２行２列
    </TD>
  </TR>
</TABLE>

WIDTHとHEIGHTはテーブルのサイズを指定するための属性です．サイズはピクセル数か，ウィンドウに対する割合（％）で指定します．
<TABLE>タグにこの属性を指定すればテーブル全体のサイズが，<TD>タグにこの属性を指定すればそのセルのサイズが指定されます．

CAPTION
１行１列	１行２列
２行１列	２行２列

表1.4.4 ROWSPAN，COLSPAN，ALIGN，VALIGN

HTMLの記述と説明

<table border="1" width="200" height="100">
  <tr align="right" valign="middle">
    <td colspan="2" height="80" bgcolor="#FF0000">横を結合</td>
  </tr>
  <tr>
    <td height="*">　</td>
    <td height="0" rowspan="2" valign="bottom" align="center" bgcolor="#00FFFF">縦を結合</td>
  </tr>
  <tr>
    <td height="*">　</td>
  </tr>
</table>

ROWSPANは縦方向のセルを結合する時に使います．ROWSPAN="結合したいセルの数"という形で指定します．
COLSPANは横方向のセルを結合するときに使います．COLSPAN="結合したいセルの数"という形で指定します．
ALIGNは，セル内の横方向の配置を設定する時に使います．値として"left","center","right"がとれます．
VALIGNは，セル内の縦方向の配置を設定するときに使います．値として"top","middle","bottom"がとれます．

結果

横を結合
	縦を結合

２．アクセスカウンタの設置方法

カウンタの設置方法と簡単なカスタマイズ
カウンタはCGIというプログラムを用いて作ります．これは，情報をブラウザーとWebサーバー上のコンピュータプログラムとの間でやりとりするために，Webサーバー(Webページを送信するコンピュータ)が使うプログラムです．
カウンタのためのCGIプログラム自体はすでに"/usr/WWW/cgi-bin/count.cgi"にあるのでそれを利用すればいいのですが，自分のホームページのカウンターのデータを保存しておくためのファイルを作らなくてはなりません．
そのdataファイルは/usr/WWW/Counter/dataディレクトリに作ります.dataファイルを作るには，通常以下のようにmikilabにsshでログインし，作成します.
ここで，dataファイル名(x.dat)のxは他の人と区別するために，自分のアカウント名を使ったりするなどして下さい．

hide@mikilab:~ $ cd ../../usr/WWW/Counter/data
hide@mikilab:/usr/WWW/Counter/data $ echo 1 > hidecount.dat
hide@mikilab:/usr/WWW/Counter/data $ chmod 666 hidecount.dat

カウンタの見た目を変えるためには<img src="/cgi-bin/Count.cgi?xxxxx">の?の後に続くxxxxxを変更します．これを使いこなす事によっていろんなスタイルを楽しめます.
初期設定(オプションを他に付けていない場合)は，<img src="/cgi-bin/Count.cgi?df=x.dat">となっていまが，この設定ではフレームカラーは青色でフレームの幅６ピクセル、文字スタイルはAタイプ桁数は６桁となります.

カウンターのカスタマイズの例をいくつか表にしました．

カウンターのフレームの大きさ	ft=10進数
カウンターの文字色	frgb=6桁の16進数で表記
3桁ずつコンマで区切る	comma=T
カウンターの文字スタイル	dd=(A～E)
文字盤色反転	negate=T
カウンターを回転させる	degrees=(90度単位で数字を指定)
文字盤の中を透過させる	tr=T(続けて透過させたい色はtrgb=6桁の16進数で表記で指定)
カウンターを消す	sh=0
カウンター桁数のアレンジ	md=桁数(または自動調節はpad=0)
時刻表示	display=clock&tformat=24
年月日表示	display=date&dformat=YYMMDD

そのうちいくつかの例を示します．

例1：フレームピクセル「１５」　 ft=15 　フレームカラー「赤」 frgb=ff0000

<img src="/cgi-bin/Count.cgi?ft=15&frgb=ff0000&df=x.dat">

例2：カウンターの文字スタイルの指定　Cタイプ dd=C

<img src="/cgi-bin/Count.cgi?df=x.dat&dd=C">

例3：90度回転 degrees=90

<img src="/cgi-bin/Count.cgi?degrees=90&df=x.dat">

例4：10桁表示 md=10
<img src="/cgi-bin/Count.cgi?md=10&df=x.dat">

例5：年月日の日本式表示(YY：年 MM：月 DD日） display=date&dformat=YYMMDD

<img src="/cgi-bin/Count.cgi?display=date&dformat=YYMMDD">

詳細は，三重県マルチメディア研究会を参照してください．
アドレス「http://www.mie-mm.org/report/tsubaya/wwwcount/sample24.html」.

皆さん,これに飽きたら自分でカウンターを作ってみましょう。

３．ファイルのアクセス制限

３．１　この章の概要

この章では、以下の3点について詳しく説明します。

ホームページのアクセス制限とは
アクセス制限の方法
.htaccessの書き方

３．２　アクセス制限

３．２．１ホームページのアクセス制限とは

アクセス制限とはその名の通り特定ページへのアクセス（見る許可）を限定するもので特定のドメインだけに限定したり，また逆に特定のドメインからのアクセスを禁止したり，IDとパスワードを持っている人だけしかページを見られないようすることです．

３．２．２アクセス制限の方法

インターネット上にホームページを公開するためにmikilabマシンはapacheと言うソフトウェアを使用しており，「.htaccess」というファイルをアクセス制限したいディレクトリに置くことによりアクセス制限を行うことができます．
ここで紹介するアクセス制限には制限方法と制限対象がそれぞれ２種類あります．制限方法は以下の２種類があります．

制限対象は以下の２種類がありますが，基本的にはIとなります．

どの種類の組み合わせになるのかは「.htaccess」の記述に依ります．ここではアクセス制限をするためにどのようなことをすればいいのかのみを解説します．

３．３ .htaccess

３．３．１ IDとパスワードで制限する

IDとパスワードで制限するには.htaccessを次のように記述します．

.htaccessの記述：

AuthUserFile /home/kenzo/.htpasswd-file

AuthName ByPassword

AuthType Basic

<Limit POST GET PUT>

require valid-user

</Limit>

１． Basic認証とは
いわゆるIDとパスワードによる認証と思っていただいて結構です．

２． require valid-user
valid-userを特定のユーザーのIDとすることでそのユーザーにのみにアクセスを許可することができます．たとえばユーザーとしてcat，dog，birdがいるときにcatとbirdにアクセスを許可するには「valid-user cat,bird」とします．

３． パスワードリストファイルとは
アクセスを許可されたユーザーのIDとパスワード（を暗号化したもの）が書かれたファイルです．内容は次のようになっておりコロンの左がID，右が暗号化されたパスワードです．

dia99:o2SROcGrX9wtw

暗号化されたパスワード
このファイルはmikilabマシンの中の「htpasswd」というプログラムを使って作成します．使用法は「htpasswd [-c] 」です．パスワードリストファイルを初めて作るときは「-c」オプションをつけて新規作成します．ファイル名とIDを指定して実行すると使用したいパスワードを聞いてくるので２回入力します．するとカレントディレクトリにfilenameで指定した名前のパスワードファイルができます．次からユーザーを追加するときは「-c」オプションは必要ありません．もし付けてしまうと元のファイルに上書きしてしまいますので気をつけてください．

Example：

$ cd

$ htpasswd -c .htpasswd-file dia99

Adding password for dia99.

New password:

Re-type new password:

「ls -a」で表示されたファイルの中に.htpasswd-fileができていればOKです．

３．３．２ドメインによるアクセス制限
「*.doshisha.ac.jp」からアクセスしているユーザーのみが見られるようにするには.htaccessを次のように書きます．

*.doshisha.ac.jpからのみアクセス可能：

<Limit GET>

order deny,allow

deny from all

allow from .doshisha.ac.jp

</Limit>

逆に「*.doshisha.ac.jp」からアクセスしているユーザーだけには見られないようにするには.htaccessを次のように書きます．

*.doshisha.ac.jpからのみアクセス拒否：

<Limit GET>

order allow,deny

allow from all

deny from .doshisha.ac.jp

</Limit>

「deny from ...」や「allow from ...」は複数書くことができます．またIPアドレスを直接指定することもできます．
ex．deny from 222.111

３．４　 .htaccess(2)

３．４．１実際にアクセス制限を行うには

まずWindows上のテキストエディタ等で.htaccessファイルの内容を作成します．場合によってはピリオドから始まるファイルが作れない場合もあるのでhtaccess.txtなどの名前にしておいてもよいでしょう．次にパスワードによるアクセス制限をかけたい場合はパスワードリストファイルを用意し，.htaccessを正しく設定します．そしてアクセス制限をかけたいディレクトリ（もしくは制限をかけたいファイルがあるディレクトリ）に.htaccessを（ID&PASSを使うならパスワードリストファイルも）ftpソフトなどを使ってアップロードします．

例
"http://mikilab.doshisha.ac.jp/jumpei/access/"以下にドメインとパスワード(ID:Jumpei,PASS:testpw)によるアクセス制限を付けたい場合は次のようにします．

１．.htaccessファイルを編集する：
AuthUserFile /home/jumpei/.htpasswd-file
#↑パスワードリストファイル（後述）を絶対パスで指定する

AuthName ByPassword

#↑ブラウザーがIDとパスワードを入力させるために出すダイアログボックスに表示されるメッセージ

AuthType Basic

#↑認証の種類がBasic認証であることを指定

#↓アクセス制限の対象を記述します

<Files access.html>

order deny,allow

deny from all

allow from .doshisha.ac.jp

</Files>

#以下はコメントとなります．

アップロード先：mikilab.doshsisha.ac.jp/jumpei/public_html/access/.htaccess

２．パスワードリストを作る：
Jumpei:Ih0JQCDPtzxqM
作成先：mikilab.doshsisha.ac.jp/access/.htpasswd-file

３．.htaccessをアップロードする．
これでID&PASSとドメインによるアクセス制限が有効になります．

４．確認
ブラウザでhttp://mikilab.doshisha.ac.jp/jumpei/access/access.htmlを入力してみてください．IDとパスワードの入力を促すダイアログボックスが表示されます

４．クライアント・サイドとサーバサイドの違いについて

WWWはクライアント・サーバモデルで構築されています．サーバ側のソフトウェア代表的なものは Apache Web Server と IIS(Internet Infomation Server) があります． Apache Web Server は各種UNIX上で動作するフリーソフトであり，インターネット上で運用されているWebサーバの中でもトップシェアを誇り，企業でも安心して使用できるものです．
IISはMicrosoft社が提供している商用ソフトウェアであり，WindowsNT上で動作します．

クライアント側ではブラウザというソフトウェアを使って情報を閲覧します．代表的な物としてIEやNCがあるのはご存知でしょう．

WWWの概要

１．２動的なWEBページ
WWWで情報発信されるページは，本来はサーバのディスク内に格納されているhtmlなどといった静的なファイルでした．従来はこれで充分でしたが，最近はWEBサイト二体する要求が高まってきました．
たとえば，インターネットでよくアクセスされるサイト出あろう各種検索サイトの画面は検索した結果はほぼ毎回異なることが普通なので，検索結果を前もって用意することはできません．ここはどうしても，検索結果にしたがって出力画面を動的に生成する仕組みが必要になります．
また，出力結果を動的に生成することができるようになると，従来は専用の端末やクライアント・ソフトウェアを使って行われていたような業務をWEBサーバを経由してブラウザー上で実行することも可能んいなります．webサーバはブラウザ～の要求を実行し，結果だけをブラウザに送り返してやればよいわけです．クライアント側にWEBブラウザ抱きを用意しておくだけで，多くの定型業務がWEBベースに移行できる可能性があります．

●クライアントサイド・スクリプト
サーバからクライアントに対して動的な画面を生成するためのスクリプト（ソースプログラム）を送り，クライアント側のブラウザがそれを逐次解析・実行する形式です．サーバの処理は軽くなりますが，クライアント側にそのスクリプトを処理する能力が必要です．代表的なものとしてJavaScriptやVBScriptがあります．

クライアントサイド・スクリプト

javascriptのソース例（時計表示）

<FORM METHOD="post">
時刻：<INPUT NAME="watch" SIZE="20">
</FORM>


<SCRIPT LANGUAGE="JavaScript">
function watch() {
	setTimeout('watch()', 1000); // 1000msec = 1sec
	now = new Date();
	hour = now.getHours();
	min = now.getMinutes();
	sec = now.getSeconds();
	document.forms[0].elements[0].value = hour+":"+min+":"+sec;
}
watch();
</SCRIPT>

●CGI(Common gateway Interface)
　WEBサーバが，URLで指定されたファイル（CGIプログラム）を外部プログラムとして，起動する形式です．CGIプログラム自体は，そのオペレーティングシステムで動作可能可能なものであればどんなものでもかみませんが，スクリプト言語が使われることが多いようです．
起動されたプログラムはHLTMLを生成し，その出力はWEBサーバを通してそのままクライアント側としてはHTMLの処理能力だけを備えていればよいので，携帯情報端末など比較的低いスペックのものでも動作します．

CGI

CGI(Perl)のソース例（日付）

#!/usr/local/bin/perl print "Content-type: text/html\n\n";
# 日時から連想配列のキーを作成
($sec,$min,$hour,$mday,$mon,$year,$wday,$yday,$isdst) = localtime(time);
　　　$mon++; # 書式付でデータを出力
　　　$str1= sprintf("今日は %02d 月 %02d 日です。",$mon,$mday);
　　　$str2= sprintf("今は %02d 時 %02d 分です。",$hour,$min);
　　print "<HTML><<TITLE>Time MSG</TITLE><BODY><CENTER>\n";
　　print "$str1\n$str2\n";
　　print "</CENTER><P><HR><A HREF=\"$ENV{'HTTP_REFERER'}\">back</A></BODY></HTML>\n";

●サーバサイド・スクリプト

サーバサイド・スクリプトはCGIとよく似ていますが，スクリプトの実行をWEBサーバプロセス自体が行なうと言う点で異なります．このタイプにＰＨＰやMicrosoftのASP(Active Server Pages)があります．

サーバ・サイドスクリプト

ASPのソース例（日付）

<%@ LANGUAGE="vbscript" %>
<html>
<body>
現在は<%=NOW()%>です．
</body>
</html>

３．ファイルのアクセス制限

３．１ この章の概要

３．２ アクセス制限

３．３ .htaccess

３．４ .htaccess(2)

４．クライアント・サイドとサーバサイドの違いについて

３．１　この章の概要

３．２　アクセス制限

３．４　 .htaccess(2)