トップページの作成

トップページの作成

この講座では実際にblogアプリを作成してblogのトップページの作成をすることを目指します。

吉田先生

blogのトップページを作成し、サイトのトップページの設定を変更しましょう。


トップページの作成

1.Workspaceの作成

新規でWorkspaceを作成します。

①AWSのコンソールでCloud9を選択→②Your environmentでCreate environmentを選択→③Workspaceの名前は今回はBlog_railsとし、概要はblogアプリの開発に使いますとしてNext stepへ進みます。

 ④次の画面の設定はデフォルトのままで大丈夫ですので、そのままNext stepへ進みます→⑤最後にCreate environmentを押下するとWorkspaceが作成されます。

新規フォルダ作成とサーバーの起動

現在、Blog_railsフォルダには.c9というフォルダとREADMEというファイルしか入っていません。

blogアプリを開発する為のフォルダを作成します。

ターミナルに移動して $ rails new blog というコマンドを実行してください。

blogという新しいフォルダができています。また、blogフォルダ内にもたくさんのフォルダが作成されているのがわかります。

また、これから開発を進めていくにあたって、自分の書いたコードがどのように表示されているかをいうことをリアルタイムで確認しながら作業を進める為にサーバーを起動させ、ブラウザを別タブで表示させておきましょう。

 

2.コントローラ(controller)とルーツ(routes)

blogのtopページとしてWelcomeというページを作ってブラウザで表示させてみましょう。

作業に入る前に、Railsではどのような流れでページが表示されているのかを解説します。

私たちが「このサイトが見たいな」と思ってアクセスしたサイトがRailsで作られていたとしましょう。

blogフォルダを見るとわかるようにRailsはたくさんのフォルダやファイルでできています。

では、この膨大なファイルの中からアクセスされた目的のファイルをどのように表示しているのでしょうか。

仮に http://localhost:3000/welcome/index というURLを見たいと思ってアクセスした場合を考えてみましょう。

http://localhost:3000/welcome/indexにユーザーがアクセスすると、RailsではそのURLに対応したコントローラファイルにアクセスします。

コントローラとは、ブラウザ(ユーザー)から送られてきたリクエスト(このURLのページを表示してほしいなど)をmodelやviewといった他のファイルと連携してブラウザに返す(ユーザーが見たいURLのページを表示する)役割をもったものです。

※modelやviewについては後述します。

【コントローラ】

このURLと対応するコントローラファイルを見つけてきてくれるのがルーツファイルです。


【ルーツ】

ここまでの流れを整理しましょう。

 

ビュー(view)とモデル(model)

コントローラがやり取りをしているviewとmodelというファイルについて解説します。

viewとはブラウザに表示される中身(コード)が書かれたファイルです。

http://localhost:3000/welcome/indexというURLにアクセスしたいとリクエストがくるとコントローラがviewの中身(コード)を確認し、viewファイルの中身(コード)をブラウザに表示させているのです。

また、modelとはデータがつまった箱のようなものです。教程3で学んだメソッドやクラスといったデータの塊が詰まった箱と考えてください。

http://localhost:3000/welcome/indexというURLページにはどのようなデータが必要かをコントローラが確認し、modelファイルから必要なデータを取得しているのです。

3.コントローラとビューの作成

実際にコントローラとビューを作成しましょう。

Cloud9のターミナルに

$ rails g controller welcome index

と入力してください。

コマンドを実行すると、blogフォルダのapp-controllerフォルダの中に、welcome_controller.rbというファイルが作成されます。

今実行した$ rails g controller welcome indexというコマンドはどういう意味なのでしょうか。

rails gのgはgenerateの略です。

$ rails generate controller welcome indexと同じ意味ですが、generateと書くのは長い為"g"と省略されています。

rails g controlleで「コントローラを作りなさい」という指令になっています。

welcomeの部分はコントローラ名で続くindexはコントローラに含まれるアクション(実行すべき内容)となります。

つまり $ rails g controller welcome index とは

index(一覧表示する)というアクションを含んだwelcomeという名前のcontrollerを作りなさいという指令をだすコマンドという意味です。

これで、modelファイルやviewファイルとやり取りをしてくれるコントローラができました。

次はviewファイルを作成・・・と考えるところですが、コントローラの作成時にアクションも同時に作成すると、それに対応したビューが自動的に作成されます。

Cloud9で確認してみましょう。

appフォルダのviews-welcomeというフォルダ内にindex.html.erbというファイルがあります。

先ほどindextというアクションを含んだコントローラを作成した際に自動的にviewも作成されていたことがわかります。

welcomeコントローラとindex.htmi.erbファイルの中身を確認してみましょう。

4.ブラウザで確認しよう

現在、ブラウザはRailsのトップ画面が表示されています。

先ほど作成したindex.html.erbのファイルはどうやって表示すれば良いのでしょうか。

ビューファイルには、それぞれブラウザで表示する際のURIというものがあります。

$ rake routes

というコマンドでURIが確認できます。ターミナルで$ rake routesコマンドを実行します。

確認すると、/welcome/indexというURIを確認できます。

RailsのトップページのURLに/welcome/indexというURIを追加します。

先ほど確認したindex.heml.erbファイルの中身と同じものが表示されています。

ここでも、ブラウザに表示されるのはビューファイルの中身ということがわかりますね。

5.routesを変更しよう

indexファイルを表示することができましたが、毎回URIを追加して表示するのは面倒です。

そこでroutesファイルにブラウザで表示するトップページはindexファイルにしなさい、という指令を書きます。

routes.rbファイルを開いてください。

get 'welcome/index' というコードを root 'welcome#index'へ変更し、保存します。

ブラウザを戻るボタンでRailsのトップ画面まで戻して、更新してください。

URLに/welcome/indexというURIを追加していなくてもindexファイルの中身が表示されていることが確認できます。

まとめ

今回のレッスンではコマンドを使用してアプリを作成し、トップページを指定する方法を勉強しました。

次のレッスンでは表示されている内容を変更する方法を勉強します。

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る

×