HTML CSS

iPadからでも快適にウェブ制作を行おう – sass自動コンパイル編

2016年3月21日

iPadでのウェブ制作を行うにはcoda for iOS があれば十分にできます。しかし、唯一困っていたのがsassによるcssコーディング。iPad ではSassファイルの記述ができてもcssへのコンパイルができないんです。
今回はこの問題を解決します。

サーバー上でsassファイルをcssファイルに自動コンパイル

iPad 上ではsassからcssへのコンパイルができない(というか方法が見つけられない)ので、サーバー上でコンパイルすることにします。

今回は海外サーバーの“host monster”でのやり方を説明しますが、これ以外のサーバーでも下記の条件がクリアできればできるはずです。

  • サーバー上でrubyを動かせる
  • サーバーに新しくruby gemsをインストールできる
  • サーバーにSSH / Shellログインできる

compassをサーバー上にインストール

ではhostmonsterの例でやっていきましょう。

Ruby gemsへのパスを追加する

cpanel ”file”セクションの”file manager”をクリックします。
Compassをサーバー上にインストールして自動コンパイルする方法1

トラブルが起きたときのためにルートにある”.bashrc”をコピーし、”.bashrc.bak”を作成しておきます。
”.bashrc”を編集し、一番下に下記の4文を追加、保存しましょう。

export GEM_HOME=$HOME/ruby/gems
export GEM_PATH=$GEM_HOME:/lib/ruby/gems/1.9.3
export GEM_CACHE=$GEM_HOME/cache
export PATH=$PATH:$HOME/ruby/gems/bin

compassをインストール

cPanel “programming”セクションの”RubyGems”をクリックします。

Compassをサーバー上にインストールして自動コンパイルする方法2

find a moduleの検索ボックスにcompassと入力します。

Compassをサーバー上にインストールして自動コンパイルする方法3

検索結果の中からcompass(1.0.3)を見つけたら ”install”をクリックし、待ちましょう。しばらくするとインストールが完了します。

Compassをサーバー上にインストールして自動コンパイルする方法4

これでcompassのインストールが完了です。

サーバーへSSH / Shellでログイン

hostmonsterはデフォルト設定でSSH / Shellログインは無効になっているので有効化していきます。

cPanel ”security”セクションの ”SSH / Shell access”をクリックし、さらに”manage SSH access”をクリックします。
”SSH status”を ”SSH access enabled”に変更します。

Compassをサーバー上にインストールして自動コンパイルする方法5

この時、上の画像で黄色の枠で囲まれているログイン情報を覚えておきましょう。あとで使います。

次に、パブリックキーとプライベートキーを作成していきます。
cPanel “security” セクションの”SSH / Shell Access”をもう一度クリックし、さらに”manage SSH keys”をクリックします。
”generate a new key” をクリックして、キーを作成し、ひとつ前の画面に戻ります。

Compassをサーバー上にインストールして自動コンパイルする方法6

そうすると今作成したキーが表示されています。このままではこのキーは認証されていないので認証しましょう。

”public keys” 内の ”manage authorization”をクリックします、さらに”authorize”をクリックします。これで認証されました。

次に、プライベートキーをダウンロードします。
”private keys”内の”view or download”をクリックしてダウンロードします。

サーバーにshellログイン

ここではChrome appの”secure shell”を使います。
※Chrome appはipadでは使えないので、prompt2のようなアプリが必要になります。

先ほど、SSH / shell ログインを有効化したときに表示されたログイン情報を利用してサーバーにログインします。

Compassをサーバー上にインストールして自動コンパイルする方法7

サーバーに正しく compassがインストールされているか確認します。
下記の文を打ち込みましょう。

sass -v
compass -v

どちらもバージョンを返されたら正しくインストールされている、ということです。もし ”command not found”と表示された場合はインストールに失敗していますのでやり直しましょう。

あとはローカルでのcompassのコーディングと同じです。
プロジェクトが置いてある場所まで移動して、compassの自動コンパイルを実行するだけです。

cd xxxxxxxx/xxxxx/xxxx
compass watch

これで、プロジェクトファイル内でsassファイルが更新されたら自動でcssファイルへとコンパイルしてくれるようになりました。

まとめ

iPadを使ってウェブ制作するときにもsassでコーディングする方には必見の方法ではないでしょうか。

今回はChrome appでのshell ログインを行いましたが、iPad ではChrome appが使えないので他のターミナルアプリを使用しましょう。

まだ使っていないのですが、”prompt 2”がいい感じです。そのうち買おうと思います。

iPadからサーバー操作するprompt2
prompt2

参考

hostmonster ホームページ
hostmonster上でruby gemsをインストールする方法 公式
hostmonster上でSSH / Shell接続を有効化する方法 公式
hostmonster上でSSH / Shell接続を行うためのキー作成方法 公式

お問い合わせやコメント

ウェブサイト制作の依頼やこの投稿へのコメントなど、なんでもいいのでお問い合わせ待っています!ウェブデザインのチューターもしているのでそういったことへの依頼も受け付けています。

送信完了しました。 お問い合わせ確認用メールを上記のメールアドレス宛てに送信しましたのでご確認ください。 24時間以内に返信いたしますのでお待ち下さいませ。
お問い合わせありがとうございました!

送信完了しました。 24時間以内に返信いたしますのでお待ち下さいませ。
お問い合わせありがとうございました!

送信に失敗しました。お手数ですが入力内容をご確認の上、再度送信ボタンをクリックしてください。