【保存版】FTPクライアント「FileZilla」の使い方【初心者向け】

コーディング

こんにちはTERUです。
フリーランスでWEB制作(コーディング と ディレクション業務)をしています。

読者の悩み

  • FileZillaの使い方について詳しく知りたい

本記事では、こういった疑問に答えます。
「FileZilla」は、ローカル環境(自分のPC)とサーバ環境でファイルをやり取りするためのツールです。

Web制作の作業では、必ず必要となるツールなのでWeb初心者の方向けに詳しく解説していきます。

目次

本記事の信頼性

  • フリーランスとしてWordPress案件を中心としたWeb制作を仕事にしている
  • Web制作会社にてディレクターの経験もあり
  • 普段からWeb制作でFileZillaを使用している

スポンサードサーチ

FTPクライアント「FileZilla」のインストール

FTPクライアント「FileZilla」をダウンロードする

公式サイトからFileZillaをダウンロードします。

手順①:FileZillaの公式ページへアクセスします。
▼FileZilla公式ページ

手順②:「Download FileZilla Client」に各OS毎の設定ファイルが表示されているので、自分のPCに合ったバージョンをダウンロードしましょう。
FTPクライアント「FileZilla」をダウンロードする
Macの場合は一択ですが、Windowsの場合32ビットと64ビットの2種類あるので注意しましょう。

自分のPCが32ビットなのか64ビットなのか確認する方法

32bitと64bitの確認方法
参照:32 ビットと 64 ビットの Windows: よく寄せられる質問 / Microsoft公式

Windowsの場合も、インストールの画面に違いがあるだけで使い方はMacと変わりません。

FTPクライアント「FileZilla」をインストールする

OSによってインストールは下記の2パターンあります。

  • FileZillaインストール(Macの場合)
  • FileZillaインストール(Windowsの場合)

各OSの手順について1つずつ説明します。

FileZillaインストール(Macの場合)

手順①:ダウンロードしたファイルをダブルクリックします。
FileZillaインストール(Macの場合)

手順②:FileZilla.appが表示されるので、「アプリケーション」にドラッグ&ドロップします。
FileZillaインストール(Macの場合)2

手順③:「アプリケーション」にFileZilla.appがコピーされているのを確認します。
FileZillaインストール(Macの場合)3
以上でFileZillaのインストール(Macの場合)は完了です。

FileZillaインストール(Windowsの場合)

手順①:ダウンロードしたファイルをダブルクリックします。
FileZillaインストール(Windowsの場合)

手順②:「I Agree」をクリックして次に進みます。
FileZillaインストール(Windowsの場合)2

手順③:アクセス権の設定ですが、デフォルトのまま「Next」をクリックして次に進みます。
FileZillaインストール(Windowsの場合)3

手順④:コンポーネントの選択ですが、ここもデフォルトのまま「Next」をクリックして次に進みます。
FileZillaインストール(Windowsの場合)4

手順⑤:インストール場所の選択ですが、ここもデフォルトで「Next」をクリックして次に進みます。※デフォルトインストール先:「C:¥ProgramFiles¥FileZillaFTPClient」
FileZillaインストール(Windowsの場合)5

手順⑥:「Install」をクリックします。
FileZillaインストール(Windowsの場合)6

手順⑦:「Finish」をクリックします。
FileZillaインストール(Windowsの場合)7

以上でFileZillaのインストールは完了です。

スポンサードサーチ

「FileZilla」の使い方

「FileZilla」の使い方
ここでは、具体的に「FileZilla」の使い方について説明します。
説明するのは下記の項目になります。

  • FileZillaの操作画面について
  • サーバーに接続する方法
  • ファイルのダウンロード方法
  • ファイルのアップロード方法
  • ファイルの編集方法

FileZillaの操作画面について

FileZillaの操作画面はシンプルです。
大きくは2つの要素で構成されています。

ローカル環境(自分のPC) 左側パネル
サーバー環境 右側パネル

FileZillaの操作画面について
左側がローカル環境(自分のPC)で右側が接続するサーバ環境になります。

ローカル環境(自分のPC)のパネル詳細

左側のパネル上下でフォルダ選択画面(ディレクトリツリー)とフォルダ内画面に分かれます。
ローカル環境(自分のPC)のパネル詳細

サーバー環境のパネル詳細

ローカル環境と役割は同じです。
サーバー環境のパネル詳細

その他のパネル

その他にも上下にパネルが用意されていますので説明します。

メッセージログ サーバへの接続状況のログが表示されます。
転送ステータス ダウンロード・アップロードの進捗状況が表示されます。

その他のパネル

サーバーに接続する方法

FileZillaを使ってサーバに接続する方法を説明します。

手順①:画面左上の「サイトマネージャー」をクリックします。
サーバーに接続する方法

手順②:「サイトマネージャー」画面が表示されるので、「新しいサイト」をクリックします。
サーバーに接続する方法2

手順③:右側の画面でサーバへの接続情報を入力し、「接続」をクリックします。
サーバーに接続する方法3

▼サーバーへの接続情報は以下になります。

プロトコル 「FTP-ファイル転送プロトコル」を選択します。
ホスト 接続するサーバーのホスト名を入力します。
ポート 空白でOKです。デフォルトで21番ポートが使用されます。
暗号化 「使用可能なら明示的なFTP over TLSを使用」を選択します。
ログオンタイプ 「通常」を選択します。
ユーザー サーバーに接続するためのFTPユーザー名を入力します。
パスワード サーバーに接続するためのFTPパスワードを入力します。

※ホスト、ユーザー、パスワードは、接続するサーバによって変わります。

ファイルのダウンロード方法

ファイルのダウンロード方法について説明します。

手順①:右側パネルでダウンロードしたいファイルを選択し、左側パネルにドラッグ&ドロップします。
ファイルのアップロード方法
※ここでは、「logo.png」ファイルを選択しています。

手順②:左側パネルにダウンロードしたファイルが表示されているのを確認します。
ファイルのアップロード方法2
以上でファイルのダウンロードは完了です。

複数のファイルやフォルダも同時にダウンロード可能です。

ファイルのアップロード方法

ファイルのアップロード方法について説明します。
結論、ダウンロードと反対の操作をするだけです。

手順①:左側パネルでアップロードしたいファイルを選択し、右側パネルにドラッグ&ドロップします。
ファイルのアップロード方法
※ここでは、「logo.png」ファイルを選択しています。

手順②:右側パネルにアップロードしたファイルが表示されているのを確認します。
ファイルのアップロード方法2
以上でファイルのアップロードは完了です。

複数のファイルやフォルダも同時にアップロード可能です。

ファイルの編集方法

ファイルの編集をするパターンは、大きく2つあります。
ただ、操作方法は、どちらも同じなので簡単に覚えられます。
ファイルの編集方法

  • ローカル環境のファイルを編集するパターン
  • サーバー環境のファイルを編集するパターン

本記事の手順は「ローカル環境のファイルを編集するパターン」を説明します。
手順①:左側パネルで編集したいファイルを右クリックし、「編集」をクリックします。
ファイルの編集方法2

手順②:テキストエディタ〜が表示されるのでファイル内容を編集し、保存を行います。

手順③:FileZillaでポップアップ画面が表示され、保存したファイルをアップロードするかどうかを選択します。
ファイルの編集方法3

「はい」を選択した場合

FTPで接続されているサーバー領域(右側パネルに表示されている領域)にファイルがアップロードされます。
ファイルの編集方法4
事前に、アップロードしたいディレクトリまで表示しておく必要があるので注意が必要です。

「いいえ」を選択した場合

ローカル環境のファイルは保存されただけで、アップロードされません。

サーバー環境のファイルを直接編集することも可能です。

実際、修正案件では、直接サーバー環境上のファイルを編集することはよくあります。

編集方法は同じでサーバー領域(右側パネル)から対象ファイルを選択して行うだけです。
ファイルの編集方法5
サーバー環境のファイルは、編集する際にローカル環境の一時領域に保存されます。
編集完了後にファイルをアップロードすることで、修正が反映されます。

スポンサードサーチ

【おまけ】「FileZilla」のおすすめ設定3選

「FileZilla」をより使いやすくするためのおすすめ設定を3つご紹介します。

  • ダブルクリックでファイル編集
  • 接続情報のインポート・エクスポート
  • タイムスタンプ情報の維持

ダブルクリックでファイル編集

デフォルト設定では、ファイルを開く際に、「右クリック」→「編集」を選択しなければいけません。
作業を効率化するために、ダブルクリックでファイルを開くように設定します。

手順①:メニューバーから「編集」 → 「設定」 をクリックします。
ダブルクリックでファイル編集

手順②:設定画面の「ファイルリスト」から「ファイルをダブルクリックした時のアクション」を「表示/編集」に変更します。
ダブルクリックでファイル編集2

手順③:次に「ファイルの編集」から、「カスタムエディタを使用」を選択し、普段利用している任意のエディタまでのパスを設定します。
ダブルクリックでファイル編集3
※ここでは、Mac環境でVSCodeを指定しています。

以上で設定は完了です。これで、ファイルのダブルクリックからエディタ編集が可能になります。

接続情報のインポート・エクスポート

「FileZilla」では、簡単に接続情報や設定情報の移行が可能です。
PCを買い替えた時など、利用する場面は限定的ですが、覚えておくと便利です。

今回は、接続情報のインポート・エクスポート方法について説明します。

エクスポートの方法

手順①:メニューバーから「ファイル」 → 「エクスポート」 をクリックします。
エクスポートの方法

手順②:「エクスポートの設定」画面が表示されるので、「〜エントリーをエクスポート」にチェックをしてOKをクリックします。
エクスポートの方法2

手順③:名前と保存場所を設定して「保存」をクリックします。
エクスポートの方法3
エクスポートの方法4
接続情報が記載されたXMLファイルが出力されます。
以上でエクスポート作業は完了です。

インポートの方法

次にインポート作業の方法です。移行先のFileZillaで実施してください。

手順①:メニューバーから「ファイル」 → 「インポート」 をクリックします。
インポートの方法

手順②:インポートするXMLファイルを選択して「開く」 をクリックします。
インポートの方法2

手順③:「サイトマネージャーエントリー」が選択されているのを確認して「OK」 をクリックします。
インポートの方法3
以上でインポート作業は完了です。

タイムスタンプ情報の維持

最後に「タイムスタンプ情報の維持」について説明します。
デフォルト設定の場合、ダウンロードした日時がファイルの更新日時になり、どのファイルを更新したかわかりづらい問題があります。

設定を変更することで、サーバー内の更新日時を維持したままファイルをダウンロードすることができます。
手順①:メニューバーから「転送」 → 「転送したファイルのタイムスタンプを維持」 をクリックします。
タイムスタンプ情報の維持
以上で完了です。

今回は、FTPクライアント「FileZilla」の使い方についてまとめてみました。
何かご質問がありましたら、気軽にご連絡ください。
以上です。

スポンサードサーチ