第２回 動的ページを作ってみよう

第２回 動的ページを作ってみよう

連載第２回となる今回は、前回作成したRailsアプリケーションを利用して静的ページを追加してみたり、入力値を受け取って画面に表示する簡単な動的ページを追加してみたりします。

まずはHello World!

それでは早速始めましょう。Hello worldを表示するページを作成してみましょう。作成先は、前回使用した「lesson01」プロジェクトを使用します。コンソールから、カレントディレクトリがlesson01であることを確認した上で、下記のコマンドを実行してください。

$ rails generate controller HelloWorld index

実行すると、いくつかのファイルが生成されたかと思います。実は、これだけで静的ページの追加が完了しています。サーバーを起動して動作を確認してみましょう。

$ rails server

http://127.0.0.1:3000/hello_world/indexにアクセスしてみてください。下図の通りに表示されると思います。


図1. 自動生成された静的ページ

図1. 自動生成された静的ページ

これだけだとあっけない感じなので、今度は自動生成の力を借りずに、コードを書いて追加してみましょう。まずは、以下のコマンドを実行してください（注意：indexパラメータを外してあります）。

$ rails generate controller SayHello

では、生成されたファイルの中の、「app/controllers/say_hello_controller.rb」に対して、以下のコードを記述してください（赤字部分を追加）。

class SayHelloController< ApplicationController
   def hello_world
   end
end

続いて、「app/views/say_hello/」ディレクトリに、「hello_world.html.erb」ファイルを作成して、以下のコードを記述してください。

<html>
  <head>
    <title>Hello world!</title>
  </head>
  <body>
    <h1>Hello world!</h1>
  </body>
</html>

最後に、config/routes.rbに以下のコードを記述してください（赤字部分を追加）。

Lesson01::Application.routes.draw do
  get "say_hello/hello_world"
  
  ・・・
end

図2. 「Hello world!」の表示

図2. 「Hello world!」の表示

正しく表示されたでしょうか？非常に少ないコードで済んだことがお分かりいただけたかと思います。しかも、サーバーを再起動せずに追加や修正が反映されています。



入力値を表示する

次に、先ほど作成したページに入力フォームを追加して、入力した値を表示できるようにしてみましょう。まずは、hello_world.html.erbファイルを、以下のコードに修正してください（赤字部分を追加）。

<html>
  <head>
    <title>Hello world!</title>
  </head>
  <body>
    <h1>Hello world!</h1>
    <h2>Greeting</h2>
    <% form_tag "/say_hello/hello_world" do %>
      <%= text_field_tag :greeting %>
      <%= submit_tag "Greeting" %>
    <% end %>
    <%= @greeting %>
   </body>
</html>

次に、say_hello_controller.rbファイルを、以下のコードに修正してください。

class SayHelloController< ApplicationController
  def hello_world
    @greeting = params[:greeting]
  end
end

最後に、config/routes.rbに以下のコードを記述してください（赤字部分を追加）。

Lesson01::Application.routes.draw do
  get "say_hello/hello_world"
  post "say_hello/hello_world"
  
  ・・・
end

これで修正は完了です。ファイルを保存したら、http://127.0.0.1:3000/say_hello/hello_worldを表示してみましょう。

図3. 入力フォームを追加した画面

図3. 入力フォームを追加した画面

上の図の通りに表示されていれば成功です。もしエラー画面が表示された場合は、もう一度、コードを見なおしてみてください。では、表示された入力フォームに文字を入力して、Greetingボタンを押してみてください。

図4. Greetingボタンを押した結果

図4. Greetingボタンを押した結果

どうですか？入力した値が画面に表示されたでしょうか？ちなみに、Rails3からはデフォルトでHTMLエスケープされるようになりました。HTMLタグを入力して実行してみてください。結果のHTMLソースを見ると、エスケープされていることがわかると思います。

いかがでしたか？内容自体は凝ったことをしたわけではないですが、静的ページや動的ページを簡単に作成できることがお分かりいただけたかと思います。今回は、動的ページにて入力値の受け渡しにリクエストパラメータを使用しましたが、Railsではモデル（MVCのModel）を利用するのが一般的なようです。



おわりに

連載第２回目はいかがだったでしょうか。静的ページも動的ページ（かなり単純でしたが・・・）も、作成手順自体は非常に簡単であることがお分かりいただけたかと思います。ただ、（筆者もまだまだ知識不足ですが）Railsには他にも開発者にとって便利な機能があります。次回は、その中のScaffold機能を取り上げてみたいと思います。Scaffoldは簡単に説明すると、データモデル（テーブル含め）周りのモデルやコントローラー、ビューを自動生成してくれる機能です。お楽しみに！


第2回 おしまい



※.記載されているロゴ、システム名、製品名は各社及び商標権者の登録商標あるいは商標です。