SeaMonkeyをつかって，無料でホームページを作ろう
前回お勧めしたSeaMonkeyを使って，ホーム・ページを作ってみましょう．
1. まず，ひな形を作っておきます．たとえばこんなの．
普通にクリックしてしまったあなた，真っ白の画面が出て，「なんだこれ」と思 いましたね？ええ，それで良いんです．
windowsの人は，「こんなの」にカーソルをあわせ
て，右クリックすると，メニューが出て「対象をファイルに保存」とすれば，ダウンロードできます．マックの人は，ずっとクリックし続けると，メニューが出
ていきます．これで
template.htmをダウンロードできました．これをInternet Explorer
などのブラウザで開いても，真っ白ですね．これを編集して，写真を入れ込んだり，文字を書いたりするわけです．
「えっ，templateっていうファイルはダウンロードできたけど，template.htmってなに？」という人もいるかもしれません．ドッ
ト（.）の後の文字は，「拡張子」といって，ファイルの種類を指定し
ているものです．これを表示させましょう．
windowsの人は，「スタート」→「コントロールパネル」→「デスクトップの表示とテーマ」→「フォルダオプション」と進んで下さい．「全般」
というタブが開いていますが，隣の「表示」をクリック．項目がずらっとありますが，下から3番目に「登録されている拡張子は表示しない」という項目があっ
て，これにチェックが入っているはずです．ここをクリックして，チェックをはずします．
するとどうでしょう，これまで隠れていた拡張子が全て出てきます．MS-Wordで作ったファイルには，「.doc」とか，エクセルで作ったファイ
ルには「.xls」とか，いろいろなものが出てきましたね．デジカメで撮った写真には「.jpg」と付いているはずです．
各ソフトウエアは，この（隠されていた）拡張子を読み取ることで「これはワードのファイル」「これはエクセルのファイル」といったことを認識してい
たのです．
注意したいのは，この「拡張子を表示させているモード」で，拡張子を消してしまうと，何のソフト用のファイルか分からなくなってしまう点です．消し
てしまったら，下にかいた方法で，また付けてあげればokです．
（ファイル名の変更は次の方法で修正できます．まずファイルをマウスで選んで右クリック，そして「名前の変更」
を選びます．ファイルを選んで「F2」キーを選んでもはやいですね）
2. ダウンロード，インストールをしておいたSeaMonkeyを起動しま す．
3.
上に並んでいるメニューに，「ウィンドウ」というのがありますね．これをクリック．そうすると
「Composer」というのがありますので，これをクリックして下さい．これでcomposerが起動します．
4.
「開く」で，ひな形，たとえば今ダウンロードしたtemplate.htmを開きます．
すると，赤い点線で枠がありますね．大きな四角い枠の中に小さい四角が，2列になって，ずっと並んでいます．ここに写真なんかを貼り付けていけば良
いんです．写真は，あらかじめ小さくしておくと楽です．これも無料のソフトがあります．
5.
写真のサイズを簡単に縮小してくれるソフト，「縮専」（縮小専用の意味）をダウンロードしておきます．ここから．
「縮専」で縮小しておくサイズを決めますが，私の場合は写真の
長辺を400ピクセル（ドット）にしています．ソフトの400×400にチェックを入
れて
おくと，長辺を400ピクセルにしてくれます．短い辺の方は，自動的に縮小サイズを比例させてくれて，たとえば300ピクセルとかにしてくれます．横向き
の写真でも，縦向きの写真でも，とにかく「縮専」に放り込めばokです．
6.
縮小したい写真をこのソフトの画面上の四角い部分にドラッグ・アンド・ドロップします．
これで小さなサイズの写真ができました．resizedというフォルダに縮小されてた写真がたまっていきます．5枚とか，10枚とか，一度にできま
す．
7.
さて，写真をまとめておくフォルダを作りましょう．フォルダを新規作成して，たとえば「image」とか名前を付けておきます．
いくつのページを作ることになるかもしれませんので，「image」フォルダの下にサブフォルダを作っておいて名前を付けておきましょう
「kamikouchi」とか「20070501」とか，自分が分かればいいです．フォルダ名や，ファイル名は日本語でなく，半角のアルファベットや数字にしておきま
す．
8. 縮小した写真をサブフォルダの中に入れます．
写真を入れたフォルダは，実際に写真が表示されるようになっていると良いですね．メ
ニューの「表示」→「縮小版」としておくと，多くの写真を一辺に見るこ
とができます．
これで準備は完了．いよいよSeaMonkeyのコンポーザー上で編集しましょう．
9.
先ほどのサブフォルダーの写真を，コンポーザーで開いているtemplate.htmの赤枠の中にドラッグ・アンド・ドロップします．
ドラッグ・アンド・ドロップしやすいように，SeaMonkeyも，写真のフォルダーも，ディスプレー全体に表示するのではなく，半々ぐらいにしておくと
良いかもしれませんね．
右の赤い枠にもドラッグ・アンド・ドロップしてみましょう．2枚の写真が張り付きましたね．
らくちんですね．いま，コンポーザーは，「標準」というタブで開いているはずです．画面左下を見れば確認できます．ここで「<
HTML>ソース」というタブに切り替えてみましょう．すると，写真の指定が，きちんとパスまで通って指定されているはずです．たとえば
<img src="image/kamikouchi/photo0001.jpg">
とか．これは，「画面のこの部分に，imageフォルダの下のkamikouchiフォルダの中にあるphoto0001.jpg写真を表示する
よ」って言うことを意味しています．
これは，写真の名前が，photo0001.jpgだったときの例ですが，ドラッグ・アンド・ドロップするだけで，フォルダの指定がされ
る，って，これがすごいですね．手でタイプしてたら，かなり大変ですし，タイプミスできちんと写真が出なかったりします．
ちなみに，フォルダの名前だけではなく，写真の名前もアルファベットや数字の
組み合わせを使い，日本語を使わないようにし
ましょう．日本語でも大丈夫なサーバーもありますが，ダメなサーバーもありますので，使わない方が無難です．
あと，こうやってドラッグ・アンド・ドロップでやっていれば問題ありませんが，エディタでいじるときに注意することとしては，大文字と小文字が区別
される，ということです．たとえば，上記の例だと，photo0001.jpgというファイル名がありますが，これが，なんかの画像ソフト
で
photo0001.JPGとかになったとします．jpgが大文字な所に注目．ファイル名で大文字が使われていているのに，HTMLソースの画面では小文
字で書かれていたりすると，ダメです．windows上で見ている分には大丈夫なんですが，大学のサーバーなんかは皆，UNIX系なので，大文字・小文字
を区別してしまいます．そんなこともあるので，最初にやった，拡張子を表示させる方法を有効にしておいて下さい．
10. composerは「標準」のタブに切り替えましょう．
貼り付けた写真の脇にカーソルが点滅していますね．カーソル・キー（矢印キー）で点滅を写真の右側に移動した後，エンターキーを押します．すると改行され
ます．ここに文字を打ち込んでいきましょう．写真の下に文字が書けますね．
11. 保存して終了します．
これで完成ですね．できたファイルをダブルクリックすれば，たとえばInternet Explorer
が起動して，今作ったページを見ることができます．
こんな風にして作っていきます．文章だけを直すのであれば，完成したファイルを右クリック，「プログラムから開く」→「wordpad」を選びま
しょう．そうすると，先ほど「<HTML>ソース」で見ていたのと同じ（様な）画面が開かれます．該当する文章の部分を見つけて修正しましょ
う．別にwordpadでなくてもokで，ワードとかで開いても良いですが，wordpadが動作が軽くて，好印象ですね．
本格的に修正したりするには，また「SeaMonkeyを起動」→「Composerを起動」→「開く」でファイルを選べば，また同じ作業ができま
す．
12. アップロードについて
これまでの作業で，ホーム・ページ用のファイルを作ることができました．が，実際にこれを世界中の人が見られるようにするには，このファイル（と
写真，写真の入ったフォルダ）をwebサーバーにアップロード（コピー）しなければなりません．大学であれば，大学のサーバー，個人であれば，プロバイダ
のサーバーですね．プロバイダの場合は，よく分かりません．やったこと無いので．ここでは大学のサーバーに載せる方法について記します．
ftpソフト， と一般にいわれるソフトを使います．具体的には，FFFTPとか，winSCP3とかです．ftp とは，file
transfer protocol
，ファイル移動手順とかそんな意味です．私は長らくFFFTPを愛用していたのですが，理学部のサーバーが変更された際，なんか良く分かんないんですが，
FFFTPが使えなくなってしまったんです．セキュリティーの強化のためだとか何とか．で，winSPC3を使っています．マックだと何になるのかな．
ftpソフトを起動して，自分がファイルをおく場所を指定します．この「どこにおくか」は，大学（学部）のサーバーの管理者にお願いして，その場所
を作ってもらわなくてはいけません．私の場合は，こうして作ってもらったのが
http://science.shinshu-u.ac.jp/~shimano/
という場所です．science，というサーバーです．理学部らしいですね．
で，各ftpソフトとも基本的なやり方は共通で，画面の左側に自分のパソコン上にあるhtmlファイル，写真，フォルダ（ディレクトリ，といいます
が）を表示させて，右側のweb
サーバーに移動（コピー）させます．だいたい，ファイルをマウスで選んでドラッグしたり，画面上の「→」マークとかをクリックしたりします．
アップロードのために，サーバー上の自分のスペースに入るときにはパスワードを打ち込みますので，忘れないように．このパスワードはサーバー管理者
からもらいます．
私の研究室のホーム・ページの場合，学生諸君にパスワードを教えて入ってもらうわけにはいかないので，1-11までの手順でホーム・ページ用のファ イルを作ってもらう所までやってもらい，後のアップロードは私がやっています．
と，こんな感じで作業をしていきます．読むと大変ですが，やれば慣れます．
山本研にいた佐野君（現在は卒業）は，私の実習の時に，「実習の内
容をホーム・ページに載せる」という作業を担当してくれて，スキルを身につけて，山本研究室のホーム・ページの作成，改訂に大きな力を発揮しまし
た．山本研究室ホーム・ページの人気コーナー「水
生昆虫サンプリング記」シリーズは，佐野君の作業のたまものです．関口君も少しは手伝いましょう（笑）．
どうですか，ゴールデンウィーク後半，出かける所がない皆さんも！
（そりゃ，オレか）
つかれました． | トップへ戻る