このパートでは画像生成機能を開発していきます。 # 本パートの目標物このパートでは下記の動画のようにフォームから文字と画像を選択し、生成された画像を表示するところまで実装します。 [![Image from Gyazo](https://techpit-market-prod.s3.amazonaws.com/uploads/part_attachment/file/3879/cef52894-ec16-406f-9186-b14cd3d62736.gif)](https://gyazo.com/49def842412ee76a8fd9133e440de763) # 目標物を作成するまでの流れ 1. ルーティングの編集 2. コントローラーの編集 3. ビューを作成今まで何回か出てきましたが、ページが表示されるまでの流れはルーティング→コントローラー→ビューという順で処理が行われるので、実装もこの順番でやっていきます。では実際に進めていきましょう。 # 1. ルーティングの編集 scaffoldingで自動生成された`resources`メソッドを編集します。 `resources`メソッドは以下の7つのアクションのルーティングを自動で生成します。 ``` - index - new - create - show - edit - update - destroy ``` コードの書き方の例は下記に示します。 **【例】** ```ruby resources :コントローラー名 ``` 全てのアクションを使うわけではないので編集をします。加えて`confirm`のルーティングも書き込みます。 `config/routes.rb`に以下のコードを追加してください。 ``` config └── routes.rb ``` ```ruby Rails.application.routes.draw do get '/confirm/:id', to: 'posts#confirm', as: :confirm #この行を追加 resources :posts, only: [:create] #この行を編集 root to: "posts#new" end ``` `only`を使うと、自動で生成される7つのアクションのうちどのアクションのルーティングを追加するか絞り込むことができます。 :idの箇所には1や2などの数字が入ります。この数字の違いで画像の判別をします。 asオプションを使うと、ルーティングに名前をつけることができます。今回confirmという名前をつけたので、confirm_pathというメソッドが生成され、コントローラー・ヘルパー・ビューで使えるようになります。参考）[名前つきルーティング](https://railsguides.jp/routing.html#%E5%90%8D%E5%89%8D%E4%BB%98%E3%81%8D%E3%83%AB%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0) `rails routes`コマンドを打ち込んで確認してみて下さい。 [![Image from Gyazo](https://techpit-market-prod.s3.amazonaws.com/uploads/part_attachment/file/3875/9d4ada53-f4ee-416c-9345-28195227b75f.png)](https://gyazo.com/d2ef4433ed8ff02a1f829298b40ea7d5) ↑編集前 [![Image from Gyazo](https://techpit-market-prod.s3.amazonaws.com/uploads/part_attachment/file/3876/c6ca7a78-2bbf-46e2-a253-7171d14a3485.png)](https://gyazo.com/c562a26d31a7012168b5561258b4423d) ↑編集後 # 2. コントローラーの編集コントローラーにあるcreateアクションを編集します。 [![Image from Gyazo](https://techpit-market-prod.s3.amazonaws.com/uploads/part_attachment/file/3877/fc5055c4-6b37-4811-a1e4-215db3b12601.png)](https://gyazo.com/6899c8ec9dfcc33e62905fd32bea6d87) 編集内容としては「画像を確認する」ボタンを押したときに実際に画像が作成されるような処理を書きます。 `app/controllers/posts_controller.rb`内にconfirmアクションを作成して、createアクションを以下のように編集してください。 ``` app └── controllers └── posts_controller.rb ``` ```rb class PostsController < ApplicationController # confirmを追加 before_action :set_post, only: [:show, :edit, :update, :destroy, :confirm] . . . def confirm end def create # @postに入力したcontent、kindが入っています。（id、pictureはまだ入っていません） @post = Post.new(post_params) # idとして採番予定の数字を作成（現在作成しているidの次、存在しない場合は1を採番） if Post.last.present? next_id = Post.last.id + 1 else next_id = 1 end # 画像の生成メソッド呼び出し（画像のファイル名にidを使うため、引数として渡す） make_picture(next_id) if @post.save # 確認画面へリダイレクト redirect_to confirm_path(@post) else render :new end end . . . private def set_post @post = Post.find(params[:id]) end def post_params params.require(:post).permit(:content, :picture, :kind) end ``` 1つずつ説明していきます。 ```ruby @post = Post.new(post_params) ``` このコードはnewアクションと同じようにnewメソッドを使って、インスタンスを作成しています。newアクションのときと違うのは`post_params`というメソッドを引数で呼び出しているところです。なので次は`post_params`メソッドがあるコードを見てみましょう。 ```rb private def post_params params.require(:post).permit(:content, :picture, :kind) end ``` `private`メソッドを呼び出すときは、レシーバを指定することはできません。レシーバとは、あるオブジェクトに対してメソッドを実行しようとした場合、そのメソッドの働きかけるオブジェクトのことです。例えば、下記のコードでいうと左側の`car`がレシーバにあたります。 ``` car.run ``` つまりprivateメソッドは外部から呼び出すことができません。参考）[[Ruby] privateメソッドの本質とそれを理解するメリット](https://qiita.com/kidach1/items/055021ce42fe2a49fd66) `params`とは送られてきたリクエスト情報をひとまとめにしたものです。 `require`で受け取る値のキーを設定します。 `permit`で変更を加えられるキーを指定します。今回の場合、`content`キー、`picture`キー、`kind`キーを指定しています。次に以下のコードを説明していきます。 ```rb if Post.last.present? next_id = Post.last.id + 1 else next_id = 1 end make_picture(next_id) if @post.save redirect_to confirm_path(@post) else render :new end ``` `if Post.last.present?`というコードでデータベース内に画像が存在するか確認しています。 `present?`は`nil`または空のオブジェクト（例えば空の配列）でなければ`true`を返します。 ``` make_picture(next_id) ``` このコードはprivateメソッドに記述するコードです。今はまだ記述していないので飛ばします。 `save`メソッドはオブジェクト（今回の場合`@post`）をデータベースに保存できます。`redirect_to`で指定したページに遷移させます。今回の場合、投稿が保存された場合は`confirm_path`、保存されない場合は`root_path`にリダイレクトするように記述しています。 ## make_pictureメソッドの作成本教材はrailsを使ったwebアプリケーション開発の流れを掴むための教材なので以下のコードはコピペで構いません。2周、3周して理解を深めてください。 ``` app └── controllers └── posts_controller.rb ``` ```rb private def set_post @post = Post.find(params[:id]) end def post_params params.require(:post).permit(:content, :picture, :kind) end # ======ここから追加====== def make_picture(id) sentense = "" # 改行を消去 content = @post.content.gsub(/\r\n|\r|\n/," ") # contentの文字数に応じて条件分岐 if content.length <= 28 then # 28文字以下の場合は7文字毎に改行 n = (content.length / 7).floor + 1 n.times do |i| s_num = i * 7 f_num = s_num + 6 range = Range.new(s_num,f_num) sentense += content.slice(range) sentense += "\n" if n != i+1 end # 文字サイズの指定 pointsize = 90 elsif content.length <= 50 then n = (content.length / 10).floor + 1 n.times do |i| s_num = i * 10 f_num = s_num + 9 range = Range.new(s_num,f_num) sentense += content.slice(range) sentense += "\n" if n != i+1 end pointsize = 60 else n = (content.length / 15).floor + 1 n.times do |i| s_num = i * 15 f_num = s_num + 14 range = Range.new(s_num,f_num) sentense += content.slice(range) sentense += "\n" if n != i+1 end pointsize = 45 end # 文字色の指定 color = "white" # 文字を入れる場所の調整（0,0を変えると文字の位置が変わります） draw = "text 0,0 '#{sentense}'" # フォントの指定 font = ".fonts/GenEiGothicN-U-KL.otf" # ↑これらの項目も文字サイズのように背景画像や文字数によって変えることができます # 選択された背景画像の設定 case @post.kind when "black" then base = "app/assets/images/black.jpg" # 今回は選択されていない場合は"red"となるようにしている else base = "app/assets/images/red.jpg" end # minimagickを使って選択した画像を開き、作成した文字を指定した条件通りに挿入している image = MiniMagick::Image.open(base) image.combine_options do |i| i.font font i.fill color i.gravity 'center' i.pointsize pointsize i.draw draw end # 保存先のストレージの指定。Amazon S3を指定する。 storage = Fog::Storage.new( provider: 'AWS', aws_access_key_id: ENV['AWS_ACCESS_KEY_ID'], aws_secret_access_key: ENV['AWS_SECRET_ACCESS_KEY'], region: 'ap-northeast-1' ) # 開発環境or本番環境でS3のバケット（フォルダのようなもの）を分ける case Rails.env when 'production' # バケットの指定・URLの設定 bucket = storage.directories.get('[bucket名]') # 保存するディレクトリ、ファイル名の指定（ファイル名は投稿id.pngとしています） png_path = 'images/' + id.to_s + '.png' image_uri = image.path file = bucket.files.create(key: png_path, public: true, body: open(image_uri)) @post.picture = 'https://s3-ap-northeast-1.amazonaws.com/[bucket名]' + "/" + png_path when 'development' bucket = storage.directories.get('[bucket名]') png_path = 'images/' + id.to_s + '.png' image_uri = image.path file = bucket.files.create(key: png_path, public: true, body: open(image_uri)) @post.picture = 'https://s3-ap-northeast-1.amazonaws.com/[bucket名]' + "/" + png_path end end # ======ここまで追加====== end ``` `bucket名`のところにはS3で設定したバケット名を記述してください。 ```rb . . . if content.length <= 28 then # 28文字以下の場合は7文字毎に改行 n = (content.length / 7).floor + 1 n.times do |i| s_num = i * 7 f_num = s_num + 6 range = Range.new(s_num,f_num) sentense += content.slice(range) sentense += "\n" if n != i+1 end . . . ``` ここでは文字数によって条件分岐させています。文字数によって文字サイズ、改行文字数などを設定しています。 ```rb . . . color = "white" # 文字を入れる場所の調整（0,0を変えると文字の位置が変わります） draw = "text 0,0 '#{sentense}'" # フォントの指定 font = ".fonts/GenEiGothicN-U-KL.otf" # ↑これらの項目も文字サイズのように背景画像や文字数によって変えることができます # 選択された背景画像の設定 case @post.kind when "black" then base = "app/assets/images/black.jpg" # 今回は選択されていない場合は"red"となるようにしている else base = "app/assets/images/red.jpg" end . . . ``` このコードはほぼコメントアウトに書いてある通りです。フォントと背景2-1でダウンロードしたものを使用します。 ```rb . . . image = MiniMagick::Image.open(base) image.combine_options do |i| i.font font i.fill color i.gravity 'center' i.pointsize pointsize i.draw draw end . . . ``` このコードはインストールしたMinimagickというgemを使っています。 [![Image from Gyazo](https://techpit-market-prod.s3.amazonaws.com/uploads/part_attachment/file/3878/f3c2fe73-fade-4a34-8b5e-85c99acdbfe7.png)](https://gyazo.com/6941b712a45807662d75b00d923e369c) 参考）[minimagick公式ドキュメント](https://github.com/minimagick/minimagick/blob/c08a6d4447735f3f41db83e2954e97c0e422d71a/README.md#usage) `MiniMagick::Image.open(base)`の引数であるbaseは背景画像が入ります。その後これまで指定したフォントや色などを背景画像に書き込ませています。 ```rb . . . storage = Fog::Storage.new( provider: 'AWS', aws_access_key_id: ENV['AWS_ACCESS_KEY_ID'], aws_secret_access_key: ENV['AWS_SECRET_ACCESS_KEY'], region: 'ap-northeast-1' ) # 開発環境or本番環境でS3のバケット（フォルダのようなもの）を分ける case Rails.env when 'production' # バケットの指定・URLの設定 bucket = storage.directories.get('[bucket名]') # 保存するディレクトリ、ファイル名の指定（ファイル名は投稿id.pngとしています） png_path = 'images/' + id.to_s + '.png' image_uri = image.path file = bucket.files.create(key: png_path, public: true, body: open(image_uri)) @post.picture = 'https://s3-ap-northeast-1.amazonaws.com/[bucket名]' + "/" + png_path when 'development' bucket = storage.directories.get('[bucket名]') png_path = 'images/' + id.to_s + '.png' image_uri = image.path file = bucket.files.create(key: png_path, public: true, body: open(image_uri)) @post.picture = 'https://s3-ap-northeast-1.amazonaws.com/[bucket名]' + "/" + png_path end . . . ``` こちらは作成した画像をAWS上にアップするためにfogというgemを使っています。AWSにアクセスするのに必要なkeyは後ほどアップします。 `bucket名`のところは5-1で設定したバケット名を入れてください。参考）[fog公式ドキュメント](https://github.com/fog/fog) # 3. ビューの作成最後にビューを追加します。`app/views/posts/`ディレクトリ内に`confirm.html.erb`を追加してください。追加したら`confirm.html.erb`に以下のコードを追加してください。 ``` app └── views └── posts └── confirm.html.erb ``` ```html

生成された画像の確認

<%= image_tag @post.picture, width: '315' %>

Step 3

Twitter投稿へ

<%= link_to "トップページへ", root_path %>

``` 以下のように画像が表示されたら成功です。 [![Image from Gyazo](https://techpit-market-prod.s3.amazonaws.com/uploads/part_attachment/file/5795/80cbbdfe-e05c-4774-beed-d02d0eb4d6b3.gif)](https://gyazo.com/49def842412ee76a8fd9133e440de763) 以上で今回のパートは終了です。お疲れさまでした。