画像アップロード機能の実装
## 画像アップロード機能の実装
*Active Storage*
ファイルのアップロード機能を持つGem
*インストール方法*
```
% rails active_storage:install
```
マイグレーションファイルが生成される
```
% rails db:migrate
```
*/_Sequel Pro でDBを確認する_/*
## 画像加工のツールの導入
*ImageMagick*
CLIから画像を処理を加えることが出来るツール。
Gemではなくソフトウェア
Homebrewからインストール必要。
Railsでソフトウェアを使用するには、
_MiniMagick_
というGemが必要
*インストール方法*
```
ターミナル
% brew install imagemagick
```
## MiniMagick
ImageMagickをRubyで使えるようにするためのGem。
画像サイズの変更には、
*ImageProcessing* というGemが必要。
## ImageProcessing
画像サイズを調整する機能をもつGem
## MiniMagick と ImageProcessing のインストール方法
``` Gemfile
gem ‘mini_magick
gem ‘image_processing’, ‘~> 1.2’
```
ターミナルで、
% bundle install
*Gemインストールを行ったあとは、rails s でローカルサーバーの再起動が行う*
再起動後に反映されるため
テストコード 実装方法
1. テキストエディタ：Gemfileを編集
```
group :deveropment, :test do
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
gem 'rspec-rails', '~> 4.0.0' #これを追加
end
```
2.terminal で、*bunble install*を実行
3.terminal で、*rails g rspec:intall*を実行
4.テキストエディタに、*.rspec* file が生成される
5. *.rspec*file を編集
```
--require spec_helper
--format documentation #これを追加
```
end
新規アプリケーションの立ち上げ手順〜Ruby on Rails~
1.アプリケーションの作成・・任意のディレクトリをカレントディレクトリにし、ターミナルから作成
> rails _6.0.0_ new appname -d mysql
2.データベースの作成
> rails db:create
3.サーバーサイドの実装 ールーティングの設定ー
> config/routes.rb
Rails.applecation.routes.draw do
get ‘posts’ to: ‘posts#index’
end
4.コントローラーの設定と、アクションの指定
> % rails g controller コントローラー名
> class PostsController < ApplicationController
def index
end
end
5.ビューの作成
app/views/posts/index.html.erb を編集がする
<h1>トップページ</h1>
6.モデルの作成
% rails g model モデル名
※コントローラー名は複数形、モデル名はそれに対応する単語の単数形になる。
> db/migrate/20xxxxxx_create/posts.rb が作成される
class CreatePosts < ActiveRecord::Migration[6.0]
def change
create_table :posts do |t|
t.text :memo
t.timestamps
end
end
end
6.2マイグレーションファイルの作成
> % rails db:migrate
7.データベースにデータを仮置して表示させる
app/controller/posts_controller.rb
class PostsController < ApplicationController
def index
@posts = Post.all
end
end
Postモデル、すなわちpostsテーブルからすべてのデータを取得し、インスタンス変数@postsに代入
all はActiveRecord すべてをデータを取得することが出来る
7.1ビューページを編集する
> app/views/posts/index.html.erb
<h1>トップページ</h1>
<% @post.each do |post| %>
<div>
<%= post.memo %>
<%= post.created_at %>
</div>
<% end %>
*<% %> はブラウザ上に表示がされない
<%= %>はブラウザに表示される*
8.投稿ページへのルーティングを作成する
> config/routes.rb
Rails.application.routes.draw do
get ‘posts’, to: ‘posts#index’
get ‘posts/new’, to: ‘posts#new’
end
get はHTTPメソッド
’posts/new’というパスに、GETメソッドでリクエストが送られてきたとき、’posts＃index’ postsコントローラーのindexアクションを呼び出す。という設定を意味しています。
9.投稿ページのためのアクションをコントローラーに記載する
> app/controller/posts_controller.rb
class PostController < ApplicationContoroller
def index
@posts = Post.all
end
def new
end
end
10.投稿ページへのリンクと、投稿ページの作成
> app/views/posts/index.html.erb
<h1>トップページ</h1>
<%= link_to "投稿ページ", '/posts/new'%>
<% @posts.each do |post|%>
<div>
<%= post.memo %>
<%= post.created_at %>
</div>
<% end %>
新規投稿ページヘのリンクを*link_to*のヘルパーメソッドを用いて指定
<%= link_to ‘リンクに表示する文字’, ‘リンク先のURL’ %>
/posts/new は新規投稿ページへのパスを意味します
> app/views/posts/new/html.erb
<h1>新規投稿ページ</h1>
<%= form_with url: '/posts', method: :post, local: true do |form| %>
<%= form.text_field :memo %>
<%= form.submit "投稿する" %>
<% end %>
form_with を用いてフォームを実装します
> <%= form_with url: 【送信するパス】, method: :【HTTPメソッド】, local: true do |form| %>
<%= form.text_field :【送信する値の名前】 %>
<%= form.submit 【送信ボタンに表示する文字】 %>
<% end %>
11.投稿するためのアクションをコントローラーに記載して、投稿できるようにする
app/controllers/posts_controller.rb
class PostsController < ApplicationController
def index
@posts = Post.all
end
def new
end
def create
Post.create(memo: params[:memo])
end
end
creatアクションを定義
createアクション内で、Postモデルが使用しているcreateメソッドは、テーブルにレコードを保存するための、ActiveRecordメソッドです。
createメソッド
モデル名.create(カラム名: 保存する値）
上記の保存カラムは、memoなので、キーは：memoになります。
キーに続けて、保存したい値に記述しているのは、params[:memo]
paramsには、フォームから送信された値がハッシュとして含まれていて、フォームのname属性の値がキーになっています
params
params[:name属性の値]
name属性を指定することで、その要素から送られて値が取得出来ます。
今回は、ヘルパーメソッドのform_withを使用し、フォーム部品を作成しているため、name属性に入るのは、memoという値になります。
app/views/posts/index.html.erb 内
<%= post.memo %> の部分
以上から、
Post.create(memo: params[:memo]) の記述は、
「postテーブルのmemoカラムに、name属性にmemoの値を持っているフォームから送信されたデータを保存する」ということがわかります。
12.投稿完了後の画面の作成
> app/views/posts/create.html.erb
<h1>投稿が完了しました</h1>
<%= link_to “トップページへ戻る”, ‘/posts’ %>
link_to を用いてトップページへリンクを設置
