Ruby/Rubyの基礎知識

RailsでTwitterクローンを作る(2) -- 画面レイアウトを整える

前回作成したTwitterクローンの画面レイアウトを見直し、画面遷移なしで投稿できるようにする。また、本格的に見えるデザインを手軽に適用する方法も紹介する。

橋本 拓也

執筆者:橋本 拓也

Rubyガイド

レイアウト・デザインを整える

前回の記事 RailsでTwitterクローンを作る(1) -- Scaffoldでひな形を生成 [Ruby] All About では、Railsの提供するScaffold機能を使って投稿(post)リソースのModel, View, Controllerを生成しました。

今回はViewとControllerを中心に、RailsアプリケーションのUIを編集する手順を学びます。

ページ遷移せずに投稿する

RailsがScaffoldで生成する設計はいわゆる「REST」スタイルに基づいたものですが、アプリケーションを作り進めて行くと、標準RESTスタイルからズレてくることがほとんどです。たとえば、Scaffoldで作った今の状態では別ページのフォーム(/posts/new)から新しい投稿を作成する必要がありますが、本家Twitterのように一覧ページを眺めながら新しい投稿ができると便利そうです。

画面遷移図

まずは新規作成ページ(new)を廃止して、一覧(index)にformを置いて投稿できるようにしましょう。新規作成ページを生成するapp/views/posts/new.html.erbファイルを見てみると、下のようにわずか3行しか書かれていません。

render 'form'という行に着目してください。これは「formという名前のpartial(断片)viewファイルをここに描画する」という命令です。partialファイルは_(アンダースコア)から始まります。app/views/posts/ディレクトリの中身を見てみると、確かに_form.html.erbというファイルが存在します。

app/views/posts/_form.html.erb の内容は次のようになっています。

ここまでの知識から、app/views/posts/index.html.erbrender 'form'という1行を追加してやれば一覧ページに投稿フォームを追加できるのではないかと予想できます。やってみましょう。一番上に追加します。

これでブラウザをリロードしてみると...

err

エラーになってしまいました。@postというインスタンス変数がないと言っているので、次のページでViewのひとつ前、Controllerの該当する処理を見てみましょう。

  • 1
  • 2
  • 3
  • 4
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます