超おすすめ!SublimeTextでファイルをアップロードする「SFTP」導入から機能まで解説

2014.12.25 エンタメ

超おすすめ!SublimeTextでファイルをアップロードする「SFTP」導入から機能まで解説

SublimeTextでコーディングしたファイルをFTP/FTPS/SFTPの暗号化形式でアップロードできるパッケージを紹介します。

急ぎの案件の時は超おすすめ!「Browser Refresh」よりも即座に効率よくテストサーバーに反映できます。

ちなみに今回は「SublimeText3」を使っている方向けです。

FTPクライアント機能パッケージ「SFTP」

前述のとおりですが、ファイルのアップロードがSublimeText上で簡単に行えてしまいます。

とりあえず、まずはインストールしてみましょう。

SublimeTextを起動し[ctrl + shift + p]>「ins」と入力し、絞られた項目から「install Package」を選択します。

そのまま「SFTP」と入力すればインストールされます。

アップロード先のサーバーの設定

アップロードを行いたいファイルがあるフォルダーをSublimeText左横にドラッグします。

フォルダ上で右クリックし「SFTP/FTP」とあるのでカーソルを合わせ「Map To Remote」をクリックすると、設定用の.jsonファイルが開きます。

1st

以下の項目だけ変更すればOKです。

what

type プロトコルの種別。SFTP,FTP,FTPS
host サーバーのホストURL
user FTPユーザー名
password FTPパスワード
remote_path サーバーのディレクトリパス(ルートドメインから見てそれ以下)
connect_timeout 接続タイムアウトまでの秒数

passwordとportは最初コメントアウトされていますが、スラッシュを外して入力しておくことで、毎回聞かれなくて済みます。

設定がよくわからない って方は、ロリポップ!の場合ですが、どこにどの項目を設定するのか載せておきますね。step21

 

その他の項目は適宜に応じて設定して下さい。詳しくはよくわかりません…

「SFTP」でアップロードしてみよう

ここまでの設定が済んだら、アップロードが出来る状態になっているはずです。

対象のファイルを左のプロジェクトフォルダーから選び、右クリックします。
SFTP/FTP」とあるので、その先の「Upload File」をクリックします。

1

サーバーへの接続状況が画面下部に出ます。
ここで、設定がうまく言っていれば、successと出てアップロード完了です!

ちなみにフォルダを右クリックして同様の手順を踏むと「Upload Folder」があり、フォルダごとまとめてブン投げることが出来ます!

さらに便利機能!保存するだけでアップロードできる

これもサーバーの設定がうまく言っていれば、の話ですが、
対象のファイルを右クリックして「SFTP/FTP」から「Monitor File(Upload on External save)」をクリックします。

するとそのファイルは、SublimeTextを閉じるまで、ファイルを保存するだけでサーバーへアップロードされるようになります。

1success

 

サーバー上の同ファイルをローカルファイルに書き換え

アップロードとは逆に、「Download File」という項目があります。

想像がつくかもしれませんが、サーバー上の同ファイルをローカルに上書きします。
「うわ~!やりすぎた~!」ってときも、これで元通りです。

ただ、もちろん「Monitor File(Upload on External save)」の対象となっている場合はサーバー上のファイルも同じものですのでくれぐれもご注意を。

サーバー上の同ファイルを消去

Delete Remote File」で、サーバー上の同ファイルを削除できます。

無駄にアップロードしてしまったCSSやら、紛らわしくなる前に削除できちゃいます。

Delete Remote and Local File」でサーバー上、ローカルの両方のファイルを削除できます。

サーバー上のファイルの内容に同期する

対象のファイル/フォルダを、サーバー上の同ファイル/フォルダに同期することが出来ます。
Sync Both Direction」をクリックして下さい。

ローカルファイルが、サーバ上のものに置き換わります。

sync

 

解りづらいのですが、要するに、
サーバー上のファイルよりもローカルファイルのほうが内容が多い状態、ということです。

ここで「Sync Both Direction」!

sync_after

test.htmlとgetme.htmlはサーバー上のファイルの内容に同期されました!

真ん中のsynclocaltoRemote.htmlは同期に失敗していますが、気にしません。

同様に、「Sync Local -> Remote…」と「Sync Remote -> Local 」がありますが、どちらに合わせて同期するか、ということですね。

結構危険な命令なので、気をつけましょう。

真打ち機能登場!サーバー上のファイルとローカルファイルの差分を表示する

なんとサーバー上のファイルとローカル上のファイルを照合して、差分を表示してくれます。

Diff Remote File」をクリックして下さい。
すると、こんな具合でサーバー上のファイルとローカルファイルの差分を出力します。

sabun

すごい!


 

いかがでしたか?

これで作業効率も上がる気がします!

ただし、勢い余ることとパッケージの設定には十分気をつけましょう。

 

でわ!

 

プロフィール

東京でWebデザイナー・コーダーとして、フロントエンド的なことからグラフィックデザイン的なことをして、ごにょごにょと小さく活動中。Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったり、主に散歩しています。だいたいラーメンを食べて帰ってくる、そんな過ごし方です(都内のオススメ散歩コース募集中!)。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。