5 : ページを作ろう!①

前の章:データベースにデータを保存する。

Header5

0 : この章の目的

 Ruby on Railsはどのような作れるページを作れるかを知り、ページを実際に作ってみる。
前章では、Ruby on Railsでデータベースを作り、そこに実際のデータを作成しそのデータの変更・削除もしました。

ここまででなんとなくウェブページが裏で行っていたことが、なんとなく理解できたのではないかと思います。
前章ではFacebookの投稿を例にとりましたが、例えばメッセージアプリでは、

messages
id user send_to content
82903 山田太郎 佐藤一郎 1限の資料取ってくれない?
82904 鈴木実 高橋幸雄 今日テストだよ笑
80905 山本進 山口浩二 この前貸した100万返して

みたいな感じのデータベースにデータを保存して、それを表示させています。

もう簡単なデータベースの作り方も分かったのではないかとと思うので、
この章では保存したデータを「rails c」でなく、ブラウザのページに表示・作成・変更・削除させてみることをやってみたいと思います。
※ ページの表示にはhtmlを使うことになりますので、少しだけhtmlの内容を見ておいてください。


 Windowsをご利用の方は、こちらの設定を加えたかをご確認下さい。



1 : ページ設定をしてみよう!

第2章で少しだけ触れましたが、Ruby on Railsではデータの操作の方法に応じたページの設定をします。

大まかに分ければデータの表示・作成・変更・削除の4つになるのですが、ちゃんと分けると7つになります(やっていることは4つだけですが)。
※ とりあえずはこれ以外は使わないと思って下さい。

  • データの全表示     index
  • 例:タイムライン
    Post.allを裏で設定
  • 一つのデータの表示   show
  • 例:一つのツイート
    Post.find(idの数字)を裏で設定
  • 新しいデータの記入   new
  • データの作成      create
  • 例:ツイートする画面
    Post.create(いろいろ)を裏で設定
  • 編集するデータの記入  edit
  • データの変更      update
  • 例:プロフィールを変更する画面
    Post.find(idの数字).update(いろいろ)を裏で設定
  • データの削除      destroy
  • 例:ツイートを削除する画面
    Post.find(idの数字).destroyを裏で設定

こう見ると、前章で取り扱ったデータ操作の方法と多く対応していることが分かると思います。
この7つの設定をデータ操作を設定するファイルに設定します。

 この章では、この7つのページを前章で作った「posts」のデータベースを使って設定したいと思います。

これらのページの設定には、3つの設定をする必要があります。
  • 7つのページのうち、どれを使うかの設定
  • データ操作の設定
  • ページの内容の設定(html)
この3つの設定を行えば、ページは表示されます。
ここではまず「1つのデータの表示(show)」をするページを作ってみましょう!


 ① : 1つのデータを表示する(show)


1つのデータの表示(show)を上の3つの設定にそってやっていきます。
1つのデータの表示(show)は例えば一つのツイートの内容を示すページになり、前章に出てきたidでページを区別します。

なので、1つのデータの表示(show)ではrails c

1 Post.find(選択するid)

を使います。 Chrome localhost posts 1 2 のようにidに応じたデータが表示されるページを作ります。

では、設定をしてみましょう!


 ⑴ : 7つのページを設定する


 まず「7つのページの設定」からやってみましょう!

設定ファイルを変更するので、Sublime Textで、作った雛形ウェブページの「myapp」を開いてみましょう!
※ Sublime Textでのフォルダの開き方はこちらを参考にして下さい。
 Windowsでのファイル・フォルダの開き方はこちらを参考にして下さい。


開けたら下の手順に従って、routes.rbというファイルを開いて下さい。 Sublime text open route rb このroutes.rbというファイルが、7つのページからどのページを使うかを決めるファイルになります。

 routes.rb
1 2 3 4 5 6 7 8 9 10 ... 56 57 Rails.application.routes.draw do # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # Example of regular route: # get 'products/:id' => 'catalog#view' # 省略 end

この設定ファイルに、データベースに対してどのページを使うのかを設定します。

一見長そうに見えますが、「#」から始まる行は全て無視されるので実質なにも設定されていません。
設定は「do」から「end」の間の行に決めていきます。
では下の1行を追加して、設定をしましょう!

 routes.rb(2行目を追加)
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


1 2 3 4 5 6 7 8 9 10 11 ... 57 58 Rails.application.routes.draw do resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # Example of regular route: # get 'products/:id' => 'catalog#view' # 省略 end

これで「posts」というデータベースに対して、

データの全表示(index)・一つのデータの表示(show
新しいデータの記入(new)・データの作成(create
編集するデータの記入(edit)・データの変更(update
データの削除(destroy


のページを使うことを設定しています。
もしデータを削除したくない時は、

 routes.rb(2行目)
2 resources :posts , :only => [:show, :index, :new, :create, :edit, :update]

のように「:only =>」の後で、「destroy」以外のものを指定します。
※ 相変わらず「:」はついていますが、仕様なんで許して下さい

なのでページの設定は、
resources :データベース名, :only => [:加えたいページ...]
routes.rbに追加することで設定します。
※ 7つ以外にページはありません。

 messages」というデータベースで
  • データの全表示(index)
  • データの作成(create)
  • 一つのデータの削除(destroy)
のページを作りたい場合は「routes.rb」にどのような設定を追加すればいいのでしょうか?



 routes.rb(2行目)
1 resources :messages, :only => [:index, :create, :destroy]


 ⑵ : データ操作の設定

7つ全てのページを使うことを設定しましたので、次はデータをどのように操作するかを設定しましょう。
ここでは1つのデータの表示(show)をやってみましょう!
まずはターミナルを使って、データ操作とページの設定ファイルを作ります。
ターミナルで「myapp」にまで移動しましょう!


 Windowsでの移動の方法はこちらを参考


ターミナル
1 2 3 cd Desktop cd rails_project cd myapp

移動ができたら下の入力をして下さい。
この入力でデータベース「posts」のデータ操作とページの設定ファイルを作ります。

ターミナル
 Windowsをご利用の方は、「コマンドプロンプト」をご利用下さい。
1 rails g controller posts

下のような表示がでてきたでしょうか?この入力で設定ファイルが作成されました。 Terminal rails g controller posts では、それを確認しましょう!まずは、Sublime Textでmyappを開いてみましょう!
※ Sublime Textを使ったフォルダの開き方はこちらを参考にして下さい
 Windowsでのファイル・フォルダの開き方はこちらを参考にして下さい。

ウィンドウが出てきたらappを開いてみましょう。
下のように、その中にcontrollersviewsというフォルダが入っていると思います。
では、それぞれを開いてみましょう。 Sublime text controller folder and view folder controllersにはposts_controller.rbというファイルが、viewsにはpostsというフォルダがあると思います。

これらがさっきのrails g controller postsで作られたファイル・フォルダになり、それぞれでデータ操作の設定とページの設定をします。 Sublime text post controller and post view 長々と説明しても仕方ないので、まずはデータ操作の設定から始めましょう。
まずは、さっき見てみたposts_controller.rbのファイルを開いてみましょう。

 posts_controller.rb
1 2 class PostsController < ApplicationController end

このような内容になっているでしょうか?
まずは下のように内容を変更してみて下さい。

 posts_controller.rb(半角英数字で入力)
※ 変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 class PostsController < ApplicationController def show end def index end def new end def create end def edit end def update end def destroy end end

rails g controller データベース名で設定ファイルを作ったら、まずは作ったデータベース名_controller.rbに上のような設定を加えて下さい。
このdef ページ名endの間に、「routes.rb」で設定したページごとで行うデータ操作の方法を指定します。
(例えば「Post.all」だったり「Post.create(いろいろ)」だったり「Post.find(番号)」)

 なのでもしroutes.rbdestroyを設定しなかったのであれば、

21 22 def destroy end

の2行はいりません。
ここらへんは好きなように設定して下さい。
では、この中にデータの操作の方法を設定していきましょう。
今回は1つのデータの表示(show)なので、

1 2 def show end

にデータ操作の設定をしていきます。
では設定してみましょう。

 posts_controller.rb(3〜5行目)
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


3 4 5 def show @post = Post.find(params[:id]) end

これがページに「1つのデータの表示(show)」をするデータ操作の設定です。

よく見たら、「Post.find(選択するid)」が使われていますね。
後ろのparams[:id]という部分はページからidを取ってくることを示しているんですが、ここらへんは覚えるなりコピペして下さい。
では、「@post」はなんなのでしょうか?これはいるのでしょうか?

この「@post」は、ページを表示させるhtmlファイルにデータを表示させる時の標識になります。
この標識をhtmlファイルの中に入れていくことで、ページにデータを表示させます。
※ この標識の名前は「@」から始めるものならなんでも大丈夫なのですが、自分が分かりやすい名前にしましょう。

 「tweets」のデータベースの「1つのデータの表示(show)」の設定を書いてみましょう!


 tweets_controller.rb
3 4 5 def show @tweet = Tweet.find(:params[:id]) end


 ⑶ : ページを設定する

ここまでで「7つのページの設定」と「データ操作の設定」が終わりました。

いよいよ、保存したデータをページに表示してみましょう! ページの作成は、前に少し触れた「views」フォルダにhtmlファイルを作ることでやっていきます。
まずは下の手順に従って、Sublime Textで開いたmyapp > appからviewsフォルダを開いてみましょう!
※ Sublime Textの開き方はこちらを参考にして下さい
 Windowsでのファイル・フォルダの開き方は、こちらを参考にして下さい。
Sublime text select views この「views」フォルダに入っている「posts」ファルダに、ページを表示させるための設定ファイル・htmlファイルを作っていきます。

まずはこのposts」ファルダにページを設定するファイル、「show.html.erb」を保存してみましょう!
※ ファイルの保存の方法はこちらを参考にして下さい
※ 「show.html」でなくて「show.html.erb」などという変な名前なのは、Ruby on Railsでデータを扱うためのファイルだからです。

できたら、下の手順でshow.html.erbを開いてみましょう。 Sublime text posts show html erb この設定ファイルにページの設定を記入していきます。
ついでに同じ手順で、

  • 「index.html.erb」(データの全表示をするページ)
  • 「new.html.erb」(新しいデータの記入をするページ)
  • 「create.html.erb」(データの作成)
  • 「edit.html.erb」(編集するデータの記入をするページ)
  • 「update.html.erb」(データを変更するページ)
  • 「destroy.html.erb」(データの削除をするページ)

を新しくposts」フォルダの中に作ってみましょう! Sublime text views posts all これらのファイルを使って、他のページの設定をしていきます。
 では、ページの設定をしてみましょう!

まずはhtmlの復習を兼ねて、文字を表示させましょう。

 show.html.erb
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


1 <h1>投稿</h1>

これで内容が保存できたら、ブラウザで表示させてみましょう!

Ruby on Railsで作ったウェブページでは、まずサーバーを立ちあげてからページを表示させます。
※ 詳しい内容はこちらを参考にして下さい

サーバーを立ちあげて、ページを見てみましょう!
まずは、ターミナルで「myapp」に移動して下さい。


 Windowsをご利用の方は、こちらを参考にして下さい。


ターミナル
1 2 3 cd Desktop cd rails_project cd myapp


「myapp」まで移動できたら、rails sを入力してサーバーを立ちあげましょう!

ターミナル
 Windowsをご利用の方は、「コマンドプロンプト」をご利用下さい。
1 rails s

下のように表示されたでしょうか? Terminal rails s これでサーバーを立ち上げることができました。
サーバーが立ち上がったんで、これでページもみられるようになりました。

では、「0.0.0.0:3000/posts/1」をブラウザで開いてみましょう!


 Windowsをご利用の方は、localhost:3000を開いて下さい。


下のようなページは出てきたでしょうか? Chrome localhost posts 1 1 「1つのデータを表示する(show)」のページは、0.0.0.0:3000/データベース名/idの番号で「idの番号」のデータを選択することができます。
このページはpostsデータベースの中から、idが1のデータを選択しています。
では次に試しに、「0.0.0.0:3000/posts/2016」をブラウザで開いてみて下さい。
 Windowsをご利用の方は、localhost:3000/posts/2016をブラウザで開いてみて下さい。

下のようなエラーの表示っぽいものはでてきたでしょうか? Chrome localhost posts 2016 これは、idが2016のpostsのデータ」がないからです。
もし他に保存したデータがあったら、そのページを開いてみましょう!

 tweetsのデータベースからidが9028のデータを選択」する「1つのデータの表示(show)」をするページをブラウザで開くには、どのように入力すればいいのでしょうか?


 ブラウザ
1 0.0.0.0:3000/tweets/9028


ここまでで各データのページを作ってみました。

でもこれだけではなにも変わらなくて面白くないので、保存したデータを表示させてみましょう!
下のように「show.html.erb」を変更してみましょう!

 show.html.erb(2、3行目を変更)
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


1 2 3 <h1>投稿</h1> <p><%= @post.name %></p> <p><%= @post.content %></p>

内容が変更できたら、ターミナルでmyappに移動してからrails sでサーバを立ち上げて、「0.0.0.0:3000/posts/1」を開いてみましょう!

 Windowsでの「myapp」までの移動はこちらを参考にして下さい。
 Windowsでのページは、localhost:3000/posts/1から開けます。


下のように保存されたデータが表示されたでしょうか? Chrome localhost posts 1 2 他に保存したデータがあれば、それも同じように開いて内容を確認してみましょう!
※ Sequel Proの使い方はこちらを参考にして下さい。
※ SqliteBrowserの使い方はこちらを参考にして下さい。

では、htmlファイルの設定を説明しましょう。

 show.html.erb
1 2 3 <h1>投稿</h1> <p><%= @post.name %></p> <p><%= @post.content %></p>

内容はなんとなく想像できるのではないかと思います。

先程データ操作の部分で設定した「@postがありますね。この@postがページで選択されたデータになります。

なので、もしデータ操作の部分・「posts_controller.rb」「@post」を設定しなければ、このようなデータは表示されません。

2 <%= @post.name %>

の部分で、データ操作で選択された「@post」から「name」を取り出しています。
同じように、

3 <%= @post.content %>

で「content」を取り出しています。
少しだけ説明を加えます。

Ruby on Railsで作るhtmlファイルでは、データベースからデータを取ってくる必要があります。

そのような部分は、
<%= 内容 %>
もしくは、
<% 内容 %>
のように設定します。

この「<%=」もしくは「<%」と、「%>」の間でデータベースからの情報をとってきます。
「<%=」と「%>」の間の内容はページに表示されますが、「<%」と「%>」の間の内容は表示されません。


内容とは言っても、ここに入る内容はデータベースの操作の設定や簡単な計算しか入れることができません。これはその都度説明していきましょう。
今回のような「1つのデータを表示する(show)」データベースの操作は、
@設定した標識.枠組みの名前
で設定します。

 では、「@tweetからplaceを選択」する表示は、どのように設定すればいいのでしょうか?


1 <%= @tweet.place %>

 今のページでは、選択したデータ「@post」から「name」と「content」しか表示させていませんが、「place」を表示させる設定を追加しましょう。


1 <p><%= @post.place %></p>


 ⑷ : まとめ

Ruby on Railsでページを表示するには、3つの設定が必要になる
  • 7つのページのうち、どれを使うかの設定
  • データ操作の設定
  • ページ内容の設定
※ 7つのページは index/ show/ new/ create/ edit/ update/ destroyの7つ


設定が終わったらターミナルのrails sでサーバーを立ち上げ、ブラウザで0.0.0.0:3000/任意の場所を入力することでページを表示することができる。

設定した内容はこちらを参考にしてみて下さい

「config」フォルダの中にある「routes.rb」ファイルを変更することで、どのページを使うかを設定する。

 routes.rb(3行目)
1 2 3 4 5 6 7 8 9 ... 57 58 Rails.application.routes.draw do resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # 省略 end

「:only =>」の後の「[]」に好きなページを追加することで、そのページを使うことを設定する。

「app > controllers」フォルダにある「データベース名_controller.rb」ファイルで、それぞれのページでどのようなデータ操作をするかを設定する。

今回は、1つのデータを表示する(show)に触れた。

 posts_controller.rb
1 2 3 def show @post = Post.find(:params[:id]) end

1つのデータを表示する(show)ページでは、find(:params[:id])でidごとにデータを選択する。
また@好きな名前で、ページを表示させるhtmlファイルに埋め込むための標識を設定する。

「app > views」フォルダ内にある「データベース名」のファルダに、ページの表示をするhtmlファイルを作ることで設定していく。
具体的には使うページに応じて、
  • index.html.erb
  • show.html.erb
  • new.html.erb
  • create.html.erb
  • edit.html.erb
  • update.html.erb
  • destroy.html.erb
を作成する。
今回は、1つのデータを表示する(show)ページであるshow.html.erbを設定した。

 show.html.erb
1 2 3 <h1>投稿</h1> <p><%= @post.name %></p> <p><%= @post.content %></p>

データベースから選択したデータは、「<%=」と「%>」の間に設定する。
選択したデータは@設定した標識.枠組みの名前で表示させる。

設定が完了したらターミナルで「rails s」をした後で、ブラウザでページを開く。
1つのデータを表示する(show)ページは、0.0.0.0:3000/データベース名/表示するidで開く。

 Windowsをご利用の方は、localhost:3000/データベース名/表示するidで開く。
ここまでで一つのデータを表示させることができたと思います。
次はすべてのデータを表示させる、タイムラインのようなページを作ってみましょう。

設定した内容はここにまとめてあるので見てみて下さい


 ② : 全てのデータを表示する(index)


では、全てのデータを表示するタイムラインのようなページを作ってみましょう。 データを全て表示させるので、前章の内容で言えば

1 Post.all

をすると考えてもらえれば大丈夫です。 Chrome posts all 2 のように投稿一覧が出てくるページを作っていきます。

設定は、「どのページを使うかの設定」「データ操作の設定」「ページの内容の設定」の3つがありますのでそれぞれについてやってみましょう。


  ⑴ : ページを設定する


 まず「7つのページの設定」からやってみましょう!

configフォルダにある、7つのページのうちどのページを使うかを決めるroutes.rbファイルを見てみましょう。

 routes.rb(3行目)
1 2 3 4 5 6 7 8 9 ... 57 58 Rails.application.routes.draw do resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # 省略 end

内容は前に変更しましたよね。

上のように「index」を追加したと思います。
これでデータの全表示をする(index)ページを使うことを設定できました。
 では「データ操作」の設定をしましょう。

「posts」データベースのデータ操作は、posts_controller.rbファイルに設定します。

まずは、Sublime Textでapp > controllersフォルダにある、posts_controller.rbファイルを開きましょう。

※ ファイル・フォルダの開き方はこちらを参考にして下さい
 Windowsでの、ファイル・フォルダの開き方はこちらを参考にして下さい。


開けたら、「def index」と「end」の間を下のように設定しましょう。

 posts_controller.rb(8行目を追加)
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


7 8 9 def index @posts = Post.all end

Post.allの部分は全く同じですね。これでデータを全て選択します。
※ 信じられないのであれば、「rails c」で入力して確認してみてください。

ページ(html)で表示させる時の標識の「@posts」が複数形になっていますね。
別に名前はなんでもいいんですけど、データを全て表示するなら複数形のほうが分かりやすいのでこんな感じになっています。

データ操作はこんな感じになります。
「index」では、「データベース.all」でデータを全て選択して、標識を設定して下さい。

 tweetsデータベースにある全てのデータを選択するデータ操作を設定して下さい。


1 @tweets = Tweet.all

 では、ページの設定をしましょう。

まずは、Sublime Textで開いたmyappapp > views > postsを開いてみましょう。
その中にindex.html.erbファイルはあるでしょうか?あったら開きましょう!

このファイルに「データの全表示をする(index)」ページを表示する設定を追加していきます。

 まずは復習から始めましょう。 Chrome posts all 1 上のような表示をするように、「index.html.erb」ファイルを設定して下さい。
※ 線は<hr>で書くことができます。
※ show.html.erbではないので、ご注意ください。


 index.html.erb
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


1 2 <h1>投稿一覧</h1> <hr>

できたらターミナルでmyappに移動してから、rails sを入力して下さい。

サーバーが立ち上がったら、ブラウザで「0.0.0.0:3000/posts」を開いてみて下さい。
 Windowをお使いの方はlocalhost:3000/postsを開いて下さい。

ページは表示されたでしょうか? Chrome posts all 1
ここでは、下のような簡単なSNSのようなページ表示をしてみましょう! Chrome posts all 2
では、下のようにindex.html.erbファイルを変更しましょう。

 index.html.erb(3〜7行目を入力)
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


1 2 3 4 5 6 7 8 <h1>投稿一覧</h1> <hr> <% @posts.each do |p| %> <p><%= p.id %></p> <p><%= p.name %></p> <p><%= p.content %></p> <hr> <% end %>

一回、「rails s」で動かしたサーバーを「Command」と「c」を一緒に押して止めてから、もう一度「rails s」を入力して下さい。
これで内容の変更が適用されます。


 Windowsをご利用の方は、
 「rails s」で動かしたサーバーを「ctrl」と「c」を一緒に押して止めてから、もう一度「rails s」を入力して下さい。


 今後設定ファイルを変更してちゃんと保存したのにページが変更されなかった時は、「Command」と「c」でサーバーを止めてからまた「rails s」でサーバーを起動させてください。

できたらブラウザで「0.0.0.0:3000/posts」を開いてみて下さい。
 Windowsをご利用の方は、「localhost:3000/posts」を開いてみて下さい。 Chrome posts all 2 SNSのトップページのようなページが表示されたでしょうか?
さきほどの変更でなにをやったかを説明します。

 index.html.erb
1 2 3 4 5 6 7 8 <h1>投稿一覧</h1> <hr> <% @posts.each do |p| %> <p><%= p.id %></p> <p><%= p.name %></p> <p><%= p.content %></p> <hr> <% end %>

なんとなくですけど、

1 2 3 4 <p><%= p.id %></p> <p><%= p.name %></p> <p><%= p.content %></p> <hr>

ここの部分を複数回表示させていることは分かるでしょうか?
中にある

1 <%= p.name %>

で名前を、idで投稿番号を、contentで内容を表示しています。
では、3行目と7行目はなにをしているのでしょうか?

 index.html.erb
1 2 3 4 5 6 7 8 <h1>投稿一覧</h1> <hr> <% @posts.each do |p| %> <p><%= p.id %></p> <p><%= p.name %></p> <p><%= p.content %></p> <hr> <% end %>

この3行目では、
Post.all」を使ってデータを全選択をした「@posts」(下の「posts_controller.rb」)を一つ一つのデータ(p)に分けて、「<% end %>」までの部分を繰り返して表示しています。

 posts_controller.rb
1 2 3 def index @posts = Post.all end

この<% @posts.each.do |p| %><% end %>を使って、複数あるデータを繰り返し表示させます。

そして、それぞれの繰り返しで「p」にデータを入り、それが表示されます。
※ この「p」も名前はなんでもいいのですが、「post」の頭文字をとって「p」にしています。名前は自由につけて大丈夫です。
設定の方法の説明をしましょう。
Post.all」のように複数のデータを扱う時は、それを一つ一つのデータに分けて表示する必要があります。

 このような複数のデータは、
<% @設定した標識.each do |好きな名前| %>
一つ一つのデータに分けます。
※ 「<%」で「<%=」でないので注意。

 分けたデータは、
<% end %>
までの部分で繰り返し表示します。
※ ここも「<%」で「<%=」でないので注意。

 中のデータの表示は、1つのデータを表示(show)と同じような感じで
<%= 設定した名前.枠組みの名前 %>
で表示します。

※ ちなみに前章で少し触れたデータの検索をする「where」も、この方法で表示させます。検索だと複数個結果がでることもあるからです。
 データの全表示をするページに「データを作成した時間」を追加する設定はどのようになるでしょうか?
※ データの作成時間が入っている枠組みは「created_at」になります。


1 <p><%= p.created_at %></p>

 下のようにデータ操作をした「@messages」の送り主「name」送り先「send_to」内容「content」を表示させるページを設定してみましょう。

 messages_controller.rb
1 2 3 def index @messages = Message.all end


 index.html.erb(解答例)
1 2 3 4 5 6 7 8 <h1>メッセージ一覧</h1> <hr> <% @messages.each do |m| %> <p><%= m.name %>さんからのメッセージ</p> <p><%= m.send_to %>さん宛</p> <p><%= m.content %></p> <hr> <% end %>

 もう開いた後ですが、ブラウザでの開き方について説明します。

0.0.0.0:3000/データベース名をブラウザで開けば、データの全表示(index)をするページを開くことができます。
今回は「posts」データベースの内容をすべて表示させるためのページだったので、

 ブラウザ
1 0.0.0.0:3000/posts

で開きました。

 「tweets」のデータを全て表示するページをブラウザで開くにはどのページを開けばいいでしょうか?


 ブラウザ
1 0.0.0.0:3000/tweets


 ⑵ : ページの移動をする


ここまででページの全表示は終わりましました。

ですが、いちいちブラウザで入力してページを移動するのは面倒だと思いませんか?ページはワンクリックで移動したいですよね?

最後に、全てのデータのページから一つのデータのページへ・一つのデータのページから全部のデータのページへの移動をやってみたいと思います。

ページの移動は全て、ページの設定をしている「html.erb」ファイルでやっていきます。まずは「show.html.erb」に、データを全表示するページに移動できるような設定(リンク)を加えましょう。

ページを移動させるのは
<a href="飛びたいページ">文字</a>
と設定して、クリックすると指定したページに移動する文字(リンク)を表示します。

では試してみましょう。「show.html.erb」を下のように変更してみましょう。

 show.html.erb(4行目)
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


1 2 3 4 <h1>投稿</h1> <p><%= @post.name %></p> <p><%= @post.content %></p> <p><a href="https://amazon.com">amazon</a></p>

変更ができたらブラウザで「0.0.0.0:3000/posts/1」を開いてみましょう。
※ 内容を適用させるために、一回rails sで動かしたサーバーを「Control」と「c」を一緒に押して止めてから、もう一度rails sを入力して下さい。


 Windowsをご利用の方は、
  「ctrl」と「c」でサーバーを止め「rails s」を入力し、「localhost:3000/posts/1」を開いて下さい。


下のように表示されたでしょうか? Chrome localhost posts 1 3 「amazon」の部分をクリックしたら、amazonのページに移動できたでしょうか?

 Facebookのページ(http://facebook.com)へ移動する「クリック」の文字(リンク)を設定してみてください。


1 <a href="http://facebook.com">クリック</a>

同じような具合で、「1つのデータを表示する(show)」ページから「全てのデータを表示する(index)」ページに移動できるようにしましょう。

 show.html.erb(4行目を変更)
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


1 2 3 4 <h1>投稿</h1> <p><%= @post.name %></p> <p><%= @post.content %></p> <p><a href="/posts">トップに戻る</a></p>

変更ができたら、ブラウザで「0.0.0.0:3000/posts/1」を開いてみましょう。
※ 内容を適用させるために、一回rails sで動かしたサーバーを「Control」と「c」を一緒に押して止めてから、もう一度rails sを入力して下さい。


 Windowsをご利用の方は、
  「ctrl」と「c」でサーバーを止め「rails s」を入力し、「localhost:3000/posts/1」を開いて下さい。


変更をした「トップに戻る」を押したら、
「データの全表示(index)」をするページ「0.0.0.0:3000/posts」に移動はできたでしょうか?

 「/posts」の「/」が、
そのページ自身のurl「0.0.0.0:3000」(Windowsの場合は「localhost:3000」)を示しているのでページを移動できるようになっています。


 photosデータベースの「index」ページに移動する「クリック」の文字(リンク)を設定をしてみて下さい。


1 <a href="/photos">クリック</a>

では、「index」のページから「show」のページに移動できるようにしましょう。
「index.html.erb」ファイルを下のように変更して下さい。

 index.html.erb(4行目)
※ 半角英数字で入力。変更が完了したら「Command」と「s」を一緒に押して内容を保存して下さい。
 Windowsをご利用の方は、「ctrl」と「s」を一緒に押して内容を保存して下さい。


1 2 3 4 5 6 7 8 <h1>投稿一覧</h1> <hr> <% @posts.each do |p| %> <p><a href="/posts/<%= p.id %>"><%= p.id %></a></p> <p><%= p.name %></p> <p><%= p.content %></p> <hr> <% end %>

変更ができたら、ブラウザで「0.0.0.0:3000/posts」を開いてみましょう。
※ 内容を適用させるために、一回rails sで動かしたサーバーを「Control」と「c」を一緒に押して止めてから、もう一度rails sを入力して下さい。


 Windowsをご利用の方は、
  「ctrl」と「c」でサーバーを止め「rails s」を入力し、「localhost:3000/posts」を開いて下さい。


Chrome posts all 3 このように表示されたでしょうか?
「id」の部分をクリックしてみて、ページ移動できるかを確認してみましょう!

 内容を説明しましょう!

0.0.0.0:3000/posts/idの番号」省略して「/posts/idの番号をブラウザで入力することで、「一つのデータを表示(show)」するページに移動します。

ここでは「/posts/idの番号」を指定するために、idの番号」の部分にデータベースからidを入れる「<%= p.id %>」の設定をしています。
これでデータの「id」に応じたページの移動をしています。
 booksデータベースの「idが10」の「show」ページに移動する「クリック」のリンクを設定してみて下さい。


1 <a href="/books/10">クリック</a>


 ⑶ : まとめ

「データの全表示をする(index)」ページの3つの設定をまとめる。

設定した内容はこちらを参考にしてみて下さい

「config」フォルダの中にある「routes.rb」ファイルに「index」を設定する

 routes.rb(3行目)
1 2 3 4 5 6 7 8 9 ... 57 58 Rails.application.routes.draw do resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # 省略 end


「app > controllers」フォルダにある「データベース名_controller」ファイルの「index」を設定する

 posts_controller.rb
1 2 3 def index @posts = Post.all end

データを全て選択するデータ操作「.all」と、htmlで表示させる標識を設定する

「app > views」フォルダ内にある「データベース名」のファルダの中にある、「index.html.erb」に内容を設定していく。

 index.html.erb
1 2 3 4 5 6 7 8 <h1>メッセージ一覧</h1> <hr> <% @message.each do |m| %> <p><%= m.name %>さんからのメッセージ</p> <p><%= m.send_to %>さん宛</p> <p><%= m.content %></p> <hr> <% end %>

ページでは、「controller」ファイルで設定したデータを表示します。

<% @設定した標識.each do |名前| %>で複数のデータを各データに区切り、
<% end %>との間にその各データの表示の方法を設定します。

<%= 名前.枠組みの名前 >で各データを表示します。

設定が完了したらターミナルで「rails s」をした後で、ブラウザでページを開く。
全てのデータを表示する(index)ページは、0.0.0.0:3000/データベース名で開く。
 Windowsをご利用の方は、localhost:3000/データベース名で開く。
 ページの移動(リンク)

ページの移動は、
<a href="飛びたいページ">文字</a>
で行う。

「index」ページへの移動は、

1 <a href="/posts">クリック</a>

で、「show」ページでの移動は例えば、

1 <a href="/posts/<%= p.id %>">クリック</a>

で設定する。

設定した内容はここにまとめてあるので見てみて下さい
 ここまででデータの全表示をするページを作りました。
長くなったので、この章の続きの「ページでのデータの作成・変更・削除」は次のページでやりましょう!

ここまでで設定した内容はこちらを参考にして下さい。