タスク管理アプリを作ってみよう(続き)
1. 前置き
1. 前提・事前作業
- こっちの投稿の内容を事前に実施済み
- 例によってドットインストールの写経
- #08 Projectsの一覧を表示させようから実施
2. Projectsの一覧を表示させよう
- Projectsコントローラにindexアクションを追加する
-
/home/vagrant/taskApp/app/controllersの中のprojects_controller.rbを編集
ruby
class ProjectsController < ApplicationController
# indexアクションを追加
def index
# @をつけた変数はviewでそのまま使用可能
# Projectの全データを引っ張ってくる
@projects = Project.all
end
end
- Viewを作成
-
/home/vagrant/taskApp/app/views/projectsにファイルを作成 -
Projectコントローラのindexアクションに対応したファイル名で作成 -->index.html.erb
ERB
<h1>Projects</h1>
<ul>
<% @projects.each do |project| %>
<li> <%= project.title %> </li>
<% end %>
</ul>
- これで、
/projectsが表示されるはず - サーバ起動
cd taskApp
rails s
- 下記URLへアクセス
- http://dev.com:3000/projects
- 出た出た
3. rootの設定をしよう
- 今のところ http://dev.com:3000/projects に一覧が表示される
- rootである http://dev.com:3000 に一覧が表示されるようにする
-
/home/vagrant/taskApp/configのroutes.rbを編集する - 下記を追加する
ruby
root 'projects#index' # projects#indexのページをrootページとして設定
- http://dev.com:3000/ にアクセスすると、↑と同じページが表示されるはず
3. 共通テンプレートを編集しよう
- 生成された↑のhtmlのソースを見てみる
html
<!DOCTYPE html>
<html>
<head>
<title>TaskApp</title>
<link data-turbolinks-track="true" href="/assets/projects.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/projects.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="crZjdmyOW4m7fZX+2MHCle6oABgFnhXUbOdtYTRES7M=" name="csrf-token" />
</head>
<body>
<h1>Projects</h1>
<ul>
<li> project1 </li>
<li> project2 </li>
</ul>
</body>
</html>
- なんか色々書かれてる
- 共通テンプレートに書かれているので、見てみる。
/home/vagrant/taskApp/app/views/layoutsのapplication.html.erb
ERB
<!DOCTYPE html>
<html>
<head>
<title>TaskApp</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
- ここに共通のヘッダとかフッタが記載されている。
-
yield部分が各ページの独自情報 - 上記ファイルを編集して、全ページ共通のロゴ画像を表示させてみる。
- イメージタグヘルパーとか言うimgタグを簡単にかける機能を使用
- body に以下を追加
ERB
<%= image_tag 'logo.png' %>
-
画像の場所は
/home/vagrant/taskApp/app/assets/imagesここ -
画像を格納しておく
-
画像作成の際には、このサイトを利用してみた http://www.squarespace.com/logo
-
GIGAZINEに解説あり。
-
フリーでそれっぽいロゴが作れて素敵
-
結果↓
- 思って頼りダサかったけど、期待通りに表示はされた
- 同様に
/home/vagrant/taskApp/app/assets/javascriptsとか/home/vagrant/taskApp/app/assets/stylesheetsで共通モジュールを管理している - スタイルシート
application.cssを弄ってみる
css
body {background: #a9a9a9}
-
センスはともかく、でけた
-
さらに、ホームへのリンクを追加
-
application.html.erbに追記 -
リンクについてもrailsのヘルパーを使用可能
ERB
<%= link_to "HOME", "/" %>
- HOMEっていう文字列でrootに遷移するリンクが確かに出来た。キャプチャは割愛
- 下記のような書き方も出来る。こうすると、
/projectsに遷移する
ERB
<%= link_to "HOME", "projects_path" %>
- 何がおきているかというと、以前のポスト の最後の↓の内容の通り
(in /home/vagrant/taskApp)
Prefix Verb URI Pattern Controller#Action
projects GET /projects(.:format) projects#index
POST /projects(.:format) projects#create
new_project GET /projects/new(.:format) projects#new
edit_project GET /projects/:id/edit(.:format) projects#edit
project GET /projects/:id(.:format) projects#show
PATCH /projects/:id(.:format) projects#update
PUT /projects/:id(.:format) projects#update
DELETE /projects/:id(.:format) projects#destroy
-
rake routesで定義されたものを使っている。 -
_pathをつけることで、projectsとかnew_projectとかedit_projectとかに遷移できる