• Tweet
• 

• Tweet
• 

こんにちは。Sublime Text 2 Advent Calendar 2012 の13日目です。
http://www.adventar.org/calendars/20

釣りタイトルですいません。
記事が思ったより長くなってしまったので、まず簡単に何をしたいかを説明します。
僕だけじゃないと思うんですが、sass/SCSSを使っている場合に限りですが、サーバにアップするのが自動でできなくて、イライラを感じたことはありませんか？SublimeText2使ったら解消でき、作業効率化できますよ。というお話で、一連の設定手順を紹介します。

SublimeText2を使って、Sass/SCSS(compass)を使い自動生成したcssファイルを自動でサーバにアップロード。これって、大規模開発には向かないかもしれませんが、中小規模のサイト制作には、この方法で一石三鳥！？と思うんです。少なくとも僕の場合はなりました。

SublimeText2での、sass/SCSS(compass)の導入方法と、SFTP/FTPパッケージの導入方法もこの記事に含まれてます。くだりが長いのでお急ぎの場合は、ページ中段のキャプチャ画像がある辺りまでお進みください。

はじめに

自分はSublimeText2使い始めて2ヶ月弱です。新参です。2012年10月、カナダ、バンクーバー開催のWordCampに行ったんですけど、そこで、出席者の中にSublimeText2を使ってる人がとても多かったというのが、使おうと思った理由。
その時の出席者のパソコン覗き見してたら、大体、Vim(2%)、DreamWeaver(8%)、Coda(25%)、NetBeans(25%)、SublimeText2(40%)。こんな印象でした。

ちなみに、登壇者はほぼ全員Netbeansでした。(wordcampだからPHP前提だし。)
IDE使おうよ、NetBeans＆PHPDocs最高。ってセッションもあり、SublimeText2でもできると思うけどNetBeansはすごく捗るよ。と登壇者は大絶賛してました。

そんな中、NetBeansより出席者の多くが使ってたSublimeText2の使われる理由を知りたくて使い始めたわけです。今まではCoda2つかってて、以前Codaに関するショートカットキーのまとめページを書いたりまでしましたが、どのエディタも一長一短で、今回移行しました。

Codaのいいところは、ソフトにGUIのFTP/SFTPがついてるのと、検索/置換が直感的で使いやすい、Mysql Connectionがローカルで開発してる場合には便利、あとはGUIが楽。ってのかなと。
スピードはSublimeText2の方が圧倒的にサクサクです。

Coda2がアップデート後落ちまくってたので、ちょうどいいタイミングでSublimeText2に移行しました。

本題：効率良く作業する。

WEB屋がサイトを効率良く作業する方法についてですが、この場合のWEB屋とはフロントエンドコーダー、俗にいうWEBデザイナー(?)です。「効率良く」っていろいろありますが、３つをターゲットとしました。

1. ハイスピード。
2. 管理、修正しやすい。
3. 無駄がない。（面倒くさいことをしない）

[1.ハイスピード]と[2.管理、修正しやすい]を解決

この２つを効率化するには、以下で大体解決できます。

なお、sass/SCSSの使い方については、クラスメソッドさんのブログやら、sass本家やら、compass本家やらを見てください。

[3.無駄が無い]を解決。

SublimeTextを使わずに、既に２つ解決しました。。。が、ここからSublimeTextの話です。

まず、何が無駄と感じたかを自分なりにまとめると。

無駄1：「Scout.app」の起動がめんどくさい。
おそらく、sass/SCSSを使う上で「Scout.app」を使うと超便利なんですが、つかっていると、このように思うようになってきます。

• 「Scout.app」立ち上げるの自体面倒くさくなり
• サイトが増えたら「Scout.app」の画面が訳がわからなくなったり
• WEB開発するとどんどん増えるDockアイコンを一つでも減らしたいな。と思うようになる

無駄2：手動アップロードが”すんごく”めんどくさい。
基本はローカル環境で構築することが多いのでアップロード意識しなくてもいいんですが、公開済みのサイトでCSSをちょっと修正していきたい場合。また、IEでチェックする場合、macのローカル環境で作ったものにIEからアクセスって設定が面倒で、サーバに反映させながらチェックしていきたい時があるかなと。その場合のイライラはというと。

sass/SCSSを使わなければ負担はありませんでしたが、sass/SCSSを使ったら逆に効率が悪くなって、スピード激減。・・・めんどくさい。annoying…
そう感じたことはありませんか？
CodaやDreamWeaverでも解決する方法があるのかもしれないですけど、調べるのがめんどくさい。

SublimeText2で、めんどくさいをクリア。

手順

1. 必要なpackageをインストール。
2. プロジェクト作成。
3. sass/SCSS(compass)をSublimeText2から使う。
4. SFTP/FTP設定。ファイルを保存と同時にアップロードできるようにする。
5. コンパイルされたcssファイルを自動アップロード。

1.必要なpackageをインストール

必要なパッケージは下記の通り。全部インストールしてSublimeText2を再起動します。

・Sublime SFTP（有償：評価は無償でできる[期限不明？]）
・SASS Build
・sass
・SCSS
・SCSS Snippets
・compass
・Compass Build System

2.プロジェクト作成。

今回デモ用として下記のディレクトリをデモ用プロジェクトとして作成しました。
（日本語(マルチバイト)はダメ。理由は[3]で後述）
/Users/[ユーザ名]/ST2proj/ST2sassDemo/
このフォルダをSublimeText2で開き、プロジェクトとして保存します。[Project -> Save Project As…]
作業フォルダ(公開フォルダ)をSublimeText2のプロジェクトとして保存しておきます。

3.sass/SCSS(compass)をSublimeText2から使う。

sass/SCSS(compass)のコンパイル設定ファイル「config.rb」が必要になります。
ターミナルから[compass create]としてもよいのですが、「config.rb」があれば済む話なので、どちらでもよい。
「config.rb」をファイルを用意。（demoファイルはGithubにおいてます。）

（追記 [2013/03/22]
どのバージョンからなのかわかりませんが、ビルド(Cmd+B)してcssファイルが書き出される時点で、自動的にconfig.rbがcssフォルダに生成されるようになってました。ですので、特に前もって準備しておく必要はなさそうです。）

「config.rb」ファイルで最低限必須なのは、「css_dir」「sass_dir」の設定です。
それぞれ、プロジェクトルートからの相対パスで指定します。

あとは、下記ぐらい。

注意点としては、「config.rb」はプロジェクトのルートディレクトリに置く必要があります。

（追記 [2013/03/22]
どのバージョンからなのかわかりませんが、ビルド(Cmd+B)してcssファイルが書き出される時点で、自動的にconfig.rbがcssフォルダに生成されるようになってました。プロジェクトのルートディレクトリに設置する必要がなくなりました。といいますか、ルートディレクトリにconfig.rbを作っても読み込んでもらえなくなりました。）

また、プロジェクトのルートディレクトリまでのパスにマルチバイト文字が含まれると動作しません。

• NG例（”サイトA”という日本語フォルダ名が含まれているからアウト）
  /Users/xxxxxx/サイトA/public_html/~~(cssディレクトリ)~~/config.rb
• OK例（全てローマ字）
  /Users/xxxxxx/SiteA/public_html/~~(cssディレクトリ)~~/config.rb

config.rbを書き換えたら再起動します。
再起動が終わったら、「Tools->Build System」を「Compass」に変更し、「Cmd+B(macの場合）」で実行します。（compass watchされます。）

実行すると「sass_dir」で設定したディレクトリのscssファイルを監視してくれ、scssファイルを上書きすると自動的にcssファイルが作成されます。ビルドをキャンセルするかウィンドウを閉じるまでcompass watchされ続けます。

さて、この状態でSCSSファイルを用意して、
/common/css/style.scss
に適当にスタイルを記述し、保存すると
/common/css/style.css
が自動的に生成されます。

4.SFTP/FTP設定。保存と同時にファイルをアップロードする設定

ローカル環境での効率化は済みました。あと一息です。次は、FTPの設定です。
適当なところで右クリックし、「SFTP/FTP -> Map to Remote…」を選択します。

「sftp-config.json」という名のFTP/SFTP設定ファイルがプロジェクトルートに作られます。

サーバ接続情報と、upload_on_saveを設定していきます。（サーバ情報など接続情報を適切に。SFTPの鍵認証の設定も可能です。）
（このjsonファイルをアップロードしてしまうと、FTP接続情報漏れ漏れなので、絶対しないように要注意！）

設定を完了すると、SublimeTextを再起動します。
次に接続できるかテストします。右クリックして「SFTP/FTP ->Browse Remote…」で、リモートサーバが表示されればOK。リモートパスに間違いがないかも合わせて確認。
問題なければ、自動アップロードのテスト。ファイルを一つ作って、保存してみます。

ステータスバーに通信状況が表示されます。Successとなっています。アップロードできたようです。これで保存したファイルが自動でアップロードされるようになりました。

5.コンパイルされるcssファイルを監視し自動アップロード。

（ここからが、多分CodaやDreamWeaverでできないだろう内容です）
Sublime SFTPパッケージには、指定したファイルをモニタリングしてくれる機能があります。これを使うと、例えば、[zzz.scss]からコンパイルされる[zzz.css]ファイルをモニタリングしておけば、コンパイルによって[zzz.css]が上書されたら、それを検知し自動的にアップロードできてしまいます。

嗚呼、素晴らしい。。。

実際にやってみます。
モニタリングするためにはモニタリングしたいファイルをタブとして常時存在させて置く必要があります。
（僕の場合、邪魔にならないように分割ウインドウですごく小さく表示させています。）
コンパイルされるcssファイルを一旦アクティブにし、「Ctrl+Cmd+u+m(mac)」「Ctrl+alt+u+m(win)」、もしくは右クリック「SFTP/FTP->Monitor File (Upload onExternal Save)」で、そのファイルがモニタリング開始されます。

モニタリングされているファイルは、そのタブがアクティブ時にステータスバーに「Monitoring」と表示されます。

以上ですべての準備が完了です。

自動でアップロードされるか確認する。

終盤です。
scssファイルを再編集＆保存しなおして、コンパイルされたcssファイルが自動的にリモートサーバにアップロードされるかを確認します。

よし、「Cmd+s」！！！！

・・・・

「success」の文字がでました。scssとcssファイルが自動でアップロードされました。
（普段使ってるFTP/SFTPツールでも確認）

以上で完了です。[3.無駄が無い]も実現現でき、めんどくさくない作業環境ができました。

（demoファイルはGithubにおいてます。）

最後に

ちまたではgrunt環境を作って、jsやcssなんかも自動でminifyするっていうのが流行っているようですが、サーバでNode.js動かせない場合は、ローカルでgrunt環境つくって、gruntで自動コンパイルさせたファイルをSublime SFTPででも監視しておけば、そこからサーバに自動アップロードがうまいこと行くんじゃないかな？って思ってます。SublimeTextじゃなくて、専用の便利なツールも調べたらありそうですけどね。

なお、このSFTPパッケージは有償のため（無償で試用できますが）導入すると、購入してね〜。の、メッセージが出現する確率がすごく高くなります。（10回保存したら１回ぐらいアラートでてきます。）自分はエディタもSFTPもまとめてXmasか正月に購入予定です。

SublimeText2のSFTP/FTPに関する記事があまり見受けられなかった（記事にするほどの内容でもないのかな？）ので、試行錯誤した結果の記事です。
調べた割には、後になってドキュメント読んだらあっさり書いてましたというオチです。ドキュメント読むのは面倒ですが、やはり目を通すべきですね。

[Sublime SFTP]
http://wbond.net/sublime_packages/sftp/usage
http://wbond.net/sublime_packages/sftp/settings

まだまだ効率化の方法はありますが、少しだけめんどくさいが解消されました。
（あとドキュメントを読む行為がめんどくさいのと、このようにブログを書くのがめんどくさいという、永遠の[めんどくさい]もありますが・・・SublimeText2のAdvent Calenderがなかったらこの記事も書いてなかっただろうな、ありがたや。）

以上です。快適なコーディングライフを。

というわけで、次の方にパス。