FTPソフトの「FileZilla(ファイルジラ)」は、今Webサイト制作の現場で恐らく一番使われているFTPツールです。
しかし！！
正しく使えないとサーバー上のファイルを誤って消してしまう可能性があるなど、かなり取り扱いに気をつけるべきツールになります。
そこで今回は「FTPツールの使い方」を大量の画像を使って分かりやすく解説していきます。
今回の記事では「FTPを使う際の、クライアントワークの際の注意点」なども解説しているので、現在Web制作を勉強している人にも参考になるはずです。
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
FileZillaとはなに？
FileZillaはFTP通信を利用して、サーバーとのやり取りを簡単に行えるソフトです。
FTPは『File Transfer Protocol』の頭文字を取った言葉で、サーバー・パソコン間でファイルを送受信するために使う通信規格（プロトコル）のこと。通常のFTPのほか、暗号化され、より安全に利用できるFTPS・SFTPなどの派生型もあります。
Web制作を行う時に、「特定ファイルだけを少し書き換えたい、ダウンロード、アップロードしたい」ような時によく使います。
例えばクライアントにこう言われたらどうしますか？
Webサイトのここの文章だけ少し変えたいんだけど、できる？
この時、クライアントのサイトのHTMLデータはもちろんクライアントのサーバーの中にあります。
なので、クライアントのサーバーからHTMLファイルをダウンロードして編集しなければならないですよね？
そういう時に、FileZillaを使えば編集したいHTMLファイルだけダウンロードして、編集したらまたサーバーにアップロードすることができます。
- 無料で使える
- MacでもWindowsでも使える
- FTP・SFTP・FTPSいずれにも対応
仮にWebサイト制作を仕事にするなら絶対に使えたいソフトです。
早速FileZillaの設定を行っていきましょう！！
File Zillaのダウンロード
FileZillaのダウンロードをするために、「FileZilla公式サイト」に飛びます。
https://filezilla-project.org/download.php?type=client
自分のWinodwsのビット数を確認する方法は以下の画像の通りです。
システムの種類の部分を見ればOKです。この場合は64ビットですね。
次にダウンロードするタイプを選択しますが、一番左でOKです。
File Zillaの初期設定
ポップアップが出現するので、「I Agree」を選択。
そのまま「Next」を選択。
ここも「Next」を選択。
ここはFileZillaのインストール先ですが、そのまま「Next」で問題ないです。
そのまま「Install」を選択。
「Finish」を選択。
ソフトのダウンロードが行われるので、ファイルを開きます。
「このアプリがデバイスに変更を加えることを許可」します。
これでFileZillaの起動ができました。
File Zillaのインストール先はどこ？
ちなみにFileZillaのアプリはどこにインストールされたのでしょうか？
確認方法として、Windowsなら左下から検索すればファイルの場所が分かります。
Macの場合は「Alfred」を使って検索すれば分かりやすいです。
File Zillaの見方
ここからはMacで見ていきますが、基本的にWindowsでも一緒です。
左に自分のPC(ローカル)が表示されて、右に接続先サーバー(リモート)が表示されます。
左から右にファイルを移動させれば接続先サーバーにファイルがアップロードできて、
右から左にファイルを移動させれば、自分のPCにサーバーからファイルがダウンロードできる仕組みです。
左のローカルのフォルダを色々いじってみましょう。
上のほうがフォルダで、下にそのフォルダの中のファイル一覧が出ています。
フォルダをダブルクリックすることで、フォルダの中身を見ることができます。
File Zillaでサーバーと接続する
左上のサーバーのアイコンをクリックしてください。
ここからサーバーとの接続設定を行っていきます。
接続情報について解説します。
| プロトコル | 『FTP-ファイル転送プロトコル』を選択 |
| ホスト | レンタルサーバーの管理画面か契約時メールで確認 （案件の際はクライアントに聞く） |
| 暗号化 | 『使用可能なら明示的なFTP over TLSが必要』を選択 |
| ログインタイプ | 『通常』を選択 |
| ユーザー | レンタルサーバーの管理画面か契約時メールで確認 （案件の際はクライアントに聞く） |
| パスワード | レンタルサーバーの管理画面か契約時メールで確認 （案件の際はクライアントに聞く） |
「ホスト」「ユーザー」「パスワード」に関しては、レンタルサーバー契約時のメール、またはサーバー管理画面から見ることができます。
このブログでおすすめしており、最もWeb制作で使われているエックスサーバー株式会社の「エックスサーバー 
」「シン・レンタルサーバー 
」のサーバー管理画面を例に、
確認方法を解説します。
まずはサーバー管理画面に入って下さい。
その後、「サブFTPアカウント設定」をクリック。
その後、「FTPソフト設定」をクリック。
すると、ホスト名、ユーザー、パスワードを確認することができます。
また、以下はMixhostの例ですが、サーバー契約時のメールにも記載がされていることがあります。
案件でFTP接続したい際は、クライアントに「ホスト名」「ユーザー」「パスワード」を確認する必要がありますが、相手のITリテラシー次第では「サーバー管理画面のアクセス情報」をもらって、自分でサーバー管理画面から確認するのも手です。
File Zillaでのダウンロードとアップロード
File Zillaでサーバーに接続すると、「不明な証明書」と出る場合がありますが、「今後は常にこの証明書を信用する」でOKして大丈夫です。
FileZillaがうまくサーバーに接続できれば、右にリモートサーバーのディレクトリ一覧が出てきます。
FileZillaでのファイルのアップロードは、左から右にドラッグ&ドロップ。
リモートサーバーからダウンロードする場合は、右から左にドラッグ&ドロップすればOKです。
リモートサーバーに編集したいファイルがあれば、まずはリモートからローカルにダウンロードしてから開くといいです。
Webサイト公開に必要なファイルは基本的にpublic_html以下に入れていきます。
ダブルクリックすることでフォルダの中身が見れますが、成功・失敗などの状況などは都度左上のログに出力されています。
WordPressの場合はpublic_html＞wp-content＞themes＞自分のテーマディレクトリといけばテーマファイルにアクセスできますね。
VSCodeでファイルを編集できるようにする
ファイルを編集する際には「ファイルを右クリック→編集」でエディターで編集できます。
しかしデフォルトだとVSCodeで編集できない可能性が高いので、VSCodeで開けるようにします。
まず「編集→設定」を選択。
左のメニューから「ファイルの編集→カスタムエディターを使用→参照」の順にクリック。
その後、自分が使っているエディターを選択します。
その後、「常にデフォルトのエディターを使用」にチェックを入れてから、「OK」をクリック。
これでVSCodeでファイルを編集できるようになりました。
File Zillaのキューの読み込みエラーについて
“/Users/username/.config/filezilla/queue.splite3″からの転送キュー読み込み時にエラーが発生しました。復元できなかったキューがある可能性があります。というエラーの解決方法です。
まずは/Users/username/.config/filezilla/まで行きます。
Macの場合は「command」+「shift」+「.」 で、隠しファイルが表示されます。
これをリネーム(または削除)したら直りました。
FileZillaでのサーバーアクセスに慣れておこう
今回は「FTPツールの使い方」を大量の画像を使って分かりやすく解説しました。
FileZillaを使ったサーバーとのファイルのやり取りは、ミスするとサイトに影響を与える可能性があります。
私が出している「コーディング演習課題」ではサーバーにアップロードしていただきますが、お客さんのサイトを触る前に、是非一度自分のサーバーでFileZillaを使用されることを強くおすすめします。
シン・レンタルサーバーでのWordPressサイト公開方法を画像100枚で解説【ブログ・ポートフォリオサイト両方いける】
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
これを解説している私はこれまで200件近いWebサイト制作案件に携わってきて、FTPツールであFileZillaを6年ほど使っています。