初心者向け!CSSフレームワークFoundationのSass版を使用する為の環境構築。

こんにちは、@kuck1u です。

みなさん、突然ですが、レスポンシブデザインでコーディングする時、どうしてます?
僕は、レスポンシブデザインのコーディングが苦手なので、CSS のフレームワークを利用しています。

フレームワークを利用するようになったのは、現場でかならず使われている WordPress デザインのメソッドという書籍で紹介されているのを読んだのがキッカケです。

色々試してみたのですが、Foundation が一番肌に合ったので採用しました。今回は、Foundation の Sass 版を利用できるようにする迄の道のりをメモがてら共有します。

[Win] Rubyがインストールされているか確認する。

Windowsには、デフォルトではRubyがインストールされていません。その為、WindowsユーザーはRubyのインストールから始めます。念のため、Rubyがインストールされているか確認してみます。

  1. コマンドプロンプトを立ち上げる。
  2. バージョン確認コマンドを実行する。
  3. バージョン情報が表示されれば、Rubyはインストールされています。
    Sassのインストールを行ってください。

[Win] Rubyをインストールする。

Rubyがインストールされていない事が確認できたら Rubyをインストールしましょう。

  1. RubyInstaller for Windows にアクセスする。
  2. Download と書かれた赤い大きなボタンを押下する。
  3. RubyInstallers の最新版をダウンロードする。
    ・Foundationを使用する場合、Ruby1.9+が必要です。
  4. ダウンロードしたファイルを実行し、Rubyをインストールする。
  5. 必ず「Ruby の実行ファイルへ環境変数PATHを設定する」にチェックを入れてインストールを実行するようにしてください。
  6. インストールが完了後、バージョン確認コマンドを実行する。
  7. バージョン情報が表示されれば、Rubyは正常にインストールされています。

[Mac] Rubyのバージョンが1.9+か確認する。

  1. ターミナルを立ち上げる。
  2. バージョン確認コマンドを実行する。
  3. 1.9+であればFoundationを使用することができます。
    1.8等の場合は、OS Xをアップデート、またはRubyのアップデートを行ってください。

[共通] Sass がインストールされているか確認する。

  1. [Win]コマンドプロンプト / [Mac]ターミナルを立ち上げる。
  2. バージョン確認コマンドを実行する。
  3. バージョン情報が表示されれば、Sass はインストールされています。
    以降は省略し Compass のインストールを行ってください。

Sass をインストールする。

  1. [Win]コマンドプロンプト / [Mac]ターミナルを立ち上げる。
  2. Sass のインストールコマンドを実行。
  3. インストール完了後、バージョン確認コマンドを実行する。
  4. バージョン情報が表示されれば、Sass は正常にインストールされています。

Compass がインストールされているか確認する。

  1. [Win]コマンドプロンプト / [Mac]ターミナルを立ち上げる。
  2. バージョン確認コマンドを実行する。
  3. バージョン情報が表示されれば、Compass はインストールされています。
    以降は省略し node.js のインストールを行ってください。

Compass をインストールする。

  1. [Win]コマンドプロンプト / [Mac]ターミナルを立ち上げる。
  2. Compass のインストールコマンドを実行。
  3. インストール完了後、バージョン確認コマンドを実行する。
  4. バージョン情報が表示されれば、Compassは正常にインストールされています。

node.js がインストールされているか確認する。

  1. [Win]コマンドプロンプト / [Mac]ターミナルを立ち上げる。
  2. バージョン確認コマンドを実行する。
  3. バージョン情報が表示されれば、node.js はインストールされています。
    以降は省略し npm のバージョン確認を行ってください。

node.js をインストールする。

  1. node.js 公式サイトにアクセスする。
  2. INSALL と書かれた緑のボタンを押下し、node.js をダウンロードする。
  3. ダウンロード完了後、ダウンロードしたファイルを実行しインストールする。
  4. インストール完了後、バージョン確認コマンドを実行する。
  5. バージョン情報が表示されれば、node.js はインストールされています。

npmがインストールされているか確認する。

通常、node.jsをインストールした際に一緒にインストールされています。

  1. [Win]コマンドプロンプト / [Mac]ターミナルを立ち上げる。
  2. バージョン確認コマンドを実行する。
  3. バージョン情報が表示されれば、npm はインストールされています。
    以降は省略し Bower のインストールを行ってください。
    バージョン情報が表示されない場合、node.jsのインストールを失敗している可能でがあります。その場合、node.jsのインストールをやり直してみてください。

Bower がインストールされているか確認する。

  1. [Win]コマンドプロンプト / [Mac]ターミナルを立ち上げる。
  2. バージョン確認コマンドを実行する。
  3. バージョン情報が表示されれば、Bower はインストールされています。
    以降は省略し Foundation のインストールを行ってください。

Bower をインストールする。

  1. [Win]コマンドプロンプト / [Mac]ターミナルを立ち上げる。
  2. Bower インストールコマンドを実行する。
  3. インストール完了後、バージョン確認コマンドを実行する。
  4. バージョン情報が表示されれば、Bower は正常にインストールされています。

Foundation をインストールする。

  1. [Win]コマンドプロンプト / [Mac]ターミナルを立ち上げる。
  2. Foundation インストールコマンドを実行する。
  3. インストール完了後、任意のディレクトリに cd コマンドで移動し、以下コマンドを実行することで、Foundationが使用できるようになります。

foundation コマンドが使用できない場合、環境変数が正しく設定されていない可能性があります。

Bower から Foundation をインストールする

  1. [Win]コマンドプロンプト / [Mac]ターミナルを立ち上げる。
  2. cd コマンドで、bower.json ファイルがあるフォルダ(assets など)に移動。
  3. パッケージのインストールコマンドを実行する。

プロジェクトなど複数人でファイルを共有する場合

プロジェクトなど複数人で作業を行う場合、Git などのバージョン管理システムを使用する事が多いかと思います。
その際、初回コミット者は、Foundation のコアファイルを全てコミットせず、Bower 関連のファイルのみコミットすると良いかもしれません。初回コミット者以外のメンバーは、Git をチェックアウト後、Bower コマンドで Foundation をインストールする感じです。

流れ的には以下のようになります。

初回コミット者

  1. Foundation コマンドで新しいプロジェクトを作成する。
  2. .git フォルダー(隠しフォルダ)を削除する。
  3. .gitignore (隠しファイル) をテキストエディターで開き最後の行に以下を追加する。
  4. プロジェクトのGitにコミットする。

Foundation コマンドで新しいプロジェクトを作成すると、.gitignore というファイルがあります。
.gitignore は、Gitで無視するファイルを設定するファイルです。
この中に記述されている以外のファイルをコミットします。
(.gitignore に記述されているものは無視するので、コミットできないですけどw)

コミットファイル例

myProject
├ assets
| ├ css( or stylesheets )
| ├ images
| ├ js
| | └ app.js
| ├ scss
| | ├ _settings.scss
| | └ app.scss
| ├ .bowerrc
| ├ .gitignore
| ├ bower.json
| ├ config.rb
| └ README.txt
├ include
├ humans.txt
├ index.php
└ robots.txt

その他のメンバー

  1. myProject をチェックアウトする。
  2. [Win]コマンドプロンプト / [Mac]ターミナルを立ち上げる。
  3. cd コマンドで myProject/assets まで移動する。
  4. パッケージのインストールコマンドを実行する。
  5. app.scss を開き、ビルドする。
  6. 作業開始。

このような流れでどうです?
逆に面倒くさいですか…ね?
Git へ保存できる容量は決まってるし、チェックアウトの時にファイル少ない方がよくない?という考えがあります。あと、config.rb で output_style を :compressed にしている場合、CSS をマージする時にコンフリクト起きるからです。
※前のプロジェクトで毎回起きていました。マージ担当者が毎回ビルドし直していました。
マージ方法が間違っていたんですかね?…

最後に…

いかがでしたか?
黒い画面、Sass、プログラム初心者がドヤ顔で記事を書いてみました。
ツッコミお待ちしております。
(…優しくしてくれると…う、嬉しいかな…w)

では、本日はここまで。

くっくるでした(`@ ω @´)

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

Twitter で

Written by くっくる

WordPressを使ったウェブサイトの構築・HTMLコーディングの受託案件を中心に埼玉県にて活動中。バイラルメディア風にFacebook pageのいいね!ボタンを設置できるVA Social Buzzをはじめ、複数のWordPressプラグインを公開している。共著書として「エンジニアのためのWordPress開発入門」がある。

View all author posts →

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください