大幅なサイトメンテナンスを行った為、一部「画像が表示されない」などの可能性があります。画像が表示されない場合は F5 などでページを更新してみて、それでも表示されない場合はご一報お願い致します。

【2017年版】Sublime Text 3の神パッケージ「SFTP」の設定と使い方[ST3シリーズ03]

【2017年版】Sublime Text 3の神パッケージ「SFTP」の設定と使い方[ST3シリーズ03]

今回で3弾目になります「Sublime Text 3シリーズ」ですが、今回はSublime Text 3の中でも、私がかなりお世話になっているプラグイン(パッケージ)「SFTP」設定方法と使い方をご紹介します。

もはや私にとって「このパッケージがないとSublime Text 3でも使う気になれない」という程便利なパッケージなので、是非本記事を参考に使ってみて下さい☆

※今回はロリポップ!」を使ってる場合の「SFTP」の設定方法と使い方をご紹介します。

「Sublime Text 3シリーズ」は他にも以下の記事がありますので、初めてSublime Text 3を使うという方は最初から順番にご覧頂く事をおすすめします。

【2017年版】Sublime Text 3のインストールから日本語化の設定まで[ST3シリーズ01]
テキストエディタは数多くありますが、その中でも「恋するエディタ」と呼ばれるほど「Sublime Textシリーズ」は皆さん声を揃えて良いと言います。 超が付くほど高機能なうえ、極めて軽く、更に無料でも使えるという神がかったエディタなの...
【2017年版】私が「Sublime Text 3」に入れているプラグイン(パッケージ)一覧[ST3シリーズ02]
前回「【2017年版】Sublime Text 3のインストールから日本語化の設定まで」でSublime Text 3のインストールから日本語化までのやり方を紹介しましたので、今回は「私がSublime Text 3に入れているプラグイ...

パッケージ「SFTP」とは

Sublime Text 3の神パッケージ「SFTP」は、FTPソフトなどを使わなくてもSublime Text 3上からファイルのアップロードが出来るようになるパッケージです。

また、このファイルのアップロードの際にサーバーとの接続方式を「FTPかSFTPを選べる」という優れものです。

さらに、ちょっとした設定で「ファイルの保存と同時に自動アップロード」まで出来る、もはや「神パッケージ」としか言いようがないパッケージです。

私が使っている「Dreamweaver CC」でも自動putはありますが、Dreamweaver自体が有料なので使われてない方も多いかと思います。

「Sublime Text 3」も「SFTP」も本来有料なのですが、無料版のままでも使い続けられる(購入を促すポップアップは出ます)ので、どなたでもお使いになる事が出来ます。

ちょっと小話

「FTP」や「SFTP」というのは、大雑把に説明するとファイル転送の際に「どうやって通信するか」の通信規格の事です。

「FTP」はファイルの転送時に暗号化などをせずそのままの状態でファイルを転送します。

そして今の時代に「FTP」でサーバーとデータのやり取りをしているのは正直危険です。

「SFTP」はファイルの転送時に「ファイルを暗号化して安全に通信」を行ってくれる通信方法の事です。

最近はブロガーさんなども「ブログのSSL化」についてもやっと目を向けてきた感がありますが、暗号化という点では「SFTPもSSLも同じようなイメージ」です。

接続方式には「FTP」「SFTP」の他に「FTPS」などがあります。

簡単に説明すると「FTPS」に関しては上述したように「SSL」を使って通信をするタイプで、「SFTP」はSSLではなく「SSH」を使うタイプです。

また、「FTPSはSSL証明書」を使うのに対して、「SFTPは鍵(key)」を使います。

今回紹介するパッケージの「SFTP」は、このSFTPでファイルの転送を行えるので、FTPで通信するよりもはるかに安全にファイルの転送が出来るという事です。

まずはロリポップ!でSSHを許可

ちょっと小話で話がそれましたが本題へ。

SFTPでサーバーと通信するためにはサーバー側でSSHの利用を許可しなくてはなりません。

基本的にデフォルトだとSSHの利用は使えない設定になっているサーバーがほとんどで、ロリポップ!も例に漏れずデフォルトだとSSHは使えない状態になっています。

ここではロリポップ!でSSHの利用を許可する方法を紹介するので、以下を参考にしてみてください。

まずは管理画面へログイン後、左カラムのサイドバーメニューの中から[WEBツール] >  [SSH]と進みます。

ロリポップ!SSH設定説明画像01

次の画面で[SSHを有効にする]というボタンをクリック。

ロリポップ!SSH設定説明画像02

すると以下のように処理完了画面が表示されて作業完了です。

ロリポップ!SSH設定説明画像03

設定が完了した後に再度SSHの設定画面を開き、以下のように情報を確認する事ができれば確認もOKです。

ロリポップ!SSH設定説明画像04

「SFTP」のインストール

それではさっそく「SFTP」をSublime Text 3にインストールしましょう。

まず、これまでと同じようにSublime Text 3を開いたらCtrl+Shift+Pで「Package Control」を開き、コマンドライン(テキスト入力欄)に「install」と入力して「Package Control: Install Package」を選択します。

次に、今度はコマンドラインに「SFTP」と入力して、候補の中から「SFTP」を選択(基本的に一番上に出てくるはずです)すればインストールが始まります。

無事インストールが終了したら「SFTP」の導入は完了です。

とても簡単ですね☆

プロジェクトについて

Sublime Text 3には「プロジェクト」という機能があります。

これはサイドバーにフォルダなどのディレクトリを登録して、そこからファイルを開いたり編集したり出来る優れものです。

今回紹介する「SFTP」も、この「プロジェクト」を利用して初めて威力を発揮するので、ここではまずプロジェクトの使い方を簡単に説明します。

プロジェクトの登録(追加)方法

まずはSublime Text 3のサイドバーにプロジェクトを追加しましょう。

メニューから「プロジェクト」 > 「プロジェクトにフォルダを追加」と進み、サイドバーに追加したいフォルダやファイルを選択して「OK」をクリックします。

これだけでサイドバーにプロジェクトを追加できます。

あとはサイドバーから普段通りに操作する事が出来ます。

※プロジェクトにはフォルダだけでなくファイルも登録する事が出来ます。

「SFTP」の設定

「SFTP」のインストールと「プロジェクト」の追加が終わったら、さっそく本記事の本題「SFTP」の設定です。

前項で追加したプロジェクトを右クリックでコンテキストメニューを表示されたら、その中に「SFTP/FTP」という項目が増えてるので、[SFTP/FTP] > [Map to Remote…]と進みます。

するとそのディレクトリに「sftp-config.json」というファイルが自動的に作られて開かれます。

今回このファイルで変更する場所は以下の画像の赤枠部分になりますので、それぞれ簡単に説明します。
※画像をクリックで拡大できます。

「sftp-config.json」の変更箇所

Tipsアイコン[ 各項目説明 ]

1.接続方式を選択できます。今回は「sftp」とします。

2.アップロード前に保存するかを設定できます。今回は「true」とします。

3.「ファイルの保存と同時にアップロードするか」を設定できるので「true」にします。

4.サーバーのホスト名を入力します。

5.ユーザー名を入力します。

6.パスワードを入力します。

7.ポート番号を入力します。

8.サーバーのディレクトリのパスを入力します。

上記の4~7は先程ロリポップ!のSSH設定の時に表示された情報を元に入力します。

8に入力するサーバーのディレクトリパスを確認するにはFTPソフトを使うと簡単で便利です。

Filezillaを使ってサーバーのディレクトリのパスを確認する方法は、Filezillaで目的のフォルダを開いた状態で「リモートサイト:」の項目の右側にあるパスを確認すればOKです。

上記をコピーして8に貼り付ければOKです。
※Filezillaの使い方は記事の内容から離れてしまうため割愛します。

ここまで「sftp-config.json」を編集できたら一旦保存します。

次に今設定したプロジェクト内のファイルを開き、そのままファイルを保存して自動的にアップロードされれば成功です。

※保存と同時に画面下部にログが表示されるので、「Success」と表示されてればOKです。

※「Failed」と表示される状態は設定のミスが考えられますので「sftp-config.json」を見直しましょう。

「Failed」となる方のほとんどかが「sftp-config.json」の記述ミスです。
中でも「サーバーのディレクトリパスの記述が間違っている」という方が大多数なのでよく確認してみましょう。

これで「SFTP」の設定は完了です☆

あとは他のファイルも追加したい場合は、「プロジェクトの追加」→「sftp-config.jsonの設定」という流れを同じようにやるだけです。

一度設定して理解すると非常に簡単なので是非チャレンジしてみてください。

まとめ

今回は私が最高にお世話になっているSublime Text 3のプラグイン(パッケージ)「SFTP」設定方法と使い方の紹介でした。

「Dreamweaver CC」で自動putを使っていて、「もうこれナシじゃ面倒過ぎてやってられない」と思っていたので、この機能が使えないエディタは私の中では論外です。

Sublime Text 3は無料でも同じ機能を使えますので、どなたでも便利に効率良くエディタを使うことが出来ます。

ライターさんはもちろん非常に多くの方が使われてますが、ブロガーさんなども強くおすすめできるエディターです。

是非みなさんも「無料でSFTPで自動アップロード」が出来るSublime Text 3パッケージ「SFTP」を使ってみて下さい☆

また、今回はロリポップ!のパターンを紹介しましたが、次回は「Xserverで鍵を使ってSFTP接続する方法」を紹介する予定です。

ロリポップ!と違い、Xserverで「SFTP」を使ってSFTP接続をする方法は一手間かける必要があるので、是非次回もご覧になって下さい☆

シェアして頂けると喜びます☆

この記事が気に入ったら
いいね ! しよう

WordPressでPCやスマホ(iPhone)などのTips(便利情報)、その他日常生活で便利だと感じた事やモノを書いているIT関係のナンデモ屋さんです。
シンプルなプラグインなどもたまに作っていますのでご自由にお使い下さい☆

RA's(らす)@Tips4Lifeをフォローする
Sublime Text 3
記事が良かったらこちらから教えてあげてください☆
Tips 4 Life|毎日が便利で快適なiPhone&PC生活

ディスカッションコーナー コメントやご質問、その他この記事に関する事はこちらからどうぞ☆

Top