ホームページ制作講座

用意する物

１．パソコンモデム（当たり前そんこと書くなと言わないでね）

２．覚えなくても良いが、とりあえず隣に置いておく「ホームページの作り方」
　　の本（￥２，０００前後）まあ辞書みたいな使い方をします。

３．やっぱりホームページ作成ソフト（ホームページビルダーなど）
　（２の本をみっしり勉強すればこれは「メモ帳」でも出来るので要りませんが
　　面倒くさい人は１万から２万の出費でーす）

４．WWWブラウザ
　　ネスケもただになったことだしＩＥと両方あった方がいいみたい

５．画像加工ソフト

６．FTPソフト（出来たページをアップするためのソフト）

７．デジカメやスキャナーがあればなお良いが、
　　なければ写真を取り込んでくれるサービスをやっているパソコン屋さんか
　　持ってる友達を探します。

８．プロバイダーに電話して、「作りたいんですが」と言って、自分の
　　スペースを取ってもらう。（料金も　聞きましょう）

最初からすごい事をやろうと思っても無理なので、表紙とそこから飛ぶページを
１．２ページ（合計３ページ位）考えます。
後はだんだん増やしていけばいいので。（いきなり知っている事を全部出すと
後の更新が大変なので、小出しでいきましょう）

構想が出来たら、そこに載せる画像やアイコンを用意します。時には外に出て
取材も必要かもしれません。（ここで画像ソフトやデジカメの登場）
アイコンはインターネットからフリーの物が持ってこれます。
後は文字をパタパタ打ち込んで、とりあえず仮の完成。

それをブラウザで確認して、Ｏ．ＫならFTPソフトを使ってアップします。

最後に自分のページを、メール友達、検索エンジン（ヤフー、インフォシーク
など）に登録したりして宣伝します。

後は暇を見て内容や絵を変えたり、凝ったテクニックを取り入れたり、音を入れ
たり、カウンター付けたり、諸々の更新作業をします。

それぞれの趣味や（もちろんパソコンも）仕事の事で他の人に聞かせたらちょっ
とは役に立つかな。とういような事。全く役には立たないが、笑ってもらえるよ
うな事。その他地元の話題。（方言やうまいラーメン屋さんの紹介など）
日頃思っていること（ちょっと堅く政治経済とか）
ほほえましい日々の話題、日記。女性であれば、料理や子育て失敗談。

後自分の趣味があまり広くない人は、子供などにも登場してもらって、
家族寄せ集めページにしちゃいましょう。
あと絵や写真のストックがある方はそれを載せるとか、作曲出来る環境の人は
それを公開したり（私は機材もセンスもないので無理）＞マイクだけはなんとか

チャットや掲示板がメーンってページもありますね。
リンク集専門とか。

それからＨ系のページを作るというのもあります。
（ああいうとこってどうやって写真かき集めるんでしょうね）

次の段階は、ページ同士の繋がり（リンク）の構想を決めます。
なるべく階層構造を基本に考えます。

こんな感じでしょうか。
それぞれのページから
迷子になっても戻れるように
表紙に行けるようにします。
でも、あまり階層が深すぎる
と、奥の方は見てもらえないかも

後から後悔しているのですが、だんだんページが
増えてくるとページ毎によく
解る名前を付けて、それぞれ専用の
フォルダーで、そこに使う絵やその他を
入れるようにしておかないと、後で
更新の時ごちゃごちゃになって大変です。
（私すでにごちゃごちゃ状態更新日付の
違う表紙が沢山散らばっています、）

いよいよ１ページずつ作っていきます。
MACの皆様すみません。私WINDOWSしかいじったことがない物で、
MAC用のソフトに関しては、名前や所在が全く解りません。
ただ作り方の要領は似たような物ではないかと思います。(--;)

まず表紙からいきます。
ここは皆さん気張って作るところですよね。
最初に格好いいタイトルロゴを作りましょう。といってもすごいソフトと
テクニックをお持ちの方は別として、初心者はいきなり商売人のような物は、
とても出来ないので、WINDOWS 付属のペイントで大きめのフォントで
文字入力（黒系）して、そこに左右上下ちょっとずらして同じフォントで
同じ文字を（白系）重ねるだけで、少し立体感のある文字になります。

あっ、やっぱり「ペイント」じゃ少しまずかった。画像形式BMPじゃ駄目でした。
ホームページはJPGかGIFでないとうまくいかないのを忘れてました。
（ホームページ作成ソフトには画像形式変換が出来る物もあります。ホームペー
ジビルダーはその機能があるので、とりあえずペイントだけでもＯ．Ｋです。）

やっぱりペイントショッププロが良いでしょうか。
こんな所にあります。（シュアウェア英語版）
http://www.jasc.com/download_4.asp

タイトル画像も作りましょうか。でもこれはサイズに気を付けて、小さめ小さめ
にします。（サイズや色数も落とします。）私の場合は大きくても２０ｋ位にし
ようと思っています（これには個人差あり）
あまり極端に落とすと絵がギザギザになったり色が変になるので、その辺の
バランス結構苦労します。

後は背景の画像も作ります。面倒ならばなしでも良いですが、ここは多少目立っ
た方がいいので、あった方がいいです。

材料集めの方が時間がかかってしまいます。
ここまで来れば、出来た材料を一つのフォルダーに集めて、いよいよ最後に作成
ソフトか自分でタグを打ち込みます。
それにE-Mail アドレスや更新日付などを適当なところに入れて、それぞれの
ページに飛ぶようにリンクを張ります。

ページに載せる画像についてです。
これが結構時間がかかります。素材集じゃあまりにうまく出来過ぎてるし、
あまりへぼいのも、かっこ悪いし、著作権どうのこうのと言われてもやだし。

オリジナルの絵のセンスもあまりないのですが、せめて一つや二つ動く絵が載っ
ていると、派手で良いですよね。
もちろん私はJAVAのプログラムやショックウェーブなども全然出来ません。
でも動く絵は、手間をかければ何とか載せられます。
パラパラ漫画の要領です。

NIFTY-Serve FGALAV LIB16 に「六角大王」というフリーソフトがあります。
簡単な３Ｄ図形ならすぐに作れます。それにこのソフトは図形をマウスで回した
り出来ます。そこで少し回しては、コピー。また回してはコピーとしていくと、
コマが出来てきます。
他にはペイントなどでも、回転させたり、表示位置をコピーペーストで変えたり
して、コマを作れます。実はここまでが手間がかかります。とっても。
忘れてました。すべてのコマの画像形式はBMPでなくGIFにして下さい。

前Giamは日本語ソフトでフリーだったみたいです、最近パッケージソフトに
なっちゃったみたいです。残念！
GIF Construction Setは英語でシュアウェアです。
でもこれは流れる文字なんかが、簡単に出来てしまいます。

続いてこんな物です。
私も意味は全く分かりませんが、ただ以下をコピーして、日本語の部分だけを
適当に変えて、HTMLファイル（表紙その他）に張り付けるだけです。
ステータスバー（下の方）に流れる文字が表示されます。

自分のホームページのちょっとした紹介や、新着情報などを載せると良いのでは
ないでしょうか。
－－－－－－－－－－－－－－－ここから－－－－－－－－－－－－－－－－－
<SCRIPT language="JavaScript">
var msg; msg="ここに流したい文字"
msg=msg+msg; function disp(){ setTimeout("disp()",200); msg=msg.substring(2,msg.length)+msg.substring(0,2); window.status=msg; }
</SCRIPT>
<SCRIPT language="JavaScript"> disp(); </SCRIPT>
－－－－－－－－－－－－－－ここまで－－－－－－－－－－－－－－－－
ジャバスクリプトと言うんだそうですが、全く意味不明。もちろん自分で作るな
んてとんでもない。

順序が少し逆になるかもしれませんが。今回は透明化GIFです。
普通の画像は□ですが、回りや、指定した色を透明色にして、四角の枠が出ない
切り絵みたいな感じで、画像を載せられます。
もちろん前に書きましたアニメーションGIFのひとコマとしてでも使えます。

最近の作成ソフトにはこの機能が入っている物も多いです。
ちなみにホームページビルダーはあります。

あと「ＧＩＸ」などもあります（シュアウェア）
http://www.tocka.com/indexj.html
このページの中にありますが、やっぱりフリーソフトがいいですね。

でも、Unisysの特許の関係で各ソフトのＧＩＦ対応はどんどん
削除されてますね

そういえば「ホームページビルダー」と作成本以外は、お金出していないような
気がします。（電話代は使っていますが）

この辺のタグは、まだ私もよく解らないところです。
私の持っている本が古いので、解説が見当たりません。

問題になるのは、サイズの関係でどうしてもMIDIを使わなければならないことで
す。ではどうやって *.MID ファイルを作りましょうか？
もちろん「ミュージ郎」とかそんなのは持っていません。

そこで
ARAKI (NIFTY-Serve ID:YRL02427) さんの「Jazz bass」（フリーソフト）
ニフティのどこかにあると思います？？？

上の６つのソフトなんかで簡単に（センスがないので傑作は出来ません）
MIDIファイルは出来ます。

またフリーのMIDIデータをこんなとこから持ってくるか、
http://www.asahi-net.or.jp/~wb2y-hnd/phrase.htm
ヤフーで「MIDI」をキーワードで検索をかけます。他にもデータのあるところは
沢山出てきます。その中で「ご自由にお使い下さい」と書いてある中から、
気に入ったのがあれば、持って来ちゃいます。

肝心なところがわからなくてすみません。
音楽が出るページに当たったら、その人の「文書のソース」のそこの部分を流用
させてもらいましょう。

話はちょっと変わりますが、ヤマハのMIDI-PLUGのような物ですが、
MIDI Plug-In Crescendo 3.0の beta3が
http://www.liveupdate.com/winbeta.html
こんな所にあります。ヤマハと違ってフリーソフトです。

ここまでで、とりあえず素材はそろうと思います。
いよいよ作成ソフトその他で、それぞれを配置したり、説明を打ち込みます。

それではいよいよ作成ソフトかメモ帳で部品を並べ、説明を入れます。

絵と文字を縦に順番に並べるのも良いのですが、やはり変化を付けて、その
ページの中に、右に絵があって、左に文字があったり、その逆にしたり、
絵を真ん中に置いて、左右に説明を書いたりと、変化を付けてはいかがでしょう
か？

そんな時にテーブルタグをよく使います。でもこれはなかなか自分で打ち込む
のは大変です。やはり作成ソフトが簡単です。

	表って結構便利
上に説明したり		下に説明したり

　表の作成と言うやつです。こうすれば画像を
　好きな位置に持って行けますし、
　見ている人を少しは飽きさせません。
　（上は２Ｘ３の表です。アレ３Ｘ２かな）
　そして、ボーダー（枠の太さ）を最後に０に
　します。
　そうすれば表組みの線がなくなるので、
　表と言うことがわからなくなります。
　今度は逆にボーダーを２０から３０くらいに大きく
　します。そしてその中に、画像を入れます。
　そうすると額縁に入った絵のような効果が出ます。

もう１ページ作ってみます。
何処のホームページにもあるリンクのページです。
今まで自分が回った中で、楽しかったサイトや、ためになったりおすすめの
サイトをブックマークなどから選びます。

そこへ、一応繋がることを確認するためと、リンクの了解が必要かどうかを、
見に行きます。もし必要なら、そこへ「リンク張らしていただけますか？」と
いったメールを書きます。

ネットスケープの場合は、ネットスケープのあるフォルダー内の bookmark.htm
を作成ソフトかメモ帳で、横に説明を付ければ、リンクのページが出来上がりま
す。
IEからは、どうするのかよく解りません(^^;;

ここまで来ればもう後２歩で公開です。ヤー長かった。かなり面倒くさ
かったですね！

ローカルで、出来たページをＷＷＷブラウザで確認します。出来ればネット
スケープとインターネットエクスプローラ両方で見てみます。
ホントは色々なバージョンですればいいんでしょうけど、ネスケ４．０と
IE４．０あたりで良いと思います。

次にそのページ毎の、画像その他を含めた合計サイズを、エクスプローラなどで
確認します。５６Ｋモデムで２０秒程度で全部表示されるサイズは約１００Ｋ
くらいです。人が許せる待ち時間ってやっぱり２０～３０秒ですよね。

もしそれ以上のサイズになってしまったときは、まず画像からサイズを小さくします。
ＧＩＦなら減色するか、ＪＰＥＧなら圧縮率を変えてやります。
IrfanView32（フリー）などを使うのが簡単です。
http://www09.u-page.so-net.ne.jp/pc4/wakasama/iview.htm
それとも小さいサイズの画像をそこには載せて、そこをクリック
すると、大きい画像へ飛ぶように変更します。あまり大きい物はサイズ表示
してやるのが見に来てくれる方への心遣いですね。

第一段階はファイル転送ソフト（FTPソフト）を用意します。

などがあります。もしダウンロードが面倒な方は、雑誌「インターネット」
などに付いてくるＣＤに、これ以外にも沢山載っています。

次はプロバイダーへの申し込みです。
自分のホームページのアドレスが何処になるのか。などを聞きます。

そしてFTPソフトに、サーバーアドレス、ID、パスワードその他設定をします。

最後にインターネットに接続し転送します。
そのまま接続した状態で、ブラウザを立ち上げます。そして早速自分の
ホームページを見てみます。
画像が全部表示されてるかどうかが問題です。うまくいかない時は、
実際の画像ファイル名と、それを表示させるHTMLファイルの記述の大文字小文字
の違いがないか確認します。時間がかかるようなら、駄目な画像をチェックだけ
して、回線を切ってからゆっくり探します。

エクスプローラなどでファイル名か、メモ帳などでHTMLの内容を変更したら、
再アップし、またブラウザで確認します。
全部表示されるまでこれを繰り返します。
基本的にはHTML、画像ファイル名共に小文字に統一した方が後々いいようです。

もう一つですが、自分のページ同士のリンクが正しいか、他のリンクへちゃんと
飛んでいるかなどもやってみます。
ここでやっと感動が味わえます。ついつい自分のページを何回も見てしまいます。

次に欲しいのはやっぱりアクセスカウンタですよね。
「あなたは・・・・人目の訪問者です」と言ったやつです。

これがなかなか難しいです。それにこれはホームページ作成ソフトでは、
作ることが出来ません。

１、自分のプロバイダーが、カウンタサービスをやっているか聞いてみる。
２、カウンタサービスをやっているページに、自分のページを登録して
そこのページが指定するタグを、自分のページにコピーする
ウンターは簡単につきますが、寄り道するので、ページの表示は遅く（具体的なやり方は、それぞれのページに説明があります）

ウンターは簡単につきますが、寄り道するので、ページの表示は遅く
なってしまいます。

３、CGIのプログラムを作るか、出来合いを持ってきて、数字の画像ファイ
ルを用意して、telnetを使ってパーミッションを変更したり・・・・・

私の場合、最初２でいきました。それから自分と同じプロバイダの
カウンタの付いている人のホームページを見て、その人にメールを出して
１のやりかたが出来ることを知りました。
（もっと早く大家さんのページを見ていれば良かった。）

実はこれ「ヤフー」の検索で少し調べたのですが、「アクセスカウンタ」を
キーワードにしたんですが、ここで出てくるページは、カウンタの他にも
いろんなおもしいことや、ハイテクニックなホームページを作る情報が沢山
紹介されているページが多いです。（それだけ内容は難しくなりますが）

０．ニフティなどの掲示板に載せてみる。
１．今までのメールフレンドに宣伝する。
２．パティオなどで宣伝する。
３．年賀状や暑中見舞いなどにアドレスを載せる
４．インターネットのメーリングリストに入っている方は、本文の最後に
　　さりげなくアドレスを載せて発言する。
５．検索エンジンに登録する。
６．ウェブの検索ロボットに見つけてもらう。
７．人のホームページを回って、こちらのページにリンクを張ってくれそうな
　　ところに頼む。
８．大家さんの所（自分の加入プロバイダ）で紹介してもらえるか聞いてみる。

０．１．２．３．４は良いとして５から簡単な説明をします。

７＞そこページのリンクコーナーをねらう。アクセスカウンタなどを参考に、
なるべくアクセスの多いページのリンクコーナーで相互リンクをお願いする。

８＞うちのプロバイダは登録が有料なので、私はしていません。

アクセスリストとまではいかないのですが、アクセス日やブラウザ
などを簡単にチェックするジャバアプレットがあります。
Daiji Sanai さんのVisitor Checkerといいます。
http://rd.vector.co.jp/soft/other/java/se058007.html

アクセスがあるとメールが届くので、いちいち自分のページをチェック
する手間が少し省けます。

７つの段階で簡単に作れちゃいます。カウンターやアクセス解析
ゲームや占いなどもみんな一緒の要領です。

まずその１は、ＣＧＩが使えるホームページスペースを取ります。
検索で「ホームページ」「無料スペース」「ＣＧＩ」などのキーワード
で探します　ホームページスペース　（リンク集）
例ＴＫＣＩＴＹなど

次に元になるＣＧＩスクリプト（プログラム）を探します。
「ＣＧＩ」「スクリプト」「カウンター」などのキーワードで検索します。
また気に入った掲示板があったら、そこの右下か下の中央に
リンクがありますので、そこクリックすると作者のページに
飛べます。
代表的なのが「ＷＥＢ裏技」「CGIZOO！」などです。

ダウンロードしたスクリプトの、拡張子がＣＧＩのファイルを
メモ帳などのエディッタで開くと、１行目に
#! /usr/bin/perl
#! /usr/local/bin/perl
などと書いてあるので、サーバーからもらった資料に
「parlのパス」って所があるのでそれに合わせます。
大体上か下のどちらかです。
（空ファイルの作り方→新規作成＞テキストファイル＞名前を
変更）

次にＦＴＰソフトを使ってアスキー型式で
とりあえずそのままアップします。
最近のＦＴＰソフトはいちいち型式指定しなくても自動で
そのようにしてくれます。

アップできたら、アップしたファイルやあらたに作った
フォルダーの属性（パーミッション）をＦＴＰソフトなどで
変更します。
ここでもサーバーからメールでもらった資料と
ＤＬしたＣＧＩファイルやｒｅａｄｍｅなどを両方参考にします。

さてとりあえずアップしたアドレスにブラウザでアクセス
してみます。無事表示されましたでしょうか？
駄目な原因は、パーミッションの間違いが多いようです。

次にＣＧＩファイルをメモ帳で再度開いて、タイトルや文字の色
背景などをかえるところがありますので、自分用に変更します。
そして再度ＦＴＰソフトを使って前のファイルに上書きします。

最後に自分でテスト投稿してみましょう。そしてそれを削除
してみましょう。上手く行きましたか？

	＼／