쓰는 것

1. 신규 앱 작성(버전 ​​지정을 하고 rails new를 한다)
2. Git 관리하에 두고 원격 저장소에
· .gitignore 정보
3.haml 실장
4. 컨트롤러 뷰 라우팅 생성
5.Sass의 도입(리셋 css"YUI3"도입)
6. 뷰를 마크 업 (큰 프레임 작성)
7.참고 페이지
・참조 소스
8. 끝에

1. 신규 앱 작성

Ruby on Rails 버전 변경

터미널

$ cd ~  # ホームディレクトリに移動
$ gem install rails --version="5.0.7.2"
#バージョン指定

* rails를 지정하는 이유는 무엇입니까? (Rails의 버전에 따라 들어 있는 파일이나 Gem이 다릅니다. 그래서 설정 방법이 달라집니다. 이번은 이 버전으로 만들고 있습니다만, 물론 버전 설정 없이의 rails new 도 전혀 있다고 생각합니다.12/4추기)

터미널

$ rbenv rehash

버전 지정으로 새로 만들기
cd 에서 앱을 만들려는 디렉토리를 지정하여 이동

터미널

$ rails _5.2.3_ new 新規アプリ名 -d mysql

cd 에서 지금 만든 디렉토리로 이동

터미널

$ rails db:create

2. Git 관리하에 두고 원격 저장소에

【참조】
앱 만들기 ~ SNS 그룹 만들기와 연계

git의 통제하에

터미널

/git管理下に置きたいディレクトリへcdで移動し下記実行/
$git init 
$git add .   /.は全部という意味/
$git status　/ちゃんと移動したか確認/

로컬 리포지토리에 추가 (커밋)

터미널

$git commit -m "initial commit"

GitHubDesktop의 [CurrentRepository]에서 add

다음 화면은 이



リモートリポジトリ作成完了！
.gitignore
커밋하지 않으려는 파일 디렉토리를 지정할 수 있는 설정 파일. 이미지 게시 기능 등이 있는 것은 이미지가 저장되는 public/uploads 디렉토리를 .gitignore에 추가해 두면 이미지가 Github에 커밋되지 않는다

.gitignore

# 末尾に次の記述を追加
public/uploads/*

3.haml 구현

· gem 도입

Gemfile

gem "haml-rails", ">= 1.0", '<= 2.0.1'
# 最下部に記載

터미널

$ bundle

導入完了
・haml로 변환

터미널

$ 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を入力してエンター

hamlへ変換完了

4. 컨트롤러 뷰 라우팅 만들기

rails g 앞에 해 두는 것
불필요한 파일을 생성하지 않도록 작성하십시오.

config/application.rb

# 省略
（例）
module ChatSpace
  class Application < Rails::Application
    config.generators do |g|
      g.stylesheets false　#←このfalseで作成しないファイルを指定できます
      g.javascripts false
      g.helper false
      g.test_framework false
    end
  end
end

컨트롤러 작성

터미널

$ rails g controller コントローラ名(例：popcorn)

컨트롤러에 인덱스 액션을 만들거야.

popcorn_controller

def index
end

app/views/コントローラ名と同じ名前のディレクトリ/index.html.haml 만들기

(예) app/views/popcorn/index.html.haml

hello haml!(おすきに入力)

라우팅 설정(root_path에 액세스할 경우 index로 날아가기 설정)

routes.rb

root to: 'popcorn#index'
#'コントローラ＃indexのビューへ飛んでね'の意味

5.Sass의 도입(리셋 css"YUI3"도입)

application.css 를 삭제하고 application.scss
application.scss

@import "scssファイル名";
#importしたいファイル名の頭は_（アンダーバー）始まり。

_reset.scss를 application.scss와 동일한 디렉토리에 작성

YUI3 도입
YUI3Source code(zip) 다운로드하여 파일을 열고 모두 복사하여 _reset.scss
application.scss

@import "reset";

6. 뷰를 마크 업 (큰 테두리 작성)

종이에 박스의 배치를 쓰고 명명한다(나중에 어디에 어떤 이름의 클래스를 배치했는지 보답하기 쉽고, sass를 맞추거나 이벤트 발화시키는 클래스를 알기 쉬워져 편리)

7. 참고 페이지

HTML에서 haml로

Ruby on Rails의 도우미 방법 정보

YUI3

참고 소스

_reset.scss

/*
    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;
    *font-size:100%; /*to enable resizing for IE*/
}
/*because legend doesn't inherit in IE */
legend {
    color:#000;
}

8. 끝에

github의 리모트에 주는 방법 바로 잊어 버리기 때문에 비망록으로서.
MVC의 흐름을 따라가면서 변수(인스턴스 변수)의 정의 방법이나 기술의 방법이 달콤하기 때문에,
거기를 정리하고 싶습니다만, 정리하면서라고 생각한 것처럼 걸리지 않네요(저것도 이것도 담고 싶어지기 때문에)

능숙한 머리의 내용의 정리 방법이 있으면 꼭 가르쳐 주세요 φ(･･
설명 실수나 설명 미비가 있으시면 지적해 주시면 감사하겠습니다.