サーバーを立ち上げよう
rails server
開発中のアプリケーションをブラウザで表示するためには、サーバーというものを起動する必要があります。サーバーの起動は、「rails server」というコマンドを実行するだけで完了です。
サーバーを起動した後、ブラウザで「localhost:3000」というURLにアクセスすると、右図の初期画面が表示されるようになります。
トップページを自動生成してみよう
rails generate controller
トップページを作成するには、「rails generate controller home top」
というコマンドをターミナルで実行します。
このコマンドを実行すると、新しいWebページが自動で作られ、
「localhost:3000/home/top」というURLにアクセスできるようになります。
ビューを理解しよう
ビューとは、ページの「見た目」を作るためのHTMLファイルです。
ブラウザとRailsのやりとりの中で、Railsからビューが返され、ページが表示されます。
ビューはviewsフォルダの中に置かれます。
先ほどの「rails generate controller home top」を実行すると、
viewsフォルダの中に「homeフォルダ」と「top.html.erb」という
ファイルが作成されます。「erb」は少し特殊なファイル形式ですが、
今はただのHTMLファイルだと思っておいてください。
コントローラのファイルを見てみよう
コントローラアクション
コントローラファイルの中身を見てみましょう。
「rails generate controller home top」を実行したとき、
「home_controller.rb」というコントローラのファイルが作成され、ファイルの中に「topメソッド」が追加されます。
コントローラ内のメソッドを「アクション」と呼びます。
アクションを理解しよう
アクション
コントローラ内のアクションは、ブラウザに返すビューをviewsフォルダの中から見つけ出す役割を担っています。具体的には、アクションは、コントローラと同じ名前のビューフォルダから、アクションと同じ名前のHTMLファイルを探してブラウザに返します。
ルーティングの役割
Rails内ではコントローラを経由してビューを返していますが、ブラウザとコントローラを繋ぐ役割を担うのがルーティングです。
ページが表示されるまでに、ルーティング→コントローラ→ビューという順で処理が行われていることを理解しておきましょう。
ルーティングは、送信されたURLに対して「どのコントローラの、
どのアクション」で処理するかを決める「対応表」のことです。
ブラウザでURLを入力すると、ルーティングがURLを見て、適切なコントローラのアクションを呼び出します。
ルーティングは「config/routes.rb」に定義され、右の図のように
「get “URL” => “コントローラー名#アクション名”」という文法で
書かれます。
これによって、ブラウザから「localhost:3000/home/top」というURLが
送信されたときに、homeコントローラーのtopアクションで処理されるようになります。
ルーティングを変えてみよう
ルーティング
ルーティングを書き換えることで、トップページのURLを変更することが
できます。右の図のように書き換えると、「localhost:3000/top」というURLでトップページにアクセスできるようになります。
URLを変更しても、”home#top” の部分が変わらない限りhomeコントローラのtopアクションに対応するビューファイル（= top.html.erb）の内容がブラウザに表示されます。
Rails.application.routes.draw do
# 「get “home/top”」の部分を書き換えてください
get “top” => “home#top”
end
サービス紹介ページを追加しよう
コマンドの意味を理解しよう
rails generate controller
トップページを作るときに入力したコマンドには、実は「コントローラ名」と「アクション名」が含まれています。
「rails generate controller コントローラ名 アクション名」を実行することで、コントローラと、それに対応したファイルが自動で用意されます。
しかし、同じ名前のコントローラがすでにある場合は、このコマンドを使うことはできません。
ルーティングとアクションを追加しよう
サービス紹介ページに関するルーティングとアクションを追加しましょう。
下図のように、すでに作られているルーティングとコントローラのファイルにコードを書き足すことで、ルーティングとアクションを追加できます。
レイアウトを整えよう
CSSファイルの場所
css
CSSファイルは「app/assets/stylesheets」フォルダに入っています。
「rails generate controller home …」コマンドを実行したときに、
CSSファイル(home.scss)も自動生成されます。
「scss」はCSSを拡張したもので、CSSを効率的に書く文法も使用できますが、このレッスンではCSSの文法のみを用いていきます。
Railsでは、「stylesheets」フォルダの中に保存されているCSSファイルに
コードを書けば、すべてのビューにCSSが適用されます。
トップページとサービス紹介ページのCSSを「home.scss」に記述していき
ましょう。
画像の保存場所
public
画像は、「public」フォルダに配置しておくと、「<img src=”/画像名” >」や「background-image: url(“/画像名”);」のように、画像名を指定するだけで、簡単に画像を表示することができます。
background-image: url(“/top.jpg”);
<img class=”about-img” src=”/tweets.png”>
localhost:3000でトップページが表示されるようにしよう
「localhost:3000」 (後ろに/○○がないURL) に対応するルーティングは、
「get “/” => “コントローラ名#アクション名”」というように、URLに”/”を
指定します。
リンクを作成するためには、<a>タグでテキストを囲み、「href=” “」の中にURLを指定する必要があったことを思い出しましょう。
hrefの中身をルーティングのURL部分と同じにすることで、簡単にリンク先を指定することができます。
リンクに関しては「HTML学習コース 初級編」で復習できます。
<!–トップページへのリンクにしてください–>
<a href=”/”>TweetApp</a>
</div>
<ul class=”header-menus”>
<li>
<!–サービス紹介ページへのリンクにしてください–>
<a href=”/about”>TweetAppとは</a>