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

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

1. レイアウトをすこし凝ってみよう．（文字寄せ，画像の貼り付け，表組み）
2. アクセスカウンタの設置方法．
3. アクセス制限について．
4. プラグインについて．
5. JavaScriptについて．

表1.2.1 <IMG>タグ

HTMLの記述	結果
<IMG SRC="gif/snowman.gif">

表1.2.2 WIDTH,HEIGHT属性

HTMLの記述	結果
<IMG SRC="gif/snowman.gif" WIDTH="67" HEIGHT="104">
<IMG SRC="gif/snowman.gif" WIDTH="50">
<IMG SRC="gif/snowman.gif" HEIGHT="80">
<IMG SRC="gif/snowman.gif" WIDTH="100" HEIGHT="80">

表1.2.3 ALIGN,HSPACE,VSPACE属性

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

表1.2.4 ALT属性

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

表1.2.5 BORDER属性

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

基本的な書式は，


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

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

<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>

<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>

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

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

カウンターのフレームの大きさ	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」.

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

３．１　この章の概要

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

３．２　アクセス制限

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

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

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


ここで紹介するアクセス制限には制限方法と制限対象がそれぞれ２種類あります．制限方法は以下の２種類があります．

１．IDとパスワードで制限する
２．ドメインによって制限する

I．特定のディレクトリとそのサブディレクトリ以下にあるすべてのファイル
II．特定のファイル

３．３ .htaccess

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

.htaccessの記述：

---

AuthUserFile /home/kenzo/.htpasswd-file
#↑パスワードリストファイル（後述）を絶対パスで指定する
AuthName ByPassword
#↑ブラウザーがIDとパスワードを入力させるために出すダイアログボックスに表示されるメッセージ
AuthType Basic
#↑認証の種類がBasic認証であることを指定
#↓アクセス制限の対象を記述します
<Limit POST GET PUT>
require valid-user
#↑IDとパスワードを持っているユーザーのアクセスを許可する
</Limit>
#以下はコメントとなります．


---

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

Example：

---

まずsshなどでmikilabに接続します．

$ cd ←カレントディレクトリに移動．
$ /usr/sbin/htpasswd -c .htpasswd-file dia99 ←新規作成
Adding password for dia99.
New password:←パスワードを入力
Re-type new password:←もう一度入力


---

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

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

---

<Limit GET>
order deny,allow
#↑優先順位をアクセス拒否，アクセス許可の順にする．
deny from all
#↑基本的に全員をアクセスを拒否する．
allow from .doshisha.ac.jp
#↑ドメインが「*.doshisha.ac.jp」であるユーザーのアクセスを許可する．
</Limit>


---

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

---

<Limit GET>
order allow,deny
#↑優先順位をアクセス許可，アクセス拒否の順にする．
allow from all
#↑基本的に全員のアクセスを許可する．
deny from .doshisha.ac.jp
#↑ドメインが「*.doshisha.ac.jp」であるユーザーのアクセスを拒否する．
</Limit>


---

.htaccessに次のような記述を加えます．

ファイル単位でのアクセス制限：

---

<Files secret.html>
order deny,allow
deny from all
</Files>


---

上の例ではsecret.htmlへのWWW経由でのアクセスを一切禁止します．また上のものを使いとすることで.htaccess自体を見えなくすることができます．


３．３．４ 複合制限

以上に出てきたものを同時に使い，ドメインとID＆PASSの両方で制限することも可能です．

ファイル単位でのアクセス制限：

---

AuthUserFile /home/kenzo/.htpasswd-file
AuthName ByPassword
AuthType Basic
<File mikilaber.html<
order deny,allow
deny from all
allow from .doshisha.ac.jp
require valid-user
</Limit>


---

これで「*.doshisha.ac.jp」から接続していてかつ，ID&PASSを知っているユーザーしか「mikilaber.html」を見ることはできません．

３．４　 .htaccess(2)

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

例
"http://mikilab.doshisha.ac.jp/tsutsumi/report/index.html"にドメインとパスワード(ID:dia99,PASS:aid99)によるアクセス制限を付けたい場合は次のようにします．

１．.htaccessファイルを編集する：

---

AuthUserFile /home1/tsutsumi/.htpasswd-file
AuthName ByPassword
AuthType Basic
<File index.html>
order deny,allow
deny from all
allow from .doshisha.ac.jp
require valid-user
</File>

---

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

２．パスワードリストを作る：

---

dia99:o2SROcGrX9wtw

---

作成先：mikilab.doshsisha.ac.jp/tsutsumi/.htpasswd-file

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

４．確認
ブラウザでhttp://mikilab.doshisha.ac.jp/tsutsumi/report/index.htmlを入力してみてください．IDとパスワードの入力を促すダイアログボックスが表示されます．もし学外のプロバイダなどからつないでいればドメインによって拒否されるはずです（試してません）．

４．プラグインについて

５．JavaScript

<html><head><title>Sample</title>
<SCRIPT Language="JavaScript">
<!--
function retBoolean()
{
  myValue = document.
  myFORM.myDATA.value;
  flag = Boolean(myValue);
  alert(flag);
}
// -->
</SCRIPT>
</HEAD>
<BODY bgColor="#FFffFF">
<CENTER>
<FORM NAME="myFORM">
<INPUT TYPE="text"
 value="0" NAME="myDATA">
<INPUT TYPE="button"
 onClick="retBoolean()">
</FORM>
</BODY></HTML>