今覚える！ FTPソフトを使ってWEBサイトを公開する方法

WEBサイトを公開するには、サーバーを借り、ドメインを取得する必要があります。
ドメインやサーバーの取得方法ついては以下の記事をに目を通してみてください。

■ レンタルサーバーって何？ 初心者へのオススメはこれ！
https://base91.net/server/

■ ドメインって何？ WEBサイトを表示するには？
https://base91.net/domein-show-web/

準備が整ったら、今度はサーバーにファイルをアップロードする必要があります。
自分で作ったWEBサイトのデータをサーバーに送らなければ、公開はできません。

では、どうやってサーバーにファイルをアップロードするのでしょうか。
そこで、登場するのがFTPソフトです。

FTPソフトとは、自分のパソコンとサーバーを繋ぐ「どこでもドア」のようなものです。
直接、FTPソフトを通じて、自分のパソコンからサーバーの中が覗けます。
また、中を除くだけではなく、データのアップロードやダウンロードもできるのです。

まずは、FTPソフトをダウンロードしてみましょう。

Macであればサイバーダックというアヒルアイコンのソフトが有名ですね。
Windowsであれば、FFFTPを使っている人が多いのではないでしょうか。
※ windowsでもサイバーダックはあります。

それぞれ、ダウンロード&インストールして準備を整えましょう。

ダウンロード&インストール完了したら、今度はサーバーの「FTP情報」を調べます。
「FTP情報」とは、ソフトとサーバーを繋ぐための鍵みたいなものです。
主に「ホスト」「ユーザー名」「パスワード」で1組になっています。
FTP情報をソフトに登録することで、サーバーと繋がるようになります。

ただ、どこに書いてあるのか、サーバーによっては、分かりづらいこともあるんですよね。
大抵の場合、サーバーの管理画面にFTP情報が掲載されているはずです。
または、登録時に送られてきたメールに記載されていることも多いです。

みつけたら、FTPソフトに情報を登録していきましょう。
登録が無事に完了すると、ソフトを通じてサーバーと繋げるようになります。

サイバーダックの場合

ここでは、サイバーダックの例をあげて、接続方法をご紹介します。
FFFTPの接続方法は、後ほど掲載予定ですが、検索してもたくさん見つかるはずです。
あまり大きな差はありませんので、ぜひ検索して挑戦してみてください。

なお、今回はmac+サイバーダックの組み合わせです。
windowsだと、表示が異なることがありますのでご了承ください。

さて、進めていきましょう。

まず、サイバーダックを開きます。
すると、何も無い、横線が入った画面が現れます。

この横線が入ったエリア、どこでも良いので、右クリックしましょう。
macの場合、キーボードのcontrolキーを押しながら左クリックでも大丈夫です。
するとポップアップウィンドウがあらわれます。

新規ブックマークを押します。

すると、上記のような画面が出てくるのですが、ここで入力するのは2つ。
「サーバ」「ユーザー名」に、FTP情報の「サーバー情報」「ユーザー名」を入れましょう。

その後、左上の「×」ボタンを押してウィンドウを閉じます。
すると、先程何もなかった横線の入ったエリアに情報が追加されました。

この追加された情報をダブルクリックしてみましょう。

もし、「非セキュアなFTP接続」画面が出てきたら「続ける」を押してください。

続けていくと、ログイン失敗、という画面が出てくるのですが大丈夫です。
FTPパスワードを入力してログインしてください。

すると、下記のような画面が表示されるはずです。
今回は仮にエックスサーバーを使ったとします。

入力情報があっていれば、フォルダ / ファイルが現れ、ログイン成功となるはずです。
サーバーの中身とは言え、扱いは普通のファインダーと一緒です。
ドラックアンドドロップでファイルをアップロードできますし、ダウンロードもできます。

僕の場合、サイトを色々と管理しているので、少しファイル数が多く表示されています。
エックスサーバーの場合「オリジナルドメイン1つにつき1つのフォルダ」が自動で作られます。
startoutであれば、startout.workの中が該当のデータになります。

しかし、最初の段階では、ほぼ何もありません。
あるのは「サーバーから付与されたテスト用のドメイン」だけとなります。
大抵のサーバーは、最初に「テスト用のドメイン」が1つ付与されます。
サーバーを契約した時のメールや管理画面を確認してみましょう。

エックスサーバーの場合、「アカウントID.xsrv.jp」が提供されます。
上記の場合、quadraがIDとして、「quadra.xsrv.jp」がテスト用ドメインです。
URLにアクセスするときは「http://quadra.xsrv.jp」になります。

どのフォルダにアップロードすればいいの？

サーバーへのアップロード自体は、対象のファイルをドラック＆ドロップするだけです。
しかし、各ドメインに「対応したフォルダ内」にアップしなければ反映されません。
別の箇所にアップしても、あてがわれたドメインがないからです。

まず、ドメインに対応したフォルダを開いてみましょう。
初期の場合であれば、テスト用のドメインフォルダを開いてください。

すると、エックスサーバーの場合、上記のような画面になります。
各フォルダは、メール機能やサーバーの設定などが入っています。

ここで、僕たちが触るフォルダは1つだけです。
public_htmlフォルダを開きましょう。
その他は、触ってはいけません。

エックスサーバー以外も、同じような構造になっている場合は多々あります。
ファイルをアップロードして良いフォルダが大抵決まっているのです。

多くの初心者さんがつまずくポイントですね。
ドメインと、そのドメインに紐づくフォルダは決まっています。

中には、ログインしてそのままアップロードできる画面の場合もあります。
しかし、そういった場合は稀です。

アップロードできるフォルダは大抵、似たような名前になっています。
public_htmlやwwwなど、それに親しい名前になっている場合が多いです。
わからない場合は各サーバーの情報をGoogle検索してみましょう。

では、public_htmlを開いてみます。

エックスサーバーの場合、最初に上記のファイルが入っていました。
このファイルが何かと言うと、

上記の画面のファイルです。
「何もアップロードされていません」を表示するページのファイルが入っているのです。
index.htmlとdefault_page.pngは消しても問題ありません。
記念としてダウンロードしておいても良いでしょう。笑

ここまできたら、あとはご自身の作ったWEBサイトデータをアップロードするだけです。
アップロードするフォルダやファイルが間違っていなければ、それで公開完了となります。

FTP以外にもSFTPなどセキュリティが強化された接続方式もある。

今回は、最もよく使われる「FTP」という形でサーバーに接続しました。
ただ、サーバーにファイルを転送する方式は、FTPだけではありません。
よりセキュリティが強化された「SFTP」をはじめとした別の方式である場合もあります。

それは、サーバーの設定によります。

といっても、使うソフトが変わるわけではありません。
サイバーダックでは、FTP情報を設定する際に方式を変更できます。

一番上にFTP(ファイル転送プロトコル)と書かれているのが分かるでしょうか。
こちらをクリックすると、色々な方式が現れます。

転送の形式によって、サーバーに接続する方法も少しだけ異なります。

例えば、SFTPの場合、パスワードじゃなく、鍵となる「ファイル」をもらうケースもあります。
鍵となるファイルを接続時に登録することで、サーバーへの接続が許可される場合も多いです。

ただ、ひとまずここではFTPによるノーマルな形だけ覚えておいてください。
SFTPを始めとしたその他の転送方法は、必要な時に調べてみると良いです。
あまり色々やりすぎると、頭もごちゃごちゃしてしまいますからね。

これで、通常のアップロード方法は、ご理解頂けたかと思います。
ぜひぜひ、どんどんファイルを公開して、試してみてください！