2004年度　基礎ゼミ　【知的システムデザイン研究室】

1．ホームページ作成の意義とその注意点

1.1 知的システムデザイン研究室におけるホームページの目的

知的システムデザイン研究室では研究室のホームページを作成し，それを通じて研究内容や成果などの紹介を行っている．こういったことは珍しいことではなく, 他の研究室でもよく行われていることであるが，本研究室ではさらに研究生全員にホームページを作ることを義務付けている．今回のゼミはホームページ作りのための最低限度の能力を身につけることが目的である．なぜ本研究室ではホームページを作ることが義務付けられているのかを，以下に紹介する．

・自らの研究の成長を発信する
　研究生は自らの研究結果を多くの人に知ってもらうために積極的に研究内容やその成果を発信すべきである．研究成果の発信手段としては学会での発表などもあるが，学会での発表よりもより身近で気軽に誰でも見ることができるものとしてWebがある．また，Web上には我々が研究を進めていく上でも非常に役立つ情報が多く存在しており，同様に我々が研究成果を発信することは他の誰かの研究の役に立つと思われる.

・互いの研究理解のための手助けと交流の促進
　研究生同士は互いに別々の研究をするため，相手の研究について詳しく知ることが困難である．月例発表会などでおおよその進行状況が伝えられたとしても，それだけでは相手の研究について深い理解はできない．そこで他の研究生の研究・近況について，より詳しく知るためホームページを用いる．また，それぞれのホームページ上に置かれた掲示板などを利用することにより，互いの交流促進にも役立つと思われる.

・自らのアンテナを広げるツールとして
　現在のWebでは，キーワード検索型の巡回ロボットを使ったサーチエンジンが多く存在する．ロボット型のサーチエンジンは，巡回ロボットがページにアクセスしてキーワードを抽出し，サーチエンジンを作成している．つまり，自分のページは自然とWebという百科事典の目次に掲載されるということである．前述の通り，自分の研究成果を発信するということは，他の研究者の役に立つこともあるということである．その研究者が同じような研究をしている人ならば，お互いに情報交換をすることは研究活動において有意義だろう．また，他の研究者のアドバイスや質問が，思いがけない収穫となるかもしれない．このようにWebにホームページを作るということは，インターネットというネットワークに自分のアンテナを広げるということになる.

1.2 ホームページで情報発信することの意義

Webは電話や手紙のように特定の相手に伝えるものではない．また，テレビのような受動的なメディアとも異なり，与えられた情報をただ享受するだけのものではない．Webは，不特定多数との双方向メディアであると言える．我々はこのWebを利用することにより，一対多通信における発信者となることができる．発信できる相手が限定される他のメディアと異なり，一対多通信を可能にするWebを利用することで発信し受信し互いに情報を交わし合えるのである.

1.3 本年度，知的システムデザイン研究室のホームページがどのように運営されるか

現在の知的システムデザイン研究室が使用しているサーバは，外部に公開するコンテンツと内部だけに公開するコンテンツでサーバが分けてあり，ともにapacheというソフトが使われている．知的システムデザイン研究室に設置されるサーバ名をTable1.1に示す.

1.3.1 外部公開用コンテンツとは

知識システムデザイン研究室が行っていることを外部に伝えるためのものであり，以下のようなコンテンツがある．知的システムデザイン研究室のホームページのURLは，http://mikilab.doshisha.ac.jp/である．このホームページの構成をTable1.2に示す．

1.3.2 内部公開用コンテンツとは

知的システムデザイン研究所内部からのみ閲覧可能なもので，構成をTable1.3に示す．

1.4　知的システムデザイン研究室におけるホームページ制作に関するガイドライン

知的システムデザイン研究室にはホームページ作成に関するガイドラインが存在し，知的システムデザイン研究室のサーバに置かれるホームページは全てこれを遵守しなければならない．またトップページからガイドラインへリンクも張らなければならない．このガイドラインは，後に述べる著作権に関するものなど，いわゆるネチケットと呼ばれるネット上のエチケットなどを主に記したものである．「知的システムデザイン研究室におけるホームページ作成に関するガイドライン」のURLはhttp://mikilab.doshisha.ac.jp/dia/guide.htmlである．

1.5　著作権について

著作権とは，著作者が著作物に対して持つ権利である．著作権で守られている著作物を，著作者に無断で第三者に公開することは「著作権法」で禁止されている．ここで言う著作物とは，著作権法の中で「思想又は感情を創作的に表現したものであって，文芸，学術，美術又は音楽の範囲に属するものをいう」と定義されており，文章，曲，歌詞，絵画，写真などはすべて著作権の対象となる．

1.5.1 Copyright©の意味

著作権は英語でCopyrightと言い，著作権を主張する際に良くCopyright©と記される．著作権に関する代表的な条約にはベルヌ条約と万国著作権条約がある．前者は，著作権の発生に何ら手続きを要しない無方式主義を採用し，後者は©表示さえあれば著作権は保護されるという方式主義を採用している．日本は双方の条約に加入している．ベルヌ条約に加入している日本ではCopyright© と明記することに法律的な意味はないが，「これは著作権で守られています」という意思表示である．しかし，万国著作権条約には加盟しているが，ベルヌ条約には加盟していない国々(2003年3月現在アンゴラ・カンボジア・サウジアラビア・ラオスの四カ国)に対しては，©を表示することに意義がある．

1.5.2 著作権の取得

特許権などは特許庁への申請が必要であるが，著作権は著作物を創作したり公表した時点で自動的に発生するものであるので申請などの特別なことを行う必要はない．

1.5.3 著作権の有効期間

著作権の有効期間は原則として「著作者の死後（共同著作物にあっては，最終に死亡した著作者の死後）五十年」とされている．

1.5.4 法人所有の著作権の有効期間

法人や団体が著作権を持つ場合は「その著作物の公表後五十年」とされる．連載物は基本的に最終話（三年以上続編が出ない場合は最後の話を最終と見なす）を公表時とする．

1.5.5 著作権以外の権利

著作権を侵害しなくても，商品名や社名などに関する「商標権」，発明に関する「特許権」，芸能人の写真などに関する「パブリシティ権」，その他「肖像権」など，守らなくてはならない権利にはいろいろあり，注意が必要である.

1.5.6 著作権において知っておくべき事項

「著作権法」は明記された文章であるが，その解釈はインターネットの普及などに伴い常に変動している．以下に特に知っておくべき点を挙げる.

• 個人で楽しむために写真や絵を複製することは著作権の侵害には当たらない．しかし，個人で楽しむ目的であっても不特定多数の人が閲覧可能なホームページに写真や絵の複製を掲載することは，著作権の侵害に当たる．
  
  
• アニメなどのキャラクターの似顔絵をホームページなどで公開することも禁止されている．特にミッキーマウスなどのディズニーキャラクターは管理が厳しく，ミッキーマウスのシルエットだけでも訴えられるケースもある.
  
  
• キャラクターの写真や映画のパンフレット，またCDのジャケットなどをホームページで公開することも禁止されている．
  
  
• 「フリー素材集」など多くの著作物が「フリー」として公開されているが，その公開者がすでに他の人の著作権を侵害している場合もその著作物を使用することはできない．しかし，逐一「本当にフリーなのか」を確認することは不可能であり，個人ホームページに使用する程度であれば，「フリー」の言葉を信用せざるを得ないのが現状である.
  
  
• 人から受け取った電子メールを無断で第三者に転送したり，ホームページ上で公開することも著作権の侵害になる．
  
  
• 海外の著作物の複製も，万国著作権条約・ベルヌ条約などの国際条約があり加入国の間では著作権の侵害として禁じられている．また，海外の出版物の翻訳物を無断公開することも禁じられている．
  
  
• 著作権侵害は犯罪であり侵害者は処罰される．ただし，被害者が告訴しなければ処罰されない．罰則は，３年以下の懲役又は３００万円以下の罰金である．
  
  
• 著作物は「引用」であれば無断で行うことができる．引用する際は以下の４項目に注意すること．
  　(1) 引用する必然性があり，その範囲も必然性があること．
  　(2) 『』などで自分の著作物と引用部分が区別されていること．
  　(3) 質的量的に自分の著作物が主であること．
  　(4) 引用部分の出所を明記すること．
  
  
• 「このページへのリンクを禁止します」と明記されていても，リンク自体は法律的違反ではない．しかし「リンクフリー」と明記されたページ以外へのリンクは，そのページの管理者に確認するのが礼儀である.
  
  
• 著作権について悩むことがあれば，著作権の保有者側にメールなどで問い合わせること.
  

２ HTMLタグを用いたホームページの作成

ホームページを作成するには下記のような方法がある．

1. ホームページ作成ソフトで作成する

ホームページを作成支援するソフトが各社から提供されている．フリーソフトのものやシェアソフトのものが数多くあり，視覚的に作成することができる．

2. テキストエディタ作成する

ホームページはHTMLという言語を用いて記述する．カスタマイズが可能で，自由度が高い．

ここではHTMLを理解してテキストエディタで作成する方法を学ぶ．

ホームページを作成するための準備

ホームページを作成するためには，以下の２つを用意すればよい．

1. ブラウザ

記述したHTML(HyperText Markup Language)を表示するために必要となる．主なものとしては，Internet ExplolerやNetscapeがある．ただし，これらのブラウザは完全に互換しているわけではないので注意が必要となる．


2. エディタ

HTMLのソースを書くために必要となる．フリーソフトでは「メモ帳」，シェアソフトでは「秀丸エディタ」等が有名である．

２．１　HTMLファイルの基本構造

HTMLはTeXと同様に「マークアップ言語」である．HTMLファイルはすべてテキストでできている．そこにタグと呼ばれる実際の画面には表示されない形式を設定する部分と，実際に画面に表示される文章の部分がある．<html>や<head>などをタグ，htmlやheadなどをタグ名と呼び，多くのタグは<b>〜</b>のように開始タグと終了タグで囲む．たまに<br>のように単独タグもある．

それでは実際に簡単な構造を示す．

Fig2.1 基本的な構造

• <html>〜</html>はHTML文書であることを示すタグである．"/"は終わりを表している．
• <head>〜</head>の部分をヘッダ部と呼び，タイトルなどの表題を宣言するときに用いる．タイトルを表示するには<title>〜</title>タグとセットで記述する．
• <title>〜</title>でタイトルを書く．タイトルは，ホームページを記述するウインドウではなく，ブラウザのタイトルバーに表示される．また｢お気に入り｣や｢履歴｣に表示されたり，検索エンジンの結果として表示されたりする．
• <body>〜</body>の部分は本文を記述する．この部分がブラウザのウィンド枠に表示される．

（注意点）

タグ名は大文字でも小文字でも構わないが，必ず半角文字で記述するようにする．また"<"の後に空白があってはいけない．属性の値に半角の英数字以外(ハイフン，ピリオドなど一部の記号は含まない)の文字を使用する場合は，"か'で囲む．

２．２　HTMLファイルの具体的な書き方

２．２．１　HTMLの基本的なテクニック

• 見出し

<h1>〜</h1>で囲まれた部分が章の見出しを表す．見出しは大きいフォントで表示され，見出し行の後には広めの改行が入る．見出しタグはフォントの大きさによって６通りあり，<h1>のフォントのサイズが最も大きく，<h6>のフォントのサイズが最も小さい．


• 段落

<p>は各段落の始まりを表す．</p>は段落の終わりを表すが，省略も可能である．ただし，省略によって動作が異なることがある．また，行単位の左揃えや右揃え，それに中央揃えのレイアウトを簡単に設定できるので便利である．



<h1>第１章</h1> <h2>1.1 HTMLとは</h2> <p>HTMLとはHyperText Markup Language ･･･</p>

第１章 1.1 HTMLとは HTMLとはHyperText Markup Language ･･･



• 改行

HTML文書のテキストの改行は通常ひとつの空白文字に変換されてしまうので，改行するためには<br>を自分の好きな位置に書く．



改行<br>する．

改行 する．



• 太字

文字を太字にするには<b>〜</b>を用いる．


• 斜体文字

文字を斜体文字にするには<i>〜</i>を用いる．


• 下線

文字に下線をつけるには<u>〜</u>を用いる．



<b>太字</b> <i>斜体文字</i> <u>下線</u>

太字 斜体文字 下線



• 文字の大きさ

文字の大きさは<font size=...>で指定する．サイズには1〜7の値を指定できる．<font size="+2">とすると，現在よりも2レベル分大きな文字になる．



文章の１部分を<font size=5>大きな文字</font>にする. 文章の１部分を<font size="+1">大きな文字</font>にする.

文章の１部分を大きな文字にする. 文章の１部分を大きな文字にする.



• 文字の色

文字の色は<font color=...>で指定し，色の指定は次のような方法で指定する． 　
　
• color="#FF0000"･･･色のRGB値を指定する．
　
• color="red"･･･色の名前を指定する．
　


• リスト

リスト書きするには<ul>〜</ul>を用いる．



<ul> <li>KC103</li> <li>KC119</li> </ul>

KC103 KC119




<ol> <li>KC103</li> <li>KC119</li> </ol>

KC103 KC119



• 整形済みで表示

半角の空白やタブ，改行などをそのまま表示させたいときは，<pre>〜</pre>を用いる．ソースコードなどを記述するときに便利である．ただし，『<』や『>』や『&』は特殊文字として認識されてしまうので，&ltや&gtや&ampで記述する．


• 範囲設定

範囲の指定を行うタグに<div>〜</div>がある．<div>自身は特に何の意味も持たないタグである．ただし，alignなどの属性を加えることにより右寄せをしたり，さまざまな用法に用いられる．


• 引用

<blockquote>〜</blockquote>で囲まれた文章が，引用文であることを明示する．Internet ExplorerやNetscape Navigatorでは, 前後に改行され，両側に隙間をあけて表示される．


• フレーム

フレームを用いたページを作るには<frameset>〜</frameset>を用いる．フレームを横に並べて分割するには<rows>を縦に並べて分割するには<cols>を用いて分割の割合を決める．以下に例を示す．ここで＊(アスタリスク)はその他を意味する．



<html> <head> <title>ブラウザ</title> </head> <frameset cols="50%,*"> <frame src="frame1.htm" name="frame1"> <frameset rows="50%,*"> <frame src="frame2.htm" name="frame2"> <frame src="frame3.htm" name="frame3"> </frameset> </frameset> </html>

２．２．２　テーブルについて

• 最も基本的なテーブル

テーブル(表)を作成するには主に次のタグを用いる．
　
• <table>･･･テーブル全体
　
• <tr>･･･テーブルの1行
　
• <td>･･･テーブルの1マス
　



<table border="1"> <tr><td>○</td><td>□</td><td>△</td></tr> <tr><td>●</td><td>■</td><td>▲</td></tr> </table>




これをブラウザで表示すると以下のようになる．

○	□	△
●	■	▲




• 項目を連結させる

<td colspan=n>を用いると,右方向にn個の項目を連結することができる.



<table border="1"> <tr><td colspan="2">○</td><td>△</td></tr> <tr><td>●</td><td>■</td><td>▲</td></tr> </table>




これをブラウザで表示すると以下のようになる．

○		△
●	■	▲



<td rowspan=n>を用いると,縦方向にn個の項目を連結することができる.



<table border="1"> <tr><td rowspan="2">○</td><td>□</td><td>△</td></tr> <tr><td>■</td><td>▲</td></tr> </table>




これをブラウザで表示すると以下のようになる．

○	□	△
	■	▲



• 立体感

border=nを指定することにより，テーブルの枠線を立体感のあるものにすることができる.



<table border="8"> <tr><td>○</td><td>□</td><td>△</td></tr> <tr><td>●</td><td>■</td><td>▲</td></tr> </table>




これをブラウザで表示すると以下のようになる．

○	□	△
●	■	▲



cellspacing=0を指定することにより，テーブルの枠線を立体感のないものにすることができる.



<table border="1" cellspacing="0"> <tr><td>○</td><td>□</td><td>△</td></tr> <tr><td>●</td><td>■</td><td>▲</td></tr> </table>




これをブラウザで表示すると以下のようになる．

○	□	△
●	■	▲



• テーブルを横に並べる

テーブルを2重に囲んでやることで，テーブルを横方向に配置することができる．このテクニックはテーブルに限らず，他のテキストの配置にも応用できる．



<table> <tr> <td> <table border="1"> <tr><td>○</td><td>□</td><td>△</td></tr> <tr><td>●</td><td>■</td><td>▲</td></tr> </table> </td> <td> <table border="1"> <tr><td>○</td><td>□</td><td>△</td></tr> <tr><td>●</td><td>■</td><td>▲</td></tr> </table> </td> </tr> </table>




これをブラウザで表示すると以下のようになる．

○ □ △ ● ■ ▲

○ □ △ ● ■ ▲

２．２．３　リンクの張り方

• 絶対アドレスと相対アドレス


　
• 絶対アドレス･･･あるファイルの位置を全体から，一番元になる位置から階層構造を順番にたどって記述する方法 (ex)http://mikilab.doshisha.ac.jp/~ikeda/img/mark.gif
　
• 相対アドレス･･･ファイルどうしの位置を，基準とするファイルから見てどこにあるか「相対的」に記述する方法 (ex)../img/mark.gif



• 別のHTMLファイルやホームページへ

複数のページを作成し，ホームページにリンクを張って別のページへジャンプさせることができる．リンクを張るためには<a href="ファイル名">〜</a>を用いる．また，ファイル名の代わりにURL名を入れることで別のホームページにいくことができる．リンクのためのタグはアンカータグやアンカーと呼ばれ，リンクを張った文字列や画像はリンクボタンという．


• 同じページ内の特定の位置へのリンク

長い文章のホームページの中で移動するときに使うリンク法である．文字がたくさん書いてあるホームページでは，ブラウザのウインドウがドキュメントの全体を表示しきれず，下の情報が隠れてしまう．これでは目的の情報を探すことが困難になる．そこで以下のようにする．

　
• リンクを張る位置･･･<a href="URL#キーワード">〜</a>
　
• ジャンプ先の位置･･･<a name="キーワード"〜>〜</a>

２．２．４　画像の貼り付け

HTML文書に直接貼り付けた画像をインラインイメージという．インラインイメージとして利用できる画像ファイルの形式は主にGIF形式とJPEG形式とがある．

• 画像を貼り付ける

画像をページに貼り付けるには<img>タグを用いる．



<img src="mark.gif" width=31 height=31 alt="校章">


src属性には画像ファイル名，widthとheightには画像サイズを指定する．alt属性には，画像を表示できないブラウザで，画像の代わりに表示される文字を指定する．


• サイズを調べる

widthやheightは省略することも可能だが，一般に指定しておいた方が表示の体感速度が速くなる．サイズがわからない場合は下記のようにして調べることができる．

1. 画像ファイルをブラウザにドラッグ＆ドロップする．
2. ブラウザで画像をマウスの右クリックし，[プロパティ]を実行する．
3. プロパティダイアログの[大きさ]を読み取る．例えば，100×200と表示された場合は，width=100 height=200とすればよい．



図を実際に表示すると以下のようになる．

3　ファイルのアップロード方法

作成したHTMLファイルや画像ファイルなどは，アップロードをしなければWeb上に公開されない．アップロードとは，作成したファイルをWebサーバー(ホームページ用のファイルが収められてお り，インターネットと接続されているコンピュータ）に転送する作業のことである．本研究室では，このファイルのアップロードにはSCPを用いる．以下では，ファイルのアップロードにSCPを用いる理由と，その利用方法について説明する．

3.1　SCPを用いる理由

3.1.1　FTPとは？

SCPについて説明する前に，まずWebサーバーにファイルを転送するときによく用いられるFTPについて説明する．

インターネット上を通信する際には，TCP/IP[Transmission Control Protocol/Internet Protocol]というプロトコルを用いて通信を行っている．プロトコルとは，通信を行う際に取り決められている規定，約束事のことである．

TCP/IPはいくつかのプロトコルの総称である．FTP(File Transfer Protocol)はTCP/IPのひとつのプロトコルで，ホームページのファイルが収められているWebサーバーに送る際に，送受信される．データの通信には決められたポートが設定されており，通信は21番ポートが使われ，20番ポートはデータの制御に使われる．(Fig3.1)

Fig3.1　FTPを用いたデータ転送の仕組み

ここで，ポート番号について補足の説明を行う．

ポート番号とは，コンピュータ内部に設けられているアプリケーションごとにわりふられている番号（アドレス）のことである．通信を行うとき，IPアドレスによって通信するべき相手（コンピュータ）がわかったとしても，実際にどのアプリケーションを対応したアプリケーションなのかがわからない．そこで，ファイルを転送するとき，どのアプリケーションに受け渡せばよいかを指定する必要がある．そこで，データを送信するときにポート番号を指定すれば，データを受信したとき，どのアプリケーションを使用するかがわかる．このため，コンピュータにはＩＰアドレスの他にポート番号が指定されている．

ファイル送受信するプロトコルは，FTPの他にSMTPやHTTPなどがある．これらのプロトコルはアプリケーションが違うためそれぞれに違ったポート番号が割り振られている．(Fig 3.2)．

Fig3.2　ポート番号の役割

このようにしてFTPを用いれば，ホームページのファイルをWebサーバーにアップロードすることができる．FTPを使用してファイルをアップロードするソフトは，FFFTP(Windows)やFetch(Mac)などがある．

これらの作成したホームページを閲覧するときには，Fig3.3のようにHTTPというプロトコルを通してファイルを転送しブラウザ（Internet ExplorerやNetscapeなど）を用い閲覧することができる.

これが一般的なホームページの仕組みである.

Fig3.3　ホームページの閲覧の仕組み

3.1.2　FTPの問題点

このように，ホームページをアップロードするにはFTPというプロトコルを使用するのが一般的な方法であるが，このFTPには問題がある．FTPでは，ファイルをアップロードする際にデータや認証する際のパスワードが暗号化されずに転送される．そのため，パスワードなどの重要な情報が第三者にもれてしまう危険性がある．

パスワードが第三者に漏れると，Fig3.4のように「なりすまし」というホームページ作成者になりすまして，Webサーバにあるデータが変更したり，破壊されるという恐れが生じる．

Fig3.4　FTPの問題点

3.1.3　SCPの利用

FTPでは，上記のようにセキュリティーに問題がある．そこで，本研究室ではSCP[Secure CoPy]を用いてファイルの転送を行う．

SCPとは，SSH[Secure Shell]という暗号化のためのプログラムをもちい，パスワードだけでなくデータ自体を暗号化し送受信する方法である．データが暗号化されているため，たとえアップロードするファイルを悪意のある第三者が見られても解読できず，サーバにアップロードする際のセキュリティは向上する．(Fig3.5)

SCPはFTPに比べて，ファイルのアップロード方式が少し複雑ではあるが，セキュリティ向上のために，SCPを用いる．

Fig3.5　SCPによるセキュリティの向上

3.2　SCPの利用

3.2.1　WinSCPとは？

WinSCPとは，SCPを用いファイルをアップロードするソフトウェアである．SCPの中にもファイル転送を行えるソフトは複数あるが，今回はWinSCPを用いる．その理由は以下のとおりである．

• フリーソフトであるため，無料で利用が可能
• 普段よく使うエクスプローラ画面でGUI操作ができるため，使い方が容易
• WinSCPは代表的なソフトウェアであるため，別の機会でも利用する可能性があるため

3.2.2　インストール方法

WinSCPのインストールは以下の手順で行う．

1. http://winscp.sourceforge.net/eng/download.phpよりダウンロードする．
   
   
2. ダウンロードしたzipファイルを Lhaplus などの解凍ソフトで解凍する．解凍ソフトがない場合は，Vectorなどで手に入れること．
   
   
3. 解凍すると，フォルダが作成される．フォルダの中に"WinSCP.exe"が作られていることを確認する．

3.2.3　WinSCPの使用方法

1. ホームページ用のファイルをおさめるためのフォルダを作成する．ここでは，MyDocumentの下にHomepageフォルダを作成する．
   
   
2. このフォルダの中に適当なindexページを作成する．今回はテキストファイルを用い以下のようなHTMLファイルを作成した．保存するときはファイル名をindex.htmlとする．
   
   

<html> <head> <title>表示テスト画面</title> </head> <body> <center>表示テスト画面</center> <p><p> きちんとこの画面が見えていますか？<br> 画面が表示されていれば，正常にアップロードができています．<p> このファイルをアップロードした方法と同じ方法でホームページのファイルをアップロードし，ホームページを作成していってください．<br> </body> </html>



3. WinSCPを起動する．
   
   
4. するとFig3.6のような設定画面が表示されるので，以下を記入する．
   
   

Host name:	mikilab
Port number:	22(defaultの値でよい)
User name:	自分のアカウント名(例えばfujiwara)
Password:	自分のパスワード




Fig3.6　WinSCPのログイン画面


5. Loginを押すと使用することができる．しかし，このままではWinSCPを起動するたびにアカウント名，パスワードなどを入力しなければならず面倒である．そこで４で行った設定を保存する方法を紹介する．

   また，初期Direcotryの設定を行うと，今後SCPを起動したとき，自分のコンピュータのホームページ用ファイルが収めれられているフォルダを初期表示してくれ便利であるため，この方法を紹介する．

５．１　WinSCPのログイン画面で環境を開くと，Fig3.7が表示される．Local Directoryにホームページの内容が保存されているフォルダを選択する．（このレジュメ通りに作成した場合MyDocument内のHomepageフォルダを参照する）

　
Fig3.7　Directoryの設定画面　



５．２　次の設定したデータを保存する．WinSCPのログイン画面でセッションを開き，Fig3.7のように入力し[保存]をクリックすると、Fig3.8のように保存される．（アカウント名やパスワードを入力してから保存しないと，何も保存されない）


Fig3.8　Directoryの設定画面　

6. ログイン画面で[ログイン]すると，WinSCP3ではじめて接続するホスト(サーバー)では，Fig3.9のように警告が表示される．これは，サーバーのホストキーがWinSCP3に未登録のため，信頼してよいか確認を求められている．ここはOKでよい．


Fig3.9　警告画面　

7. 起動するとFig3.10のようにSCPが起動する．左のデータはパソコン上にあるファイルで，右のデータはWebサーバーのデータをあらわしている．この画面上で，サーバとPCのファイル操作(転送や削除など)を行う． Fig3.10はWinSCPのファイル転送画面である．


Fig3.10　WinSCPのファイル転送画面
8. ホームページ用フォルダの作成
   

上記のツールバー内の[コマンド]から[新規フォルダ作成]を選択し，フォルダ名を入力すればよい．フォルダ名は，"public_html"とする．

9. ファイルのアップロード
   

作成したフォルダをダブルクリックして開き，そのフォルダにindex.htmlファイルをアップロードする．アップロードするには，Fig 3.14のように左のローカルフォルダ(自分のコンピュータのファイルが表示されている)にあるファイルをドラッグ&ドロップして，サーバのフォルダの中に移す．こうすればサーバにファイルを転送することが可能である．


Fig3.11　サーバにファイルを転送する画面
10. ファイルの属性を変更する．
    

まず，サーバのファイルを右クリックし，プロパティを選ぶ．選択するとろにチェックを入れる．これは，普通はホームページを更新するのは自分自身[owner]だけであるため，デフォルト指定では，自分自身しか書き込み[W]をできないようになっているが，これでは万が一の場合，自分自身以外がHomePageを変更できなくなってしまう．そこで，ここではGroupメンバーならページを更新できるように，設定を変更してもらう（通常，自分自身がHomePageを作成する際は ，この作業は必要ない）．また，HTMLではなく，CGIなどのプログラムをアップロードした場合は，実行権限を３つともチェックを入れる．他のファイル・フォルダをアップロードした場合は，そのファイルの属性を変更する．

11. ページが正確にアップロードできいるかを確認する．
    

ブラウザ（Internet ExplorerやNetscape）を起動し，アドレスに以下アドレスを記入する．

http://mikilab.doshisha.ac.jp/~アカウント名/index.html

このアドレスに移動したとき，きちんとアップロードしたファイルが表示されるかを確認する．表示されれば，正確にアップロードされているので，以後この<

方法で他のファイルもアップロードし，ホームページを構成する．

3.3　その他注意点

3.3.1　ファイル構成について

ホームページを構成する際には，フォルダなどを設けてフォルダごとにコンテンツを設けて公開する方法が一般的である．この際，ホームページを閲覧する人は，そのフォルダの階層構造を知らないということを留意する必要がある．閲覧者の求める情報がどこにあるのかをすぐに検索することができるホームページが望ましい．

なお，ホームページの階層構造をわかりやすくするための方法として，以下のような方法がある．

• サイトマップ（ホームページ内の全てのファイルの内容がかかれているページ）を作成する．
• それぞれのページに，CONTENTSを書いておく．

3.3.2　アクセスカウンタ・掲示板を設置する場合の注意

ホームページを作成する際には，何人の人がホームページを訪れてくれたかを記録できる「アクセスカウンタ」や，ホームページの閲覧者が自由に内容を書き込める「掲示板(BBS)」などを設けると楽しくなる．本研究室でホームページを作成する際には，このようなプログラムを自己責任において設けることができる．

以下に「アクセスカウンタ」「掲示板」などを設ける方法を説明する．

• 自分でCGIプログラムを作成し，サーバにアップロードする方法

「アクセスカウンタ」や「掲示板」などはCGI[Common Gateway Interface]プログラムというプログラムで動作しているものが多い．したがって，これらを設置する際には，CGIのプログラムを作成すればよい．このCGIプログラムは，一般にはPerl言語を用いて作成する場合が多い．なお，ここではプログラミングの方法などの詳細については述べないので，興味のあるものは各自で勉強すること．

• フリーウェアのプログラムをダウンロードし，サーバにアップロードする方法

インターネットなどでは，フリーウェアの「アクセスカウンタ」や「掲示板」のプログラムが公開されているものもある．したがって，インターネット上でこれらのプログラムをダウンロードし，設定を行ってサーバにアップロードすれば，「アクセスカウンタ」や「掲示板」を設置することができる．

インターネット上でプログラムをダウンロードして設置する場合は，設定をきちんと行った上で設置するとともに，そのプログラムの内容について，おおよその理解をしておくことが望ましい．なお，インターネット上でのファイルにはウイルスなどを含む場合があるので，なるべく信頼のおけるところからプログラムをダウンロードするのがよい．

• 無料の掲示板をレンタルし，自分のページにリンクをはる

インターネットでは，無料で掲示板をレンタルしているところがある．そのようなところで無料掲示板をレンタルし，　自分のページからリンクをはると簡単に掲示板を設置することができる．

3.3.3　フリーの素材を用いる場合の注意

インターネット上では，ホームページ作成用に自由に使える壁紙・アイコンなどのフリー素材が数多く存在する．これらはホームページを作成する際に使うと，ホームページが華やかなものになってよい．

これらを利用する場合は，たいがいの場合は利用規定が定められ，ページ内に掲載されているはずなので，きちんと利用規定を熟読し，規定を守ること．なお，ページの管理者によっても規定はまちまちであるため，利用する際はそれぞれの管理者のポリシーにしたがい，素材を利用する必要がある．

4　課題

タグを用いてHTMLファイルを作成し，自分のホームページを作成して，SCPを用いてアップロードしてください．コンテンツの内容としては，「自己紹介」「研究内容の説明」などが考えられます．また，「link集」などを作成すると役立ちます．

自分だけしか作成できない，オリジナリティのあるホームページを作ってください．