今日香の部屋

教師のまじめな教鞭

ホームページを作り始めたい人のための部屋
(この部屋のタイトルは・・・淫らな教鞭でしたがタイトル変更)

           今日、明日香の部屋のチャットルーム”深窓の麗人”に今日香さんが訪問されました。(実話です。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 thou
g
あれだけ悩んで・・・英文レター一生懸命に書いた結論は、この1行の回答。ガクッ・・・
つまり、ども、サーバーがダウンしてました。ただいまは稼働中です。だって・・・
いろいろ技術的な質問したので少しぐらいコメント来そうなものですが・・・何もなし。
それにしても
今日香さんから
何も連絡がない
ですね。
ホームページは
もう完成してるはず
なんだけどなあ・・・

 

 

  1.ホームページのアップロード

      FTP というソフトを使用します。

      FTP ソフトとして、WS_FTP Cute FTP 小次郎等があります。

  2.掲示板とチャットルームをあなたのホームページに

   2-1.CGIが使えないサーバーの場合
         ・あなたのホームページが清純派で健全だったら

        無料レンタルチャットにリンクしましょう
          こちらへアクセスするとあなたのチャットルームがカスタマイズできます。

                 http://cyberclone.com    

          これ以外にもありますが、下記の理由でわたしはあまり紹介したくない。

       ・あなたのホームページが明日香の部屋と同等かそれ以上に不健全だったら

          無料レンタルチャットをどんなに苦労してカスタマイズしても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">・・・・これは表みたいですね。
<tr>
  <td bgcolor="#000080"><font color="#80FF80" size="2"> </font><a
  href="http://geocities.datacellar.net/Tokyo/Palace/9430/index.htm"><font
  color="#80FF80" size="2">
明日香クラブ</font></a><font
  color="#80FF80" size="2"> </font></td>

  <td bgcolor="#000080"><font color="#80FF80" size="2"> </font><a
  href="http://geocities.datacellar.net/Tokyo/Palace/9430/chat_menu.htm"><font
  color="#80FF80" size="2">
明日香の部屋</font></a><font
  color="#80FF80" size="2"> </font></td>

  <td bgcolor="#000080"><font color="#80FF80" size="2"> </font><a
  href="http://thor.prohosting.com/~swgiken/cgi-bin/chat/stalk1/"><font
  color="#80FF80" size="2">
個室ときめき</font></a><font
  color="#80FF80" size="2"> </font></td>

  <td bgcolor="#000080"><font color="#80FF80" size="2"> </font><a
  href="http://thor.prohosting.com/~swgiken/cgi-bin/chat/stalk2/"><font
  color="#80FF80" size="2">
個室ビアン</font></a><font
  color="#80FF80" size="2"> </font></td>
  <td bgcolor="#000080"><font color="#80FF80" size="2"> </font><a
  href="http://geocities.datacellar.net/Tokyo/Palace/9480/member_regist.htm"><font
  color="#80FF80" size="2">
会員登録</font></a><font
  color="#80FF80" size="2"> </font></td>

  <td bgcolor="#000080"><font color="#80FF80" size="2"> </font><a
  href="./private.cgi?name=$name"TARGET="down">
<font
  color="#80FF80" size="2">
電報を出す</font></a><font
  color="#80FF80" size="2"> </font></td>

</tr>
</table>

                  この色のところ白色のタグがそれとなく電報機能だと思いました。

                    <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のスペル・英語は間違ってるかも知れません。あしからず。

 

このページに関するご意見はこちらへ

 

MENU1自宅モード   MENU2会社モード

 

 

編集雑記

明日香の部屋ではアダルト・ギャンブル・チャット・BBS・出逢い・・・・とネツトの人気番組を網羅してきましたが

ついに、この分野にも手をつけてしまいました。

これにCGIの部屋をつくれば・・・ほとんどの人気カテゴリーをカバーしちゃいますね。

CGI よりも、ミュージック分野がおもしろそうですね。

ヤマハのエレクトーンEL-90を現在、使用してますが、誰かEL-90の演奏をパソコンで使えるファイルに

する方法を知りませんか。知ってる方がいましたら、掲示板に書いてください。

明日香  98/8/9

この数字そろそろナンバースで出そうな数字ですね。

ナンバーズといえば、ナンバーズ予想ソフトもあります。この部屋では、未公開ですけど・・

 

 

 

ホームページの企画・制作承ります。
チャットルーム・掲示板のアレンジ・アシスト等
2000円より

E-mail

 

GigaHit

Copyright (c) 1998 Asuka Club

1