第4節 ホームページを公開する

  ようやく、最低限のトップページは出来ました
  これでは まだまだ未完成だけど、一度公開してみようと思うんだ!
  そうすれば、緊張感も出るし、元来、個人ホームページは、徐々に更新するものだし
  とりあえずの形が出来た今がいいタイミングだと思うんだ!
  みんなも、ぼくと一緒に公開してみましょう!



 @ ホームページの予備知識
 A サーバ上にHPエリアを取得
 B HP専用フォルダを作る
 C ファイルをフォルダに移す
 D アドレスの指定法
 E FTPソフトを入手
 F FTPソフトの初期設定
 G サーバーへ転送



@ ホームページの予備知識

ホームページを公開するために、その大まかな仕組みを知っておきましょう。
ホームページは何処にある?
ここに来ておられるみなさんは、私のパソコンに直接アクセスして、ホームページを見ているのでしょうか?

私は、仕事・食事・睡眠中など、かなり多くの時間、パソコンのスイッチを切っています。 でも、みなさんは、早朝・昼・夜・深夜と、好きな時間にアクセスされてますが、いつでも私のホームページを見られますね。 こらからわかるように、少なくともホームページのアクセス先は、絶えず稼働しているコンピューターでなくてはダメですね。

実は、私の契約先のコンピューターの、私用にあてがわれた部分にアクセスしているのです。 そして私は、そのコンピューターの宛われた部分に、このホームページのファイルを置いているわけです。

PS:インターネット用に常時稼働しているコンピューターを、サーバーと呼びます。
ホームページへのアクセスのしくみ
一方、ホームページにアクセスする時は、自分のパソコンから、直接に見ようとするホームページの置いてあるサーバーにつないでいるのでしょうか?

それなら、もし海外のホームページにつなげば、国際電話の通話料が必要ですね。 これでは、海外とまではいかなくても、国内の遠く離れたホームページへつなぐには、かなり高額の通話料が必要となり、迂闊にアクセスできなくなってしまいますよね。

実際には、契約したプロバイザーのコンピュータを介し、世界中に網羅されたネットワーク回線を通してアクセスしているのです。 だから、契約プロバイザーの用意する最寄りの中継地に接続すれば、ネットワークにつながり、そこまでの通信料を支払えば済むわけです。

つまり、HPを開設するのも、他のHPにアクセスするのも、契約プロバイザーを介しているのです。

PS:この頃では、「フレッツ」等の常時接続のサービスが多くなり、通話料を気にせずにインターネットを楽しめる様になりましたが、たいていは市内通話の範囲に中継地を置いているようです。


A サーバ上にHPエリアを取得

前項で説明したように、自分のHPファイルを置く、契約したプロバイザーやレンタルサーバー業者の、サーバー上の専用エリアを取得する必要がありますね。
契約内容を確認する
こうして、このHPを見られている皆さんは、プロバイザーとの契約を済まされて、インターネットを楽しまれておられる方がほとんどでしょう。 その契約時に

 「メールエリア○○MB」、「ホームページエリア○○MB」付き・・

といったの条件が付いていたはずです。
この事は、契約プロバイザーのホームページに記載されているはずですから、確認してください。

「ホームページエリア○○MB」付き条件がある場合は、無料で自分のホームページエリアが確保出来ます。

残念ながらメールエリアのみの方は、次のいずれかの準備をしてください。
  @ 無料ホームページ作成エリアサービス付きのプロバイザーに変える。
  A 今の契約プロバイザーと、ホームページ作成用エリアを追加契約する。(有償になるかも・・)
  B HP作成用のサーバーエリアをレンタルサービスするところ(レンタルサーバー)と契約する。

実は、このホームページもレンタルサーバーを利用しています。
このレンタルサーバー提供サイトはたくさんあり、有償・無償共にあり、無償の場合は概ね広告が入る様です。 また、契約も簡単で、ほとんどがHP上で出来るようです。 もう一つアドバイスですが、後で出てきますが「CGI」対応の方がお勧めです。

私の使用しているレンタルサーバーを紹介しておきましょう。      使えるネット

また、ぱーぷりんのリンク集の「Webサービス」の「レンタル」にも紹介しています。
プロバイザーにエリア設定を申し込む
たいていのプロバイザーでは、そのHPの中の、ユーザー向けサポートのコーナーで登録受付をしています。
2,3の例を見てみましょう。
117net  ocn  biglobe
これらのページで個人ホームページの登録を申し込めば、やがてメール等で、登録情報を知らせて来ます。 これで、プロバイザーのサーバーにあなたのHPのエリアが設定されたのです。
レンタルサーバーでも、ほぼ同じ手順です。

この個人情報は重要ですので、プリントアウトして保管をしておきましょう。

この個人情報で、次の事項があります。
サーバー名FTPサーバー名、ホスト名とも呼ばれる
転送先ディレクトリ(フォルダ)あなたに宛われたHPエリアのディレクトリ(フォルダ)
ホームページのアドレスあなたのHPを呼び出すアドレス(URL)
ホームページパスワードあなたのHPエリアにアクセスする時のパスワード
ホームページIDアカウント名、ユーザ名とも呼ばれる



B HP専用フォルダを作る

 前項で出てきた ディレクトリ(フォルダ) の言葉は、今までも耳にされたと思います。
 日本語では 階層 と言われるもので,HPでファイルを扱う上で重要な事項です。
フォルダとは?
ギガバイトを超える大容量のハードディスクに、必要なファイルをそのまま保管したとします。
そのハードディスクの何千・何万という中から、一つのファイルを見つけるのは大変です。
そこで同じ種類毎に、グループの仕切を作り、分類します。
そのグループの仕切の事を フォルダ(または ディレクトリ) と呼びます。
ディレクトリ構造とは?
あまり多くないファイルでしたら、いくつかのフォルダに分ければ、種類分けし整理ができます。
数が多くになると、フォルダの下に 更に、細かい種類分けをする必要が生じてきます。
さらに数が多くなると、それでも足りなければ、更にその下・・・と繰り返し、フォルダを作っていきます。

このように、木の枝が分かれていくように、階層化する仕組みの事を ディレクトリ構造 と呼びます。
この大元のディレクトリの事を ルートディレクトリ と呼び記号で \ で書きます。

ディレクトリ構造の模式図を下に書いておきましょう。
     ディレクトリ構造

               +--- フォルダ(またはディレクトリと呼ぶ)
               l    (子ディレクトリ)
               l
\(ルートディレクトリ)---+--- フォルダ
               l            +--- フォルダ
               l            l
               +--- フォルダ ---+--- フォルダ
                            l
                            +--- フォルダ

HPファイルを保管するフォルダを作る
現時点では、HTMLファイル1つに、画像ファイルが数個ですので、デスクトップに置いていてもいいのですが、今後ホームページが充実してくると、次第に各ファイルも増えて来ます。

ちなみに私のホームページでも数100個のファイルから成り立っています。
このままではデスクトップが埋まってしまいますね〜。(笑)
今のうちにホームページ作成用の専用フォルダを作り、ファイルの整頓の準備をしましょう。

まず、あなたのパソコンに、ホームページ用のフォルダ home を作り、HTMLファイルを置きます。
次に、画像専用のフォルダ partshome の下に作り、画像ファイルをまとめて置きます。

フォルダを作るのに、windowsに入っている「エクスプローラ」を使います。
  エクスプローラの開き方
スタート → プログラム → エクスプローラ
   または
スタート → プログラム → アクセサリー → エクスプローラ
エクスプローラを起動し、専用フォルダを作るハードディスクをクリックします。(普通はCドライブ)
 「ファイル」→「新規作成」→「フォルダ」で新しいフォルダが作成され、名前を home とします。

新しく出来た home フォルダをクリックし、上と同じ手順で parts フォルダを作ります。

PS : エクスプローラはファイルを扱う時に、よく使うソフトなので、十分に使い慣れておきましょう。


C ファイルをフォルダに移す

 次にパソコンの専用フォルダ内に、デスクトップのファイルを移します。
 最終的には、下図のようなディレクトリの構成になります。
     ディレクトリ構成

\(ルートディレクトリ)
    l
    l
    +--home(htmlフォルダ)
        |  index.html
        |
        +---parts(画像フォルダ)
              bg.gif  mail.gif  kuma.gif  line2.gif
              line3.gif  profile.gif  watashi1.gif
              mail2.gif  tulip1.gif  tulip3.gif
              tulip4.gif  hana1.gif  hana4.gif
HTMLファイルを移す
エクスプローラを起動し、前節で作った index.html がデスクトップにある事を確認します。
index.html を、右クリックしたままで、 home フォルダまで運び、クリックを放します。
すると、小窓が開き、メニューの中から「ここにコピー」を選択します。

この操作を、 ドラッグ・アンド・ドロップ と言います。
直感的にファイルを移動させる、この操作は、今後よく使いますので、十分に慣れておきましょう。

これまでの操作で、 home フォルダに index.html が入っていますね。
ファイルが無い時は、操作を間違ってますので、もう一度繰り返しましょう。
画像ファイルを移す
前記の要領で、画像ファイル bg.gif mail.gif kuma.gif ほかすべての画像ファイルを、デスクトップから parts フォルダへ順番に、ドラッグ・アンド・ドロップしてゆきます。

これより、HTMLファイルは home 、画像ファイルの作業は parts フォルダで行います。
ここで、画像ファイルが専用ファイルに移った事で、画像がすべて「×」マークになっています。

今までは、HTMLと画像の両ファイルが同じところにあったので問題なかったのですが、画像ファイルが別の専用フォルダに移動させたので、その位置(アドレス)を知らせる必要が出来たのです。

次は、HTMLファイルと画像ファイルが別のフォルダにある、一般的な場合の画像の貼付け方法です。
  一般的な画像の貼付け
<img src="URL/画像ファイル名" >    URL : 画像ファイルのアドレス



D アドレスの指定法

画像の貼り付けに限らず、ホームページを作成する上で、アドレス(パスとも言う)の指定は重要な事項です。
ここでは、アドレスを指定する方法について、簡潔にまとめてみましょう。
 アドレスの指定方法
  絶対アドレス : http://〜 より始まるアドレス
  相対アドレス : 呼び出すファイルより、ディレクトリを辿ったアドレス
絶対アドレスの指定は、どこから指定しても、一つのアドレスに限定されます。
住所に例えれば、「○○県○○市○○町○○番地」と呼ぶのに似ています。

相対アドレスの指定は、呼び出す所からどういう位置関係にあるかを指定します。
住所に例えれば、「ここより○○軒隣」と呼ぶのに似ています。
呼び出す場所が変われば、指定された場所も変わりますね。

相対アドレスの指定法がよく使われ、初めは理解しにくいので、例題を揚げて説明しましょう。
    ディレクトリ構造の例

         +----- aaa
         l       xx.html  
         l
root-----+----- bbb      +----- eee
 yy.gif  l               l
         l               l
         +----- ccc -----+----- fff
         l               l
         l               l
         +----- ddd      +----- ggg
                                 zz.jpg
  • ccc フォルダのファイルより、画像ファイル zz.jpg を呼び出す。

  •    <img src="./ggg/zz.jpg"> または <img src="ggg/zz.jpg">
         ./ は呼び出そうとするフォルダ(カレントフォルダ)を示します。

  • root フォルダのファイルより、画像ファイル zz.jpg を呼び出す。

  •    <img src="./ccc/ggg/zz.jpg">

  • bbb フォルダのファイルより、画像ファイル yy.gif を呼び出す。

  •    <img src="../yy.gif">
         ../ は一つ上のフォルダ(親フォルダ)を示します。

  • eee フォルダのファイルより、htmlファイル xx.html を呼び出す。

  •    <a href="../../aaa/xx.html">***</a>
    ホームページに応用
    このたび、画像専用フォルダに画像ファイルを移したため、ホームページの画像関連部分を修正しないと、画像が「×」になってますね。

    HTMLファイルから見て画像ファイルは、子ディレクトリの parts フォルダにあります。
    従って、ファイル名の前に parts/ (または ./parts/ ) を付ければいいわけですね。
    それでは、ホームページを修正してみましょう。
    メモ帳
    <html><head>
      <title>くまさんのHP</title>
    </head>
    
    <body background="parts/bg.gif">
    <div align="center">
    
    <!-- ++++++++++ タイトル ++++++++++ -->
     <hr size=5" width="550" color="green">
     <font size="7" color="red">くまさんのホームページ</font>
     <hr size="5" width="550" color="green">
    
    <!-- ++++++++++ あいさつ ++++++++++ -->
     <img src="parts/hana1.gif" vspace="10"><br>
     <img src="parts/line3.gif">
    
    <table border="0">
     <tr><td>
      <img src="parts/kuma.gif">
     </td><td>
      <font color="navy" face="HG創英角ポップ体">
       ようこそ、くまさんのホームページへ、おいでくださいました。<br><br>
       まだ始めたばかりなので、内容はあまりありませんが、<br><br>
       すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。
      </font>
     </td></tr>
    </table>
    
     <img src="parts/line3.gif"><br>
     <img src="parts/hana4.gif" vspace="10"><br>
    
    <!-- ++++++++++ 自己紹介 ++++++++++ -->
     <font size="5" color="#bb00ff">
      <img src="parts/profile.gif" align="absmiddle">
       <b>  自 己 紹 介  </b>
      <img src="parts/watashi1.gif" align="absmiddle">
     </font><br><br>
    
    <table border="5" cellpadding="10">
    
       <colgroup width="100" align="center" bgcolor="#ffdddd"></colgroup>
       <colgroup width="350" bgcolor="#ffeeee"></colgroup>
    
     <tr><td>なまえ</td>
         <td> <i>くまさん</i></td></tr>
     <tr><td>住 所</td>
         <td> 兵庫県の中部の田園地帯</td></tr>
     <tr><td>仕 事</td>
         <td> ぱーぷりんの助手</td></tr>
     <tr><td>年 齢</td>
         <td> 30歳代</td></tr>
     <tr><td>趣 味</td>
         <td> <u>パソコン・スキー</u>が特に好き</td></tr>
     <tr><td>高 校</td>
         <td> ぱーぷりん高校を何とか卒業</td></tr>
     <tr><td>大 学</td>
         <td> ぱーぷりん大学でパソコンを専攻</td></tr>
    </table><br>
    
     <img src="parts/tulip1.gif">
     <img src="parts/tulip3.gif" hspace="50">
     <img src="parts/tulip4.gif"><br><br>
    
     <img src="parts/line2.gif"><br><br>
    
    <!-- ++++++++++ メールを貼る ++++++++++ -->
     <a href="mailto:perplin@mh1.117.ne.jp">
      <img src="parts/mail2.gif" border="0">
     </a><br>
    
    </div>
    </body></html> 
    



    E FTPソフトを入手

    次に、前項で設定した、サーバー上のエリアに、パソコンの専用フォルダのファイルを転送をします。

    転送するのには、次の方法があります。
      @ 転送用ユーティティ(FTP)ソフトを利用する。
      A HP作成ソフトの転送コマンドを使う。
    ここでは、作成ソフトが無いのが前提ですので、転送用ユーティティ(FTP)ソフトで説明します。
    FTPソフトのダウンロード(DL)
    まず、FTPソフトをインターネットより入手しましょう。

    ここでは、曽田さんのホームページに掲載の、人気のフリーのFTPソフト FFFTP をダウンロードして利用しましょう 。
    FFFTP のダウンロード先のホームページ(バナーをクリック)

    ホームページにアクセスし、Download ffftp-1.92.exe をクリックすると、ダウンロードを開始します。
    どこでもいいのですが、とりあえず、デスクトップにロードしておきます。
    FTPソフトのインストール
    ダウンロードが完了すると、デスクトップに FFFTP.exe のアイコンがあるはずです。
    ダウンロードして、すぐに使えればいいのですが、ダウンロードするソフトは大抵は圧縮してあります。

    このファイルは、自己解凍ファイルなので、アイコンをダブルクリックすると、解凍およびインストールが始まります。  ファイルの置き場は、初期指定のままで良いでしょう。
    指示通りインストールを完了させます。

    インストールの結果、 FFFTP がメニューに登録されているのを確認します。
    FTPプログラムは、よく使うのでショートカットを、デスクトップに作っておきましょう。


    F FTPソフトの初期設定

    早速、ディスクトップのアイコンをダブルクリックして、FTPソフトを起動します。
    初めて起動したときは「新規ホスト」を選択します。 下図のような初期設定画面が表示されます。

    ここで、申し込み時にプロバイザーから指定された、個人情報を入力します。
    この時、「基本」タブが表示されているのを確認します。
    FTPソフトの初期設定入力
     ホストの設定名 
    適当な名前を入力する。   例 :マイネット

     ホスト名 
    「FTPサーバ名」等と書いてある部分を入力
     概ね http://以降入力   例 : www4.ocn.ne.jp

     ユーザ名 
    「アカウント名」「ID」等と書いてある部分を入力。
    概ねURLに続く部分   例 : http://www2.117.ne.jp/~jiro

     パスワード 
    サーバーにアクセスする時のパスワード、* で表示される

     ローカルの初期フォルダ 
    パソコンの専用フォルダのアドレス(パス)と名前   今回は c:\home を入力

     ホストの初期フォルダ 
    プロバイザーの指定したサーバーのフォルダ名   例 : public_html が多い様子

    以上の入力が完了すれば、ok をクリックし、「接続」をクリックしてFTPソフトのメイン画面に移ります。
    (PS) ローカルの初期フォルダホストの初期フォルダ は設定しなくても繋がります。
    復習用のHPの紹介
     このソフトは「FFFTP support page」という、丁寧に解説されたHPがあります。
     FFFTP のインストール、起動と初期設定、アップロードに関しては ここ に詳しく解説してあります。


    G サーバーへ転送

    FFFTPの初期設定が出来れば、いよいよサーバーにホームページのファイルを送ります。
    プロバイザーより、開始ファイル名の指定がありますが、大抵は index.html になっているようです。
    もし、他のファイル名が指定されているなら、名前をそれに変更して下さい。
    メイン画面の起動
    前項で作成した「ホスト」を選択し「接続」をクリックすると、右図のようなメイン画面になり、下の部分に「ファイル一覧の取得は終了しました。」と表示されます。

    画面の左側が、あなたのパソコンの内容で、右側がホームページ(サーバー)側です。

    左側の上部の窓に、パソコンの専用フォルダ名(今回は \home )が表示されます。
    下部の窓には index.html ファイルと、parts フォルダが見えるはずです。

    右側の上部の窓に、プロバイザーの指定したサーバーのフォルダ名が表示されます。
    今回は、サーバーには何も送ってませんので、下部の窓には何もありません。

    以上の様に、ならなかった場合は、初期設定がまちがった入力になっているので、再度見直します。
    転送(アップロード)する
    アップロードするファイル(今回は index.html )にカーソルを合わせます。
    ボタンを押しましょう。
    または左のファイルを、右にドラック&ドロップ(=クリックしたまま右に運んで離)しても構いません。
    サブウインドウが出て、転送(アップロード)が始まり、ウインドウが消えれば、転送完了です。

    次に画像フォルダ parts にカーソルを合わせます。
    ボタンを押しましょう。  これで、フォルダと中のファイルごと転送出来ました。

    左(パソコンの専用フォルダ)と、右(サーバーのフォルダ)が同じになれば、転送が無事完了です。
    早速インターネットに接続し、あなたのホームページのアドレスに、アクセスしてみて下さい。
    前節までに作った画面が出てくれば大成功です。 これで公開された訳です。


         開設おめでとう〜〜〜♪