WinSCPの基本操作とアップロード方法【ロリポップでの実例つき】

WinSCPで一番大事なのは、難しい機能を覚えることではなく、左側と右側の意味を間違えないことです。左側は自分のパソコン、右側はロリポップなどのサーバーです。

この記事では、HTML、CSS、PHP、templates フォルダなどをサーバーへ上書きアップロードする基本操作を、実際のWebサイト更新に近い形でまとめます。

基本ルール

左側はローカル、自分のPCのファイル
右側はリモート、ロリポップ上のファイル
アップロードは左から右へ送る操作
ダウンロードは右から左へ戻す操作
同じ名前のファイルは上書き確認が出る

WinSCPの画面の見方

WinSCPのコマンダー画面では、左右にファイル一覧が表示されます。Webサイト更新では、この対応を覚えておけば迷いにくくなります。

画面	意味	今回の例
左側	ローカル側。自分のパソコン	`C:\webdev\copicode`
右側	リモート側。ロリポップのサーバー	`/copicode`
下の一覧	今開いているフォルダの中身	`index.php`、`assets`、`templates` など

アップロード先は「サイト直下」を開く

ファイルをアップロードする前に、右側でサイト直下を開きます。サイト直下とは、トップページの index.php や assets、includes、templates が見えている場所です。

/copicode
  index.php
  assets/
  includes/
  templates/
  .htaccess

この状態で、左側の templates フォルダを右側へアップロードすると、正しく /copicode/templates が更新されます。

フォルダごとアップロードする方法

フォルダごとアップロードする時は、右側を1階層上にしておくのがコツです。たとえば templates フォルダをアップロードするなら、右側は /copicode を表示した状態にします。

左側で C:\webdev\copicode を開く
右側で /copicode を開く
左側の templates フォルダを選ぶ
右クリックして「アップロード」を選ぶ
上書き確認が出たら、内容を確認して上書きする

正しいアップロード後の形

/copicode/templates/winscp/
/copicode/templates/css/
/copicode/templates/javascript/

間違った形

/copicode/templates/templates/winscp/

右側で /copicode/templates を開いた状態で、左側の templates フォルダをアップロードすると、上のように templates/templates になりやすいです。

ファイルだけ上書きする方法

トップページやCSSだけを更新する場合は、必要なファイルだけを上書きします。

更新したいもの	ローカル側	サーバー側
トップページ	`index.php`	`/copicode/index.php`
デザイン	`assets/css/style.css`	`/copicode/assets/css/style.css`
共通SEOタグ	`includes/head-tags.php`	`/copicode/includes/head-tags.php`
WinSCP記事	`templates/winscp/...`	`/copicode/templates/winscp/...`

上書き確認が出た時の考え方

同じ名前のファイルがすでにサーバーにある場合、WinSCPやFileZillaは上書き確認を出します。自分で編集した最新版を反映したい場合は、基本的に上書きでOKです。

上書き前に注意するもの

includes/db_config.php のようにサーバー固有の接続情報を含むファイルは、ローカルと本番で内容が違うことがあります。今回のように意図して変更した時だけ上書きしてください。

アップロード後の確認

アップロードできたら、ブラウザでページを開いて確認します。変わっていない時は、アップロード失敗ではなくキャッシュやアップロード先違いのことがあります。

対象ページを開く
Ctrl + F5 で強制再読み込みする
CSSだけ変わらない時は、CSSのURLに付いている ?v=2.6 の番号を上げる
サーバー側で更新日時が変わっているか確認する
別フォルダへアップロードしていないか確認する

失敗しにくい更新手順

作業に慣れるまでは、次の順番で進めると事故りにくいです。

ローカルで編集する
PHPファイルなら php -l で構文チェックする
アップロードするファイルをメモする
サーバー側で正しいフォルダを開く
必要なファイルだけ上書きする
ブラウザで確認する

初心者が一番間違えやすいアップロード先

フォルダごとアップロードする時は、右側で「そのフォルダを置きたい親フォルダ」を開きます。templates フォルダを送るなら、右側は /copicode のようなサイト直下です。

正しい:
/copicode/templates/winscp/...

間違い:
/copicode/templates/templates/winscp/...

アップロード後はブラウザで対象ページを開き、Ctrl + F5 で強制再読み込みしてください。