

などの疑問や悩みを解決してまいります。
Webページを制作するのにHTMLファイルやCSSファイルなど、ページを構成するファイルを用意する必要がありますよね。
Web制作初心者からするとファイルを用意しても、どうやってURLに反映させているのかわからないと思います。

反映させるために「FTP」という通信方法を利用するのですが、聞き慣れない言葉だけになんとなく難しそうな感じしますよね...。
今回はこのFTPについてと、FTPソフトの代表例の1つでもある「WinSCP」の使い方を解説します。

そもそもFTPとは何?

FTPは、「File Transfer Protocol」(ファイル転送プロトコル)の略称です。


FTPは、ファイルをサーバーとクライアントの間で送受信するための手段を提供し、主にウェブサイトのファイルアップロードやダウンロード、ファイルの共有、バックアップなどの目的で使用されます。

FTPソフトとは?どんなものがある?
FTPソフトとは、FTPを使用してコンピュータ間でファイルを送受信するためのツールです。
ユーザーがリモートサーバーやホストコンピューターに接続してファイルを操作するのを助ける役割を果たします。
FTPソフトの代表例はFileZilla、WinSCPなどが挙げられます。

WinSCPのインストール方法
それではインストール方法を解説していきます。
基本画像通りの手順に従い操作していけば問題なくインストールできるかと思います。
①窓の杜サイトにアクセス
まずはWinSCPのインストーラーをダウンロードする必要があります。
ダウンロードするために窓の杜のサイトにアクセスします。
②「窓の杜からダウンロード」をクリック
アクセスできましたら、以下赤枠の「窓の杜からダウンロード」のボタンをクリックします。

③ダウンロードが完了するまで待つ
「窓の杜からダウンロード」のボタンをクリックすると、ダウンロードページに移動します。
以下赤枠のようにダウンロードの開始を知らせる文言が表示されますのでダウンロードが完了するまで待ちましょう。

④「WinSCP-6.1.1-Setup.exe」をダブルクリック
ダウンロードが完了したら、ダウンロード先ディレクトリに移動し、「WinSCP-6.1.1-Setup.exe」をダブルクリックします。


⑤インストールモードを選択
ダブルクリックするとインストーラーが起動します。
まず最初に「インストールモードを選択してください」と出ますので、「すべてのユーザー用にインストール」を選択します。

⑥使用許諾契約書の同意
次に使用許諾契約書の同意画面が出てきますので、確認したら「許諾」をクリックします。

⑦セットアップ形式を選択
セットアップ形式を選択します。特にこだわりがなければ「標準的なインストール」を選択して「次へ」をクリック。

⑧インターフェイスオプションを選択
インターフェイスオプションを選択します。
ここは後でも変更することができるので「コマンダー」を選択し、「次へ」をクリックします。

⑨インストールする
ここまで来たらインストールの準備ができたので「インストール」をクリックします。

インストールが完了すると以下の画面にが表示されます。
これでインストールは完了です。



WinSCPの使い方
ここからはWinSCPを実際に使用する方法を解説していきます。
①インストールしたWinSCPを開く
インストールしたWinSCPを開きます。



②FTP情報を入力していく
開くと以下のような画面が表示されます。

「ログイン」と表示されているダイアログボックスにサーバーへ接続するためのFTP情報を入力していきます。



契約しているサーバーによって確認方法が異なりますが、レンタルサーバーの「XSERVER」ですとサーバーパネルから確認することができます。

③FTP情報を入力したら保存
FTP情報が確認できましたら、それぞれの項目に入力していきます。
入力できたら「保存」をクリックします。

④セッション名の設定、パスワードの保存、ショートカット作成
保存するとセッション名の設定、パスワードの保存するかどうか、ショートカット作成するかどうか決める画面が表示されます。

セッション名
セッション名とは、接続先の名前を決めることができます。
たとえばポートフォリオサイトなら「ポートフォリオ」、案件先のサーバーであれば案件名で登録するなど自分がわかりやすいセッション名を設定しましょう。
今回は自分のサーバーなので簡易的に「みつた」とします。
パスワードの保存の設定
パスワードを保存することで、接続するたびにパスワードを入力する手間が省けます。
しかしパスワードの保存は「推奨はしない」となっているので、ここは個人の判断にお任せします。
ショートカットの作成
デスクトップにショートカットを作成することで、ショートカットからダイレクトでサーバーに接続することができます。
よく接続することがあるようなサーバーだと便利です。

これらの設定ができたら「OK」をクリックします。
⑤サーバーにログインする
接続先を選択したら「ログイン」をクリックします。

パスワードを保存しない設定にしている場合は、ここでパスワードを入力します。

接続が完了すると以下のような画面になります。

⑥データのアップロードとダウンロードの方法
上記の画面は左側が自分のPC(ローカル)の内容、右側が接続先のサーバー(リモート)の内容となります。
データをアップロードする場合はローカルパネルのデータをのリモートパネルにドラッグ&ドロップ、逆にサーバー内のデータをダウンロードしたい場合はリモートパネルのデータをローカルパネルにドラッグ&ドロップするだけです。




その他の操作について
ここまではサーバーへの接続方法、データのアップロード、ダウンロード方法について解説しました。
基本的にこれだけの操作だけで問題ないのですが、その他の操作方法について一部紹介します。
タブごとに別のサーバーを接続する方法
WinSCPではタブごとに複数のサーバーに接続することができます。
以下赤枠の「新しいタブ」をクリックします。

すると新しく「ログイン」のダイアログボックスが表示されるので、接続先のFTP情報を入力してログインします。
ダークモードにする方法
見た目をダークモードに変更することも可能です。
①オプション ⇒ 環境設定をクリック
まず以下赤枠の「オプション」をクリックし、その中に「環境設定」があるのでこちらをクリックします。

②インターフェイステーマで「黒」を選択
環境設定のダイアログボックスが表示されるので、その中のインターフェイステーマで「黒」を選択します。
選択しましたら「OK」をクリックします。

設定すると以下のようにダークモードに変更することができます。


インターフェイススタイルの変更
インストール前のユーザー初期設定のときにインターフェイススタイルを設定したのを覚えていますでしょうか。
そのときに「インストール後でも変更できる」ことをお伝えしました。
今回はその方法について解説していきます。
①オプション ⇒ 環境設定をクリック
まず以下赤枠の「オプション」をクリックし、その中に「環境設定」があるのでこちらをクリックします。

②外観 ⇒ エクスプローラーを選択(最初に選択していない方を選択)
次に外観をクリックするとユーザーインターフェイスを選択する画面が現れますので、最初に選択していない方を選択します。
今回最初に「コマンダー」を選択していましたので、「エクスプローラー」に切り替えたいと思います。
選択したら「OK」をクリックしてください。

③一度WinSCPを閉じる
次回起動後に反映されますので、一度WinSCPを閉じて再度開きます。
④再度WinSCPを開く
閉じたWinSCPを再度開きます。
すると以下のようにローカルパネルが表示されなくなり、リモートパネルのみ表示されるようになりました。



⑤エクスプローラーからアップロードとダウンロードを行う
WinSCPはリモートパネルからでなくてもエクスプローラーからアップロードとダウンロードを行うことができます。
WinSCPを画面半分のサイズにして、エクスプローラーをもう半分のサイズに縮小します。

ワークスペースの保存
例えば複数のサーバーに接続してアップロードやダウンロードを行うことが多い場合、その複数接続している状態をワークスペースとして保存することができます。
例えば以下のように複数のサーバーを接続していたとします。

WinSCPを閉じた後も、接続していた複数のサーバーをすぐさま呼びだすことができます。

①タブ ⇒ ワークスペースの保存を選択
メニューからタブを選択し、その中にある「ワークスペースの保存」をクリックします。

ワークスペースの設定
まずはワークスペースの名前を決めます。
名前を決めた後はデスクトップにワークスペースのショートカットを作成するかどうかを設定します。
次にワークスペースを自動的に保存するかを設定します。
例えば新たにWinSCPを開いて、別のサーバーを接続してWinSCPを閉じたときにその接続したサーバーを自動保存してくれます。

設定を終えたら「OK」をクリックして完了です。
ショートカットを作成しているならばデスクトップにワークスペースのショートカットがあるはずです。
