楽しいホームページ入門
9.ホームページの公開へ


● ホームページスペースの用意


HTML文書とCSSファイルができました。
さて、ホームページの公開です。ホームページの公開の手順は、

ホームページスペースの選定

     ↓

ホームページスペースへの登録

     ↓

ファイル転送の準備

     ↓

ファイルの転送

となります。

まず最初のステップのホームページの選定に先立って、私のホームページが必要とする条件を整理してみたところ、次の様になりました。

1.現時点では、必要メモリは14MBである

2.フォームを使ったり、さらに遊ぶ可能性があるのでCGIを利用したい

3.掲示板があるにこした事はない

4.コストは掛けたくないが、無料でなくても良い

ここで、契約しているプロバイダーが用意していれば、それを利用するのが最も手っ取り早いようです。 しかし、私のプロバイダーを確認したところ、残念ながらホームスペースは用意していませんでした。 となると、世の中に数多く存在する有料、無料のレンタルサーバー屋さんの中から自分に適していると思われるものを見つけ出さなくてはなりません。 そこで、書籍で紹介されているもの、ネットランキングで上位にあるものの中から4社5種類をピックアップして比較表を作りました。

 

 A社plan1A社plan2B社C社D社
月額無料315円/月無料6300円/年105円/月
容量50MB300MB1GB300MB2GB
商用利用不可
CGI不可不可不可
カウンター有り有り有り有り有り
アクセス解析有り有り有り有り有り
掲示板有り有り有り無し有り
メールフォーム有り有り有り
広告・リンク有り無し有り無し無し

 

ここまでの比較検討の結果、D社のホームページスペースが私の必要条件を満たしている事になりましたので、これを選定する事にしました。

次のステップは、ホームページスペースの登録になりますが、その前に、選定したホームページスペースで本当に問題が無いかを確認しておきます。その為に、このレンタルサーバー屋さんのホームページをしっかり読みます。とりわけ、「利用規約」と「禁止事項」は入念に。

この様にして、「このレンタルサーバー屋さんを利用しよう」と最終的に決めたら、Web画面での指示に従って登録・契約作業に入ります。


● ホームページスペースの契約


ホームページの選択ができたので、いよいよ契約です。ところで、選択時にはD社と呼んでいましたが、この後は方法を実例で示したいので、レンタルサーバー屋さんは実名を出します。選んだレンタルサーバー屋さんはロリポップ(lolipop)で、プランはコロリポプランです。(ロリポップへは、こちらからどうぞ←

画面

 

①まず「ホーム」ページあるいは希望するプランのページから入って行きます。ロリポップな場合は、ページ右のオビの中に、右図の様な入り口があります。この入り口をクリックすると、下のWeb画面に切り替わります。

画面

 

②ここで要求されている情報を記入します。今回のケースでは、アカウント名、ドメイン名(選択式)、メールアドレスで、記入の後はしっかりと「利用規約」と「プライバシーポリシー」を読み、送信します。送信後はWeb画面が下の様に変わります。

画面

 

③受信したメールの中で指示されているURLアドレスを使って、再度Web画面に戻りますと、下の画面になります。次のステップに進むために、「お申込み内容」をクリックします。

画面

 

④Web画面は下の様に変わり、この画面で本格的に自分の情報、契約内容を入力します。

画面

 

⑤入力後送信すると、画面は下の様に変わり、これで契約完了です。

画面

 

上の画像の中にも書かれている様に、この後で届くメールにはファイル転送時に必要なFTPパスワードなどが記載されている重要なものです。

この後、独自ドメインの設定や、支払い方法設定などもWeb画面を通じて行います。そして、いよいよ自分が作ったホームページの公開です。公開の為には、今回契約したホームページスペースへファイルを転送してやらなくてはなりません。


● ファイル転送


ファイル転送とは、自分のコンピューターとサーバーとの間でファイルをアップロード、ダウンロードする事です。この時に使われるのがFTPと言うプロトコルで、これは、File Transfer Protocol の略です。

では、「FTPをどこで手に入れるか?」と言う事になります。これは簡単です。書籍について来る、あるいはネット上で探せる、あるいはレンタルサーバー屋さんが提供するFTPがたくさんあるからです。ここではフリーソフトFFFTPを使った例を示します。

画面

FTPは上記の様に簡単に入手できるし、そのインストールも、画面に表示される指示に従って進めれば良いだけですから簡単です。従ってここでは、インストールの手順は省略します。

インストールを済ませると画面には右の様なFFFTPのショートカットが表示されます。このショートカットをクリックすると下のダイアログが出て来ます。この画面中の「新規ホスト」をクリックし、「ホストの設定」画面を出します。

画面

「ホストの設定」画面は下の様になっており、ここでは4項目の入力と1項目の設定が必要です。

画面

1.「ホストの設定名」は任意で結構です。

「よしじい」の様なわかりやすい名前が良いです。

2.「ホスト名(アドレス)」は「FTPサーバー名」とも呼ばれます。

レンタルサーバー屋さんから送られてきた情報の中に書いてあります。

3.「ユーザ名」は「FTP ID」・「FTPユーザー名」・「FTPアカウント」とも呼ばれます。

レンタルサーバー屋さんから送られてきた情報の中に書いてあります。

4.「パスワ-ド」は、FTP用のパスワードです。

レンタルサーバー屋さんから送られてきた情報の中に書いてあります。

5.「ローカルの初期フォルダ」は転送元(自分のパソコン)の中のフォルダーです。

画面中の画面ボタンからファルダ選択に入ります。

以上の手順が終ったら、最後に「OK」ボタンをクリックします。画面には下の様に、「ホストの設定名」で付けた名前が追加されたダイアログが表示されます。

画面

この後は、いったん「閉じる」ボタンをクリックしてファイル転送作業を終了するのも良いし、「接続」ボタンをクリックして次の作業(ファイル転送)に移るのも良いでしょう。

 

いったのダイアログを閉じた場合は、ファイル転送には、画面上のFFFTPショートカットをクリックして入ります。画面上に上のダイアログが再び出て来ますので「接続」ボタンをクリックすると、下の「ホスト一覧のダイアログ」が出て来ます。このダイアログの上でファイル転送を行います。

画面

この画面の左側がローカル(パソコン内)のフォルダの中味を表示し、右側がサーバー内フォルダの中味を表示します。まず左側の一覧の中から、転送したい(アップロードしたい)ファイル・フォルダ名を選択し、次にダイアログ中の「アップロード」ボタンをクリックします。下を参照して下さい。

画面

この後、少し時間がかかりますがファイルの転送が行われます。転送が終わると、ダイアログ上で、下の様に、転送されたファイルが右の欄に表示されます。

画面 画面

 

転送後は、右に示す「切断」ボタンをクリックしてサーバーへの接続を解除するか、FFFTPを終了しておきます。

そして、ここでの最後の作業です。Web上での画面の確認を行います。IE(インターネットイクスプローラ)などのブラウザーのアドレスバーに自分のホームページのURLを入力して「Enter」キーを押してみて下さい。どんな画面が出ましたか?ホームページの修正、追加など更新の方法は、次の章です。


● ホームページの更新


ホームページはこまめに更新しましょう。私の第一回目の更新は、この(今書いている)数ページの追加になりそうです。

ところで、ホームページの更新はさほど難しい事ではありません。

オフラインでHTML文書、CSS文書の修正・追記

→ FFFTPでミラーリングアップロード

が全てです。

ミラーリングアップロードと言うのは、サーバー上フォルダ内のファイルの状態を自分のパソコン内と同じ状態にする事です。すなわち更新が必要なページは転送され、パソコン上で削除したページはサーバーでも削除され、パソコン上で追加したページはサーバーでも追加されます。その方法ですが、下に示す様に「ホスト一覧のダイアログ」上に「ミラーリングアップロード」のボタンがありますので、これをクリックします。

画面 

「ミラーリングアップロード」クリック後、開始(処理内容の事前表示の選択も有る)の確認、削除が有る場合はその確認のメッセージが出て来ますので、それに答えていくと、更新が開始されます。

ここで参考情報ですが、もしサーバーのフォルダー内情報がローカルで必要となった場合は、これをダウンロードしなくてはなりません。方法としては下に示す様に「ホスト一覧のダイアログ」上に「ダウンロード」のボタンがありますので、これをクリックします。

画面 

● 検索サイトへの登録


私たちはWeb上で何かを知りたい時には検索サイトを利用します。そして、その代表的なものがYahooとGoogleです。ホームページを公開したら、さっそくこれらの検索サイトへ登録しましょう。

 

Yahoo!Japan

①まずYahoo!Japanのサイトを開き、下に示す画面上段右側の「カテゴリー一覧」をクリックします。

画面 

②クリック後、下の様なカテゴリーの一覧が出て来ますので登録したいカテゴリーを選び、さらに詳細カテゴリーに進みます。

画面 

③ここでは、「生活と文化」 → 「バランティア活動」 → 「地域別」 → 「愛知」 と選択していって、画面上の右側帯内にある「サイトの登録・変更」をクリックしました。

画面

④ここで画面が変わり、下の様に、サイトの登録画面が出て来ます。登録カテゴリに間違い無ければ、「非商用サイトへの登録」で、登録するホームページのURLを記入し、「サイト登録前の確認」をクリックします。

画面

⑤新たな画面では、選択したカエテゴリーが間違っていないかどうか確認します。間違っていなければ「同意事項へ進む」をクリクします。

画面

⑥「サイト登録申し込みへの同意」のページでは、サイト登録にあたってのルール説明がされています。これを良く読んで、「はい」をクリックします。

画面

⑦次に「サイト情報の入力」画面に変わります。ここまではカテゴリー分けとメールアドレスを情報として出しましたが、これからは、サイトそのものの情報を出していきます。

画面

⑧サイト情報の記入が終われば、画面下段の「入力内容の確認」ボタンをクリックし、「入力内容の確認」画面を出します。

画面

⑨この画面の確認後、画面下段の「申し込み」ボタンをクリックします。

画面

⑩新たな画面が下の様に出て来て、申し込み終了です。

画面

 

Google

①まず登録ページに行くまでの道順を示します。

Googleホームの最下段「Googleについて」をクリック

     ↓

次画面で、「サイトオーナーの方へ」の欄の「リンク、検索機能を追加」をクリック

     ↓

次画面左側帯の中の「サイトの登録/削除」をクリック

     ↓

次画面に下の様な登録画面が出て来ますので、自分のホームページのURLと、与えられた文字を入力します。

画面

②しばらく待つと、下の様な画面が出て来ますので、改めて、自分のホームページのURLを入力します。

画面

③次に、下の様な画面が出て来て、これで登録完了です。

画面

● アクセス解析の設置


自分のホームページをどの様な人がどれくらい見ているかを把握するために機能が、アクセス解析です。無料のアクセス解析の代表的なものとして「Google Analytics」がありますが、せっかく契約したロリポップもアクセス解析機能を持っていますので、今回はこれを利用します。

 

①ログインページから「ユーザー専用ページ」へログインします。その後、「ユーザー専用ページ」画面の左側帯内で「ウェブツール」→「アクセスログ」を選択しクリックしると、新たな画面で下の様な案内が出て来ます。

画面

②この案内中の右側にある「アクセスログページ」をクリックして、次の画面(下図)でアクセスレポートとして表示したい項目を選びます。

画面

最初は初期設定のままの表示項目にしておいて、画面中頃にある「アクセス解析」ボタン(下図)をクリックします。

画面

③画面が変わり、下の様にアクセス解析の画面が表示されます。

画面

● 引っ越し先への移動


ホームページを公開した後に、いろいろな事情でホームページを引っ越す場合があります。 この時には、古いホームページを訪問した人を、引っ越し先に導いてあげなくてはなりません。

導く方法としては、訪問者のブラウザ機能も考慮して、次の2つを併用します。

 

古いページを開いた数秒後に、引っ越し先のページを自動的に読み込む

古いページに案内文を載せ、引っ越し先へのリンクを付けておく

 

まず、数秒後に引っ越し先のページを自動的に読み込むテクニックとしては、 JavaScriptを使用する方法もある様ですが、ここでは、HTML文書内に記述するテクニックを身に付けます。

<head>~</head>要素内に、文書そのものの情報を記述するmata要素の一つとして、 次の様に記述する事で、引っ越し先のページを指定秒後に自動的に読み込んでくれます。

<head>
  ・
  ・
<meta http-equiv="refresh" content="秒数;url=引っ越し先URL" />
  ・
</head>

 

次に、引っ越し先へのリンクを付けるテクニックは、
「3.リンクの設定 ● 他のページへのリンク」 (こちらです→)で学んだ方法で、 HTML文書では<body>~</body>要素内に次の様に記述します。

<a href="引っ越し先URL">リンクを示す文字列</a>

 

実際のHTML文書は下の様にしました。アンダーラインで示した①、②が上で説明した部分です。

画面

動きはここをクリックして確認して下さい。

仮の旧ページが出て来ます。

ページトップへ

前ページ←

→ホームページ事始め
ホーム

コーナー