Railsでタスク管理アプリを作成_2

# タスク管理アプリを作ってみよう(続き)

## 1. 前置き

### 1. 前提・事前作業

 * [こっちの投稿](http://qiita.com/fujimohige/items/4076dde5bc9c5aa965c1)の内容を事前に実施済み
 * 例によって[ドットインストール](http://dotinstall.com/lessons/basic_rails_v2/24901)の写経
 * [#08 Projectsの一覧を表示させよう](http://dotinstall.com/lessons/basic_rails_v2/24908)から実施



## 2. Projectsの一覧を表示させよう

* Projectsコントローラにindexアクションを追加する
* `/home/vagrant/taskApp/app/controllers` の中の `projects_controller.rb` を編集

```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: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

![無題.jpg](https://qiita-image-store.s3.amazonaws.com/0/40160/61496dd7-8da2-39a3-2f90-fe499eb859a6.jpeg)

* 出た出た

## 3. rootの設定をしよう

* 今のところ http://dev.com:3000/projects に一覧が表示される
* rootである http://dev.com:3000 に一覧が表示されるようにする
* `/home/vagrant/taskApp/config` の `routes.rb` を編集する
* 下記を追加する

```rb:ruby
  root 'projects#index' # projects#indexのページをrootページとして設定 
```

* http://dev.com:3000/ にアクセスすると、↑と同じページが表示されるはず



## 3. 共通テンプレートを編集しよう

* 生成された↑のhtmlのソースを見てみる

```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: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:ERB
<%= image_tag 'logo.png' %>
```

* 画像の場所は `/home/vagrant/taskApp/app/assets/images` ここ
* 画像を格納しておく
* 画像作成の際には、このサイトを利用してみた http://www.squarespace.com/logo
* [GIGAZINE](http://gigazine.net/news/20140207-squarespace-logo/)に解説あり。
* フリーでそれっぽいロゴが作れて素敵

* 結果↓

![無題.jpg](https://qiita-image-store.s3.amazonaws.com/0/40160/cec6308c-478c-1002-aef4-e8279b5fb606.jpeg)

* 思って頼りダサかったけど、期待通りに表示はされた
* 同様に `/home/vagrant/taskApp/app/assets/javascripts` とか `/home/vagrant/taskApp/app/assets/stylesheets` で共通モジュールを管理している
* スタイルシート `application.css` を弄ってみる 

```css:css
body {background: #a9a9a9}
```

![無題.jpg](https://qiita-image-store.s3.amazonaws.com/0/40160/12eabe07-1f9d-083a-c6ab-80e8653bea99.jpeg)


* センスはともかく、でけた

* さらに、ホームへのリンクを追加
* `application.html.erb` に追記
* リンクについてもrailsのヘルパーを使用可能

```erb:ERB
<%= link_to "HOME", "/" %>
```

* HOMEっていう文字列でrootに遷移するリンクが確かに出来た。キャプチャは割愛
* 下記のような書き方も出来る。こうすると、 `/projects` に遷移する

```erb:ERB
<%= link_to "HOME", "projects_path" %>
```

* 何がおきているかというと、[以前のポスト](http://qiita.com/fujimohige/items/4076dde5bc9c5aa965c1) の最後の↓の内容の通り

```
(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` とかに遷移できる