【Rails基礎講座 7】Railsのかんたんなレイア... >
画像を追加する

画像を追加する

吉田先生

画像を追加してサイズを変更してみましょう。モデルにカラムを追加する方法も解説しています。

画像を追加する

1.画像の追加

画像を追加してみましょう。

画像はassets/imagesの中に追加していきます。

トップページへイメージを追加してみましょう。

<%=image_tag’画像名’’ %>でassetsへ保存した画像を表示することができます。

 

しかしこのままでは画像が大きすぎて不自然です。画像のサイズを変更しましょう。

画像サイズは<%= image_tag 'koinu2.jpg',width: 100, height :75, class: 'koinu' %>のようにハッシュでHTMLオプションを追加して変更することができます。

2.今の記事に画像を追加できるようにしたい

現在投稿している記事に画像を追加できるようにしましょう。

現在の記事はtitleとtextの2つの項目が投稿できるようになっています。

titleとtext以外に、もう1つ画像投稿フォームとしてimageという項目を追加してみましょう。

 

3.imageファイル名を登録できるようにする

既存のフォームに追加する場合はmigrationファイルに直接追加する必要があります。

以前、マイグレーションファイルは、モデルに対応するデータベーステーブルを生成するために使用されると解説しました。

マイグレーションファイルを追加することで、データベースのテーブルに新しく1列imageという列を追加することになります。

 

マイグレーションファイルへの追加もコマンドで可能です。

$ rails g migration add_image_to_article image:string

articleというマイグレーションファイルにimageを追加しなさい。

追加するimageにはstringという特徴を持たせなさい。

とコマンドから指示しています。

 

4.migrationで追加する

$ rake db:migrateでマイグレーションファイルを実行します。

 

5.articlesテーブルにimageカラムが追加

これでarticleというデータのテーブルにimageという列が追加されます。

 

5.フォームの編集

データベースに画像用の保存スペースを作成することはできました。

しかし、これだけでは投稿用の画面(new.html.erb)に画像用のフォームは表示されていません。

これは投稿用の画面の表示を担っているnew.html.erbファイルにはまだ画像用の投稿フォームがないからです。

そこで画像用のフォームをapp/views/articles/_form.html.erbに追加します。

 

<%= form.label :image %>

<%= form.text_field :image %>

 

このform.label やform.text_field は

 

<%= form_with(model: @article, local: true) do |form| %>~<% end %>

の中でしか使用できません。

その為、new.html.erbに直接記述してもエラーになるので注意してください。

では追加したフォームを確認してみましょう。

新規記事作成画面(new.html.erb)を表示します。

 

画像投稿用のフォームを作成することができています。

6.Strong Parametersの追加

教程 で解説したようにRailsはセキュリティ機能から送られてきたパラメータをすぐに信用して表示することはできません。

 

そこで、今回追加したimageという項目も許可された安全なパラメータであることを宣言する必要があります。

articlesコントローラの

def article_params

params.require(:article).permit(:title, :text)

end

def article_params

params.require(:article).permit(:title, :text, :image)

end

とimageも追加して保存します。

 

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る