サイトをネット上へ公開したい。
この際、自分のパソコン上にあるファイルをWEBサーバーへ届けないといけません(＝アップロード)。
※WEBサーバー ＝ サイトを表示させるコンピュータ。サイトをアップロードする時は、単に「サーバー」と言われることが多い。
この時に利用するのがFTPという仕組みです。
ですがこのFTP、初めての人にしたら分かりにくいものだと思います。
そこで今回は、初心者の方向けにFTPについて解説していきます。
FTPの大まかな仕組み・ファイルのアップロード方法をご覧ください。
FTPの仕組みとは
冒頭のとおり、自分のパソコンにあるファイルをWEBサーバーに届けるのに必要なのがFTPです。
ファイル … htmlやcss、画像など
※html/cssファイルをアップするには、WEBサーバーをレンタルしなければいけません。
【html/css初心者】仕事へ就く前にサーバーを経験すべきたった1つの理由
FTPとは「File Transfer Prtocol」の略となります。
FIle Transfer Protocol
ファイル 転送 規約
- 転送(＝送受信) … ファイルを送ったり受け取ったりすること。
- 規約(＝決まりごと) … ファイルを送受信する時のルール。
なので、FTPとはファイルを送受信できるようにするための通信ルールとなります。
【参考サイト】
FTP（エフ・ティー・ピー）「国民のためのサイバーセキュリティサイト」｜総務省
FTPはコンピュータ同士で情報を送受信するための通信ルール
もともと機械同士で線を繋いだだけでは、情報を送ったり受け取ったりできません。
その理由は、機械と言っても一括りにはできず色々な種類があるからです。
MacとWindowsは同じパソコンでも、まったくいっしょではないとあなたも知っていると思います。
実際に、MacとWindowsの間でファイルのやりとりをするとうまくいかないことがあります。
これと同じで、パソコンとサーバーの間でやりとりするルールがないと、ファイルの送受信ができないのです。
そして、このルールに従って自分のパソコンからファイルの送受信を可能にする。
それが、次に紹介するFTPサーバーとFTPクライアントソフトになります。
FTPは、機械同士でファイルをやりとりできるようにするためのルール。
FTPサーバーとFTPクライアントソフト
FTPサーバー
まず、自分のパソコンからどこにファイルを送るかなんですが、これはFTPサーバーになります。
FTPサーバーは、ファイルを受けっとたり送ったりする機械です。
WEBサーバーかと思った方もいるかもしれませんが、WEBサーバーはファイルの送受信を行えません。
理由は、WEBサーバーはサイトを表示するための専用のコンピュータだからです。
くわしくは、
『サーバー』について知ろう
サイト制作者から見た時のブラウザとは？
をご覧ください。
自分のパソコン・FTPサーバー・WEBサーバー
話を戻しますね。
自分のパソコン、FTPサーバー、WEBサーバーの関係を見てみましょう。
FTPサーバーとWEBサーバーはつながっています。
なので、自分のパソコンからFTPサーバーに送ったファイルは、そのままWEBサーバーに届くようになっています。
反対にWEBサーバー内にあるファイルを欲しい時は、FTPサーバーを介して、自分のパソコンに送られます。
パソコンがファイルを送る相手は、FTPサーバー。
FTPクライアントソフト
上で述べたように自分のパソコンとFTPサーバーとの間で、ファイルのやりとりをするのですが、じつはこの2つだけでは行えません。
このファイルの送受信を可能にしてくれるのが、FTPクライアントソフトです。
FTPとhttp
混同しそうなことなのですが、FTPクライアントソフトを使ったファイルのやりとりは、いわゆるホームページを見るウェブブラウザ(Google ChromeやSafariのこと)では行いません。
なぜならホームページを見るための通信ルールは「http」というものだから。
※http = Hypertext Transfer Protocol
そうです、ホームページの住所と言われるURLの先頭にある「http://〜」です。
一方、ファイルの送受信は、FTPという通信のルールでした。
なので、違う通信ルールである「http」のウェブブラウザでは、ファイルの送受信は行えないのです。
そして、ホームページを見るためには、ウエブブラウザ(Google ChromeやSafariなど)というソフト。
ファイルの転送には、FTPクライアントソフトが必要となるわけです。
| 通信のルール | 通信を可能にするソフト | |
| ホームページの表示 | http | ウェブブラウザ |
| ファイルの送受信 | FTP | FTPクライアントソフト |
この区別を理解したうえで、次にいきましょう。
FTPクライアントソフトを使って、FTPサーバーとファイルのやりとりができる。
FTPサーバー接続からファイルをアップロードするまでの流れ
FTPクライアントソフト「Filezilla」をインストールする
ここでは「Filezilla」というFTPクライアントソフトを使い、自分のパソコンとFTPサーバーとの接続方法を解説していきます。
ちなみに、「Filezilla」は、Mac・Windowsどちらのパソコンでも使用可能なソフト。
無料で利用できます。
というわけで、「Filezilla」のダウンロードとインストールを行いましょう。
FileZillaのダウンロード
まずは、ダウンロードから。
はじめに、FileZillaの公式ページに飛びます。
ページは英語表記ですが、右上で「日本語」を選択できます。
※ブラウザによっては、日本語に切り替えられないものもあります。
もし、パネルが出てない場合は、上の部分をクリックしましょう。
続いて、ダウンロードボタンが２つ並んでいるので、左側の『Download FileZilla Client』を選択しましょう。
すると、↓の画面になります。
画像では「Mac OS X」と表記されていますが、Windowsをお使いの方は「Windows」と出てくるはずです。
このように自動で、「Mac」か「Windows」を判断してくれます。
今回は、「Mac」で解説を進めます。
緑色ボタンの『Download FileZilla Client』をクリック。
すると↓が出てきます。
３つ並んでいますね。
左が無料版、真ん中は説明書つきのもの、右は有料版になります。
ファイルの転送だけなら無料版で十分なので、無料版の下にある緑の『Download』ボタンをクリックしましょう。
すると、画面の左下に↓が出てきます。
それをクリックすると、↓が表示。
この状態は、自分のパソコンの『ダウンロード』という名前のフォルダに、『Filezilla 2.app』のソフトが入っていることを示しています。
頻繁に使うなら、「アプリケーション」か「デスクトップ」に置いた方が便利です。
『FileZilla2.app』をドラッグすれば、左側の「アプリケーション」か「デスクトップ」に移動できます。
FileZillaのインストール
次にインストール。
『FileZilla 2.app』をクリックすると、１回目の立ち上げの時だけ↓が表示されます。
(※Macの場合)
『開く』をクリック。
そうすると、FileZillaソフトが立ち上がります↓
もうこの時点で使えるようになっています。
インストールといってもMacの場合、じつはこれだけなんです。
とても簡単ですよね。
このあとサーバーへ接続し、ファイルをアップロードします。
パネルの左側は自分のパソコンの情報で、右側はWEBサーバーの情報です。
このようにFTPサーバーとFTPクライアントソフトを使えば、WEBサーバーにある情報(ファイルなど)を見ることができます。
FTPサーバーに接続する
次にサイトマネージャーを開いて接続情報を入力したいので、「ファイル → サイトマネージャー」の順にクリックしましょう。
ちなみに、サイトマネージャーとは、サイトを管理(＝マネージャー)するという意味です。
すると、サイトマネージャーが下のように出てきます。
そこで、左下にある「新しいサイト」をクリック。
すると、左上に「新規サイト」と出てくるので、サイト名に名前を変更しましょう。
次に、右側の欄の「ホスト」「ユーザー」「パスワード」情報を入力していきます。
この時、契約したサーバから送られてきたメールを用意します。
登録したメールに送られてきた中から、サーバー情報が載っているものを探しましょう。
見つからない場合は、「メールの検索」で、契約したサーバーの会社を入れてみてください。
メールの件名は、『重要｜サーバーアカウントの設定完了のお知らせ』や『登録完了のお知らせ』みたいなものになっていると思います。
そして、その中にFTP情報というものが含まれています。
スクロールしてメールの下の方まで探してみてください。
以下の３つが、FTP情報の欄に書かれています。
- FTPサーバー名(ホスト名)
- FTPアカウント名(FTPユーザー名)
- FTPパスワード(サーバパスワード)
※サーバー会社によって、「FTPサーバー名」や「ホスト名」と、呼び方が違います。ホスト名＝数あるサーバーの中の、特定の1つを指す名前。
FTPサーバー名(ホスト名)は、接続しようとしているFTPサーバーの名前。
先ほども解説したんですが、だいじなとこなので、繰り返します。
接続しようとしているのは、FTPサーバーです。で、みなさんが契約したサーバーは、WEBサーバー。
このへんは、とてもややこしいですね。
FTPアカウント名(ユーザー名)は、FTPサーバーに接続しようとしているユーザーです。
FTPパスワード(サーバパスワード)は、接続するためのパスワード。
で、これを踏まえて入力します。
| 「ホスト」 | ← | FTPサーバー名(ホスト名) |
| 「ユーザー」 | ← | FTPアカウント(FTPユーザー名) |
| 「パスワード」 | ← | FTPパスワード(サーバパスワード) |
入力が済んだら、右下にある「接続」ボタンを押しましょう。
接続する前に、「不明な証明書」というのが出てくることがありますが心配ありません。
「Filezilla」では、はじめて接続する場合、このようなパネルが開くことがあります。
「今後は常にこの証明書を信用する」にチェックを入れて、「OK」を押しましょう。
仮にサーバー名やパスワードが違って接続できないと、上のほうに「エラー」が出ます。
「致命的なエラー」みたいな、ドキッとすることばが出ますが、何も問題ないので大丈夫です。
その時は、情報を確認し直して、もう１度入力しましょう！
何度失敗してもいいので、安心してください。
接続に成功すると、はじめに開いたパネルの右側にWEBサーバーにある情報が出てきます。
これも繰り返しますが、WEBサーバーにアクセスできるのは、FTPサーバーに接続したからです。
ファイルをアップロードする
サイトを公開するためのファイルは、左側の自分のパソコンの中から探して右側のパネルにドラッグしましょう。
または、右側のデスクトップにファイルがある場合は、直接そこからドラッグ&ドロップしてもできます。
ここで注意点が1つ。
おそらく制作中のhtmlやcss、画像ファイルは1つのフォルダにまとめて入れていると思います。
例えば、そのフォルダが「サイトA」としましょう。
「サイトA」の中に入っているファイル・フォルダ。
- index.html
- top.css
- imagesフォルダ
この時、サーバー側にアップロードするのは、「サイトA」に入っているファイル・フォルダです。
「サイトA」ごとアップロードすると、サイトが表示されません。
ですので、サイトAの中にあるファイル・フォルダだけアップロードしましょう。
また、ファイル・フォルダ群はあるサーバー側のフォルダの中に入れるんですが、このフォルダ名はサーバー会社によって違います。
例えば、
- さくらサーバーだと「www」
- エックスサーバーだと「public_html」
といった名前になっているので、契約しているサーバー会社で確認してみてください。
このフォルダの中にファイルを入れると、アップロード完了です。
ウェブブラウザの検索窓にURLを入力すれば、もうサイトが見れるはずです。
アップロードしたファイルを修正する場合
もし、内容を修正したい場合は、右側のパネルからファイルを選び、左側にドラッグしましょう。
そして、ファイルをテキストエディタで開いて修正します。
再び右側のパネルにファイルをドラッグするのですが、その前に下図の「更新ボタン」を押しましょう。
このボタンを押すことで、たった今修正したファイルが最新の状態となります。
そして、ファイルを右側へドラッグ。
この時、同じファイル名なので以下のようにパネルが出てきます。
「上書き」を選択し、「OK」を押しましょう。
これで修正ができました。
サイトを確認すると、修正が反映されているはずです。
FileZillaの操作注意点は、こちらのPDFをご覧ください。
FileZillaを使う時の注意点【初心者】
さいごに、FTPの暗号化について解説します。
FTPの暗号化
FTPという通信技術は便利なものです。
しかし、この機械同士を行き来している情報(アカウントやパスワード)は、簡単に言うと隠されていません。
少し知識を持った人が見ようと思えば、見れるんですね。
情報を盗もうとする人は、ここがセキュリティ的に弱いのを知っているため狙いに来ます。
なので、行き来する情報が暗号化されるようにするため、「SFTP」や「FTPS」という通信技術が確立されています。
まだFTPについて理解されたばかりのみなさんは、FTPも暗号化できるということだけ覚えましょう。
ちなみに「http」も同じリスクがあるため、「https」という暗号化した通信が一般的になりました。
| 暗号化 | |
| http | https |
| FTP | SFTP、FTPS |
【参考サイト】
SFTP（エス・エフ・ティー・ピー）「国民のためのサイバーセキュリテイサイト」｜総務省
- FTPを暗号化したのが、SFTPやFTPS。
参考サイト
まとめ
今回は、FTPの仕組みとファイルのアップロードなどについて解説しました。
ポイントは以下です。
- FTPは、機械同士でファイルをやりとりできるようにするためのルール。
- パソコンがファイルを送る相手は、FTPサーバー。
- FTPクライアントソフトを使って、FTPサーバーとファイルのやりとりができる。
- FTPを暗号化したのが、SFTPやFTPS。
ファイルをアップロードするために必要なものがFTPという仕組みでした。
これからサイトを公開する予定の方は、この記事を参考にしながらファイルのアップロードに挑戦してみてください。
サーバーを使ってみたい人は、こちらをどうぞ。
