FTPクライアントソフトの「WinSCP」のダウンロードとインストールからコードエディターVisual Studio Codeで直接編集する方法についての解説になります。
WinSCPを使用することによって、ローカルのVSCodeで編集保存した内容が即時FTP接続でファイル更新が行われるので、ファイルを一回一回手動でアップロードする手間が省けます。
WinSCPとは
Windows環境で動作するオープンソースのSFTP(SSH File Transfer Protocol)、FTP(File Transfer Protocol)、SCP(Secure Copy Protocol)クライアントです。WinSCPを使用すると、リモートサーバーへのファイル転送やファイルの管理を行うことができます。
以下にWinSCPの主な機能を記述しています。
グラフィカルユーザーインターフェース(GUI) | WinSCPは、直感的で使いやすいGUIを提供しています。ファイルの転送や操作をドラッグアンドドロップで行うことができます。 |
セキュアな通信 | WinSCPは、SFTPやSCPなどのセキュアなプロトコルを使用してファイルの転送を行います。データの暗号化やセキュアな認証をサポートしており、データの安全性が確保されます。 |
マルチプロトコル対応 | WinSCPは、SFTPやFTPの他にもSCPやWebDAVなど、複数のプロトコルをサポートしています。異なるサーバータイプに対して統一されたインターフェースでアクセスすることができます。 |
ファイルの同期と比較 | WinSCPには、ローカルフォルダとリモートサーバーのフォルダの同期や比較機能があります。変更されたファイルやディレクトリを特定し、必要に応じて同期することができます。 |
エディタ機能 | WinSCPには、テキストファイルの編集機能が組み込まれています。リモートサーバー上のファイルを直接編集し、変更を保存することができます。 |
ファイルの圧縮と暗号化 | WinSCPは、ファイルの圧縮や暗号化に対応しています。ファイルを圧縮してリモートサーバーにアップロードすることや、リモートサーバー上のファイルを暗号化してダウンロードすることができます。 |
ファイルの自動化 | WinSCPは、バッチファイルやスクリプトを使用してファイルの自動化を行うことができます。定期的なバックアップやファイルの転送など、繰り返し行う作業を自動化することができます。 |
WinSCPをダウンロード
「窓の杜」のサイトから「WinSCP」のインストールファイルをダウンロードして保存します。
![SCP/SFTP/FTPS対応のFTPクライアント](https://design-pull.com/wp-content/uploads/2022/08/bandicam-2022-08-22-14-05-46-320-1024x568.jpg)
エクスプローラのダウンロードに「WinSCP-5.21.2-Setup.exe」があるので、ダブルクリックでファイル開きます。
![WinSCP-5.21.2-Setup.exe](https://design-pull.com/wp-content/uploads/2022/08/bandicam-2022-08-22-14-12-39-134-1024x509.jpg)
WinSCPをインストール
使用許諾契約書の同意→許諾(A)をクリック。
![使用許諾契約書の同意](https://design-pull.com/wp-content/uploads/2022/08/bandicam-2022-07-15-13-55-24-097.jpg)
セットアップ形式→完全なアップグレード(F)(推奨)→次へ(N)をクリック。
![セットアップ形式](https://design-pull.com/wp-content/uploads/2022/08/bandicam-2022-07-15-13-55-30-469.jpg)
インストール準備完了→インストール(I)をクリック。
![インストール準備完了](https://design-pull.com/wp-content/uploads/2022/08/bandicam-2022-07-15-13-55-37-479.jpg)
インストール状況→インストール待ち
![インストール待ち](https://design-pull.com/wp-content/uploads/2022/08/bandicam-2022-07-15-13-55-41-186.jpg)
WinSCPセットアップウィザードの完了→完了(F)をクリック。
![セットアップウィザードの完了](https://design-pull.com/wp-content/uploads/2022/08/bandicam-2022-07-15-13-55-46-223.jpg)
WinSCP保存場所⇩
C:\Program Files (x86)\WinSCP
WinSCPの日本語設定
Tools→Preferencesをクリック。もしくは、ショートカットキー:Ctrl + Alt + p
![Tools](https://design-pull.com/wp-content/uploads/2022/08/bandicam-2022-08-22-13-33-36-427.jpg)
Languages→Japanese – 日本語(日本)→OKをクリック。
![日本語設定](https://design-pull.com/wp-content/uploads/2022/08/bandicam-2022-08-22-13-39-13-776.jpg)
メニューが日本語対応されていれば、日本語設定は完了です。
![日本語設定後](https://design-pull.com/wp-content/uploads/2022/08/bandicam-2022-08-22-14-49-25-036-1024x585.jpg)
WinSCPでVSCodeを開く方法
▪WinSCPではデフォルトで内臓エディタ⇩
![内臓エディタ](https://design-pull.com/wp-content/uploads/2022/08/bandicam-2022-08-22-15-21-27-475-1024x585.jpg)
WinSCPではデフォルトで内臓エディタが付属されていますが不便な部分が多いので、WinSCPを使用しながらVSCodeで編集できるよう設定します。
VSCodeのダウンロード方法⇩
VSCodeの保存場所を確認
VSCodeのパスを把握しておく必要があり、デフォルトの保存場所は下記のパスになります。
C:\Users\%USERPROFILE%\AppData\Local\Programs\Microsoft VS Code
エクスプローラーにパスを入力するとCode.exeのファイルがある所までいくことができます。
![Microsoft VS Code](https://design-pull.com/wp-content/uploads/2022/08/bandicam-2022-08-23-09-53-10-379.jpg)
Microsoft VS Code
VSCodeを登録する
ツール→環境設定をクリック。もしくはショートカットキー:Ctrl + Alt + p
![ツール→環境設定](https://design-pull.com/wp-content/uploads/2022/08/bandicam-2022-08-23-10-00-47-558.jpg)
エディタを選択。
![エディタ](https://design-pull.com/wp-content/uploads/2022/08/bandicam-2022-08-23-10-24-48-927.jpg)
追加(A)をクリック。
外部エディタ(E)を選択し参照(R)もしくは下記のパスを入力しOKをクリック。
"C:\Users\user\AppData\Local\Programs\Microsoft VS Code\Code.exe" !.!
![エディタの追加・編集](https://design-pull.com/wp-content/uploads/2022/08/bandicam-2022-08-23-10-27-20-272.jpg)
デフォルトで内臓エディタが記述されているかと思いますが、使用しないので削除(R)しておいても問題ありません。
![Codeエディタのみ](https://design-pull.com/wp-content/uploads/2022/08/bandicam-2022-08-23-10-24-48-927-1.jpg)
VSCodeの設定はこれで完了で、後は編集したいファイルをダブルクリックをしてVSCodeが起動すればOKです。