悩む人サーバーにポートフォリオサイトをアップロードして公開したいんだけど【FTPソフト】FileZillaの使い方が分からない。
こういった悩みにお答えします。
本記事で解決できること
- FTPソフトとは？
- 【FTPソフト】FileZillaのダウンロード方法
- 【FTPソフト】サーバーに接続する度に発生するパスワードを入力する手間の解決方法
- 【FTPソフト】FileZillaの使い方（アップロード・ダウンロード）
- ファイルを編集するテキストエディターの設定方法
是非、最後までご覧ください。
FileZillaの使い方の前にFTPソフトとは？を超簡単に解説します。
FTPソフトとは、ローカル環境（自分のPCの中身）とサーバー環境間でフォルダやファイルのアップロードやダウンロードしたりすとファイル転送ソフトのことです。
【FTPソフト】使い方の前にFileZillaの特徴について紹介します。
- 無料
- 日本語にも対応
- MacとWindowsのどちらにも対応
- FTPだけではなく、FTPSおよびSFTPもサポート
- 転送速度が早かったり、大容量データを転送してもエラーが起きにくい
【FTPソフト】FileZillaの使い方を解説する前にダウンロードします。
公式サイトにアクセスします。
「Download FileZilla Client」を選択します。
「Download FileZilla Client」をクリックします。
※自動的に環境に合ったダウンロードボタンが表示されます。
FileZillaの「Download」を選択します。
FileZillaがダウンロードされます。
ダウンロードされたzipファイル（赤枠）を開きます。
「FileZilla.app」をアプリケーションに移動させます。
zipファイルは削除してOKです。
アプリケーションから「FileZilla.app」を開きます。
「FileZilla.app」をダブルクリック後、下記の画面が表示されるので「開く」を選択します。
「FileZilla.app」が開きました。
「ウェルカム ダイアログ」は「×」or「OK」で閉じておきましょう。
次からいよいよ「【FTPソフト】FileZillaの使い方を初心者向けに解説」していきます。
それでは【FTPソフト】FileZillaの使い方を解説します。
「ウェルカム ダイアログ」を閉じた後からの続きとなります。
サーバーに接続する前の画面が表示されています。
画面には、ローカル環境とサーバー環境が表示されています。
ではサーバーに接続させていきます。
「サイトマネージャー」をクリックします。
「新しいサイト」を選択して「サイト名」を決めます。
サイト名は「mySite」にしました。
サイト マネージャーの「一般」の赤枠部分を入力（選択）します。
- ホスト(H):
FTPホスト名（FTPサーバー名）を入力します。 - ログオン タイプ(L):
通常を選択します。 - ユーザー(U):
FTPユーザー名（FTPアカウント名）を入力します。 - パスワード(W):
FTPパスワードを入力します。
「FTP情報」の確認方法を紹介します。
※エックスサーバーの場合になります🙇♂️
Xseverでレンタルサーバーを契約した際に「【Xserverアカウント】■重要■サーバーアカウント設定完了のお知らせ」などの件名でメールが送られてきたかと思います。
その中にFTP情報（上記画像の赤枠）が記載されています。
メールが手元にない方のための確認方法も紹介します。
「FTPパスワード（サーバーパスワードと同じ値）」は、サーバーパネルにログインする際に必要な「サーバーパネルパスワード」のことです。
パスワードを保存しますか？と尋ねられます。
「パスワードを保存する」を選択します。
「パスワードを保存しない」を選択した場合
サーバーへ接続したいサイトを選択後、「接続」を選択します（下記画像）。
すると、その度に「パスワード」の入力を求められるため手間です（下記画像）。
ですので、「パスワードを保存する」を選択しておいた方が手間が省けます。
パスワードの設定を変更する方法
「FileZilla」＞「設定」を選択します。
「インターフェイス」＞「パスワード」からパスワードの設定を変更できます。
「FTP情報」を入力後、「接続」を選択すると下記の画面が表示されます。
既に赤枠の部分に☑︎が入った状態で表示されていると思いますので、そのまま「OK」を選択します。
サーバーに接続されました。
新しいサイトを作成せずに接続するクイック接続も紹介します。
- ホスト(H):
FTPホスト名（FTPサーバー名）を入力します。 - ユーザー名(U):
FTPユーザー名（FTPアカウント名）を入力します。 - パスワード(W):
FTPパスワードを入力します。
上記の情報を赤枠に入力後、「クリック接続」をクリックします。
すると、サーバーに接続されます（下記画像）。
この方法は、新しいサイトを作成するわけではないため、毎回、「ホスト」「ユーザー名」「パスワード」を入力する必要があります。
使い所としては、一時的にサーバーに接続させたいサイトがある場合になるかと思います。
ローカル環境とサーバー環境間でアップロードとダウンロードを行います。
アップロードを行います。
アップロード：ローカル環境（自分のPCの中身） → サーバー環境へフォルダやファイルを移動させること。
- ローカル環境：「Users」＞「user」>「Desktop」＞「img」へと移動しています。
- サーバー環境：「hrdyuic.com」＞「public_html」＞「wp-content」＞「themes」＞「swell_child」へと移動しています。
imgフォルダを「ドラッグ＆ドロップ」で移動させます（下記画像）。
下記画像のように「ドラッグ＆ドロップ」でなくても移動させることができます。
ダウンロードを行います。
ダウンロード：サーバー環境 → ローカル環境へフォルダやファイルを移動させること。
- ローカル環境：「Users」＞「user」>「Desktop」へと移動しています。
- サーバー環境：「hrdyuic.com」＞「public_html」＞「wp-content」＞「themes」＞「swell」へと移動しています。
searchform.phpファイルを「ドラッグ＆ドロップ」で移動させます（下記画像）。
こちらも下記画像のように「ドラッグ＆ドロップ」でなくても移動できます。
ファイルを編集するためのテキストエディターの設定を行います。
「FileZilla」＞「設定」を選択します。
カスタム エディターを指定する方法を解説します。
僕は「Visual Studio Code.app」を使用しています。
最後に「OK」をクリックします。
これで、「Visual Studio Code.app」でファイルを編集できるようになりました。
編集したいファイルを決めて「表示/編集」を選択します。
「Visual Studio Code.app」でファイルを開けました。
今回は以上です。