記事内にプロモーションリンクが含まれる場合があります。
これまで、Ruby on Railsの
- 特長・構造
- ページが表示される仕組み
- ページの作り方・修正方法
- CSS・画像挿入で見た目を整える
など、基礎を学んできました。
今回で、いよいよページも完成です。
簡易的なウェブページですが、最初は小さい目標でも完成させ達成感を得ることが、プログラミング学習においてはなにより大切です。
最初の「目標物」を完成させてみましょう。
目次
Ruby on RailsトップページのURLを変更しよう
前回までの記事で、新しいページを追加したり、CSSや画像でウェブページを修正してきましたね。
しかし、いざ、自分で作ったトップページを見ようと
http://localhost:3000/
にアクセスしてみても、Ruby on Railsのトップページ「Yay! You’re on Rails!」が表示されてしまいます。
自分で作成したトップページを表示させるには？
Ruby on Railsのトップページ「Yay! You’re on Rails!」ではなく、自分で作成したトップページを表示させるには
ルーティングを書きかえる
必要があります。
「routes.rbファイル」を開き
get "URL" => "コントローラ名#アクション名"を、次のように変更します。
get "/" => "コントローラ名#アクション名"
または
root 'コントローラ名#アクション名'URLに「/」を指定すればOKです。
または root ‘コントローラ名#アクション名’ でもOKです。
Ruby on Railsリンクの作り方
ヘッダーに各ページへのリンクを追加してみましょう。
リンクの作り方は
HTMLの<a>タグでテキストを囲み、href=""の中にURLを指定
でしたね。
href=””の中のURL部分を、ルーティングのURLと同じになるように変更すればOKです。
ビューファイル「app/views/コントローラー名/html.erb」を開き
<a href="/">テキスト</a>
<a href="/アクション名">テキスト</a>というように変更します。
Ruby on Railsリンクのメソッド（link_to)
Ruby on Railsでは、「link_to」というメソッドを使うと、htmlの<a>タグを生成しリンクを作成することができます。
「link_to」 は、Rubyのコードなので、<%=%>で囲みます。
「application.html.erb」を開き
<%= link_to 'リンク文字列', リンク先のURL %>のように記述します。
共通のレイアウトをまとめる
Ruby on Railsでは、例えばヘッダーなど、すべてのページに共通するレイアウト（HTML）を、まとめることができます。
- 複数の「コントローラー名.html.erb」ファイルに存在しているヘッダー部分のコードを、コピーする
- 「application.html.erb」を開き、タグの中の最上部に貼り付ける
- 複数の「コントローラー名.html.erb」ファイルに存在しているヘッダー部分のコードを消す
これで、共通のレイアウトがサイト全体に適用されます。
Ruby on RailsのWebページを完成させてみようまとめ
Ruby on Railsのトップページ「Yay! You’re on Rails!」ではなく、自分で作成したトップページを表示させるには
ルーティングを書きかえ、トップページのURLを変更
します。
そして、アプリ全体に共通のレイアウトを適用させたい場合は
「application.html.erb」ファイルにまとめる
ことができます。
Ruby on Railsは
- コマンドを使用して効率的に開発ができる
- 記述量が少ないので、書きやすく読みやすい
という特長から、初心者向きといわれていますが、頭が混乱してしまっている人もいるかもしれませんが、プログラミング学習は
アウトプットが大事
です。
最初から大きな目標を立てるのではなく、簡単なWebページを作成しながら動作を理解していけば大丈夫ですよ。