せいかつノート

読者です 読者をやめる 読者になる 読者になる

せいかつノート

日々の生活を少しだけ良くする

大学の先輩からRailsをやれと言われたから勉強してみる4

コンピュータ コンピュータ-Ruby on Rails

dotinstall.com

昨日の続きです。#8から進めていきます。ここからrbファイルを編集する機会が増えてきます。コードを書くときはSublimeを使うことが多いのですが今の環境(Vagrant)では使えなかったので共有フォルダにアプリを移動させました。

mv taskapp /vagrant/

これでSublimeで開発を進めていけます。

f:id:kiyo468:20160222215244p:plain

ディレクトリ構造まで見れて幸せ。

 

コントローラの編集

projects_controller.rb

class ProjectsController < ApplicationController

	def index
		@projects = Projects.all
	end
end

普通に関数を書くイメージindexという関数で変数projectsにProjectsを全部入れるって認識です。

ビューの編集

次にviewを書いていきます。viewsフォルダの中にindex.html.erbというファイルを作り以下のように書きます。

index.html.erb

<h1>Projects</h1>

<ul>
	<% @Projects.each do |project| %>
	<li><%= project.title %></li>
</ul>

これで、http://192.168.33.10:3000/projectsにアクセスすると見れるはず…

f:id:kiyo468:20160222214318p:plain
projects_controller.rbのprojects.allがproject.allでした。改めて…

f:id:kiyo468:20160222214434p:plain
どれだけミスれば気が済むのだろうか
@projects.eachでした。<% end %>も抜けています。

index.html.erb

<h1>Projects</h1>

<ul>
	<% @projects.each do |project| %>
	<li><%= project.title %></li>
	<% end %>
</ul>

これが正解。これで改めてアクセスすると
f:id:kiyo468:20160222214731p:plain
Projectの中身を見ることができました。

rootの設定

今はURLに/projectsとつけないとアクセス出来ないので、それをつけなくてもいいようにする設定。以前ルーティングの際に触ったファイルに追記します。
routes,rb

Rails.application.routes.draw do

  resources :projects

  root 'projects#index'

end

f:id:kiyo468:20160222220321p:plain
projectとお尻につけなくてもアクセスできるようになりました。

画像の表示

HTMLを出力しているところがapp/views/layoutsのapplication.html.erbだそうで、ここの<%= yield %>で吐いているそう。それ以外は共通レイアウトとのことなので、画像を表示してみます。
application.html.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>
<%= image_tag "logo.png" %>

<%= yield %>

</body>
</html>

画像の置き場はapp/assets/imagesです。
そしてアクセスすると画像でねえ。エラーがAsset was not declared to be precompiled in production. ということで調べてみると
codedump.io
sprocketを入れろってあるので

gem install sprocket

でインストールして立ち上げなおす。
f:id:kiyo468:20160222223121p:plain
出てきた。後はcssを適当に弄ったり、リンクを作ったりして
f:id:kiyo468:20160222223429p:plain
大学の気の利いていない論文紹介ページみたいなものができそうです。今日はこの辺でおしまい。