第１章 ファイルのアップロードとブラウズ

第１節 この章の概要

この章では，以下の４点について詳しく説明します．
  1. 前回の復習
  2. ディレクトリ構造をhomepageに導入
  3. mikilabマシンのreserchに研究発表をアップする
  4. 実際のブラウズのされかた
第２節「前回の復習」では，前回の最後説明しきれなかったftpでのアップロード方法などについて，少しふれます．第３節「ディレクトリ構造をhomepageに導入」では，昨日のUNIXゼミでもふれられた，ディレクトリ構造をhomepageにも導入しようという話をします．第４節「mikilabマシンのdiaに研究発表をアップする」では，mikilabでの研究を掲載している，diaページの「RESERCH OF MIKILAB」にみなさんの研究をアップする方法を解説します．最後に，第５節「実際のブラウズのされかた」では，htmlファイル，pdfファイル，pptファイルなどの，ブラウザでの表示のされ方などについて説明します．

第２節 前回の復習

前回の最後に，ftpによるファイルのアップロード方法について解説しましたが，その方法はftp.exeによる非常に原始的な方法で実現していました．現在ではguiなftpも多数存在し，より便利にファイルのアップロードができるようになっています．そこで，前回のゼミの後，ホームページ上に，guiなftpのひとつであるNextFtpを使用したファイルのアップロード方法を掲載しました．ここでは，そのNextFtpを使用して，次の３つのファイルをアップロードしたいと思います．
[c:\hpsemi\report.html][c:\hpsemi\report.pdf][c:\hpsemi\report.ppt]
アップロード先は，[http://mikilab.doshisha.ac.jp/~tsutsumi]にします．

NextFtpの使い方については，[http://mikilab.doshisha.ac.jp/dia/semi/homepage/ftp/index.html]や，前の実演を参照して下さい．

第３節 ディレクトリ構造をhomepageに導入

図1.1:煩雑なファイル達 図1.2:ディレクトリで分類されたファイル達
図1.3:ホスト側を右クリック
図1.4:フォルダの新規作成
図1.5:新たに作るフォルダ名を入力
昨日のUNIXゼミに参加された方は，何となくでもディレクトリ構造というものがわかっておられると思います．このディレクトリ構造は，ホームページを作る上でも非常に重要で，同じ種類のファイルをまとめておいたり，似たような内容のページを同じディレクトリにまとめたりするのに非常に有効です．特に，ホームページが充実し，ファイルの数が多くなればなるほど，管理の面で有効なのです．図1.1を見て下さい．たくさんのファイルがごちゃ混ぜにあります．が，実はこれは，「jijo22〜24.html」「nikki1〜3.html」「matha〜c.html」「index.html」の４つに分類できます．そこで，それぞれの分類ごとにディレクトリを作成し「index.html」以外をそのディレクトリに入れてしまいます．すると，図1.2のようになります．どちらが見やすくて，管理に優れているかは一目瞭然でしょう？
このように，ディレクトリ構造を導入することにより，管理上非常に好ましい事がわかって頂けたと思います．では，実際にフォルダを作成するにはどうしたらよいのでしょうか？sshやtelnet，ftp上からディレクトリを作成するには，mkdirで作成できます（詳細は，UNIXゼミを参照して下さい[http://mikilab.doshisha.ac.jp/dia/semi/unix/command.pdf]）．NextFtpを使用している場合は，新たにディレクトリを作りたいディレクトリに移動してから，ホスト側を右クリックし（図1.3），フォルダの新規作成を選び（図1.4），新たに作るフォルダ名を入力します（図1.5）．すると，新たにフォルダが作成されます．



第４節 mikilabマシンに研究発表をアップする

図1.6:Dir of reserch
mikilabの研究生は，研究成果をweb上にアップする必要があります．これは，個人のディレクトリに作られるページとは全く別に，[http://mikilab.doshisha.ac.jp/reserch/]ディレクトリの中に，ルールに従って作成されます．今年度は，まだ研究が始まっていないため，ディレクトリもルールも存在しませんが，ここでは昨年度の例を参考に，いつでも指定通りにページをアップできるようにしておく必要があります． 現在のreserchのディレクトリ構造は図1.6のようになっています．今後，研究が始まると，[/home/WWWmikilab/reserch/]に，[1999]というディレクトリが作成され，その中にさらに[DPP][IC][IS][MPS]等の４研究グループごとのディレクトリがあり，その中にようやく自分の名前のディレクトリが存在するようになります．自分のページを更新するだけではなく，研究報告をこの[/home/WWWmikilab/reserch/1999/[groupe]/[user]]にアップするようにして下さい．アップするファイルは，先のLATEXですでに指示のあったように，pdfファイルです（もちろん，そのpdfファイルにリンクを張る[index.html]等は必要です）．


第５節 実際のブラウズのされかた

ここでは，各種ファイルをブラウザで読み込んだ際に，htmlファイル以外ではいったいどのような動作が起こるかを解説します．ブラウザは，htmlファイルを読むと，そのまま文法に従って表示します．また，txtファイルを読み込むと，内容を全くそのまま表示します． また，jpgファイルやgifファイルを読み込むと，画像を表示します．これらは，ブラウザが標準で読み込める形式であるといえます．
一方，Power-Pointのファイル（ppt）やpdfファイル，bmpファイルなどは，そのままではブラウザは表示できません．そこで，通常はファイルに保存して，別ソフトで見ることになるわけですが，ブラウザにはプラグインという便利な機能があります．これは，ブラウザ本体が対応していなくても，後から各メーカーなどがブラウザ用にプラグインと呼ばれる追加プログラムを開発し，通常はブラウザとは全く別に配布している機能です． たとえば，インターネットエクスプローラを作ったのはマイクロソフトですが，pdfファイル用のプラグインを作ったのは，Adobeです．われわれは，ブラウザに自分でプラグインを追加することにより，ブラウザが標準では対応していない形式のファイルでも，プラグインを用いて，表示させることができるのです． プラグインのあるファイルが，pdfやshockwave，realaudioなどです． 一方で，プラグインさえないファイル形式では，ブラウザからはどうしても読めないので，先にも述べたように一度保存して，別の専用ソフトで見る必要があります．この形式に属するファイルはPowerPointファイルや，ワードのファイルなどです．


補足：階層構造の利点
一つのファイルに多くの情報を載せようとすると，どうしてもサイズが大きくなります．見たいのは同志社の情報なのに，ページは同志社の情報とサッカーの話が一緒に載っている．なんて事になると，閲覧者は不要なデータまで強制的に読まなければならないことになります．（本人は読まなくとも，コンピュータはしっかり読んでくれるんです．）もしも同志社のページとサッカーのページを分けてしまったら？

同志社の情報とサッカーの情報が一緒のファイルにある場合．同志社の情報を探している人もサッカーの情報を探している人も，強制的にmain.htmlを読まなければならないから，

6KB+7KB(main.html)=13KB
同志社の情報をdoshisha.htmlに入れた場合だと，まずlist.htmlで同志社の情報がある場所を探してdoshisha.htmlにアクセスします．必要なページはlist.htmlとdoshisha.htmlだから，

2KB(list.html)+7KB(doshisha.html)=9KB

まず見てわかるように，必要なデータのサイズが減りました．コンテンツ(内容)が増えれば増えるほど，この差は大きくなっていくはずです．Networkに接続している人は環境もそれぞれで，かならずしも快適な環境で接続されているとは限りません．とくに回線速度面において恵まれている人はそんなに多いものではありません．それだけに，このように内容を減らすことなく，構造によってデータファイルの軽量化を図ることは大きな意味があります．

ただ気を付けねばならないことが一つあります．リンクを張ることによって，閲覧者はHomepage内を移動することになります．となると，Homepageの中身の整備も大切ですが，移動のためのリンクも整備しなくてはならないわけです．階層が複雑になってしまい，訪問者が迷子になってしまったり行き止まりにぶち当たってばかりになってしまってはいけません．相手が目的のデータを見つけだすのに苦労してしまったら，結局のところ回線を通じて読み込むデータ量はむしろ増えてしまいます．そうならないためにも，しっかりと考えに基づいた階層構造を組立て，Homepage内のインフラをしっかりと整備しなくてはなりません．