画像を追加する

画像を追加する

• 画像を追加する

画像を追加する

1.画像の追加

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

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

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

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

 

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

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

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

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

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

titleとtext以外に、もう１つ画像投稿フォームとして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も追加して保存します。