守ろう自由なインターネット

クリッカブル・イメージマップ

画像を表示し,クリックした場所によって他のファイルへリンクさせる事が出来ます。
テキスト表示しか出来ないブラウザでは,使用できない事を考慮して下さい。

  1. サーバーサイド・クリッカブル・イメージマップ
  2. WWWサーバー側のimagemapというソフトを利用して実現しています。

    <a href=マップ><img src=画像ファイル名 ismap></a> で指定します。

    画像ファイル以外にイメージマップ(〜.map)を作成します。
    形状 リンク先 x0座標,y0座標 x1座標,y1座標 ・・・ という形で指定します。

    circle
    円,円の中心と周の1点を指定します。
    rect
    四角形,左上と右下の座標を指定します。
    poly
    多角形,頂点を順に指定します。100角形まで指定出来ます。
    default
    指定された場所以外の時のリンク先を指定します。

    ソースプログラム
    <a href="cmap.map">
    <img src=
    "cmap.gif" ismap border=0></a>
    イメージマップ(cmap.map)
    circle link_1.htm 62,52 90,52
    poly link_2.htm 134,42 165,70 165,94 103,94 103,70
    rect link_4.htm 204,37 260,94
    default links.htm
    画面表示

  3. クライアントサイド・クリッカブル・イメージマップ
  4. Netscape 2.0 や Internet Explorer では,サーバー側の負担無しで クリッカブルマップを実現できます。
    シェアウェアのMapeditを使うとマップを簡単に作れます。
    ペイントブラシで座標を調べて作ることも出来ます。

    <img src=画像ファイル名 usemap=マップ>
    画像とマップ(ファイル名#マップ名)を指定します。
    htmlファイルと同一の場合はファイル名は必要ありません。
    mosaic等の為に ismap も指定する事が多い。

    <area shape=形状 coords="座標" href="リンク先">
    形状はcircle(円),rect(四角形),polygon(多角形)を指定します。
    指定しないときは四角形になります。
    座標はx座標とy座標を交互にコンマで続けて書きます。
    円の場合は中心と半径を指定します。
    リンクしない時は href="リンク先" の代わりに nohref とします。

    <map name=マップ名></map>
    </map>までにマップを書きます。

    ソースプログラム
    <img src="img/cmap.gif" usemap="#map" bordrer=0>
    <map name=
    "map">
    <area shape=circle coords=
    "62,52,28" href="link_1.htm">
    <area shape=polygon coords=
    "134,42,165,70,165,94,103,94,103,70" href="link_2.htm">
    <area shape=rect coords=
    "204,37,260,94" href="link_4.htm">
    <area shape=rect coords=
    "0,0,289,109" href="link_s.htm">
    </map>

    画面表示

  5. 疑似イメージマップ
  6. 一つの画像を縦横に切り分けて画像毎にリンクを設定すれば, 疑似イメージマップを作成できます。
    表の中に表示すると,複雑な設定も出来ます。
    <tr>から</tr>までは1行に書いてください。

    ソースプログラム画面表示
    <table border=0 cellpadding=0 cellspacing=0>
    <tr><td><img src=
    "img/r3.gif"></td>
    <td><a href=
    "link_1.htm">
    <img src=
    "img/r1.gif" border=0></a></td>
    <td><img src=
    "img/r3.gif"></td></tr>
    <tr><td><a href=
    "link_2.htm">
    <img src=
    "img/r4.gif" border=0></a></td>
    </td><td><img src=
    "img/r3.gif"></td>
    <td><a href=
    "link_3.htm">
    <img src=
    "img/r2.gif" border=0></a></td>
    </tr><tr><td><img src=
    "img/r3.gif"></td>
    <td><a href=
    "link_4.htm">
    <img src=
    "img/r0.gif" border=0></a></td>
    <td><img src=
    "img/r3.gif"></td></tr>
    </table>



フォームの使い方

html文書中に記入フォームを作り,CGIプログラムを実行できます。
WEBページの感想をメールで送ったり,WEBページの検索をしたり, 電子掲示板訪問者リスト を作ることも出来ます。

  1. formの設定
  2. <form mehod=処理 action=動作 enctype=符号化>
    フォームを記述します。フォームの終わりは </form> を書きます。
    フォームは入れ子にはできません。
    action=リンク先
    実行するCGIスクリプトを指定します。
    method=GET
    CGIから情報を取得します。
    method=PUT
    サーバーにデータを送ります。
    enctype=エンコード方法
    文字の符号化方法を指定します。

    <input 入力方法>
    入力エリアを作ります。
    type=text
    テキスト入力します。(デフォルト)
    type=password
    テキスト入力しますが,アスタリスク(*)が表示される。
    type=checkbox
    トグルボタンで複数の項目を選択します。
    type=radio
    トグルボタンで1つの項目を選択します。
    type=submit
    CGIスクリプトにデータを送信します。
    type=reset
    入力データを初期値に設定します。
    type=hidden
    表示されないデータを設定します。
    type=button
    ダミーのボタンを表示します。
    type=image
    画像の座標を送ります。
    type=file
    ファイルをアップロードします。
    formにmethod=POST enctype=multipart/form-data を指定してください。
    src="ファイル名"
    type=image の時に画像のファイルを指定してボタンとして表示します。
    type=submit の代わりに使えます。
    name=フィールド名
    入力フィールドの名前を設定します。
    submit と reset 以外で必要になります。
    value=初期値
    値をあらかじめ設定しておくこともできます。
    checked=初期値
    ラジオボタンやチェックボックスをあらかじめ選択状態にします。
    size=長さ
    入力フィールドの長さを指定します。(規定値は20文字)
    size=20,5 は20文字で5行を表します。
    ※漢字は通常2文字で扱いますが,Netscape Navigator 4.0等のunicodeでは1文字として扱います。
    maxlength=最大文字数
    入力が可能な最大文字数を指定します。(1行のときのみ)
    <select name=...>
    選択メニューを作ります。</select>で終わります。
    name=フィールド名
    入力フィールドの名前を設定します。
    size=表示項目数
    指定した数だけメニューの項目が表示されます。
    multiple
    項目を複数選択可能にします。

    <option>
    メニューの項目を書きます。
    <option selected>
    項目をあらかじめ選択します。
    <option value=..>
    サーバーへ代わりに送る文字を設定します。
    <textarea name=フィールド名 rows=行数 cols=列数>
    複数行のテキストを入力します。スクロールバー付きです。
    </textarea> までに初期値を書きます。

    name=フィールド名
    入力フィールドの名前を設定します。
    rows=行数
    行数(縦)を指定します。
    cols=列数
    桁数(横)を指定します。
    warp=折り返し方法
    off入力のまま送信する。
    soft折り返して表示するが,改行は送信しない。
    hard折り返して表示し,改行も含んで送信する。

  3. WWW探索
  4. formからCGIプログラムを起動し,WWW探索をする事ができます。

    ソースプログラム yahoo.co.jpによる検索
    <img src="http://www.yahoo.co.jp/images/recip_sm.gif" align="left">
    <form metod=
    GET action="http://search.yahoo.co.jp/bin/search">
    <input size=
    30 name=p>
    <input type=submit value=
    "Yahoo! 検索">
    </form>
    画面表示

    ソースプログラム google による検索
    <form method=GET action="http://www.google.com/search">
    <table bgcolor=
    white>
    <tr><td>
    <a href=
    "http://www.google.com/">
    <img src=
    "http://www.google.com/logos/Logo_40wht.gif" border=0 alt="Google" align="absmiddle"></a>
    <input type=
    text name=q size=31 maxlength=255 value="">
    <input type=
    hidden name=hl value="ja">
    <input type=
    submit name=btnG value="Google 検索">
    </td></tr>
    </table>
    </form>
    画面表示
    Google

    ソースプログラム ドメイン情報の検索
    <form action="http://whois.jprs.jp/" method=POST>
    <input type=
    hidden name=type value="DOM">
    <input type=
    text name=key size=40>
    <input type=
    submit value="検索">
    </form>
    画面表示

  5. 足跡
  6. WEBページを見たことを示す足跡(手紙)を残すこともできます。
    ボタンを押してもらうことにより,誰が見たのかをメールで調べます。

    ソースプログラム
    <form method=POST action="mailto:kibochan@urban.ne.jp">
    <input type=submit value=
    "一度だけ押して!"></form>
    画面表示

  7. リンクボタン
  8. フォームを使ったリンクボタンを作る人もいます。
    リンクと違って枠が付くので分かりやすいようです。

    <form><td>〜</td>の外に書くことによって,formの次の行が開きません。

    ソースプログラム
    <table><tr>
    <form method=GET action=
    "cg.htm">
    <td><input type=submit value=
    "CGギャラリー"></td>
    </form>
    <form method=GET action=
    "cg/dome0.htm">
    <td><input type=submit value=
    "スライドショー"></td>
    </form>
    </tr></table>
    画面表示

  9. 感想のメール
  10. formを利用して手軽に感想のメールを書いてもらうことが出来ます。
    ※Internet Explorerでは出来ません。(CGIで処理する事)

    ソースプログラム 感想のメール
    <form method=POST action="mailto:kibochan@urban.ne.jp">
    貴方の名前
    <input name=name value="Guest"><br>
    電子メール
    <input name=email size=30><br>
    性   別
    <input type=radio name=sex value=man>
    <input type=radio name=sex value=female>
    <input type=radio name=sex value=xx checked>不明<br>
    年   齢
    <select name=age>
     <option value=
    10>20未満
     <option value=
    20>20代
     <option value=
    30>30代
     <option value=
    40>40以上
    </select><br>

    感   想<br>
    <textarea name=
    res rows=3 cols=54></textarea><br>
    <input type=reset value=
    " リセット ">
    <input type=submit value=
    "メール送信">
    </form>

    画面表示
    貴方の名前
    電子メール
    性   別 不明
    年   齢
    感   想


  11. 入力されたデータの解析
  12. 入力されたデータは次の形で送られます。空白は  + に変換されます。
    漢字等の7ビットで表せない文字や & = % : /%NNに変換されます。

     name1=value1&name2=value2&name3=value3&...

    ※Netscape では <form enctype="text/plain" ...> と変換方法を指定すると符号化されません。
    メールデコードCGIを利用すると読める形で送られてきます。

    取り出すCGI(Common Gataway Interface)プログラムはシェルやPerlで簡単に記述することが出来ます。
    CGIプログラムはシステム(ファイル)を破壊する事もあるので,管理人・プロバイダ と相談して下さい。
    Windowsでは, ClipDecoder for Windows HTML FormDecoder で簡単に取り出せます。

    ソースプログラム シェル
    #!/bin/sh
    IFS='&' set - $QUERY_STRING
    eval $*
    eval `/cgi-bin/cgiparse -init`
    eval `/cgi-bin/cgiparse -form`
    echo "Content-type: text/html"
    echo
    echo "<html>"
    echo "<head>"
    echo "<title>form</title>"
    echo "</head>"
    echo "<body>"
    echo NAME=$FORM_name
    echo EMAIL=$FORM_email
    echo RES=$FORM_res
    echo "</body>"
    echo "</html>"
    exit 0

    このプログラムはCERN httpdに含まれている cgiparseを利用したものです。
    環境変数$FORM_フィールド名に値をセットし,html形式で返します。
    Perlで同様にプログラムすると以下のようになります。

    ソースプログラム Perl
    #!/usr/bin/perl
    print "Content-type: text/html\n\n";
    print "<html>\n";
    print "<head>\n";
    print "<title>form</title>\n";
    print "</head>\n";
    print "<body>\n";
    read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'});
    @pairs = split(/&/, $buffer);
    foreach $pair (@pairs)
    {
     ($name, $value) = split(/=/, $pair);
     $value =~ tr/+/ /;
     $value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg;
     $FORM{$name} = $value;
    }
    print "name=$FORM{'name'}\n";
    print "email=$FORM{'email'}\n";
    print "res=$FORM{'res'}\n";
    print "</body>\n";
    print "</html>\n";

  13. 日本語の処理
  14. 全てEUCコードで行えば問題はありませんが,他のコードで行う場合は漢字が化けて困ります。
    そこで, nkfコマンドjcode.pl を使います。
     jcode.pl(http://www.srekcah.org/jcode/index.html)

    CGIプログラムの属性(UNIXサーバー)
    CGIプログラムは誰もが実行できるように属性を設定します。
    loginかrlogin(telnet)では" chmod 755 count.dat"とします。
    ftpでは"ftp>quote site 755 count.dat"とします。
    CGIプログラムは プロバイダーに指定されたディレクトリーに入れます。

    CGIのディバッグ
    環境変数REQUEST_METHODにGETかPUTを, QUERY_STRING にデータを設定します。
    データの長さをCONTENT_LENGTH に設定して実行します。

  15. 掲示板の作り方
  16. フォームを利用して,訪問者にコメントを書いてもらいましょう。
    掲示板を提供しているプロバイダープログラムを提供しているサービスもあります。

    学校内のイントラネットで動作確認できました。
    ゲストブック中の <!--begin--> 以下に降順に書き込まれます。
    ゲストブックの属性は,誰もが読み書きできるようにします。
    loginかrlogin(telnet)では"chmod 666 guestbook.htm"
    ftpでは"ftp>quote site 666 guestbook.htm"とします。

    ゲストブック(guestbook.htm)
    <html>
    <head>
     <title>GuestBook</title>
    </head>
    <body>
    <!--begin-->
    </body>
    </html>
    入力フォーム(form.htm)
    <html>
    <head>
     <title>Add Guest Book</title>
    </html>
    <body>
    <form method=POST action="guest.pl"><pre>
    <b>Name : </b><input type=text name=name size=50>
    <b>E-mail : </b><input type=text name=email size=50>
    <b>URL : </b><input type=text name=url size=50>
    <b>Comment: </b>
    <textarea name=comments COLS=60 ROWS=6></textarea></pre>
    <input type=submit value="Write">
    <input type=reset value="Reset">
    </form>
    </body>
    </html>
    CGIスクリプト(guest.pl)
    #!/usr/bin/perl
    # Guestbook program for WWW by Matt Wright Ver. 2.3.1
    #Modifyed By kibochan

    require 'jcode.pl';

    $guestbook= "guestbook.htm";
    $date_command = "/usr/bin/date";

    #$date = `$date_command +"%D %T %Z"`; chop($date);
    read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'});
    @pairs = split(/&/, $buffer);

    foreach $pair (@pairs) {
     ($name, $value) = split(/=/, $pair);
     $value =~ tr/+/ /;
     $value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg;
     $value =~ s/<!--(.|\n)*-->//g;
     &jcode'convert(*value, 'sjis');
     $FORM{$name} = $value;
    }

    &no_comments unless $FORM{'comments'};
    &no_name unless $FORM{'name'};

    open (FILE,"$guestbook") || die "Can't Open $guestbook: $!\n";
    @LINES=<FILE>;
    close(FILE);
    $SIZE=@LINES;

    open (GUEST,">$guestbook") || die "Can't Open $guestbook: $!\n";

    for ($i=0;$i<=$SIZE;$i++) {
     $_=$LINES[$i];
     if (/<!--begin-->/) {
      print GUEST "<!--begin-->\n";
      $FORM{'comments'} =~ s/\cM\n/<br>\n/g;

      print GUEST "<b>$FORM{'comments'}</b><br>\n";

      if ($FORM{'url'}) {
       print GUEST "<a href=\"$FORM{'url'}\">$FORM{'name'}</a>";
      }
      else {
       print GUEST "$FORM{'name'}";
      }
      if ( $FORM{'email'} ){
       print GUEST " \&lt;<a href=\"mailto:$FORM{'email'}\">";
       print GUEST "$FORM{'email'}</a>\&gt;";
      }
      print GUEST "<br>\n - $date<hr>\n\n";
     }
     else {
      print GUEST $_;
     }
    }

    close (GUEST);
    &success;

    sub no_comments {
     print "Content-type: text/html\n\n";
     print "<html><title>No Message!!</title>\n";
     print "<body text=#ff0000>\n";
     print "<center><h1>メッセージがありません</h1>\n";
     print "もう一度やり直して下さい。<br>\n";
     exit;
    }
    sub no_name {
     print "Content-type: text/html\n\n";
     print "<html><title>No Name!!</title>\n";
     print "<body text=#ff0000>\n";
     print "<center><h1>名前がありません</h1>\n";
     print "もう一度やり直して下さい。<br>\n";
     exit;
    }

    sub success {
     print "Content-type: text/html\n\n";
     print "<html><head><title>Thank You</title></head>\n";
     print "<body>\n";
     print "<center><h1>メッセージ<br>\n";
     print "ありがとうございました</h1>\n";
     print "<hr size=10>\n";
     print "<b><pre>$FORM{'comments'}</b></pre>\n";
     if ($FORM{'url'}) {
      print "<a href=\"$FORM{'url'}\">$FORM{'name'}</a>";
     }
     else {
      print GUEST "$FORM{'name'}";
     }
     if ( $FORM{'email'} ){
      print GUEST " \&lt;<a href=\"mailto:$FORM{'email'}\">";
      print GUEST "$FORM{'email'}</a>\&gt;";
     }
     print GUEST "<br>\n - $date<hr>\n\n";
     exit;
    }


フレームの作成

Netscape 2.0 や HTML 3.0 のブラウザでは画面を分割して,表示する事ができます。
分割された画面をフレームといいます。
リンク集の様に目次を表示し,選択すると内容が別のフレームに表示の様に使います。

  1. フレームの作り方
  2. <frameset rows="分割の仕方">  〜  </frameset>
    画面を上下に分割します。

    <frameset cols="分割の仕方">  〜  </frameset>
    画面を左右に分割します。

    分割の仕方
    分割の仕方はダブルクォート(")で挟まれた数字,パーセント, アスタリスク(*)で指定します。
    パラメータの数が分割数になります。
    数字はドット数,パーセントは画面の割合,アスタリスクは残りを表します。
    "100,*,100"は左右(上下)100ドットと真ん中が残りの3個に分割します。
    "80%,20%"は画面を80%と20%に分割します。
    "1*,2*,3*"は画面を1:2:3に分割します。
    frameborder=no
    フレームの境界を表示しません。無指定時はyesで表示します。
    ※Netscape 3.0以降,Internet Explorerで有効です。
    border=ドット数
    フレーム境界のドット数を指定します。Netscape 3.0以降で有効です。
    bordercolor=#ggbb
    フレーム全体の境界線の色を指定します。Netscape 3.0以降で有効です。

    <frame src="ファイル名">
    分割されたフレームのファイル名(〜.html)を指定します。

    name="フレーム名"
    分割されたフレームの名前を付けます。
    noresize
    分割されたフレームの境界の変更を禁止します。
    marginwidth=左右マージン
    フレームの左右のマージン(空白域)をドット数で指定します。
    marginheight=上下マージン
    フレームの上下のマージン(空白域)をドット数で指定します。
    scrolling=...
    スクロールバーの表示を制御します。
    yesは常に表示,noは非表示, autoは自動(規定値)です。
    bordercolor=#ggbb
    このフレームの境界線の色を指定します。Netscape 3.0以降で有効です。

    <noframes>  〜  </noframes>
    フレーム表示出来ないブラウザでのボディ(本文)を書きます。

    ソースプログラム画面表示
    <html><head>
    <title>
    横分割</title>
    </head>
    <frameset cols=
    "50%,*">
     <frame src=
    "frame1.htm">
     <frame src=
    "frame2.htm">
     <noframes></noframes>
    </frameset>
    </html>
    横分割 - Netscape
    File Edit View Go Communicator Help


    frame1




    frame2


    <html><head>
    <title>
    縦分割</title>
    </head>
    <frameset rows=
    "20,20,*">
     <frame src=
    "frame1.htm">
     <frame src=
    "frame2.htm">
     <frame src=
    "frame3.htm">
     <noframes></noframes>
    </frameset>
    </html>
    縦分割 - Netscape
    File Edit View Go Communicator Help
    frame1
    frame2

    frame3

    <html><head>
    <title>
    縦横分割</title>
    </head>
    <frameset rows=
    "1*,3*,1*">
     <frame src=
    "frame1.htm">
     <frameset cols=
    "*,*">
      <frame src=
    "frame2.htm">
      <frame src=
    "frame3.htm">
     </frameset>
     <frame src=
    "frame4.htm">
     <noframes></noframes>
    </frameset>
    </html>
    縦横分割 - Netscape
    File Edit View Go Communicator Help
    frame1

    frame2
     

    frame3
     
    frame4

  3. 表示先の指定
  4. <a href="リンク先" target=フレーム名> で指定します。

    target="フレーム名"
    表示するフレームを指定します。
    target="_top"
    ウィンドウ表示を解除します。
    target="_blank"
    新しくウィンドウを開きます。
    target="_parent"
    親フレームへ表示します。
    target="_self"
    自分ののフレームへ表示します。

  5. 表示先の既定値
  6. フレームを使ったリンク集の様に targetを 指定することが多い場合には既定値を設定します。

    <base target=フレーム名>

    親フレーム(links.htm)
    <html>
    <head><title>
    リンク集</title></head>
    <fremset rows=
    "74,*">
     <frame src=
    "link_0.htm" marginheight=2>
     <frame src=
    "link_1.htm" name="link">
     <noframes>
      <body>
      <a href=
    "index.html">目次へ<br>
      <a href=
    "link_1.htm">コンピュータ<br>
      <a href=
    "link_2.htm">社会・経済<br>
      <a href=
    "link_3.htm">広島の学校<br>
      <a href=
    "link_4.htm">マスコミ<br>
      </body>
     </noframes>
    </frameset>
    </html>

    子フレーム(link_0.htm)
    <html>
    <head><title>
    リンク集</title></head>
    <body>
    <base target=
    "link">
    <a href=
    "index.html"  target="_top">目次へ<br>
    <a href=
    "link_1.htm">コンピュータ<br>
    <a href=
    "link_2.htm">社会・経済<br>
    <a href=
    "link_3.htm">広島の学校<br>
    <a href=
    "link_4.htm">マスコミ<br>
    </body>
    </html>

  7. 浮遊フレーム
  8. Internet Explorer では画面の一部に小窓を開けて別の画面を表示することが出来ます。
    ※他のブラウザでは何を表示しているか全く分からないので使わないでください。

    <iframe src="ファイル名"></iframe>
    浮遊フレームを作成します。src=で表示するファイルやURLを指定します。

    width= height=
    表示する大きさを指定します。
    name=フレーム名
    フレームに名前を付けます。
    align=表示位置
    表示位置を指定します。
    横方向は left,center,right, 縦方向は top,middle,bottom を指定します。

    ソースプログラム
    <iframe src="kibochan.htm" width=300 height=200>
    </iframe>


アクセスカウンタの作り方

自分のWEBページが何回アクセスされたかを調べるのがアクセスカウンターです。
いつから始めたのか日付を入れる様にしてください。
アクセスカウンタを実現するには,次の方法があります。

  1. プロバイダーのカウンターサービス
  2. このurbanの様にプロバイダーでカウンタサービスを提供している場合はこれを利用します。

    ソースプログラム
    あなたは96年5月7日より
    <img src="/cgi-bin/common/Count.cgi?ft=0|frgb=128;0;128|
    tr=1|trgb=255;0;0|wxh=9;13|md=7|dd=D|st=5|sh=1|
    df=
    kibochan_1.dat" align=absmiddle>
    番目です。
    画面表示
    あなたは96年5月7日より 番目です。

  3. 外部のカウンターサービス
  4. 無料でアクセスカウンターを提供してくれるサービスもあります。
    Googleで "無料 カウンター"で検索してください。
    Web Counterは30日以上アクセスが無い場合削除される可能性があります。(1日1000アクセスまで)

    ソースプログラム
    あなたは96年5月7日より
    <img src="http://counter.digits.net/wc/-d/6/-r/-z/miyakou"
      align=absmiddle>

    番目です。
    画面表示
    あなたは96年5月7日より 番目です。

  5. CGI(wwwcount)のインストール
  6. 自分でWebサーバーを管理している場合は,CGIのアクセスカウンターをインストールできます。
    wwwcount2.5がよく使われています。
     wwwcount2.5(http://www.muquit.com/muquit/software/Count/Count.html)
    HEIWAネット上のバーチャルドメイン www.otake-h.hiroshima-c.ed.jp にインストールした手順を紹介します。
    wwwcount2.5.tagzをインターネットで入手し,Web管理人のホームに転送しておきます。
    校内LANからtelnetでWeb管理人としてログインします。

    1. インストール環境を調べる。

    2. サーバーの設定ファイルhttpd.confの場所を表示します。
       $ find / -name httpd.conf 2>/dev/null
       /etc/httpd/conf/httpd.conf
      WebサーバーのUser-IDを表示します。
       $ grep ^User /etc/httpd/conf/httpd.conf
       User httpd
      WebサーバーのGroup-IDを表示します。
       $ grep ^Group /etc/httpd/conf/httpd.conf
       Group httpd
      CGIのインストール先を調べます。
       $ grep /cgi-bin/ /etc/httpd/conf/httpd.conf
       RewriteRule ^/cgi-bin/.cobalt/(.+) proto://servername:81/cgi-bin/.cobalt/$1

       ScriptAlias /cgi-bin/ が表示されればインストール先が分かります。
       バーチャルドメインの為,/home/sites/site9/web/cgi-bin/にインストールします。

    3. ソースプログラムを展開します。

    4.  $ tar zxvf wwwcount2.5.tar.gz

    5. 解凍したディレクトリーに移動します。

    6.  $ cd wwwcount2.5

    7. ヘッダーファイルconfig.hを生成します。

    8. su -rootになり,インストールする必要があります。
      サイト管理人(root)のパスワードが分からないので,このまま実行します。
       $ make config.h
       *cgi-bin directory [/usr/local/etc/httpd/cgi-bin]: /home/sites/site9/web/cgi-bin
       *Base directory [/usr/local/etc/Counter]: /home/sites/site9/Counter
       * Config directory [/home/sites/site9/Counter/conf]:
       * Name of the configuration file [count.cfg]:
       *Data directory [/home/sites/site9/Counter/data]:
       *Digits directory [/home/sites/site9/Counter/digits]:
       *Log directory [/home/sites/site9/Counter/logs]:
       * Name of the log file [Count2_5.log]:

       Your configuration:
       ----------------------------------------------------------------
       CgiBinDir=/home/sites/site9/web/cgi-bin
       BaseDir= /home/sites/site9/Counter
       DigitDir=/home/sites/site9/Counter/digits
       ConfDir= /home/sites/site9/Counter/conf
       ConfFile=count.cfg
       DataDir=/home/sites/site9/Counter/data
       LogDir=/home/sites/site9/Counter/logs
       LogFile=Count2_5.log
       ----------------------------------------------------------------
       Everything looks OK [y|n]? y
       Great! creating header file src/config.h
       creating variables template file ./Config.tmpl for the install program..

    9. 設定ファイルcount.cfgを生成します。

    10.  $ make cfg
       * Enter your fully qualified domain name [no default]: www.otake-h.hiroshima-c.ed.jp
       * Enter your IP address [no default]: 211.12.234.24
       * Does your host have any nickname [y|n]:? n
       * Do you want to allow automatic file creation [y|n]? n
       * Do you want the program to run in strict mode [y|n]? y
       * Do you want to ignore access hits from your own host [y|n]? y
       * Allow using the rgb.txt file [y|n]? y
       * Do you want to allow the counter to be reloaded [y|n]? y
       * Do you want to log error messages [y|n]? n
       * Do you want to show error messages to browsers [y|n]? y

        Created conf file "count.cfg"
        Please look at it, you might want to edit it!

    11. CGIプログラムをコンパイル(作成)します。

    12.  $ make all

    13. CGIプログラムをインストールします。

    14.  $ make install
       *Do you know the user and group id of httpd' child process [y|n]:? y
       *Enter user id of httpd's child process [no default]:? httpd
       *Enter group id of httpd's child process [no default]:? httpd

       サイト管理人(root)でないのでインストール出来なかったファイルを手作業でコピーします。
       $ cp ./bin/Count.cgi /home/sites/site9/web/cgi-bin/

    15. カウンタファイルを作成します。

    16.  $ cd /home/sites/site9/Counter/data
       $ echo 0 > index.dat
       $ chmod 666 index.dat

    17. htmlファイルを変更します。

    18. アクセスカウンターの部分を<img src="/cgi-bin/Count.cgi?df=index.dat">にします。

  7. サーバーサイド・インクルードサービス(SSI)
  8. NCSAが開発した機能で,送信前にhtmlファイルの中に記述された環境変数の値や,
    スクリプトの実行結果,別のファイルを含んで送信します。
    htmlファイルの拡張子は .shtmlとします。
    コマンドは  <!--#コマンド タグ="値"> とします。

    configコマンド
    日時の形式やファイルサイズの出力形式等を指定します。
    echoコマンド
    HTTPの環境変数の値を出力します。
    flastmodコマンド
    ファイルの更新日時を出力します。
    fsizeコマンド
    fileタグで指定したファイルの大きさを出力します。
    execコマンド
    タグ(cmd)で指定したコマンドや,タグ(cgi)で指定したcgiを実行します。
    通常は,危険なコマンドなので実行禁止にしています。

    アクセスカウントプログラム(count.pl)
    #!/usr/local/bin/perl
    $file="count.dat";
    open( IN, "$file" );
    $count = <IN>;
    close( IN );
    $count ++;
    open( OUT, "> $file" );
    printf OUT "%d", $count;
    close( OUT );
    printf "%d", $count;
    カウントされるファイル(html.shtml)
    <!--#config timefmt="%y/%m/%d" -->
    今日は<!--#echo var="DATE_LOCAL" -->です。<br>
    作成は<!--#echo var="LAST_MODIFIED" -->です。<br>
    あなたは<!--#exec cmd="cgi-bin/count.pl" -->番目です。<br>

    アクセス回数を記録する count.dat は,初期値0を設定してください。
    chmod コマンドで誰でも読み書き出来るようにします。
    loginかrlogin(telnet)では"chmod 666 count.dat"
    ftpでは"ftp>quote site 666 count.dat"とします。
    count.pl もCGIプログラムと同様の属性を設定します。


スライドショー

株価情報や天気予報などの様に時間と共に変化するページを作成できます。
クライアントプルというNetscape 1.1以降で使用できる機能です。
これを利用して,スライドショーを作成できます。
<meta http-equiv="refresh" content="; url=データ">
content=";
次に読む時間(秒)を指定します。
url=データ"
次に読むデータを指定します。

次のプログラム(cg1.htm)は表示完了12秒後に cg2.htm をロードします。

ソースプログラム cg1.htm
<html>
<head>
<title>
スライドショー</title>
<meta http-equiv="refresh" content=
"12; url=cg2.htm">
</head>
<body text=
white bgcolor=black>
<center><img src=
"dome1.jpg"></center>
</body>
</html>



文字コードセット

文字コードセットが違うとブラウザの表示が乱れる事があります。
そこでhtml文書中に文字コードを指定することがあります。

<meta http-equiv="Content-Type" content="text/html; charset=文字コードセット">

x-euc-jp 
x-sjis 
iso-2022-jp 
iso-8859-1 
us-ascii
EUCコード 
シフトJIS 
JISコード 
ラテン 
米国英語
UNIXで使われる
パソコンで使われる
インターネット(通常)
英語圏
米国

ソースプログラム
<html>
<head>
 <title>
タイトル</title>
 <meta http-equiv="Content-Type"
 content="text/html; charset=x-sjis">
</head>
<body>
シフトJISです。
</body>
</html>


WWWロボット制御

ロボットというプログラムがインターネットのWEBページ上のデータを自動収集しています。
そのデータを元にWEBページの探索行います。(google,WebCrawler,goo等)
そこで,密かに隠したいページも表示されることがあります。
対策はロボットを制御するように記述します。

  1. ロボットの動作制御

  2. <meta name="ROBOTS" content="NOINDEX">
    検索するときに、このページが出ないようにします。
    <meta name="ROBOTS" content="NOFOLLOW">
    Robot を動かすときに、このページのリンクを辿らないようにします。
    <meta name="ROBOTS" content="NONE">
    検索するときにこのページが出ないようにします。
    Robot を動かすときにこのページのリンクを辿らないようにします。

  3. ロボットへの登録

  4. <meta name="description" content="説明文">
    ロボットにWEBページの説明文を与えて積極的にヒットさせます。
    <meta name="keywords" lang="ja" content="キーワード">
    ロボットに探索用のキーワードを与えて積極的にヒットさせます。

    ソースプログラム
    <html>
    <head>
     <title>
    ホームページの作り方教室</title>
     <meta name="ROBOTS"
    content="NOFOLLOW">
     <meta name="description"
    content="ホームページ講座">
     <meta name="keywords" lang="ja"
    content="WWW, html, study">
    </head>

    アンカー(<a ...>)でキーワードを抜き出すことがあります。
    ここ』だけを<a href=...> </a>で挟むことは止めましょう。


ファイル転送

ブラウザで完成したファイルを開き,動作確認します。
動作確認が出来てから,ファイルをサーバーの転送先ディレクトリー以下に転送します。

  1. ダイヤルアップ接続等でプロバイダに接続します。
  2. スタートメニューのプログラム(p)から MSDOSプロンプト を起動します。
  3. キーボードで ftp と入力して改行し,ftp を起動します。
  4. open URLURLに接続します。
    ※ftp URL で起動後に,URLに接続出来ます。
    ※URLは ftp.urban.ne.jp , www.hdsnet.co.jp の様にプロバイダーにより違います。
  5. 自分のftp用のIDとパスワードを入力してユーザー認証を行います。
  6. 必要に応じて,cdコマンドで転送先ディレクトリーに移動します。


  7. プロバイダーホスト名転送先ディレクトリー
    アーバンftp.urban.ne.jpなし
    アサヒネットnetftp.asahi-net.or.jphomepage
    @Niftyftp1.nifty.com等homepage
    ジオシティーズftp.geocities.co.jpなし
    DIONftp.d7.dion.ne.jp等htdocs
    ジャストネットwww1.justnet.ne.jp等public_html
    ハイホーwww.hi-ho.ne.jphtml
    HEIWA-ネットwww.*.hiroshima-c.ne.jpweb

  8. ファイルを putコマンド で転送します。
    画像等のデータファイルは binaryモード で転送します。
    html文書は asciiモード で転送します。(binaryでもよい)
    putで転送先のファイル名を指定しない場合(フロッピー等から),ファイル名が大文字に変更されて転送される恐れがあるので,必ずファイル名を指定してください。
  9. quit を入力し,ftp接続を切断して終了します。


  10. A:\>ftp ftp.urban.ne.jp ftp.urban.ne.jpに接続(www)
    User : 自分のftp用IDを入力
    Passewd:自分のパスワードを入力
    ftp>pwd現在の場所(www)を確認
    ftp>lsファイル一覧(www)を表示
    ftp>lcd B:\WEB B:\WEBから転送(local)
    ftp>!dirファイル一覧(local)を表示
    ftp>ascii アスキーモードに設定
    ftp>put index.htm index.html index.htmindex.htmlで送付
    ftp>mput html*.htm html*.htm(複数)を一括送付
    ftp>get book.html book.htm book.htmlbook.htmで取得
    ftp>del book.html book.htmlを削除
    ftp>mkdir img imgディレクトリーを作成(www)
    ftp>cd img imgディレクトリーへ移動(www)
    ftp>lcd img imgディレクトリーへ移動(local)
    ftp>binary バイナリーモードに設定
    ftp>put maru.gif maru.gif maru.gifを送付
    ftp>quit 終了


検索サービスへの登録

せっかく作ったWEBページも見る人がいなければ何にもなりません。
WEBページを見てもらうためには検索サービスに登録します。

  1. カテゴリー別に分類された簡単な紹介メッセージから検索

  2. Yahoo!
  3. Robotが自動収集したデータから検索

  4. goo, Infoseek, これらの検索サービスに個別に登録するのは大変です。
    さぶみっとJAPAN一発太郎等の登録サービスを利用します。

    さぶみっと JAPAN
    http://www.submit.ne.jp/
    一発太郎
    http://ippatsu.net/TARO/

ホームページの作り方教室 目次へ 発展編へ 発展編

Author: kibochan