FTPソフトを経由せずに、拡張機能「SFTP」でVS Codeからサーバにアップロードする方法。
いちいちFTPソフトを立ち上げるの面倒だなっていう人向け。みんな、楽に個人サイトを作ろう！
- 事前準備①VS Codeインストール
- 事前準備②ロリポでSSHの設定
- 「SFTP」の設定「sftp.json」ファイルの作成ここまで慣れてれば作業時間10分ぐらい
すでにVS Codeを利用している方は「SFTP」の設定まで飛んで。
- テキストエディタ：VS Code
- サーバー：ロリポップ/ハイスピードプラン
- OS：Windows
- SSH認証方式：パスワード認証。※公開鍵を使わない方法です。
VS Codeって？
正式名称Visual Studio Code。Microsoftが無償で提供してるテキスト/コードエディタ。拡張機能によって自分でカスタムできることが最大の特徴。
今回はVS Codeに拡張機能「SFTP」を入れて、個人サイトの更新を手軽にやろ！っていう話。
メモ帳でhtml書いてるって人は、これを機にエディタをVS Codeにのりかえるのをおすすめ。便利だよ。
議事録もVS Codeで書くし、なんなら同人誌のネームもこれでやっている。拡張機能で校正が一瞬で終わる。楽。創作用VS Code拡張機能も最後の方に紹介してる。
事前準備①｜VS Codeのインストール
上記サイトからDLできる。
WindowsでもmacOSでもOSは問わない。小賢しいポイントは、ブラウザのプレビューにMicrosoft Edgeをおすすめしてくるところ。こういうところは可愛いね。
日本語化
ついでに日本語化していく。拡張機能の［Japanese Language Pack for Visual Studio Code］をインストールする。
□4つのアイコンをクリック→出てきた検索窓に[Japanese]を入力
私はすでにインストール済みなので画像が用意できないけど、インストール後[Restart Now]と表示されたらVS codeを再起動する。
事前準備②｜ロリポップでSSHの設定
SSHが使える環境で利用推奨。
ロリポップ！
はスタンダードプラン以上でSSH利用可能。※値段とセキュリティはトレードオフなので、安全は金で買ってください。
SSHを有効にする
SSHは初期設定で無効になっているので、有効にする。
管理画面にログイン→[サーバーの設定]→[SSH]→有効にする
サーバー/アカウント/ポート/SSHパスワードは、後に必要なのでメモしておく。SSHパスワードは自動生成。長いよ。
フルパスの確認
[ユーザー設定]→[アカウント情報]→[フルパス]の項目を確認
“remotePath”:に必要。
ルートディレクトリであればこのままコピペでOK。WordPressの子テーマを編集するときなどで、フォルダを作ってる場合はweb/〇〇になる。
「SFTP」のインストールと設定
ここからが本題。
左メニューの□4つ並んだアイコンクリック→検索窓に[SFTP]入力→いくつか種類が出てくる。
liximono氏は2019年で開発が止まっていて非推奨。フォークされた日付が新しいNatizyshunk氏を選択。
「フォーク（folk）する」：本家のコードを元に引き継いで開発している状態。
WPのプラグインもしかり、開発が止まったものはセキュリティが弱くなるので使わない。
1.コンフィグファイルの作成
ワークスペースの設定
いつも作業しているサイトデータが入ったフォルダを開いてワークスペースとする。フォルダをVS Codeにドラッグでもいい。
このフォルダにコンフィグファイルを作っていく。
左メニューの一番上（エクスプローラ）をクリック→いつも作業してるフォルダ構成が見えるはず。
[sftp.json]ファイルの作成
Ctrl + Shift + Pで[コマンドパレット]表示→[SFTP: Config]と入力
直下に[.vscode]フォルダ、その中に[sftp.json]ファイルが作成される。予めいくつかのプロパティが書かれているので書き換えていく。
.jsonの読み方は「ジェイソン」で、普段あまりお目にかからない。JavaScriptの値が書いてある定義ファイルってやつ。
→拡張子と隠しファイルの表示
ファイルが見つからない？ フォルダ名の先頭に「.（ドット）」が付いてるので、隠しファイルになっている。ついでに拡張子も表示されるようにWindows設定を変更。
[タスクバー]→[コントロールパネル]→[エクスプローラーのオプション]→[表示]タブ
- [隠しファイル、隠しフォルダー、および隠しドライブを表示する]にチェック
- [登録されている拡張子は表示しない]のチェックを外す
2.サーバーの接続情報
sftp.jsonファイルにコピペして。例はロリポ/パスワード認証の場合。
{
"name": "任意の名前",
"host": "ssh.lolipop.jp",
"protocol": "sftp",
"port": 2222,
"username": "xxxxxSSHのアカウント",
"password": "xxxxxSSHの長いやつ",
"remotePath": "/home/examplexxxxxxxx/webフルパスのやつ",
"ignore": [".vscode","sftp.json","xxxxx除外フォルダ名"],
"uploadOnSave": false,
"useTempFile": false
}パスワード認証接続
- name: 任意の名前/自分がわかればいい
- host: ホスト名ロリポなら”ssh.lolipop.jp”
- protocol: ”sftp”を指定（もう令和にftpプロトコルなど使うな！）
- port: ロリポは2222（末尾が”22″になる）
- username: SSHのアカウント
- password: SSHのパスワード
- remotePath：サーバーの場所 アカウント情報のフルパスで確認
- ignore: アップロード除外するファイル
- uploadOnSave：保存したら自動でアップロードするかどうか
- useTempFile：アップロード最中の処理
※passwordを空欄にしておくと、アップロード時に毎回パスワードを聞かれる。sftp.jsonにパスワードを記載しないほうがセキュリティはそりゃ高くなるが、利便性は下がる。
ignore【アップロードから除外するファイル】
- .vscode：除外対象はフォルダ内のsftp.jsonファイル。ローカルでしか必要ない。
- .DS_Store：macOSなら追加。Winユーザーは不要。
「.DS_store」ファイルは、macOSを使っていると自動的に作成されるmeta情報。フォルダ内一括アップすると勝手にアップロードされてしまう。隠しファイルになっているから厄介。
私の場合は00_work（過去のデータ）フォルダとill.html（ずっと作りかけ状態のイラストページ）が除外になってる。
uploadOnSave
ファイル保存と同時に自動でサーバーにアップロードするかどうか。
trueで自動アップロード、falseにすると手動。
まだ公開してないor概ね完成していて誤字修正ぐらいならtrueでもいい。慣れるまでは、安全を取って手動更新がいいと思う。
「SFTP」のキモがこの機能で、とてつもなく便利なんだけどね……。
useTempFile
アップロード中のファイルにユーザーがアクセスできないようにする設定。上の自動アップロードが機能を使うならtrueに、手動ならばデフォルトのfalseのままでOK。
→公開鍵/秘密鍵で接続【おまけ】
SSH接続の詳細記事をてがろぐにアップしてあります。
ロリポップで公開鍵を作る場合はTera Termを使う。ここでは説明しない。今は接続方法が複数あるってことだけを覚えておけばいい。
↑公開鍵認証の場合のコンフィグ追記
3.手動アップロードの方法
ファイルまたはフォルダを右クリック→[Upload File]でアップロード。成功すると左下の部分に「done」と出る。
画像をアップロードもできる。imgフォルダごとアップしよ。
FTPアプリと同じように[Download File]でダウンロードも可能。
ローカルとサーバーのファイルを比較
ファイルを右クリック→［Diff with Remote］を選択
ローカルとサーバーのファイルを比較して差異が確認できる。
サーバ上のファイルを確認
[□4つアイコン]の下に、[雲アイコン]ができてるのでそれをクリック→サーバにあるファイルが表示される。削除やDLができる。
.htaccessやロボテキをさくっと書き換えたいときに便利。いちいちhtaccess.txtにしてFTPでアップして拡張子書き換えて……をしなくて済む。
拡張機能のセキュリティリスク【重要】
sftp.jsonファイルを平文で保存している状態。ここにユーザー名、パスワード等の情報が書かれてる。
自分のPCで自分だけが使う分には平分で構わない。他の誰かと共有PCの場合は、パスワードを空欄にしておき、作業のときだけ入力でも構わない。
「パスワードが書かれた平分テキストファイル」の取り扱いに注意が必要なのは、この前のピク◯ラの騒動でみんなわかってる。ピク◯ラはソルトなしで平文ではなかったが……。
sftp.jsonファイルを絶対にサーバーにアップしてはいけない。
- 自動アップロードをfalseにする
- 除外設定を確認する
この2つを必ず確認しjsonファイルを守ろう。
↑ロリポップの『VSCode ご利用のお客様へ』のお知らせ。
ロリポは不意にアップされたとしても403表示になる。こんなお触れをわざわざ出すぐらいには、意図せずアップされてるんだと思う。気をつけたい。
VSCodeはシェアも高く、拡張機能も充実しているため、攻撃対象になりやすい。
WordPressもそうだけど、無料で利用者が多いものを狙われるのであり、このサービスが脆弱なわけでは無い。利用者の意識が脆弱なだけ。気をつけたい。
拡張機能を使うときは、DL数、★と評価した人数、最終更新日を確認して。開発が2年以上止まってないか？ 頻繁にアプデされているか？ 致命的なバグはないか？等
似たようなロゴでスペルだけ違うアプリにも注意してほしい（これはスマフォアプリもそう）folkの文字があるものは引き継いでるけど、そうじゃないのに似てるやつはうっかりしちゃう。
SFTPのバグ（かなぁ？仕様かなぁ？）
試しにtest.htmlが入ったtestフォルダを作り、ignoreにtestフォルダを除外設定にしてみる。この命令ならtestフォルダとその中のファイルは除外されるはず。
そのはずなのだが……。
testフォルダは指示通りENOENTエラーでアップされないが、test.htmlを右クリックで直接アップロードすると、アップされてしまう！ もしかしたらこれは仕様。次の更新で修正されるかなぁ？
こういった予期せぬことがあるため、uploadOnSaveをfalseにして手動がおすすめ。慣れたら自動アップにしような。
サーバーへの接続方法｜復習
もう50年以上前のFTPプロトコルでネットとつながるな。FTPSやSFTPに対応しているやつを使え！
創作者向けVS Codeオススメ拡張機能
htmlコードより、創作活動のテキストエディタとして活用している。2つとも無料で使えちゃう。小説書きさんにおすすめ。漫画描きはプロットに利用しよう。
コードの補助として、ChatGPTを拡張機能として入れることもできる。それは流石に有料。使い勝手が良いのを見つけたら紹介するね。
Novel Writer
小説を執筆するための機能拡張。プロットとかネタ出しとかこれです。縦書きビューがなかなかいい感じ。
縦組プレビューは、セリフ吹き出しサイズの参考になる。長セリフを書かなくなる。
テキスト校正くん
創作ではなくビジネスメール文章向けの校正になっている。
英文表示の名詞はどこが大文字だったかあやふや。漢字の開き統一に使っている。サーバ/フォルダ等の長音はない方が好み。ディベロッパーは長音。
助詞の連続は、エンゲージとifの感想記事でめっちゃ引っかかる。エンタメに正しさが必要ないことを分からせに来る。
所感
わざわざFTPソフトを立ち上げる必要がなくなったため、作業効率がアップ！面倒くさいな～ってことはだいたい先達が解決してる。
ロリポのことしか知らないので、他サーバ利用者が書き直してくれると助かる。リトルサーバーがリーズナブルな値段でSSH/公開鍵認証ができるので、該当してる人ができるかどうかやってみてほしい。
VS Codeで便利に更新する方法もあるよ～ってだけ。横着して楽に個人サイトと運用しよ！
Webブラウザ版「VS Code」
実はインストール不要のWebブラウザ版もある。「https://vscode.dev/」にアクセスするだけで利用できる。Web版はIntelliSenseや機能拡張が未対応。今回やろうとしてるSFTPは利用できない。
