教師明日香のまじめな教鞭
ホームページを作り始めたい人のための部屋
(この部屋のタイトルは・・・淫らな教鞭でしたがタイトル変更)
今日、明日香の部屋のチャットルーム”深窓の麗人”に今日香さんが訪問されました。(実話です。HNも)
明日香の部屋が開設して以来の4名同室、しかも女性が2人もいるというのはじめての状況・・
出席者:今日香・むん・総統・明日香 (4)+(2あいさつだけ) 8月9日午前3時過ぎ
明日香:今日香さんいらっしゃいませ
それにしても、うまいHNをつけましたね。
・・・・・・・・・略
今日香: 明日香の部屋みたいな感じのホームページを作りたいわ
でも、作り方がよくわからない。
この発言から、明日香の部屋始まって以来の長時間チャットによるホームページの講座が開かれました。 明日香の場合も同様でした。作り出す最初のイメージが解らなくてなかなかホームページが作れませんでした。 この部屋は、そういう方のための部屋です。初心者以前の、これからホームページを作りたいという方のページです。 ホームページに関する本を読んでいると、やたら高度な技術をふりかざして・・・(実は高度ではなく知ってるか・知らない かの違いなのですが)ベタベタとリンクを張ってるだけでは、ホームページではないなんて・・いきまいてる書籍などが あります。しかし、多くのネットファンでホームページを持ちたいという方・・・明日香はそうは思いません。 自分が、何を表現したいか・・・何をネット上で作り上げたいか・・これが第1に重要なことだと思います。
そこで、この部屋では・・・・
ホームページを作り始めたい人のための制作のきっかけとなるホームページ講座の部屋を設置しました。
今日香のためのホームページ制作入門
1.ホームページ制作の手順
・一太郎とかMicrosoft Word というエディタが必要です。
Web文書のモードを選択して、あとはワープロと同じ感覚で文章を書いたり
画像を貼り付けたり作表をしたりします。
この作業では、HTMLの知識は全く必要ありません。
今、このページはMicrosoft Frontpage を使用してワープロと同じ感覚で
作成しています。
・ページにめりはりをつけたり効果をだすために画像が欲しいですよね。
画像は自分で描くのは大変ですから、フリーの素材をネットサーフィンで収集します。
欲しい画像があった場合、メールで確認を取れば、ほとんどのホームページの管理者は
快い返事をしてくれます。・・・画像のダウンロードはメールで確認しましょう。
*以外と、画像を最初から自分で書くものだと考えてる方がいらっしゃるものです。
・画像のダウンロード
画像には、静止画とアニメーションがありますが、どちらもダウンロードは同じです。
一般的に画像ファイルの拡張子は、****.gif か *****.jpg となっています。
キティーちゃんをダウンロードしてみよう。
キティーちゃんをマウスで右クリックします。 操作メニューが飛び出してきますので・・ 名前を付けて画像を保存を選択します。 そうすると、ファイルの保存先を聞いてきます ので、自分が画像を収集しておきたい フォルダーを開いてOKをクリックすれば、 ダウンロード完了です。 ここで、キティーちゃんを右クリックして確認 してみてください。・・うまく行きましたか? 予めフォルダーを作成しておくといいですね。 |
・ホームページへの画像の貼り付け
カーソルを画像を挿入したい位置へ移動させます。
エディタのメニューで、挿入→画像を選択します。
あなたの画像フォルダーから挿入したい画像ファイル名をクリックします。
縮小
↑ ここへカーソルを移動させて挿入するとこうなりました。
画像の縮小・拡大は、画像をクリックしてコーナーの■を対角線上に移動させてください。
・画像の横に文章を入れたい場合は、表を使うといいですね。
画像と文章のレイアウト
こちらに文章を入れてみましょう。 ここでEnterを押すと 改行しますが・・・・間が開き過ぎますよね。 ここでShift+Enterとすると |
罫線は表示・非表示どちらでも可能です。ここでは表示にしています。
・背景を画像で飾りたいですよね・・・
表の中に背景を入れてみましょう
書式→背景→ファイル名 でこのようになりました。
これは、背景のお勉強です。 画像の横には、文字は1行しかはいりません。 |
・文章 ・ 画像 ・ 表 ・ 背景 の4つをマスターしただけでかなり仕事が
進みましたね。この段階で、もう、作りたいホームページのかなりの部分が
表現できますよ。・・・・・・
・訪問者から電子メールをもらおう
電子メールの画像をダウンロードしましょう。
とりあえずはこの中から気にいったのをダウンロードしてください。
メールとかポストの画像をクリックすると、電子メールのフォームがポップして、
あなたの元にメールが届くようにしてみましょう。
1.メールの画像をクリックします。
2.ハイパーリンクの作成または編集のアイコンをクリックします。
3.ハイパーリンク先の指定
明日香のエディターでは WWW を選択して
URL: mailto:asuka_w@geocities.com
mailto: の後に自分のE-mailアドレスを書きます。これだけです。
上のメール画像をクリックしてみてください。電子メールがでますよね。
・それぞれのページにハイパーリンクをかける。
画像とか文章をクリックすると、他のページにジャンプするようにしましょう。
文章の場合について説明しますが、手順は画像の場合も同様です。
【例】 ジャンプしたらブラウザの戻る←でこのページに戻ってください。
明日香交際クラブに入会したい方はここをクリックしてください。
ここをクリックの部分をクリックしたら、ジャンプするようにしてみます。
ここをクリックを選択しハイパーリンクの作成または編集のアイコンをクリックします。
開いてるファイルまたは作業中のファイルでジャンプ先のファイルを指定します。
これでハイパーリンクがかかりました。
エディターの細かな機能とかは、説明しませんでしたが、これまでの手順で大体のホーム
ページは作成することが、できると思います。
なお、説明はFront Page の場合で、説明してますが大なり小なり似通ってると思います。
5ページから10ページのホームページなら、次の土曜・日曜にある程度完成しちゃいますね。
さあ、エディターを起動してチャレンジしてみましょう。
月日 | 今日香のホームページ制作日記 | |
8/11 | ホームページビルダーを使って制作開始 | |
8/12 | 5コマのアニメ画像に初チャレンジ いるか → いるかの基本画像をコピーし、反転機能を使って5コマのアニメに。 制作は着々と進んでいるようです。 |
|
8/13 | 今朝、深窓の麗人のチャットルームでしんさんから、チャットルームの講義 を受ける。CGIのアップロードの方法についてなど。 ゆいちゃっとのダウンロード先のアドレスを聞く。 http://www.power.co.jp/tm/yuiyui/chat/free/index.html 大部屋用:ゆいチャットpro 個室用:ゆいチャットmagic がお勧め しんさんのHP: http://www02.so-net.or.jp/~kensm/links/shinkobe/smkobe SMチャット チャットルームに貼ってある女性の写真が素敵でした。 |
|
チャット壊滅状態につき音信不通 | ||
8/18 | 夏休みが終わったらなかなかチャットにこれなくなるといってましたが、その後今日香さんの ホームページはどこまで、進んでいるのでしょうね。 今日香さん、わたしはこの2〜3日の間に、またまた大きくステップアップしましたよ。 念願の自前のチャットルームのアップロードに成功しましたよ。 今夜は、ゆいちゃっとMINIに電報機能とホームページメニューを追加したものをアップする 予定です。イメージ通りになっているのか、今からワクワクしています。 テレホータイムまでのこの待ち遠しいひととき・・・・・すごい快感。 |
|
8/19 | 今日香さんは、今夜も来てないみたい。どこまで、進んでるのかな? チャットルームをアップロードしました。パーミッションはマニュアル通りに設定しました。 深窓の麗人・・OK。女性専科・・OK。SMの館・・OK。・・・なかなか調子いいです。 MINIチャットは・・呼び出し成功。上段に追加したメニューはどうかな? うまくリンクしている。・・これもOK さて前から欲しかった電報機能はどうかな?・・・クリック・・・・あれ?おかしいな? フレームは出てきたけど・・なにかエラーメッセージが・・・ もう一度、やってみよう。・・・クリック・・・ダメ!!更にもう一度・・・やっぱりダメか。 電報機能だけが、うまくできてませんでした。 ちょっと、プログラムを見てみよう・・・・いいはずだけどなぁ・・・? もう一度・・・MINIチャットをクリック・・・あれ????今度はアクセスしない。 深窓の麗人は、・・・ダメ。女性専科も、SMの館も・・うわぁぁぁぁぁぁぁ・・ 全部アクセスできなくなっている。どうして・・????????? |
|
8/20 | どうしてもわからない。どのようにアプローチしたらいいのだろう? 困った時は、詳しい人に聞いてみよう。しんさんにコンタクト。メールを出す。 深夜、チャットで待つ。しんさん、来てくれないかな? 来ました。ホッ・・。実は・・かくかくしかじかで・・・どのように、確認するのかわかりません。 しんさん: WS_FTPの右側の一番下の dirinfo のボタンでパーミッション確認できます。 午前3時・・作業開始。5時間もあるから、チャットで遊んでこようかな? ・・・・・・・・・・・・ とあるいきつけのチャットでダベリング・・・ ありゃーーーもう、こんな時間、6時30分・・・・・ さあ、確認しなければ・・・・それぞれのディレクトリーごとにdirinfoでパーミッションを 確認していく。めんどうくさいですなあ・・ wrx--r--r の行列が並んでいます。 w: write 書き込み r:read 読み出し x:execute 実行 これがそれぞれのファイルに定義されてます。 今日は、時間ないからコピーだけとっておきましょう・・・・ 確認のコピー完了。・・・チョットアクセスしてみるか? あれれ・・・アクセスできるじゃないの。どうして?なにも、パーミッション変更してないよ。 全部アクセスできる。・・・・?????? 7時40分 電報機能だけは、触らないようにしよう。・・ここだけリンク外して、アップしなおさなければ、 時間がない・・・焦る焦る・・・・・・ホッ・・・間に合ったみたい。午前7時56分 |
|
8/25 | 時々急にチャットにアクセスできなくなるので、プロバイダーに問い合わせのメールを出す。 何かアップロードするたびに、アクセスできないような気がするので、触るに触れない。 数日後、アメリカにあるプロバイダーからメールが届いた。 Hello, We had a problem with the server being down. It is up and running now thoug あれだけ悩んで・・・英文レター一生懸命に書いた結論は、この1行の回答。ガクッ・・・ つまり、ども、サーバーがダウンしてました。ただいまは稼働中です。だって・・・ いろいろ技術的な質問したので少しぐらいコメント来そうなものですが・・・何もなし。 |
それにしても 今日香さんから 何も連絡がない ですね。 ホームページは もう完成してるはず なんだけどなあ・・・ |
1.ホームページのアップロード
FTP というソフトを使用します。
FTP ソフトとして、WS_FTP Cute FTP 小次郎等があります。
2.掲示板とチャットルームをあなたのホームページに
2-1.CGIが使えないサーバーの場合
・あなたのホームページが清純派で健全だったら
無料レンタルチャットにリンクしましょう
こちらへアクセスするとあなたのチャットルームがカスタマイズできます。
これ以外にもありますが、下記の理由でわたしはあまり紹介したくない。
・あなたのホームページが明日香の部屋と同等かそれ以上に不健全だったら
無料レンタルチャットをどんなに苦労してカスタマイズしても2週間の寿命です。
2週間もすれば、Forbiden Error が発生しアクセスできなくなります。
訪問者が来始めたころにアクセスできなくなるので、ショックは甚大です。
多分そこのサイトのブラックリストに乗っちゃいます。アクセス権剥奪。犯罪者です。
CGIが使えるサーバーを借りているチャット友達から事情を説明してスペースを
借りましょう。でもこれは、あくまでも一時的なものと考えましょう。
できるだけ早くCGIが使えるサーバーに切り替えることを検討しましょう。
2-2.CGIが使えるサーバーの場合
明日香の部屋を訪問して下さる方からチャットルームを作りたいけどというE−mailを 受信しました。ちょうど明日香の部屋のチャットルームが2回目のForbiden
Errorを を受けて、CGIをアップしようと決断したその翌日でした。
その時の明日香からの返事をそのまま掲載しますので参考にしてください。
明日香のE−mailによる返事
チャットの件ですが、わたしもいろいろと困っています。
レンタルチャットで対応していたのですが、どこからレンタルしても
2週間もすると、カットされてしまい、立ち入り禁止となってしまいます。
アダルト系はどうも、だめみたいですね。
チャットというかCGIは開設当時から、意識してまして自分で設置しようと
トライしていたのですが、なかなかうまくいかずレンタルに甘えてきましたが、
こう何度もカットされてしまうと、労力の無駄になりますので、本気で設置を
考え出したところです。
丁度昨日、アップロードしてうまく作動したから、よろこんで・・2つ目・3つ目
とアッブしたところ・・・ホームページまで、アクセスできない状態になってしまい
ました。
何が何やら、さっぱりわからないといった状況です。
さいわい、わたしのチャットを訪問してくださってる方に相談して現在、間借り状態で
運営しております。彼も、やはり、アダルト系でレンタルチャットをカットされたらしいです。
略
前置きはこれくらいにして、本題のどうしたらいいのかにはいります。
自分でCGIを作成することは、まずは考えないほうがいいです。
有名なチャットのプログラムをダウンロードしたほうがいいと思います。
ダウンロードを前提に、説明しますね。
1.ダウンロード
・ゆいちゃっと・・・
http://www.power.co.jp/tm/yuiyui/chat/free/index.html
Pro:
大部屋用
Magic:
個室用
・MK−King・・・http://www2a.meshnet.or.jp/~yama/
わたしが、候補にあげてるのは、この2つのチャットです。ゆいチャットがいいかも。
2.ダウンロードすると
***.cgi
***.txt
***.dat
jdoc.pl とかのファイルの種類となります。
3.***.cgi
のカスタマイズ
タイトル・背景・URLアドレスなどをカスタマイズするファイルが1つあります。
MK−CHATKINGの場合は、 mkchatkingset.cgi というファイルです。
この作業はプログラムが読めなくても、できると思います。
サーバーが外国の場合の時差補正
時刻の定義例
$time = time;
(
$sec,$min,$hour,$day,$mon,$year,$wday ) = localtime($time);
$mon++;
$wday = ('日','月','火','水','木','金','土')[$wday];
}
time のところを time±時差時間*60*60 で置き換えます。
USAの場合、州にもよりますが、time+15*60*60 とします。(時差15時間の場合)
表示結果をみながら補正時間を把握してください。
4.すべての***.cgi
ファイルの変更点
cgi
ファイルの一行目に
#!/usr/local/bin/perl とはいっています。
これは、サーバー上のperlのインタプリタ(翻訳機)がどこにあるかのパス指定です。
サーバーに確認するしかありません。
#!/usr/local/bin/perl
#!/usr/bin/perl
のどちらかです。
3と4でカスタマイズは完了です。そんなに、むずかしくはないです。
5.ファイル名の変更
ダウンロードしたファイルは、
たとえば ***.cgi.txt
という具合に
.txt
が余分についてますので・・・
ファイル名変更で ***.cgi
とします。
すべてのファイルに共通です。
6.これで準備は完了しました。
7.アップロードの準備です。
1)まずは、アップロード先のディレクトリーの確認をしなければなりません。
2)それぞれのファイルのパーミッション設定値を確認
755とか666とかです。
そうむずかしく考える必要はありません。
マニュアル通りで結構です。
たとえば、
***.cgi
は 755
***.txt は
666
データフォルダ
777
8.アップロード
わたしは、WS_FTP
というFTPを使ってますので、これで説明します。
1)サーバーに接続します。
サーバーのftp アドレス。ID。パスの設定
2)サーバー側にbin−cgi以下のディレクトリーを作る。
たとえば、
html−−−cgi−bin−−−chat
という具合です。
3)転送先(サーバー側)のディレクトリーを開いておく。
4)チャットのファイルを転送する。
チャットのファイルは、ASCII モードで転送しなければなりません。重要!!!
5)転送後、サーバー側のウィンドウ(WS_FTOPの場合左右2つのウィンドウに
なっていて、左が自分のパソコンで、右がサーバーになってます。)
つまり、右側のウィンドウに転送されたファイルが並んでますので・・
それぞれのファイルのパーミッションを設定します。
6)パーミッションの設定の仕方
WS_FTPの場合
・
右側の窓のファイルをクリックします。ファィル名が反転文字になります。
・
反転文字になったら、今度は、マウスの右ボタンをクリックします。
・
コマンドメニューがポップあっぷして出てきます。
・
一番下のcommand...をクリックします。
・
そうすると、また、メニューが出てきますので
SITE
というのを選択します。
・
パーミッションを設定する1行テキストボックスが出てきますので。。。ここに、
chmod
755 ***.cgi とか
chmod
666 ***.txt という具合に
入力してOKをクリックすれば、
パーミッションの設定は完了です。
7)
6)のパーミッション設定を転送したチャットの全てのファイルに行います。
本当に単純作業です。
***.cgi
は755
***.txt
は666
***.dat
666
と覚えておくといいですね。
間違ってるといけないから、一応調べてね。
8)
これで、アップロードは、完了しました・・
ブラウザで確認してみましょう。
9)チャットの呼び出しアドレス
アップするときに、ディレクトリーをつくりましたね。
このディレクトリーを指定してやります。
http://www.xxx.co.jp/~yourID/cgi-bin/chat/chatkingframe.cgi
という具合です。
後略
掲示板についても、同様です。
2−3.自分で追加したい機能に改造しよう
わたしは、改造の練習としてゆいちゃっとMINIを候補にあげました。
ゆいちゃっとMINを候補に上げた理由。
・ cgi
ファイルが1つだけだから比較的簡単そう
・テレホータイムの重い時、軽そうなイメージを受けたから
改造内容:
・
チャットルームの一番上にホームページのメニューを追加する。
・
電報機能を追加する。(ゆいちゃっとATの電報機能を移植)
1)メニューの追加
明日香の部屋 | 明日香くらぶ | 個室ときめき | 個室ビアン | 電報を出す |
このようなメニューをチャットルームの一番上に設置しました。
明日香は、HTMLタグを書くのが面倒なので、ワープロWordsで上のような
メニューを作成し、ソースファイルのこの部分らしいところをコピーして
chat.cgi
のそれらしきところにコピーしたタグを貼り付けました。
2)電報機能の追加・・・・・電報機能らしきところを捜してコピー
電報機能とは、チャット大部屋で参加者に見られない形で特定の人に話し掛ける
機能です。他の人に見られたくないE−mail
の連絡とか個室のパスワード連絡等
に便利な機能です。レンタルの時から、欲しいと思っていた機能の一つでした。
1)項の右側のメニューをクリックすると、電報機能が稼動するようにしました。
ゆいちゃっとATに電報機能がありますので1)項の電報を出すのに関連したタグの辺りに
この機能らしきところを貼り付けました。
電報機能らしきところで、private.cgi
を参照してましたので、ゆいちゃっとminiの
フォルダーにprivate.cgi
をコピーしました。
メニューと電報機能を追加したプログラム それらしきところのプログラムはこうなってました。 コピーと貼り付けでできたプログラム カラーリングしたので何となくイメージが沸いてきましたか? タグが解らなくても、何とかなりそうな気分になってきました。 もし、これでうまくいけば儲けものですね。 タグの本なんか読んだこと一度もないのですから・・・ <table
border="0">・・・・これは表みたいですね。 |
この色のところの白色のタグがそれとなく電報機能だと思いました。
<a href="./private.cgi?name=$name"TARGET="down">
ここで
private.cgi
を参照してますので、このprivate.cgi の
ファイルをゆいちゃっとMINIと同じディレクトリーに転送しました。
失敗覚悟でアップロード確認する前に、このトライアルを掲載しております。
その方が、このページの趣旨に合ってますので・・・・
さあ、今度はどのような問題が発生するのでしょうか?楽しみです。 98/8/18
3.いまさらリンクをドッキング
4.外部ファイルとドッキング・・・これでWWWの一員
検索サイトへの登録・他のHPへのリンク
5.自分のホームページのアクセス分析
自分のホームページの人気度チェック
注.
Java Script とか Java については、それなりのHPがたくさんありますのでそちらを参照してください。
Java script の例は、メインのHPへアクセスした時に、アダルト関係の小さなWindowがオープンしますよね。
あれは、Java Script で書かれています。ここの部屋でも、上に小さなWindowが開きます。これも同様です。
Java というのは、Java Script とはことなるものです。掲示板とかチャットとかパスワード認証などの分野の
プログラムを開発するための言語です。
掲示板・チャットなどを自分のホームページに作る場合には、プロバイダーがCGI(Common Gateway Interface)
を、サービスしてなければなりません。・・・・CGIのスペル・英語は間違ってるかも知れません。あしからず。
編集雑記
明日香の部屋ではアダルト・ギャンブル・チャット・BBS・出逢い・・・・とネツトの人気番組を網羅してきましたが
ついに、この分野にも手をつけてしまいました。
これにCGIの部屋をつくれば・・・ほとんどの人気カテゴリーをカバーしちゃいますね。
CGI よりも、ミュージック分野がおもしろそうですね。
ヤマハのエレクトーンEL-90を現在、使用してますが、誰かEL-90の演奏をパソコンで使えるファイルに
する方法を知りませんか。知ってる方がいましたら、掲示板に書いてください。
明日香 98/8/9
この数字そろそろナンバースで出そうな数字ですね。
ナンバーズといえば、ナンバーズ予想ソフトもあります。この部屋では、未公開ですけど・・
ホームページの企画・制作承ります。
チャットルーム・掲示板のアレンジ・アシスト等
2000円より
Copyright (c) 1998 Asuka Club