三木研究室基礎ゼミ「ホームページゼミ」
Homepageゼミの目的
・ホームページで情報発信することの意義を理解する．
・必要最低限度のホームページを作成する能力を身につける．
・LaTeXで作った研究結果をホームページにする方法を理解する．
１．三木研究室におけるHomepageの目的
三木研究室では研究室のHomepagｅを通じて，研究内容などの紹介を行っています．これは他の研究室でもよく行われていることですが，三木研究室ではさらに研究生全員にHomepageを作ることを義務付けています．今回のゼミはHomepage作りの最低限度の能力を身につけることが目的ですが，なぜ三木研ではHomepageを作ることが義務付けられているのか，まず紹介したいと思います．
・自分の研究の成果をみんなに発信する．
これから我々学部生は，１年かけて（院へ進む人は３年かけて）研究するわけですが，自分の研究結果をみんなに発信すべきだと思います．
その方法として学会での発表などがありますが，もっと身近なものとしてＷＷＷがあります．事実，多くの価値ある文書をＷＷＷ上で見かけることができ，それらは私たちが研究を進めていく上で非常に役立ちます．
同じように，みなさんが情報を発信することで誰か他の人の参考になるのです．
・お互いの研究を理解する手助けをし，研究生としての交流を促進する．
研究生同士はお互いに別々の研究をするために，相手の研究について詳しく知ることが出来ません．月例発表会などでおおよその進行状況が伝えられるとはいえ，それだけで相手の研究について理解するだけの情報が伝わるわけでもありません．Homepageを使えば，相手の研究について(時には近況について)，自分の好きな時間に，好きなだけ知ることができます．
・自らのアンテナを広げるための１つのツールとする．
現在のＷＷＷでは，ページをＵＰすればほぼ確実にサーチエンジンに登録されます．キーワード検索型の巡回ロボットを使ったサーチエンジンが多く存在するからです．ロボット型のサーチエンジンは，巡回ロボットがpageにアクセスしてキーワードを抽出し，サーチエンジンを作成します．つまり，自分のページは自然とWWWという百科事典の目次に掲載される訳です．その百科事典を使ってあなたの研究テーマについて調べたら，あなたのページがその目次に出てくるわけです．あなたのページにたどり着いた相手が，同じように研究をしている人ならば互いに情報交換をし，研究活動にいかせるかもしれません．場合によっては熟知した技術者がすばらしい助言をくれるかもしれません．まったくの初心者が見た場合，思いがけない質問によって新たな刺激を与えてくれるかもしれません．ＷＷＷにHomepageを作るということは，InternetというNetworkを利用して自分のアンテナをみんなに広げることを意味しています．
・研究生活の思い出作り
三木研究室では全員に研究報告書および月例発表の内容をuploadする事を義務づけています．そして，卒業時には全学生のHomepageを一枚のCD-ROMに収録します．このCD-ROMはそのまま三木研全員の一年間にわたる研究生活の総記録となります．多忙な研究生活の合間にHomepageを作るなんて・・と思われるかもしれませんが，この１年を振り返るとき，卒業アルバムではわからない，研究室での本当の思い出を残すアイテムとなる事は間違いないでしょう．
２．ホームページで情報発信することの意義
WWWは今までにない，新しいメディアです．電話のようなわかりきった相手に伝えるものではありません．テレビのように与えられた情報を視聴者として眺めているだけしかないものでもありません．そのスタイルは多発信多受信かつ双方向です．今までは我々が発信できる相手は極めて限られていましたが，このWWWの登場によって，我々は始めて(局所的ではあるけれども)一対多通信における発信者になれたわけです．WWWは今までの通信と大きく異なる存在なのです．我々は発信し受信し互いに情報を交わしあえるのです．
３．本年度，三木研究室のホームページがどのように運営されるか
昨年までは，外部に公開するコンテンツと内部だけに公開するコンテンツでサーバを分けてました．
| コンテンツの種類 | サーバ名 |
| 外部公開用コンテンツ | mikilab |
| 内部公開用コンテンツ | gcosmos |
| コンテンツの種類 | 説明 |
| 研究グループごとの研究内容の概要 |
各研究グループが研究内容の概要を説明します．更新ペースや担当についてはそれぞれのグループに一任されています． |
| ☆個人の研究ページ |
各個人が自分の研究成果を発信します． |
| 月例発表会のレジメ一覧 |
月例発表会のレジメの一覧表を作成し，pdfファイルに変換されたレジメへのリンクを作成します．更新はミーティング担当とホームページ担当が行います． |
| ＧＡＰＰＡ研究成果 |
Ｍ2の川崎さんが研究を行っている環境分散ＧＡのライブラリを紹介しています． |
| 基礎ゼミのレジメのダウンロードサービス |
各基礎ゼミで作成された資料を公開します．更新は各ゼミ担当が行ってください． |
| 学生の個人ページへのリンク |
mikilab内にある学生の個人ページへのリンク集です．ホームページ担当が作成します． |
| コンテンツの種類 | 説明 |
| 文献データベース | 研究室にある書籍，文献のデータベースです．文献係が担当します． |
| 備品データベース | 研究室にある備品のデータベースです．備品係が担当します． |
| メーリングリストで流れた重要なメールの一覧 | メーリングリストに流れたメールのうち，題名に【重要】とされたメールの一覧を作成します．ホームページ係が担当します． |
| 三木研究室で行われたイベントのＷＥＢアルバム | 三木研究室で行われたイベントの記録をホームページに残しておきます． アルバム係やコンパ係が担当します． |
| 役割分担表 | 役割とゼミの担当を表にしたものを公開します．チーフが作成します． |
| ＬＡの仕事表 | ＬＡの仕事表を公開します．ＬＡ係が作成します． |
<HTML> <BODY> HTMLファイルの作り方 </BODY> </HTML> |
ＨＴＭＬファイルの作り方 |
| 図１-a | 図１-b |
|---|
<HTML> <HEAD> <TITLE>ここにページのタイトルを書きます</TITLE> </HEAD> <BODY> ここに本文を書きます． </BODY> </HTML> |
図３．htmlサンプル |
|---|
下記の16色の名前がHTML3.2で定義されています．これらの名前は，IE2.0 や Netscape Navigator 2.0 でも安心して使用することができます．
| 表４．色一覧 | ||
|---|---|---|
|
■ Black (#000000) ■ Gray (#808080) ■ Silver (#C0C0C0) □ White (#FFFFFF) |
■ Red (#FF0000) ■ Yellow (#FFFF00) ■ Lime (#00FF00) ■ Aqua (#00FFFF) ■ Blue (#0000FF) ■ Fuchsia (#FF00FF) |
■ Maroon (#800000) ■ Olive (#808000) ■ Green (#008000) ■ Teal (#008080) ■ Navy (#000080) ■ Purple (#800080) |
| FFFFFF | FFCCFF | FF99FF | FF66FF | FF33FF | FF00FF | 66FFFF | 66CCFF | 6699FF | 6666FF | 6633FF | 6600FF |
| FFFFCC | FFCCCC | FF99CC | FF66CC | FF33CC | FF00CC | 66FFCC | 66CCCC | 6699CC | 6666CC | 6633CC | 6600CC |
| FFFF99 | FFCC99 | FF9999 | FF6699 | FF3399 | FF0099 | 66FF99 | 66CC99 | 669999 | 666699 | 663399 | 660099 |
| FFFF66 | FFCC66 | FF9966 | FF6666 | FF3366 | FF0066 | 66FF66 | 66CC66 | 669966 | 666666 | 663366 | 660066 |
| FFFF33 | FFCC33 | FF9933 | FF6633 | FF3333 | FF0033 | 66FF33 | 66CC33 | 669933 | 666633 | 663333 | 660033 |
| FFFF00 | FFCC00 | FF9900 | FF6600 | FF3300 | FF0000 | 66FF00 | 66CC00 | 669900 | 666600 | 663300 | 660000 |
| CCFFFF | CCCCFF | CC99FF | CC66FF | CC33FF | CC00FF | 33FFFF | 33CCFF | 3399FF | 3366FF | 3333FF | 3300FF |
| CCFFCC | CCCCCC | CC99CC | CC66CC | CC33CC | CC00CC | 33FFCC | 33CCCC | 3399CC | 3366CC | 3333CC | 3300CC |
| CCFF99 | CCCC99 | CC9999 | CC6699 | CC3399 | CC0099 | 33FF99 | 33CC99 | 339999 | 336699 | 333399 | 330099 |
| CCFF66 | CCCC66 | CC9966 | CC6666 | CC3366 | CC0066 | 33FF66 | 33CC66 | 339966 | 336666 | 333366 | 330066 |
| CCFF33 | CCCC33 | CC9933 | CC6633 | CC3333 | CC0033 | 33FF33 | 33CC33 | 339933 | 336633 | 333333 | 330033 |
| CCFF00 | CCCC00 | CC9900 | CC6600 | CC3300 | CC0000 | 33FF00 | 33CC00 | 339900 | 336600 | 333300 | 330000 |
| 99FFFF | 99CCFF | 9999FF | 9966FF | 9933FF | 9900FF | 00FFFF | 00CCFF | 0099FF | 0066FF | 0033FF | 0000FF |
| 99FFCC | 99CCCC | 9999CC | 9966CC | 9933CC | 9900CC | 00FFCC | 00CCCC | 0099CC | 0066CC | 0033CC | 0000CC |
| 99FF99 | 99CC99 | 999999 | 996699 | 993399 | 990099 | 00FF99 | 00CC99 | 009999 | 006699 | 003399 | 000099 |
| 99FF66 | 99CC66 | 999966 | 996666 | 993366 | 990066 | 00FF66 | 00CC66 | CC9966 | 006666 | 003366 | 000066 |
| 99FF33 | 99CC33 | 999933 | 996633 | 993333 | 990033 | 00FF33 | 00CC33 | CC9966 | 006633 | 003333 | 000033 |
| 99FF00 | 99CC00 | 999900 | 996600 | 993300 | 990000 | 00FF00 | 00CC00 | CC9900 | 006600 | 003300 | 000000 |
５．４．２ 簡単なタグについて
ここでは，本文に使われるタグのうち，以下のものの説明をします．
| タグの名前 | 使い方 |
| <BR> | 改行 |
| <center> | センタリング |
| <pre> | 整形済みのレイアウトをそのまま表示する． |
| <a> | リンクを張る際に使います．詳しくは次節． |
| <b>,<i> | 順にボールド，イタリック |
| <table> | テーブルを作成する |
| <font> | 文字の種類や大きさ，色などを指定します． |
| <img> | 画像を貼り付けます |
<html> <head> </head> <body> このように改行しても ブラウザの表示は改行 されません </body> </html> |
このように改行しても ブラウザの表示は改行 されません |
| 図2.1-a | 図2.１-b |
|---|
<html> <head> </head> <body> このように<br>改行すれば<br> ブラウザの<br>表示も改行<br> されます<br> </body> </html> |
このように 改行すれば ブラウザの 表示も改行 されます |
| 図2.1-c | 図2.1-d |
|---|
<html> <head> </head> <body> <center>中央揃え</center> </body> </html> |
中央揃え |
| 図2.2-a | 図2.2-b |
|---|
<pre> このタグを使った場合には 文章中の改行が きちんと反映されます． </pre> |
このタグを使った場合には
文章中の改行が
きちんと反映されます．
|
| 図2.3-a | 図2.3-b |
|---|
<b> 太字になります </b>
<i> 斜体になります </i>
<TT> 等幅フォントになります </TT>
|
太字になります
斜体になります
等幅フォントになります
|
| 図2.5-a | 図2.5-b |
|---|
テーブルには<TABLE>〜</TABLE>を用います．<TR>〜</TR>が各行，<TD>〜</TD>や<TH>〜</TH>が各項目を示します．
<TABLE BORDER=1> <TR><TD>●●</TD><TD>▲▲</TD><TD>■■</TD></TR> <TR><TD>○○</TD><TD>△△</TD><TD>□□</TD></TR> </TABLE>
これをブラウザで表示すると次のようになります．
| ●● | ▲▲ | ■■ |
| ○○ | △△ | □□ |
|
<font size="7">フォントサイズ７</font> <font size="6">フォントサイズ６</font> <font size="5">フォントサイズ５</font> <font size="4">フォントサイズ４</font> <font size="3">フォントサイズ３</font> <font size="2">フォントサイズ２</font> <font size="1">フォントサイズ１</font> <font size="+2">サイズ(+2)</font> <font size="-1">サイズ(-1)</font> <font color="#FF0000">赤字</font> <font color="red">赤字</font> |
フォントサイズ７ フォントサイズ６ フォントサイズ５ フォントサイズ４ フォントサイズ３ フォントサイズ２ フォントサイズ１ |
| 図2.7-a | 図2.7-b |
|---|
・GIFとは
Graphics Interchange Formatの略．グラフィックデータの保存形式のひとつ．アメリカの大手パソコン通信ネットワークであるCompuServeで開発された画像フォーマット．モノクロは256階調，カラーは256色まで扱える．インターネットでJPEGとならんでよく使われる．PICTなどからGIFへの変換は，Adobe
Photoshop（GIF89aの出力をサポート）や，GIFConverter（シェアウェア），GraphicConverter（Thorsten Lemke作，シェアウェア版/製品版）がよく使われる．
・JPEGとは
静止画像を1/10〜1/100に圧縮する技術．または，画像圧縮アルゴリズムを制定する目的で設立された団体（JPEG：Joint Photographic
Coding Experts Group）．JPEG方式は，本来フルカラーから白黒2値の画像を効率よく圧縮するために策定された画像圧縮方式で，風景や写真データなどでは効果的だがコンピュータグラフィックスの圧縮には向かない．圧縮過程で情報の一部を切り捨てる（Lossy）方式と，オリジナル画像からの劣化がない（Lossless）方式がある．JPEGの技術は電子スチルカメラ／画像データベース／テレビ会議／カラープリンタの印刷処理などに応用されている．
・PNGとは
PNGはpingと発音します．非公式にはPNGは”PNG's Not GIF”の頭文字を取ったようです．PNGはGIFを引き継ぐものとして開発されました．GIFに使われているLZW圧縮法は1985年に米国Unisysが特許を取ったもので，1995年に突然LZWを利用するプログラムに対して特許権使用料を要求するようになったという背景があります（LZWのライセンス参照）．TIFFもLZWをサポートしており，LZW圧縮を使ったTIFF形式もこのライセンスの対象になります．これを期に，GIFに替わるライセンス・フリーでより発展的な画像形式であるPNGが開発されました．
PNG（Portable Network Graphics format）は，GIFとTIFFの長所を併せ持ち，さらに発展させたビットマップ画像形式と言えます．つまり，GIFのように圧縮率が高くネットワーク上で有効な形式（プログレッシブ表示を備え完全にstreamable）とTIFFのような高品質画像に適した形式の両方をサポートしています．
５．４．３ リンクとは
リンク機能とは，ＷＷＷを閲覧したことのある人ならば，すでに理解していると思いますが，現在のファイルと異なったファイルを表示するためのボタン（文字列や画像）を埋め込む機能です．
みなさんが作るホームページが，一つのファイルでおさまるならば，問題はないですが，たいていの場合複数になります．これらをたどるためのものが，リンクです．また，自分のページに関連のあるページにリンクを張ったり，自分の好きなページのリンク集を作ったりするのも良いでしょう．
この，リンクは，<A>というタグで実現されています．文法は次の通りです．
| <A>の文法 |
<A HREF="http://mikilab.doshisha.ac.jp/dia/guide.html">「ホームページ作成に関するガイドライン」へジャンプ</A>
HREF=""には，リンク先のアドレスを書きます．
|
「http://mikilab.doshisha.ac.jp/~アカウント名/」がみなさんのホームページアドレスになるわけですが，このアドレスを指定した場合にはサーバは「/home/アカウント名/public_html/」というディレクトリ内の「index.html」という名前のファイルを探して返そうとします．
しかしpublic_htmlというディレクトリは最初は存在していませんので，みなさんのホームディレクトリの直下に「public_html」を自分で作成する必要があります．
このpublic_html以下にホームページのファイルをアップロードするわけです．
もう一つの注意はパーミッションに関することです．ブラウザからファイルを見るためにはそのファイルにはリード許可が与えられていなければいけませんし，また，そのファイルが含まれているディレクトリに実行許可が与えられていなければ，そのファイルにたどり着くことすらできないのです．
それとこれはうちの研究室に限ってのことなのですが，研究のページについてはグループに対する読み書き許可を与えるようにしてください．これはみなさんが卒業した後で研究のページに誰もアクセスできなくなることを避けるための措置です．
 １．FFFTPのソフトは，窓の杜などを利用してダウンロードして下さい． ２．図のように表示されますので，上の「次へ」をクリックしてください． |
 ３．図のように，FFFTPに関する表示があるのでそのまま「次へ」をクリックします． |
 ４．インストール先のフォルダを指定するように聞いてきますが，このままで結構なので「次へ」をクリックしてください． 「上書きを確認する」というところは気にしなくていいです． |
 ５．インストール先のフォルダがない場合は図のように聞いてくるので，そのまま「はい」を選択してください． そうするとインストールが始まるので，インストールが終わるまで待ってください． |
 ６．インストールが終わるとデスクトップに図のようなアイコンが作成されるので，次にそれを起動します． |
 ７．FFFTPを起動すると，図のようなメールアドレスの入力を求められるので，ここで各自自分の「miklab」のメールアドレスを入力してください． これは，FFFTPでパスワードとして扱われます． |
 ８．ホスト一覧が表示されますが，初期設定では「mikilab」が登録されたいないので，新たにホストを登録します． 「新規ホスト」をクリックします． |
 ９．図のように基本タブの内容を設定します． 「ホストの設定名」「ホスト名」ほ共に「mikilab」とします． 次に，「ユーザー名」は各自，自分のアカウント名にしてください． 「パスワード」も各自，自分のものを設定してください． 「ローカルの初期フォルダ」は自分のホームページファイルが保存してあるフォルダを選択してください． 「ホストの初期フォルダ」は「/home/アカウント名/public_html」に設定してください． |
FFFTPを起動すると，まず，ホストを選択する画面になるので，「mikilab」を選択して接続を押します． |
|
初めは，サーバーには何も無い状態になっています．ローカルフォルダ内のアップロードしたいファイル（ここではindex.html）を選択して，「コマンド」タブの「アップロード」または，上向き矢印のボタンを押します．ファイルを左から右のウィンドウにドラッグしてもできます． アップロードをする前に，自分のホームディレクトリの下の「public_html」に置く必要があるので，「public_html」というディレクトリを作成します． ホスト側の右側のウィンドウを選択して右クリックでメニューを表示し，「フォルダの作成」をクリックして，public_htmlを作成します． |
|
|
|
「ファイル」と「フォルダ」でパーミッションの設定が少し異なります．まずはファイルの設定から説明します． 図のように，オーナとグループの「呼出」，「書込」にチェックボックスにチェックを入れてください．そしてその他の「呼出」にチェックを入れます． |
|
図のようにオーナーとグループにはすべてにチェックを入れて，その他は実行のみをチェックします． |
これでホームページはアップされました．http://mikilab.doshisha.ac.jp/~アカウント名/にアクセスして正しく表示されることを確認してください．
ここで言う著作物とは，著作権法の中で「思想又は感情を創作的に表現したものであって，文芸，学術，美術又は音楽の範囲に属するものをいう」と定義されています．文章，曲，歌詞，絵画，写真などはすべて著作権の対象です．
Copyright(C)の意味
著作権を英語で Copyright と呼び，よく Copyright (C) と明記します．しかし，日本の法律では Copyright(C) と明記することに法律的な意義は無いようです．しかし「著作権で守られていることを意志表示する」程度の役にはたっているのではないでしょうか．
(C)は万国著作権条約で定められており，万国著作権条約には加盟しているけれど，ベルヌ条約には加盟していない国々に対しては，(C)を表示することに意義がある・・・との情報をいただきました．
著作権を主張
特許権などは特許庁への申請が必要ですが，著作権は著作物を創作したり公表した時点で自動的に発生します．申請などの特別なことを行う必要はありません．
著作権の有効期間
著作権の有効期間は原則として「著作者の死後（共同著作物にあっては，最終に死亡した著作者の死後）五十年」とあります．ただし，「戦時加算による特例」などもありますので，注意が必要です．
法人所有の著作権の有効期間
法人や団体が著作権を持つ場合は「その著作物の公表後五十年」とあります．連載物は基本的に最終話（三年以上続編が出ない場合は最後の話を最終と見なす）を公表時とします．
著作権以外の権利
著作権を侵害しなくても，商品名や社名などに関する「商標権」，発明に関する「特許権」，芸能人写真などに関する「パブリシティ権」，その他「肖像権」など，守らなくてはならない権利にはいろいろあります．
■ 著作権侵害のライン
「著作権法」は明記された文章ですが，その解釈には「ゆれ」があります．特にインターネットでの著作権については法律が追いついていない点も多く，解釈も毎日少しずつ変動しています．
キャラクターなどの似顔絵の著作権侵害
アニメなどのキャラクターの似顔絵をホームページなどで公開することも禁止されています．特にミッキーマウスなどのディズニーキャラクタは管理が厳しく，ミッキーマウスのシルエットだけでも訴えられるケースがあります．
フリー画像として公開されているデータの著作権侵害
「フリー素材集」など多くの著作物が「フリー」として公開されていますが，その公開者がすでに他の人の著作権を侵害している場合は，あなたもその著作物を使用することはできません．しかし，そうは言っても逐一「本当にフリーなのか」を確認することは不可能ですし，個人ホームページに使用する程度であれば，「フリー」の言葉を信用するのも仕方なしといったところです．
受け取った電子メールの内容を匿名で公開する際の著作権侵害
人から受け取った電子メールを無断で第三者に転送したり，ホームページ上で公開することも著作権の侵害になります．
無断リンクの著作権侵害
「このページへのリンクを禁止します」と明記されていても，リンク自体は法律的違反ではないという話をがあります．ただし，リンク先の内容が自分の著作の一部として誤解されるような形式でのリンクは盗用になります．「リンクフリー」と明記されたページ以外へのリンクは，そのページの管理者に確認すること．
■ 著作権保護の為に
著作権についてわからないことが生じた場合，電子メールで問い合わせるなどを行い，著作権者に確認を取りましょう．
「著作権法」については下記のページなどを参照してください．
* http://www.ntt.co.jp/japan/misc/copyright.html
8．宿題
次回までに各自の自己紹介のホームページの作成し，アップロードまでをしておいてください．必須です．
FTPソフトなどを使って，アップロードをするのですが，アップロードする前にやってほしいことがあります．
つなぐと初めは，「home/yourname」の階層に行くのですが，そこの階層に「public_html」というフォルダをつくり
その下の階層で，自分のホームページを作ってください．このようにすると，
http://mikilab.doshisha.ac.jp/~yourname/
というURLで，自分の作ったホームページが見られます．
そして，最初に作るホームのページは，index.htmlとして下さい．
WS_FTP LEを実行すると図のような画面が表示されます．
1.パーミッションを設定するには，ホスト側のウィンドウにあるファイルを選択して，右クリックでメニューを表示して，属性変更を選択します．
次に，属性を変更します．「オーナー」とはホームページの作者のことで，みなさんのことです．「グループ」とはmikilabに登録している人のことです．「その他」は外部からホームページを見る人です．また「呼出」とは，そのファイルを見ることができる権限です．「書込」はファイルを書き換えることができる権限です．「実行」はファイルを実行できる権限です．
次にフォルダのパーミッションの設定に関して説明します．ファイルと同じように，設定したいフォルダを選択して，右クリックでメニューから属性の変更を選択します．