目的
Railsでサーバーサイド設計をしている僕が、Webデザイナーの方とチームを組んで1つのWebアプリを作ることになりました。
相手の方はWebデザイナーとして十分な実力を持っていますが、サーバーサイドエンジニアと一緒に仕事をするのは初めてということでしたので、Railで作成したWebアプリがどのようになっているのかをまとめたいと思います。
準備
実際に作業に入る前に、まずは一緒に仕事をする準備をしましょう。
Rails環境を構築する
RailsでWebアプリを動かす(ローカルサーバ上でアプリを走らせる)には、Rails環境が必要になります。
下記記事を参考に、rails s
でローカルサーバを立ち上げられるようにしておいてください。
Ruby on Railsの環境構築をしてみよう!(Windows)
gitでプロジェクトを共有
まずはgitでプロジェクトを共有します。
こちらの記事を参考に、自分のレポジトリにプロジェクトフォルダを作成してください。
GitHub で他の人の Repository に参加する方法
プロジェクトフォルダの構成を理解する
Railsで作ったプロジェクトフォルダは、初めて見る方にとっては複雑に感じるかもしれません。
Webデザイナーの方がどのファイルを編集すれば良いのかを説明します。
routes.rbでサイト構成を確認
プロジェクトフォルダ内のconfig
フォルダ内にroutes.rb
というファイルがあります。
このファイルは「ルーティング」と呼ばれ、サイトの構成を示しています。
例えば今、下記のようなルーティングが設定されているとします。
# usersフォルダのlogin_form.html.erbファイルを表示
get "/" => "users#login_form"
# postから始まるルーティングはサイトの見た目と関係ないので無視
post "/login" =>"users#login"
# postsフォルダのindex.html.erbファイルを表示
get "/posts/index" => "posts#index"
ルーティング設定の構成は、
get "URL" => "表示するファイル"
となっています。
例えば3つめのルーティングは
/posts/index
にアクセスするとpostsフォルダのindex.html.erbファイルを表示するよ
という意味です。
Railsアプリでは、htmlファイルはhtml.erb
ファイルとなっています。
使用する言語自体はhtmlと変わらないので、そういうもんだと思って頂ければ幸いです。
2つめのルーティングのようにpost
またはpatch
のような(それ以外にも色々ありますが)とにかくget
以外のものはサーバーサイド設計の都合で作成したものですので、まずはシカトして頂いて結構です。
小まとめ
- Railsアプリはhtml.erbファイルを使用する
- ルーティングを見れば編集すべきhtml.erbファイルが分かる。
html.erbファイルの場所を確認
編集すべきhtml.erbファイルが分かったところで、そのファイルがある場所がどこなのかを見てみましょう。
ルーティングではファイル名(html.erbファイル)の他にフォルダ名も記載されています。
例として、
get "/" => "users#login_form"
について見てみましょう。
login_form.html.erbファイルはusersフォルダ内にあります。
では、usersフォルダがどこにあるかというと、app > views
内にあります。
つまりlogin_form.html.erbファイルはapp > views > users
フォルダ内にあることがわかります。
同様にindex.html.erbファイルはapp > views > posts
フォルダ内にあります。
ヘッダーファイルは別にある!
各ページを作成する際に、全てのhtml.erbファイルでヘッダーを作成する必要はありません。
ヘッダーのような共通するレイアウトはapp > views > layouts
フォルダ内のapplication.html.erb
ファイルを使用します。
このファイルを開くと、
<!DOCTYPE html>
<html>
<head>
<title>タイトル</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<!-- ここにコードを書く -->
<%= yield %>
</body>
</html>
となっています。
このファイルで一括して<title>
タグやメタタグの設定などが行われている訳ですね。
実際にヘッダーを書く場合は、<body>
タグ内の<%= yield %>
の上に記載していきます。
小まとめ
- html.erbファイルは
app > views > フォルダ名
内に格納されている - ヘッダーなどの共通するレイアウトは
app > views > layouts > application.html.erb
ファイルを編集する
scssファイルの場所を確認
続いて、CSSファイルに値するscss
ファイルの場所を確認しましょう。
Railsアプリではstylesheetはscssファイルに記載していきます。
scssファイルを使用することで、bootstrapを使用することが可能です。
bootstrapを使用する方法は後ほど紹介します。
scssファイルは、フォルダごとに記載していきます。
今回の例だと、このアプリにはusers.scss
とposts.scss
が存在する訳です。
その場所は、app > assets > stylesheets > ファイル名
となります。
共通レイアウト用のファイルはapplication.css
html.erbの項で紹介したapplication.html.erb
ファイル用のstylesheetもこのフォルダ内に格納されています。ファイル名はapplication.css
です。
そう、このファイルに限ってはscss
ではなくcss
であることに注意が必要です。
そこで、新たにcustom.scss
ファイルを作成し、そこにレイアウトを記載してきます。
bootstrapを適用させる
さて、scssファイルを適用させるには、custom.scssファイルの冒頭に下記を記載します。
@import "bootstrap-sprockets";
@import "bootstrap";
もし上記を記載してもbootstrapが適応されない場合は、Railsプレイヤーに
bootstrap-sassのgemを追加して~!
と伝えましょう。
https://www.sejuku.net/blog/11043
小まとめ
- Railsアプリでstylesheetは
scss
という拡張子が使用される - scssファイルは
app > assets > stylesheets > ファイル名
に格納されている
html.erbコーディングのルール
ここからは、実際にhtml.erbファイルを編集していく際のルールを見ていきます。
ルールといっても身構える必要はなく、どこに<div>
タグやclass
をつけるのかという話です。
Rails特有の記載を理解する
Railsアプリのhtml.erbファイルを見ていると、下記のような書き方を見かけます。
<% if ~~~ %>
<%= link_to("~~~","~~~") %>
html.erbファイル上でRuby言語を書くときは、<% %>
や<%= %>
で囲む必要があります。
<% %>
はWebアプリ上に表示されない
<%= %>
はWebアプリ上に表示される
と覚えておきましょう。
ちなみにこの部分を記載するのはRailsプレイヤーの仕事ですので、詳細を覚える必要はありません。
ただ、サーバー上で見た時に「この式はこの部分を示しているのかな?」と予測できるとスムーズにデザインできるかと思います。
ここからは、実際に<div>
タグで囲んだりクラスを付けるときに意識することを記載していきます。
<%= %>
は<div>
で挟む
例えば
<%= link_to("~~~","~~~") %>
にクラスを付けたい時は、
<div class="link">
<%= link_to("~~~","~~~") %>
</div>
とします。
タグ内の<%= %>
はシカト
例えば
<h3><%= @user.name %></h3>
に対してクラスを付けたいときは、<h3>
タグの中身は無視して
<h3 class="user-name"><%= @user.name %></h3>
とします。
<%= %>
はただの文字列だと思ってください。
each文はそれ自体を<div>
で囲む
Railsアプリには繰り返し表示させるeach
文というものがあります。
例として
<% @users.each do |user| %> <!-- これからeach文が始まるよ -->
<%= user.name %> <!-- 繰り返し表示する内容 -->
<% end %> <!-- each文終わります -->
というコードがあり、
繰り返し表示するエリア自体にuser-name-area
クラスをつけ、
繰り返し表示する内容にuser-name
クラスをつけるとき、
<div class="user-name-area">
<% @users.each do |user| %> <!-- これからeach文が始まるよ -->
<div class="user-name">
<%= user.name %> <!-- 繰り返し表示する内容 -->
</div>
<% end %> <!-- each文終わります -->
</div>
とします。
user-name
クラスは繰り返し表示されるクラスとなります。
if文は条件によって表示されるかどうかで<div>
で囲む範囲を変える
if文は、条件によって表示されるかどうかで<div>
で囲む範囲を変えます。
例えば条件によって表示されないif文自体に枠を表示するクラスを与えてしまうと、表示されないときに枠だけが表示されてしまいます。
条件によって表示されるかどうかの1つの指標として<% else %>
があるかどうかを確認するとよいでしょう。
条件によって表示されないif文はif文の中身を<div>
で囲む
<% if session[:user] %> <!-- ログインユーザーがいる場合 -->
<%= @user.name %> <!-- ユーザー名を表示 -->
<% end %> <!-- if文終わり -->
<!-- ログインユーザーがいない場合は何も表示しない -->
これにクラスを与えると、、、
<% if session[:user] %> <!-- ログインユーザーがいる場合 -->
<div class="user-name">
<%= @user.name %> <!-- ユーザー名を表示 -->
</div>
<% end %> <!-- if文終わり -->
となります。
条件に当てはまる時はuser-name
クラスが表示され、
条件に当てはまらない場合は、何も表示されません。
常に表示されているif文はそれ自体を<div>
で囲む
<% if session[:user] %> <!-- ログインユーザーがいる場合 -->
<%= @user.name %> <!-- ユーザー名を表示 -->
<% else %> <!-- ログインユーザーがいない場合 -->
<%= link_to("ログイン","~~") %> <!-- ログインページへのリンク -->
<% end %> <!-- if文終わり -->
<!-- ログインユーザーの有無に関わらず何かを表示している -->
これにクラスを与えると、、、
<div class="user-area">
<% if session[:user] %> <!-- ログインユーザーがいる場合 -->
<div class="user-name">
<%= @user.name %> <!-- ユーザー名を表示 -->
</div>
<% else %> <!-- ログインユーザーがいない場合 -->
<div class="link">
<%= link_to("ログイン","~~") %> <!-- ログインページへのリンク -->
</div>
<% end %> <!-- if文終わり -->
</div>
となります。
このとき、user-area
クラスは常に表示されており、user-name
クラスとlink
クラスはどちらかが表示されます。
まとめ
以上、長くなりましたが、Railsプレイヤーと一緒に仕事をするWebデザイナー向けにRailsの構文に対してとうクラス付けをしたらよいのかを記載しました。
お互いの仕事を尊重し、コミュニケーションを取りながら仕事を進めていきましょう!