個人アプリ開発・下準備
はじめに
前回の続きを実装していきたいと思います。
個人アプリ開発に必要な環境構築②
3.hamlの実装
Gemfile
gem 'haml-rails'
すべての環境で導入したいので、Gemfileの一番下に記述します。
ターミナル
$bundle install
ターミナル
$ rails haml:erb2haml
途中で、
Would you like to delete the original .erb files? (This is not recommended unless you are under version control.) (y/n)
と聞かれるので、yを選択します。
これで拡張子がerbのファイルをhamlに変換します。
4.ルーティング、コントローラー、ビューを作成
仮のルーティングを設定しておきます。
config/routes.rb
Rails.application.routes.draw do root "コントローラー名#index" end
コントローラーとビューを作成します。
ターミナル
$ rails g controller コントローラー名 index
ここまできたら一回チェックします。
ターミナル
$rails s
サーバーを起動したら上の画像が表示できていたので、
正しく動作しているという事です。
5.Sassの導入
application.cssをapplication.scssに変更します。(ファイルの中身は消しときます)
これから追加するscssファイルはapplication.scssから@importを使って読み込んでいきます。
次にreset.scssの設定をしていきます。
application.scssと同じフォルダ内に_reset.scssを作成します。
application.scss
@import "reset";
上記を記述します。
_reset.scssにYUI 3のリセットファイルをコピーして貼り付けます。
/*! * YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/) * http://cssreset.com * Copyright 2012 Yahoo! Inc. All rights reserved. * http://yuilibrary.com/license/ */ /* TODO will need to remove settings on HTML since we can't namespace it. TODO with the prefix, should I group by selector or property for weight savings? */ html{ color:#000; background:#FFF; } /* TODO remove settings on BODY since we can't namespace it. */ /* TODO test putting a class on HEAD. - Fails on FF. */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset, img { border:0; } /* TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit... */ address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal; } ol, ul { list-style:none; } caption, th { text-align:left; } h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal; } q:before, q:after { content:''; } abbr, acronym { border:0; font-variant:normal; } /* to preserve line-height and selector appearance */ sup { vertical-align:text-top; } sub { vertical-align:text-bottom; } input, textarea, select { font-family:inherit; font-size:inherit; font-weight:inherit; } /*to enable resizing for IE*/ input, textarea, select { *font-size:100%; } /*because legend doesn't inherit in IE */ legend { color:#000; } /* YUI CSS Detection Stamp */ #yui3-css-stamp.cssreset { display: none; }
終わりに
あとで見返した時に理解できるかなー
リンクとは貼ってもう少し改善していきたいです。