サーバーにファイルをアップロードするにはFTPソフトを使います。
FTPソフトには色んな種類があるのですが、今回はWindowsでもMacでも使えるFileZillaのインストールと接続方法について解説していきます。
効率よくコーディングしたい人はこちら
FTPソフトとは
FTPソフトとは、ホームページやLPなどのファイルをサーバーにアップロードしたり、逆にサーバーからファイルをダウンロードする為のファイル転送用ソフトの事です。
ファイルをサーバーにアップロードするとサイトを公開出来るので、Web制作での納品はファイルをそのままクライアントに渡す以外に、サーバーにアップロードすることがあります。
なのでWeb制作の仕事を行う上でも必須の存在となります。
FTPソフトにはどんなものがあるのか
FTPソフトはたくさんあってどれを使っていいか分からないと思います。
この記事でご紹介するのはFileZillaというFTPソフトですが、他にも以下のような物があります。
- FFFTP（Windowsのみ）
- Cyberduck
私は基本的にWindowsで作業していてFFFTPを使っていたんですが、Macだと使えません。
またCyberduckも使ったことがありますが、相性が悪いのかやたら通信が切断されるので使わなくなりました。
そしてFileZillaになりました。
基本的には自分の使いやすい物を選べばいいと思うので、上手くいかなかったら他のFTPソフトを使ってみるのもいいかと思います。
FileZillaをインストール
まずはインストールするのですが、公式サイトからダウンロードしようとするとセキュリティソフトがウィルスを検知して削除してしまう事があるので、OSDN株式会社さんの以下のページからダウンロードします。
FileZilla プロジェクト日本語トップページ - OSDN
ウィルス検知について気になる方はこちらの記事が参考になります。
「FileZilla」をダウンロードする際にウイルスが検出される件 - たぶろぐ
上記ページでダウンロード出来なかった場合はこちらで試してみて下さい
FileZilla 3.55.1 用 Mac - ダウンロード
まずは先ほどのページを開くとこのような画面が表示されます。
そうしたら最新リリースの最新版をクリックします。
すると次の画面が表示されます。
ここではご自身の環境に合わせてダウンロードして下さい（この時使っていたPCはWindowsの64bitです）
そしてインストールを開始します。
基本的にそのまま進めれば大丈夫です。
インストールが完了した後、バージョンアップの画面が表示されたらバージョンアップしておきましょう。
FileZillaの初期設定（サーバーに接続）
バージョンアップも完了したら次の画面が表示されます。
画面の左側がローカルサイト、つまり自分のパソコン上の状態です。
そして右側がサーバー側ですが、まだサーバーに接続していないので何も表示されていません。
それではサーバーに接続していくので、左上のサイトマネージャーをクリックします（小さくてちょっと分かりにくいです）
すると次の画面が表示されます。
ここで自分のサイトというフォルダから新しいサイトをクリックして、今回はテスト用というサイトを作成しました（ファイル名は任意です）
そして次にサーバーへ接続するために必要な情報を入力していきます。
必要な情報は3つ
- ホスト名
- ユーザー名
- パスワード
これらの情報はレンタルサーバーとの契約時にメールで送られているかと思います。
またFTP接続の方法について記載してあるレンタルサーバーもありますので、ご利用のレンタルサーバー名＋FileZillaで検索してみて下さい。
私が利用しているエックスサーバーはこちらに記載しています。
FileZilla設定手順 | レンタルサーバーならエックスサーバー
そして入力が完了したら接続をクリックします。
すると次の画面が表示されます。
ここでパスワードを保存しておけば、次からはこれらの情報を入力しなくても接続できます。
あと不明な証明書という表示が現れたら左下のチェック2つにチェックしてOKをクリックして下さい。
接続が成功すると先ほど何も表示されていなかった右側にサーバーのファイルが表示されます。
ファイルのアップロードとダウンロード
そしてサーバーにアップロードしたりダウンロードするのはどうしたらいいかですが、ここまで来れば後は簡単です。
例えばサーバーにあるファイルをローカルのデスクトップに作った「ブログ用フォルダ」にダウンロードするとします（ここでは空のフォルダです）
その場合、まずローカル側で保存したいフォルダや場所を選択します。
次にサーバー側でダウンロードしたいファイルを右クリックしてダウンロードします。
するとこのようになります。
空だったブログ用フォルダに無事ダウンロード出来ました。
サーバー側にもファイルは残っているので、コピペみたいな感じです。
またドラッグ＆ドロップでも出来ますし、アップロードも同じやり方でOKです（アップロードの場合は右クリックでアップロードとなります）
ファイルをダブルクリックで編集出来るようにする
先ほどアップロードとダウンロードしましたが、初期設定ではローカル側のファイルをダブルクリックするとアップロードされ、サーバー側ではダウンロードされます。
ファイルの中身を見たいと思ってダブルクリックをしたらビックリします（保存先を指定していなかったら余計な所にファイルが置かれてしまいます）
基本的にはファイルの編集目的でダブルクリックをすると思うので、設定でそうなるように変更しましょう。
まずは編集→設定をクリックします。
次に左のファイルリストを選択し、ファイルをダブルクリックした時のアクションを表示/編集に変更します。
ここが初期設定で転送になっていたので、ダブルクリックでアップロードやダウンロードされていたんですね。
続いてファイルの編集を選択します。
そしてカスタムエディターを使用を選択し、テキストエディタまでのパスを入力します。
使用しているテキストエディタや置いてある場所は人によって違うので、ご自身の環境に合わせて変えましょう。
これで設定は完了です。
私はVS Codeを使用しているので、ファイルをダブルクリックしたらVS Codeが立ち上がって編集出来るようにしました。
以上です。
Brainランキング1位獲得 ＆ 3日で500部突破 クチコミ約300件 今だけ！5つの無料特典あり🎁 👇画像をクリック
コーディング案件の単価と作業効率を上げる！
（平均スコア）
