Ruby on RailsのWebページを完成させてみよう

RubyonRailsのWebページを完成させてみよう

これまで、Ruby on Railsの

  • 特長・構造
  • ページが表示される仕組み
  • ページの作り方・修正方法
  • CSS・画像挿入で見た目を整える

など、基礎を学んできました。

今回で、いよいよページも完成です。

簡易的なウェブページですが、最初は小さい目標でも完成させ達成感を得ることが、プログラミング学習においてはなにより大切です。

最初の「目標物」を完成させてみましょう。

無料パソコンスクール講座
WordPress・SEO・プログラミング

あなたは以下のことで 悩んでないだろうか?

「フリーランスになりたいけど稼げるか不安だ」
「クラウドソーシングや営業して稼げるか不安だ」
「転職で必要になり困っている」
「スマホはあるけどパソコンが古くて不安だ」
「広告やLINEからの集客を得たい」
「仕事でグラフや資料制作を思うように作れない」
「プログラミングを学習して副業したいけど不安だ」
「副業をはじめたが、いっこうに成果がでない」
「退職してノートパソコンだけで収入を得たい」
「何がわからないかわからない状態が続き何度も挫折した」
「在宅で稼げるようになりたい」
「副業で収入を得たい」

そんなお悩みのあなたにこそ
取得して頂きたい内容です!

このメディアを運営している制作・プログラミング相談のプロが
全て無料で相談と学習できるように
無料スクールのメルマガ講座を開設しました。

\今なら300部限定無料ダウンロード/

今すぐ無料ダウンロードする

いまなら、先着300部限定で無料プレゼント付です。

今すぐ無料ダウンロードする

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)を、まとめることができます。

  1. 複数の「コントローラー名.html.erb」ファイルに存在しているヘッダー部分のコードを、コピーする
  2. 「application.html.erb」を開き、タグの中の最上部に貼り付ける
  3. 複数の「コントローラー名.html.erb」ファイルに存在しているヘッダー部分のコードを消す

これで、共通のレイアウトがサイト全体に適用されます。

Ruby on RailsのWebページを完成させてみようまとめ

Ruby on Railsのトップページ「Yay! You’re on Rails!」ではなく、自分で作成したトップページを表示させるには

ルーティングを書きかえ、トップページのURLを変更

します。

そして、アプリ全体に共通のレイアウトを適用させたい場合は

「application.html.erb」ファイルにまとめる

ことができます。

Ruby on Railsは

  • コマンドを使用して効率的に開発ができる
  • 記述量が少ないので、書きやすく読みやすい

という特長から、初心者向きといわれていますが、頭が混乱してしまっている人もいるかもしれませんが、プログラミング学習は

アウトプットが大事

です。

最初から大きな目標を立てるのではなく、簡単なWebページを作成しながら動作を理解していけば大丈夫ですよ。

この記事を書いた人

よこやま良平

こんにちは!18年以上ITエンジニアとして活動してきた
よこやま良平です。

4歳~85歳まで、年間1,792人名以上の方に
パソコンやプログラミング講座を行ってきました。

また18冊以上の書籍を出版しており、連続で1位を獲得しました。
オンライン講座では200件以上のレビューを頂いており
評価は4.9/5.0と高評価を得ています。

その他これまでに3000以上のサービス・システム・サイトを作成。