さくらのレンタルサーバー上でsass&compassをインストールして使う

最近では、sass(scss)を利用する場合にはWinやMacなどのローカル環境にrubyとsassをインストールし、KoalaなどのGUIで操作するのが主流な感じですね。

でも、Dreamweaverの「保存時にファイルを自動でアップロード」オプションのお世話になりすぎていて、コンパイル後のCSSが自動でアップロードされないのが残念でしかたないです。

タスクランナーを導入すればいいのかとも思いますが、今回はsassのコンパイルをサーバー側で行うことで解決したいと思います。

これなら、Dreamweaverでsassファイルを「Ctrl+S」するだけで、サーバー上にコンパイルされたcssファイルが瞬時に作成されます。

また、Chromebookはsass実行環境が用意されていないのですが、これも「SFTP File System」と「Caret」などのChromeアプリでサーバー上のsassファイルを直接編集するだけでよくなり、ChromebookでWEB開発を行う際の不便さが少し改善されるかと思います。

  1. さくらのレンタルサーバー環境
  2. Chromeアプリ「Secure Shell」のインストール
  3. サーバーにシェルログイン
  4. サーバー環境変数の変更
  5. sassとcompassのインストール
  6. 利用方法
  7. 参考サイト

１．さくらのレンタルサーバー環境

さくらのレンタルサーバーはスタンダードプラン以上であればシェルログインが可能です。

sassに必要なRubyも標準で入っていますので、スタンダードプラン以上を借りて下さい。

２．Chromeアプリ「Secure Shell」のインストール

Chromeアプリ「Secure Shell」
Chromeアプリ「Secure Shell」

Chromeアプリ「Secure Shell」

サーバーにシェルログインするためのsshクライアントアプリをインストールします。

Macなら標準の「ターミナル」、Winなら「Tera Term」などが有名ですが、今回はMac、Win、Chromebook、Linuxとどんな環境でもOKなChromeアプリ「Secure Shell」を利用します。

Chromeアプリ万歳!(^^)!

３．サーバーにシェルログイン

「Secure Shell」でサーバーにログインします。

キャプチャ画像はサーバーの初期ドメインが「sass2015.sakura.ne.jp」という前提です。「sass2015」の部分は各々の初期ドメインに変更して下さい。

Secure Shellでログインする
Secure Shellでログインする

「[ENTER]接続」をクリックすると、初回のみ「Are you sure you want to continue connecting (yes/no)?」という確認メッセージが出てきますので、「yes」とタイプしENTERします。

その後、サーバーのパスワードを聞いてきますのでパスワードを入力して下さい。
（サーバーパスワードを変更したことがない場合には、さくらインターネットからのメール「仮登録完了のお知らせ」に記載されています）

ログインに成功すると、「Welcome to FreeBSD!」と表示され、コマンド待機状態になります。

４．サーバー環境変数の変更

さくらのレンタルサーバーでは初期設定のままsassをインストールしようとすると、アクセス権限のないディレクトリにインストールしようとし、「You don’t have write permissions into the /usr/local/lib/ruby/gems/1.8 directory.」みたいな感じで怒られます。

ですので、各ユーザーのホームディレクトリ下にsassをインストールし、ついでにパスも通るようサーバーの環境変数を変更します。

viで.cshrcファイルを編集します。

vi $HOME/.cshrc

まずはパスを通す設定です。

17行目付近のパス設定を編集します。

viでは「i」キーを押すと、インサートモードに切り替わり文字を打ち込めるようになります。

キーボードの方向キーで17行目に移動し、「i」キーを押して下さい。

初期では、たぶん以下のような記述になっていると思います。

set path = (/sbin /bin /usr/sbin /usr/bin /usr/local/sbin /usr/local/bin)

/user/local/binの後に半角スペースを挿入し、「$HOME/local/rubygems/bin」を追記します。

set path = (/sbin /bin /usr/sbin /usr/bin /usr/local/sbin /usr/local/bin $HOME/local/rubygems/bin)

続いて自身のホームディレクトリ以下にrubyのgem群をインストールするよう設定を変えます。

22行目付近にある「setenv ○○」に続けて以下の記述を追記します。

setenv GEM_HOME $HOME/local/rubygems setenv RB_USER_INSTALL true

保存しviを抜けます。

「ESC」キーを押しコマンドモードへ切り替え、以下のコマンドを実行して下さい。

:wq

シェル画面に戻ってきますので、設定を反映させます。

source $HOME/.cshrc

これでsassやcompassのインストールが可能になり、パスも通りました。

５．sassとcompassのインストール

以下のコマンドを実行し、sassとcompassをインストールします。

gem install sass
sassのインストール
sassのインストール
gem install compass
compassのインストール
compassのインストール

正しくインストールされ、パスも通っているか確認します。

パス設定を再度読み込んでもらう。
（※インストール後にもう一度.cshrcを読み込んでもらわないとうまくパスが通らないようでした）

source $HOME/.cshrc

sassがインストールされパスが通っているか確認します。バージョン情報が帰ってきたらＯＫです。

sass -v

compassがインストールされパスが通っているか確認します。

compass -v

６．利用方法

(1) sassの利用と自動コンパイル(watch)

さくらのレンタルサーバーの初期ディレクトリ「www」の中に保存してある「style.scss」ファイルを「style.css」としてコンパイルしたい場合を例に説明します。
（sassではなくcompassを利用する場合には読み飛ばして下さい）

まず、wwwディレクトリへ移動します。

cd www

ファイルを指定してコンパイルしてもらいます。

sass style.scss:style.css

「scss」フォルダを監視させ、変更があった場合に「css」フォルダにコンパイルして欲しい場合には、上記と同様にcdコマンドで「scss」と「css」フォルダがある親フォルダへ移動してから、

sass --watch scss:css

となります。

監視は「Ctrl+C」をするまでか、Secure Shellのタブを閉じる（シェルをログアウトする）まで続きます。

(2) compassの利用と自動コンパイル

compassは大雑把に説明すると「sassをより便利に高機能にしたヤツ」です。Javascriptに対するjQueryみたいなもんでしょうか。

compassでもsassのコンパイルができるので、特に理由がなければcompassをインストールしcompassコマンドでコンパイルをしたほうがいいかと思います。

便利なmixinやCSSスプライトの作成機能などが有名ですが、ここでは簡単な利用法だけ紹介します。

サイトフォルダの準備

compassの利用を解説するサイトでは、「compass create ○○」でまずプロジェクトを作成する方法が紹介されていますが、実際にはすでにあるサイトフォルダをそのまま利用する方が自然な気がしますので、自前で最低限のフォルダ構成を用意します。

以下の例では「site」フォルダの中に「sass」「css」「images」「js」フォルダがあることを前提に話をすすめます。

/site
— /sass
— /css
— /images
— /js
— index.html

config.rbの作成

compassで「compass create ○○」でプロジェクトを作成すると「config.rb」というファイルを作ってくれるのですが、自前でフォルダを用意した場合にはconfig.rbがないので作成します。

ローカルで空のテキストファイルを新規作成し、以下の記述をコピペします。
このファイルを「config.rb」という名前で「site」フォルダ直下に保存し、サーバーにもアップロードします。

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"

sassファイルの自動コンパイル

compassでは「compass」コマンドでコンパイルを行います。
「site」フォルダ内の「sass」フォルダにstyle.scssファイルがあり、それを「css」フォルダ内にコンパイルしたい場合を例に説明します。

まず、「www」ディレクトリ内の「site」ディレクトリへ移動します。

cd www/site

compassに監視させます。

compass watch

以上です。

sassに比べコマンドがシンプルでいいですね。compassではコンパイル先の指定などはconfig.rbで設定するようになっているので、watchコマンドを打ち込むだけでＯＫです。

今後は、仕事始めに以下の作業を行いDreamweaverでscssファイルを編集しアップロードすれば、自動でコンパイルが行われます。

  1. Secure Shellでログイン
  2. cdコマンドでサイトフォルダ（「config.rb」のあるフォルダ）に移動
  3. compass watchコマンドで監視開始

毎回ログインしてwatchを実行する手間がありますが、KoalaなどのGUIアプリもアプリを起動しておかなければいけないので、ギリ許容範囲内かと思います。

Secure ShellはChromeアプリなので、Chromeのタブをひとつ専有するだけなのもシンプルでGoodです。

７．参考サイト

レンタルサーバでsass,compassを使う為のgemの設定