【最速・最短】Sublime text3導入手順とSFTPの設定完全解説

Sponsored Link


仕事がら「Sublime text3」を使うことになりました。
しかし、これ設定が毎度面倒で覚えられないので、記録することにしました。

なお、わたしは「最低限」のことしかしません。

ダウンロードとインストール


公式サイトで「Windows 64 bit – portable version」をダウンロードする。

公式サイト
http://www.sublimetext.com/3

※「portable version」はhttp://portableapps.com/でランチャーをDLして使っています。

余計なことはしない


カラースキーム変更とか設定ファイル変更とか、余計なことはしない。

PackageControllのインストール


2014-07-26_025031

まず、以下にアクセス。
https://sublime.wbond.net/installation#Manual_Instructions

「SUBLIME TEXT 3」をクリック。

集約されたコードをコピー。

メニューの「View -> Show Console」のコマンドラインに入力してエンター。

数十秒待つ。

日本語化


2014-07-26_030000

「Ctrl + Shift + P」で出てきた一覧から「Package Control:Install Package」を選択。

入力欄で「japanize」と入力して出てきたパッケージが表示された状態でエンター。

説明が表示されるが無視して閉じる。

SHIFT-JISファイルに対応


デフォルトでUTF-8以外で記録されたファイルは文字化けするので、SHIFT-JISにだけは対応しておく。

「Ctrl + Shift + P」で出てきた一覧から「Package Control:Install Package」を選択。

入力欄で「ConvertToUTF8」と入力して出てきたパッケージが表示された状態でエンター。

日本語入力しやすくする


デフォルトだと、日本語入力がコード上でしづらいので、入力しやすくする。

「Ctrl + Shift + P」で出てきた一覧から「Package Control:Install Package」を選択。

入力欄で「IMESupport」と入力して出てきたパッケージが表示された状態でエンター。

開始タグと終了タグの組み合わせを見やすくする


2014-07-26_031204

上図のheadタグのように組み合わせを教えてくれる機能を追加します。ミスを無くすために、これは必要です。

「Ctrl + Shift + P」で出てきた一覧から「Package Control:Install Package」を選択。

入力欄で「Bracket Highlighter」と入力して出てきたパッケージが表示された状態でエンター。

余計な全角スペースをハイライトする


2014-07-26_032210

これが分かると原因不明のエラーで悩むことが少なくなります。プログラムで全角スペースは使わないし、あると原因不明のエラーになります。

「Ctrl + Shift + P」で出てきた一覧から「Package Control:Install Package」を選択。

入力欄で「space」と入力して出てきた「TrailingSpaces」のパッケージを選択した状態でエンター。

2014-07-26_032654

上図の流れで設定ファイルを開く。

何も書かれていないので、以下を記述してセーブする。
以下、ダブルコーテーションが全角になっているので注意してください。本来は半角なので、コピペでは動作しません。

{“trailing_spaces_regexp”: “ |[ \t]+”}

※|の前は全角スペースです。

カラーコードにカーソルを合わせてクリックすると実際の色が見えるようにする


a

「Ctrl + Shift + P」で出てきた一覧から「Package Control:Install Package」を選択。

入力欄で「Color Highlighter」と入力して出てきたパッケージが表示された状態でエンター。

SAVEしたらFTPするようにする


これは状況により「やる・やらない」を決めてください。

○ テスト/開発環境におすすめ
× 本番環境では非推奨

「Ctrl + S」でセーブできますが、それと同時にFTPする機能などがあり便利です。

※開発環境のディレクトリを「プロジェクト」としてSublime text3に登録しないと動作しません。

「Ctrl + Shift + P」で出てきた一覧から「Package Control:Install Package」を選択。

入力欄で「SFTP」と入力して出てきた「SFTP」のパッケージを選択した状態でエンター。

次からいろいろと設定していきます。

2014-07-26_034404

上図のように「表示 -> サイドバー -> Show Open Files」にしておくと分かりやすいです。

2014-07-26_034536

左サイドバーにディレクトリや開いているファイル一覧が表示されるエリアができます。

2014-07-26_035617

「プロジェクト -> Add Folder to Project」を選択します。

2014-07-26_035656

フォルダ選択ができるので、プロジェクトにしたいフォルダを選択します。

2014-07-26_035856

左サイドバーにプロジェクトが登録されるので、プロジェクト名を右クリックして「Map to Remote」を選択します。

このプロジェクト専用の設定ファイルが出来て、開かれるので設定をします。
以下、ダブルコーテーションが全角になっているので注意してください。本来は半角なので、コピペでは動作しません。

“type”: “sftp”,
 ↓
“type”: “ftp”,

FTPにします。暗号化されない設定なので、出来れば開発環境のみが望ましいです。

“upload_on_save”: false,
 ↓
“upload_on_save”: true,

SAVEしたら自動アップロードするようにします。

“host”: “example.com”,

上記の「example.com」の箇所を「FTPホスト名」に変更。

“user”: “username”,

FTPのユーザ名に変更。

//”password”: “password”,
 ↓
“password”: “password”,

行頭のスラッシュを2つ削除して、右の「password」をFTPのパスワードに変更。

“remote_path”: “/example/path/”,
 ↓
“remote_path”: “/web/XXXXXX.com/blog/”,

リモートパス、つまりサーバ側のプロジェクトと同じサーバパスを入力。
FTPクライアントソフトの「FileZilla」だと、サーバ側の「リモートサイト」の中に書かれているパスがそれ。

上記まで設定したら

左サイドメニューからHTMLファイルをクリックで開いて、編集してから「Ctrl + S」を押してみると、アップロードが始まります。

もし、成功しないならパスが間違っている可能性が結構あります。

上記以外のパッケージは無理に入れなくてもよいと思います


どうしても必要ならともかく、上記以外はなくても最低限の作業では困りません。

Sponsored Link

最新記事はトップページで!

京都発・地方が盛り上がるグルメや観光に撮影ロケ地の話題を提供!


購読するならRSSをご利用ください!

RSSはこちらをご利用ください。


マスコミ各社様の記事使用規約についてはこちらをご覧ください。

当ブログでは掲示板やSNSなど他メディアでURLや記事を紹介することはございませんので、掲示板などで記事を紹介されていても一切無関係です。誤解なきようお願いいたします。
当ブログで転載しているTweetはTwitter社の規約(2013/10)に準じた形式(API利用)によって許可された範囲で行われています。また、Tweet内容の所有権はTwitter社の規約によりTweet元のアカウント所有者にあります。そのため、当ブログでその所有権を主張するものではありません。Tweet内容については責任は負いませんので予めご了承ください。