アットウィキロゴ

homepage


ホームページのABC~


ホームページとは?~

 インターネットを利用する最大の目的は、「ホームページ・ウェブページ」を見ることです。

 本来、ホームページ (homepage) とは、ウェブブラウザを起動した時や、多くのウェブブラウザに存在するホームボタンを押した時に表示されるウェブページを指してホームページと呼びます。~
~
 しかし、インターネットが普及しはじめた頃は、インターネット上で見られる文書(ページ)のことを「ホームページ」と呼んでいた事から今でもウェブブラウザ(Internet ExplorerやFirefoxなど)を使って見るもの全般を「ホームページ」と称しているのが通例です。~

 ホームページは紙の書物のページとは異なり、ウェブページ同士を相互にハイパーリンクという形で指し示して移動できる(ハイパーテキスト)が特徴です。~

RIGHT:※このサイトでは、「ウェブページ」のことを「ページ」か「ホームページ」として表記します。~

ホームページの仕組み~

 ご存知の通り、インターネットとは多くのサーバ同士が繋がったネットワークです。~
 このインターネット上の様々なサーバに置かれ公開されている「文書」=「ホームページ」を「URL」という住所で呼び出してあなたのパソコンに表示させるのがホームページの仕組みです。~

 つまり、見ているホームページの本体は、あなたのパソコンにあるのではなくインターネット上のサーバにあります。~
 いま見ているこのページも、私が契約しているプロバイダ(@nifty)のサーバの中にあります。~


 いちいちページを見るのに通信を何度も繰り返すのは合理的では有りません。そこでブラウザは必要なページのデータ(文字や画像など)の写しを「一時的に」保存して表示させます。これを「キャッシュ」と呼んだりします。~

ホームページの公開手順~

ご自分のホームページをインターネット上に公開したい場合は、以下の手順で行います。~

  1. インターネットに繋ぐための環境を作ります。~
 一般的にはインターネットプロバイダと契約をします。(^_^;)~
~
  1. インターネット上にホームページを置く「スペース」を作る。~
 一番簡単なのは、プロバイダのホームページサービスに申し込みをします。(@niftyでは「@homepage」「LaCoocan」です。)~
 申し込みを済ませると、プロバイダのサーバ内に専用のスペースが出来上がり、自分のURL(住所)が決まります。~
~
  1. 自分のパソコンで公開するためのホームページを作る。~
 インターネット上で規定されている書式(HTMLなど)に沿ってファイルを作ります。~
 最近は、この書式に沿ったファイルを作るためのソフトウェア(ホームページ作成ソフト)が多く市販されています。~
~
  1. 作ったホームページを、自分専用のスペースにコピーする。~
~
 コピーするには、FTP(file Transfer Protocol:ファイル転送プロトコル)という規格に基づいた通信を使います。~
 ファイルをコピーするためのソフトも多くあり、殆どのホームページ作成ソフトにもFTPできる機能がついています。~
~
  1. URL(住所)をウェブブラウザで開く。~
~
 作ったファイルの内容が書式に沿っていなかったり、コピー先(専用のスペースの場所)が間違っていたりすると思っている通りに表示されません。パソコンの中に残っているファイルを再度確認し、直したら正しいコピー先を確認して再度試しましょう。~

これで、あなたが作ったホームページがインターネット上に公開され、インターネットに繋ぐ全世界の人から見てもらうことが可能になりました。~

以上があなたのホームページをインターネットに公開する簡単な手順です。~


インターネットへ接続する。~

 このページを見ているということは、あなたはインターネットに繋ぐための契約をどこかのプロバイダとしているということです。~
 個人のページを公開したいならあなた自身で個人的にどこかのプロバイダと契約してインターネットに繋げる環境を作ってください。~


ホームページを置くスペースを作る。~

 簡単な方法は契約しているプロバイダの「ホームページ・サービス」の申し込みをすることです。~

 前述のように@niftyでは「@homepage」がお手軽1コースと従量制コースの会員を除いて、無料で使えます。~
ただし、「接続会員=専用スペースがある」ではないので別途申し込みが必要です。~

@homepageの申し込み手順。~
  1. @niftyのHP上から@homepage申し込みページから手続きします。~
~
  1. 自分の「希望URL」を入力して申し込みします。~
 ここ入力したURLがあなたのホームページの「住所」となります。この「住所」をブラウザで開くことであなたのホームページが表示されます。~
~
  1. 希望通りのURLが取得できたら手続き完了です。~
 もしも希望のものが取れなかった場合は、登録できない旨の表示がされます。別なURLで再度申し込みしてください。~

    • 手続きが終わったら、あなた専用のホームページスペースが@niftyのサーバ内に作られます。~
    • @homepageでは20MBか100MBのスペースが確保されます。(料金コースにより異なります)~
    • スペースが出来ると同時に、あなたにはそのスペースにファイルを置くことが出来るようになります。~
 @niftyIDとは別に「FTPアカウント」と「FTPパスワード」が発行されます。これは、ファイルを置くスペースに入り込むために必要です。大切に保管しましょう。~
    • アカウントとともにFTPする先のFTPサーバ名(表示用とは別で「あなただけがファイルを作ったり削除したりする場所」)等必要な情報がメールで送られてきます。@niftyIDとログインパスワードが判っていれば確認する方法もありますが、大切に保管するようにしてください。~

      • @homepageのURLは、http://homepage?.nifty.com/~という形です。(?には数字が自動で割り当てられます)~
      • ダイヤルアップ接続コースの方は20MB(お手軽1と従量制を除く)、常時接続コースの方は100MBの容量が確保されます。~
 有料(月500円:税別)で300MBまで増量することも可能です。~
      • CGI(サーバ側で動作するプログラム等)は制約があります。~


ホームページを作りファイルにします。~

 ホームページの素材(文字情報、画像、音楽等)は、一旦自分のパソコン内に作成します。~
 作成したそれらファイルを、プロバイダのFTPサーバにコピーします。この作業を「アップロード」と呼びます。~

 あなたは作成者なのですから、インターネットに公開するページの写しをパソコン内に保管しておき、「好きなときに手直し」できます。~
 特別なことをしなければインターネット接続ができていなくてもパソコン上で編集し確認のために見る事が出来ますので、確認が十分に出来た上でアップロードしましょう。~

ホームページの素材は、大きく分けて2種類あります。本体である「HTMLファイル」と、そのほかの画像や音楽などの「素材ファイル」です。~

  • HTMLファイルとは?~
 HTMLとは「ハイパー・テキスト・マークアップ・ランゲージ」の略で、インターネットのホームページを表示させるためのルールに沿った「言語」です。このルールに沿っていないとホームページは正しく表示されません。~
~
 「HTML言語」といっても特別難しい訳ではなく、実体はルールに沿った「タグ」と呼ばれるものが含まれた「文字だけのファイル」です。~
 作成編集用のソフトも多く販売されていますが、テキストファイルが作れる環境であれば、Windows標準の「メモ帳」等でも作成できますが、体裁の良いホームページを作るためには、色々な「タグ」を駆使しますので、専用のソフトを使ったほうが良いでしょう。~
~
 このHTMLファイルに「ここに画像を入れる」とか「これをクリックすると音楽が流れる」といった指示を「タグ」を記入する事で画像や音楽を入れ込むことが出来ます。~

<参考>~
 HTMLという規格は、本来「文章をどう表現するか」という趣旨で提唱されました。~
 難しく言うと「文章の構造化のための規格」です。~
 ただの文字の羅列では判りにくいため、「ここで改行しよう」「ここは目立たせよう」とか「段落を判りやすく表現しよう」という事を表現するための規格です。~
 これに「ハイパーリンク」と呼ばれる「別なページを呼び出す」機能が加わり、さらに文字情報以外のもの「画像」「音楽」を「ハイパーリンク」機能を応用してページ内に入れ込む為の規格が加わり、現在のHTMLの原型となっています。~


  • 素材ファイルとは?~
 今はどこのページを見ても、文字だけのページなんてことはあまりありません。どこかに画像があったりします。~
 ホームページは、こうした文字以外の装飾ができ、見ていて楽しいために広く親しまれるようになりました。~
~
 文字情報以外のものは「HTMLファイルから呼び出す」ことでホームページが表示されます。必ずHTMLファイルとは別に用意しておく必要があります。~
~
 ホームページで表示可能な(つまりブラウザで表示できる)画像ファイルの種類は色々ありますが、「GIF(ジフ)」「jpeg(ジェイペグ)」というファイル形式が一般的です。~
~
 音楽のファイルは画像以上に多くあります。「wave(ウェーブ)」「mp3(エムピースリー)」「wma(ダブルエムエー)」等の形式が一般的ですが、実際には再生する側のパソコンが対応しているかどうかによります。~
 音楽ファイルを再生するためには、その音楽ファイルを再生できるソフトが、「見る側に入っているかどうか」によります。Windowsでは、Media Player(メディアプレーヤー)が標準でついてきますので、それが対応できている形式のファイルならば再生は出来るはずです。~

※画像や音楽のファイルを作成するためには、別途専用ソフトを利用するのが一般的です。
※自分で作成したもの以外の画像・音楽には「著作権」「肖像権」など権利が発生するものが多く有ります。
  自分のページに素材として使う場合は、製作者や権利者の権利を侵害しないよう注意を払う必要があります。

<参考>~
 こうしたファイルは、本体のHTMLのファイルから呼び出す際に「HTMLファイルから見てどの場所にある何と言うファイルを呼び出す」*1
、または「インターネット上のどこにある何と言うファイル」*2
という様に「タグ」で記述して呼び出しますので、ファイルを置く場所も重要です。ファイルが引越しをしてしまったら(保存してある場所を変えたら)HTMLファイルから呼び出せなくなります。~
 ファイルの配置を変えたら、本体のHTMLの記述も変更する必要があります。~

<重要>~
 HTMLファイルも素材のファイルもホームページに使うファイルは、「半角英数字」でファイル名をつける必要があります。~
 日本語(全角文字)を使った場合、呼び出せなくなります。
 また、フォルダを作っている場合も同様に、フォルダ名には「半角英数字」で名前をつけます。~

 ちなみに最初に表示させたいファイルは、index.htmとファイル名をつけるのが一般的です。@niftyでは、URLにファイル名の記載がない場合はこのindex.htmという名前のファイルを読みに行きます。~


ファイルを自分専用のスペースにコピーします。~

 作成ソフト等で作った各ファイルを、ご自分のパソコン内と同じ配置でサーバ側の専用スペースに転送(コピー)します。~
 この作業には「FTPソフト」かFTP機能のついた「ホームページ作成ソフト」が必要です。~
 Windowsにも標準でFTP機能はついていますが、「コマンドプロンプト」で操作することが多く初心者には面倒なので、別途FTPソフトを用意したほうが得策です。~

 FTPするためには、FTPアカウントとFTPパスワード、そしてFTPサーバ名が必ず必要です。プロバイダ契約のIDと違うことが多いので必ず確認してください。@niftyではまるで違うものが提供されます。~

  • @niftyの@homepageでは、FTPアカウントとFTPパスワードでFTPサーバに接続すると、自動的に次のフォルダが表示されます。~

あなたのスペースにあるフォルダとその意味
※主に使うのは「homepage」フォルダです。「cgi-bin」フォルダはCGIを置くために使います。
 
┌-bin
├-cgi-bin(CGIファイルを置くフォルダ)
├-dev
├-exc
├-homepage(ホームページを置くフォルダ)
├-lib
└-usr

      • 表示されているフォルダであなたが使うのは、homepageフォルダです。その他のフォルダはサーバが管理するために使ったり、CGIを動作させるためのファイルが保存されますので判らないうちは削除などしないように注意してください。~

      • homepageフォルダ内はあなたが自由に追加したり削除したり出来ます。もちろんhomepageフォルダ内にフォルダを作ることも可能です。~

※あなたが作ったホームページのファイルは「homepageフォルダ」の中にコピーします。~


URLをウェブブラウザで開いて確認しましょう。~

 実際には、ホームページ用のHTMLファイルや画像ファイルを、FTPサーバにアップロードした時点で「インターネットに公開」した事になります。~
 あなたが思っている通り表示されているか。を実際にURLを打ち込んで確認してみましょう。~
 あなたが思ったとおり表示されていればOKです。~

なにも表示されない、もしくは「NOT FOUND ページが見つかりません」と表示された場合は~
  • URLが間違っている可能性があります。URLの打ち間違えがないか確認しましょう。~
  • アップロードした先は間違っている可能性があります。~
 FTPサーバの「homepage」フォルダの中にindex.htmというファイルはあるか?~
 「homepage」フォルダの中に、さらにフォルダを作ってそこにindex.htmファイルを置いていないか?を確認しましょう。~

ページが表示されるけど画像が表示されない場合は、~
  • 画像ファイルもアップロードしていますか?~
  • HTMLファイルで記述した場所(パス)の通りアップロードしているか?~
  • 画像ファイルに全角文字でファイル名を付けていないか?を確認しましょう。~


あなたのホームページが出来上がりました。~

以上の手順でひとまずあなたのホームページがインターネットに公開されました。~

おそらく、色々試してみたいことは山のようにあると思いますが、慌てずにひとつひとつ試してみましょう。~
自分のホームページをより良くしたければ、ご自身で勉強することも必要です。~
ホームページの作成については、プロバイダのサポートを受けられないのがほとんどです。~
プロバイダは、スペースをあなたに貸し出しているだけ、つまり土地を貸している地主さんと同じです。~
借りた土地の上に立てるあなたの「家」についてはあなた自身の責任で考えるのが基本です。~
それができないのであれば、「家の建て方」についての専門家に相談しましょう。~
ホームページをあなた用に作ってくれる「建設業者」つまり「ホームページ作成業者」に報酬を払うのも一つの方法でしょう。~


インターネットは常に進化し続けています。日々新しい技術が開発され、HTMLだけで記述されたページは現在余りありません。~
しかし、いまのところHTMLが基本である事は変わりませんので、基本の仕組みをある程度理解できるようにがんばりましょう。~



-
最終更新:2008年04月12日 08:57

*1 相対パスと呼びます

*2 絶対パスと呼びます