目次を表示

Ⅳ.サイトにアップロード

 サイトにアップロードするには、 使えるサーバがあることと、pc とサイト間での 送受信用のソフト(FTPクライアントソフト)が必要です。 ここでは、私が唯一経験がある方法:
   ・サーバは、Xdomain から無料で借りる
   ・FTP ソフトは FileZilla という 無料ソフトを用いる
について説明します。
 まずは、FileZilla のインストールから説明します。
FileZilla は、pc の OS により、種類が分かれています。 Windows に関しては、64 ビットか 32 ビットかでも分かれています。 お使いの pc の OS が 64ビットなのか 32 ビットなのかを調べておいて下さい。 (たぶん 64 ビット)

【調べ方】

1.コントロールパネルを開く。
2.「システムとセキュリティ」を左クリック。
3.「システム」を左クリック。
開いた窓の「システムの種類」に記されています。

【FileZilla のインストール】

1.OSDN(*1) Filezilla (ダウンロード)ページ を開きます。
2. 開いたページの「最新リリース」の「FileZilla_Client 3.***」をクリックします (画像)
3. お使いのパソコン OS が 64 ビットか 32 ビットかにより、 開いたページの
   FileZilla_3_***_win64-setup.exe もしくは
   FileZilla_3_***_win32-setup.exe
をクリックします (画像)。 実行形式のインストーラがダウンロードされます。
4.ダウンロードしたファイルをダブルクリックします。

ウィザード形式でのセットアップが開始されます。

順次、選択するものを聞いてきますが、 殆どは、そのまま何もせず Next を左クリックします。 ひとつだけ、Next クリックの前にすること

「デスクトップにショートカットを作成する」が off になっているので、
ショートカットを作成するなら、そこを on に変更します。

5.選択終了で、インストールが開始されます。
 インストール終了後、バージョンアップ通知が表示されたら、 バージョンアップしても構いません。 (FileZilla はよくバージョンアップされるソフトです。)


(*1) OSDN(オーエスディーエヌ)は、 日本のオープンソースソフトウェアプロジェクト向けのホスティングサイト。 OSDN 社が運営しています。(Wikipedia より)
オープンソースソフトウェア: ソースコードが公開されている無料のソフトウェアのことです。 よく知られているものとして、Firefox、Thunderbird、OpenOffice 等があります。

【Xdomain で、無料のサーバを借り、サイト設定を行う】

 Xdomain からの連絡用に、メールアドレスを必要 とします。 普段使っているメールアドレスでも構いません。(私はそうしています。)
 ここで説明するのは、以前 MK さんが配布した「サイト構築説明書」の内容の一部です。

1.Xdomain で、無料のサーバを借りる(会員登録とそのパスワードの設定)

1.1. Xdomain のサイト を開きます。
1.2. 「無料レンタルサーバお申し込み」を左クリック。 画像
(別ページが表示されます。)
1.3.「無料レンタルサーバご利用お申し込み」を左クリック。 画像
(別ページが表示されます。)
1.4.「メールアドレス」欄にメールアドレスを入力し、 「確認メールを送信」を左クリック。
1.5.Xdomain から、確認メールが送られてくるので、 メールソフトを開き、登録したメールアドレスに Xdomain から送られたメールの内容を 確認します。
1.6.メール内容の「お申込みURL」に記されたURLをクリックします。 画像
 ブラウザ上に、Xdomain の会員登録画面が表示されます。
1.7.会員登録画面で、必要事項を入力します(必須項目だけで構いません)。
ごめん!画像なし  何が入力されたっけ?アカウント名も入力したっけ?
パスワードは、管理画面ログインで必要なので、 メモしておいて下さい
1.8.入力終了したら、最下行の、「確認画面へ進む」を左クリック。
1.9.確認画面を確認し、間違いなければ「会員登録を確定する」を クリック。

 以上で完了です。間違いなくサーバが借りられているかどうかの確認のため 「ログイン >」をクリックします。ログインページが表示されます。 (今後、ログインは常にこのページから行うことに なります。)

2.借りたサーバ内の設定

2.1. Xdomain の ログインページを開きます。
 (での操作で、最後に開かれたページです。)
2.2.登録したメールアドレスとパスワードを入力し、 「ログイン >」を左クリックします。
2.3.左端下方の「無料レンタルサーバー」を左クリックします。 画像
 3つのサーバ    HTML  と  php-MySQL  と  WordPress
が準備され、利用可能となっています。このうち、
2.4.「HTML サーバー」の「利用を開始する >」を左クリックします。 画像
2.5.「 FTPアカウント設定」を左クリックします。 画像

表示されたページに記された、 FTP ホスト、FTP ユーザー(アカウント名)をメモして おいて下さい。

2.6.右端の「編集」ボタンを左クリックし (画像) 、FTP パスワードを設定します。
後に必要ですから、FTP パスワードをメモして おいてください。

以上で、サーバ内の設定は完了です。
 アカウント名の後ろに「/index.html」を付けたものが 作成したサイトページのURLになります。 (ブラウザの新たなページで、このURL を入力してみて下さい。 Xdomain がデフォルトとして準備したページが開かれます。)

【借りたサーバに pc 内のサイトをアップロードする】

サイトに接続する

1.FileZilla のショートカットを左クリックします。
   Filezilla 窓 が開かれます(赤の①~④はないよ)。

 左側の欄 ①と② は、ローカルサイト(今、使用している pc のこと)の フォルダとファイル情報が表示されています。 上の欄(①のこと)の表示はフォルダのみですが、 エクスプローラと同様の操作ができます。 欄①で指定(マウス左クリック)したフォルダの内容が下の欄(②のこと)に 表示されます。

2.欄①を操作して、フォルダhptest を選択(左クリック)して下さい。

 下の欄に、hptest の内容が表示されます。 は、そのフォルダ自身を表します。 フォルダとファイルの操作は、下の欄で行います。 右側の欄(③と④)は、リモートサイト(接続先のサイト)の フォルダとファイルの情報が表示されます。現時点では、 接続されていませんから、空欄となっています。 扱い方は、ローカルサイトと同様です。

3.借りたサイトに接続します。

3.1.FileZilla 窓の「ファイル」メニューをクリックします。
3.2.現れたサブメニューの「サイトマネージャ」をクリック。
「サイトマネージャ」窓 が現れます。
3.3.左側にある「新しいサイト(N)」をクリックします。
3.4.現れた「新規サイト」枠にサイト名(自由に決めて下さい) を入力します。
3.5.右側の

ホスト(H) に FTP ホスト を入力し、
ログオンの種類(L) を 「匿名」から「通常」に変更し、
ユーザ(U)  に  FTPユーザー を、
パスワード(W)  に  FTP パスワード を
入力します。

3.6.完了したら、下辺の「接続」を左クリックします。

 サイトと接続され、FileZilla 窓の欄③、④にリモートサイトの情報が表示されます。 欄④に表示されているリモートサイトの情報は、 以外は、 Xdomain が準備したデフォルトのものです。 (確か2つ(3つ?)のファイル(とフォルダ?)があったと思うけど、 はっきりとは覚えていません。)必要ないものです。 以外は、 全て削除しておきます。

(削除方法) 削除対象ファイル(もしくはフォルダ)上でマウスを右クリック。
現れたメニューで「削除」を左クリック。

(2回目以降の場合は、3.2 の「サイトマネージャ」をクリックすると、 入力したサイト名が現れますから、左クリックして、 「接続」をクリックすれば接続します。)

pc のサイトをアップロードする

1.欄①で、フォルダ hptest を選択します。 (既に、そうなっているはず。)そして、欄②には、 ファイル index.html とフォルダ index.file が表示されています。
2.このファイルとフォルダをアップロードします。

2.1.ファイル index.html 上でマウスを右クリックします。
2.2.現れたメニューから「アップロード」を選択します。
 index.html がアップロードされます。
 欄④に index.html が表示されたことを確かめて下さい。
(フォルダ index.file に関しても同様の操作を行います。)
2.3.フォルダ index.file 上でマウスを右クリックします。
2.4.現れたメニューから「アップロード」を選択します。
 index.file がアップロードされます。
 欄④に index.file が表示されたことを確かめて下さい。

以上で、アップロード完了です。
3.確認の為、ブラウザを開き、URL に、「アカウント名」/index.html を 入力して下さい。
ワードで作成したページが表示されれば成功です。 お疲れさまでした。

(余談)何故、ファイル名(とフォルダ名)を半角文字にするか?

 pc と Webサーバでは、使用しているOS(オペレーティングシステム)と 文字コードが異なります。その為、全角文字を用いると文字化けを起こし、 最悪、ブラウザで表示されなくなるためです。

(余談)ファイル名を index.html にした理由は?

 拡張子が html であれば、半角英数字の名前なら何でも構いません。 index.html にしたのは、URLを指定する場合に省略可能だからです。
 サイト表示の時、URL 欄に、 「アカウント名」/index.html を指定しましたが、index.html ですから、これを省略して 「アカウント名」/ でも、サイトのページが開かれます。

(注意)

 Web サーバでは、一般に、ファイル名とフォルダ名に関して、 大文字と小文字を区別します。 一方、MS-Windows では、ファイル名とフォルダ名に関して、 大文字と小文字は区別しません。