[SublimeText 3] SFTPでページ更新が劇的に変わる！

2016.03.24
2018.12.01

どうもこんばんは！スタバとかでマック開いて足組みながらコーヒー飲む事すら恥ずかしくて出来ない意識低い系こうじです。

今回は作業効率が劇的に変わるSublimeTextのプラグイン『SFTP』をご紹介したいと思います。

SFTPとはなんぞや

SFTPとは、簡単に言うとFFFTPとかNextFTPのようなFTP接続が出来るプラグインです。

単純に使うとSublimeTextはテキストエディタなので、そんな機能は持っているはずがないのですが、『プラグイン』という拡張機能を利用してSublimeTextにFTP機能を持たせる事が出来るのがこの神プラグイン『SFTP』なのです！

SFTPを導入しよう

まずはインストール

まずはプラグインを導入しましょう。
導入は『Install Package』で検索すると出てきます。
サクッと入れてしまいましょう！

Install Packageについてはこちらの記事を参考にしてみてくださいね。

[Sublime Text 3] とりあえずここまでやっとけばOK。SublimeText3の初期準備

プロジェクトを作成

SFTPを実装するにはまずプロジェクトを作成して下さい。
実際はSFTPファイルの設定ファイルさえあれば繋がるのですが、作成して置くと管理的にも便利です。ぜひ作成しましょう。

[SublimeText 3] プロジェクトを使ってファイル管理を快適にしよう

FTPに接続しよう

設定ファイルを編集

それでは早速、設定ファイルを編集しましょう！

設定は、ルートとして管理したいフォルダを右クリックし『SFTP』＞『Map to Remote…』をクリックします。

設定ファイルを編集

各行の設定内容は下記の通りです。
基本的に使用しそうな部分のみ抜粋しています。

基本設定

[js]
// 接続のタイプ。通常はftp。ポンパレProとかならftps。
"type": "sftp",

// アップロードする前に保存されていない場合、保存するかどうか。
"save_before_upload": true,

// ファイルを保存したら、自動でアップロードをするかどうか。
// 便利だけど、間違って保存しても自動で行っちゃうから注意！
"upload_on_save": false,

// ファイルを開いた時にサーバー上のファイルが新しかったら自動でダウンロードしてくれる。
"sync_down_on_open": false,

// 同期時に削除するファイルはスルーするかどうか。
"sync_skip_deletes": false,

// 更新ファイル日時が同じ場合のファイルの扱い。
"sync_same_age": true,

// ダウンロード時に確認をするかどうか。
"confirm_downloads": false,

// 接続時に確認をするかどうか。
"confirm_sync": true,

// サーバー上のファイルより古いもので上書きする場合に確認するかどうか。
"confirm_overwrite_newer": false,

// サーバーのホスト名。
"host": "example.com",

// ユーザー名。
"user": "username",

// パスワード。
"password": "password",

// ポート番号。(22以外の場合はコメントアウトを外す必要あり)
//"port": "22",

// サーバー側のルートフォルダを指定。
"remote_path": "/example/path/",

// アップロードファイルとして除外するファイルを正規表現で指定。
"ignore_regexes": [
".sublime-(project|workspace)", "sftp-config(-altd?)?.json",
"sftp-settings.json", "/venv/", ".svn/", ".hg/", ".git/",
".bzr", "_darcs", "CVS", ".DS_Store", "Thumbs.db", "desktop.ini"
],
[/js]

各モール別設定

せっかくEC系の情報を充実させたいので、各ECサイトのFTP設定を作ってみました。
コピペで行けるレベルで作りました。

楽天GOLD

細かい設定は各自変更。
アカウント名とパスワードも任意で変更してください。

[js]
{
// sftp, ftp or ftps
"type": "ftp",

"save_before_upload": true, // アップロード前に保存。
"upload_on_save": false, // 保存時に自動でアップロードしない。
"sync_down_on_open": false,
"sync_skip_deletes": false,
"sync_same_age": true,
"confirm_downloads": false,
"confirm_sync": true, // 接続時に確認。
"confirm_overwrite_newer": true, // 更新日時が怪しいファイルは上書き確認。

// Remote
"host": "ftp.rakuten.ne.jp",
"user": "accountname", // 店舗アカウント名を入力。
"password": "123456", // FTPパスワードを入力。
"port": "16910",
"remote_path": "/",

"ignore_regexes": [
".sublime-(project|workspace)", "sftp-config(-altd?)?.json",
"sftp-settings.json", "/venv/", ".svn/", ".hg/", ".git/",
".bzr", "_darcs", "CVS", ".DS_Store", "Thumbs.db", "desktop.ini"
],

"connect_timeout": 30,
"ftp_passive_mode": true,
}
[/js]

Yahooトリプル

細かい設定は各自変更。
アカウント名とパスワードも任意で変更してください。

ただYahooトリプルだけなぜかつながりが悪いです。
初回は通常なんですが、一度タイムアウトした後が非常にもっさりです。

[js]
{
// sftp, ftp or ftps
"type": "ftp",

// Remote
"host": "ftp.geocities.jp",
"user": "accountname", // 店舗アカウント名を入力。
"password": "123456", // FTPパスワードを入力。
"port": "21",
"remote_path": "/",

"connect_timeout": 30,
"ftp_passive_mode": true,
}
[/js]

操作方法

勿論サイドバーからファイル名を右クリックでもFTP関連操作は可能ですが、せっかくショートカットも用意されていますので、そちらで慣れるとより効率の良さを実感できると思います！

特にファイルのアップロードとダウンロードはショートカットを使うだけで、一気に効率が変わります。是非使ってみてください！

ちなみに、ショートカットは『Preferences』＞『Package Settings』＞『SFTP』＞『Key Bindings』から参照＆設定可能です。

分かりづらいかもしれませんが、CTRL＋ALTはずっと押しっぱなしです！

ファイルをアップロード

CTRL＋ALT＋Uを押した後にF

フォルダーをアップロード

CTRL＋ALT＋Uを押した後にR

アップロードをキャンセル

CTRL＋ALT＋Uを押した後にX

ファイルをダウンロード

CTRL＋ALT＋Uを押した後にO

フォルダーをダウンロード

CTRL＋ALT＋Uを押した後にE

ファイルをモニターする

CTRL＋ALT＋Uを押した後にM

サーバー上のファイルを参照

CTRL＋ALT＋Uを押した後にW

保存がされたら自動でアップロードも出来るよ

例えばsass等でスタイルシートを作成している場合、『ファイルをコンパイル』＞『cssファイルを出力』＞『出力されたcssファイルをアップロード』という流れになると思いますが、ファイルをモニターしておくと、保存されたら自動でアップロードされる様に設定する事も可能です。
これは便利！
『upload_on_save』の個別バージョンみたいな感じでしょうか。

ただ、モニターするファイルは開いておく必要があります。
開いているファイルを右クリックして下記の項目をクリックしてください。