こんなものを作ってみました。
このサイトを作る上で学習したことを書いていきます。
1 作ろうと思ったきっかけ
自営業を営む親戚のおじさんが言っていた言葉に違和感がありました。
「新商品を作っても立地が悪いと人が来てくれないんや。。。」
立地が悪かったら客は来ないのか?
いや、現代はインターネットが発達しているのだから、
立地が悪いだけでビジネスがうまくいかないということはないと思った。
立地よりも新商品が世間に「認知」されるかどうかの方が重要でしょう。
そのために何か良い方法はないかと考え、
ネット上に地域の掲示板のようなものを作って認知させる方法が良いんじゃないかと思いました。
地域の人が登録している掲示板があれば、
新商品やセール情報を投稿すれば認知度が上がり、売り上げが向上すると思います。
究極的には、地域の人が全員登録しているグループラインに投稿しているようなイメージになればいいなぁと思い、このwebサイトを作り始めました。
2 コードについて
① Ruby on Railsの画像の表示方法
始めはコードを一文入れれば画像を表示できるだろうと思っていたが、これが大きな間違いだった。
実際はモデルとの紐付けや、表示方法を考えるなど課題は多くありました。
ここで役立つのが「Active Storage」です。
Active Storageとはファイルのアップロードを簡単に行うことができる機能です。
このサイトのどのコードがこのActive Storageに関わっているのかを説明していきます。
RailsではMVCアーキテクチャーといって、
モデル(model)、ビュー(view)、コントローラー(controller)が機能してサイトを動かしています。
モデル → コントローラー → ビューの順に解説していきます。
今回は、新規登録したユーザーのアイコン画像を登録するために書いたコードを用いて説明します。
Active Storageを初めて使う時は、以下のコードをターミナルに入力します。
$ rails active_storage:install
$ rails db:migrate
マイグレーションファイルにテーブルが作成されますが、ここは触れなくても構いません。
まず、モデル(model)から見ていきます。該当箇所は以下です。
class User < ApplicationRecord
has_one_attached :avatar
end
has_one_attached :avatar
これは、1人のユーザーに対して1つのアイコンであるということを意味しています。
続いて、コントローラー(controller)を見ます。該当箇所は以下です。
def user_params
params.require(:user).permit(:username, :email, :address, :profile, :avatar, :news)
end
ユーザー情報の中にアイコンのデータを:avatar
として入れています。
次に、ビュー(view)を見ていきます。
<%= f.label :profile_image, "プロフィール画像", class: "label" %>
<%= f.file_field :avatar %>
<%= f.file_field :avatar %>
というコードで、ファイルアップロード用のボタンを作り、ここにアップロードされた画像を:avatorにしている。
最後に、登録者一覧画面でもアイコンが表示されるようにindex.htmlにもコードを書く。
<% if user.avatar.attached? %>
<%= image_tag user.avatar %>
<% end %>
image_tag
を使って、userの中にあるavatarを表示している。
この一連の作業によってアイコン画像を表示させた。
1つ注意があります。Herokuでは画像は24時間で削除されるので、永続的にサイトを作るのであれば、amazonやGoogleが管理している外部クラウドサービスを使う必要があります。
個人的には、この作業で簡単なMVCアーキテクチャーの流れを勉強できたのが良かったです。
② それぞれの記事に画像を表示する
こちらのツイートを見てください。
@userのavatarと@newsのavatarと同じ写真を呼び出している。。。修正していきます😅#プログラミング初心者 #Rails pic.twitter.com/PLeNXgjLQu
— りょうた@積み上げ中 (@Ryo54388667) October 14, 2020
やりたいことは、1人のユーザーに対して複数の記事を表示し、
かつ、それぞれの記事のなかに1枚の写真を表示させること。
しかし、画像の通り、
問題はユーザーのアイコンが画像と同じものが記事の写真にも表示されていること。
当時はeach文の中に入れているのになぜそれぞれ記事の画像が表示されないのだろうか、
と本気で悩んでいた(^^;
解決策はシンプルです。
「newsにつき1つの画像を定義した。」
これだけです。
問題の原因はユーザーのアイコンであるavatarというコードを記事にも使っているので、同じ画像が表示されています。
重複をしないように、1つの記事に1つの画像をthumbnail
として定義すればいいのですね。
方法は①で説明したアイコンと同じ流れです。
avatarの部分を:thumbnail
と変えればできます。
そしてeach文の中に入れれば完成ですね!
一つ注意すべきなのは、each文の中の引数はnewsなので、
@news.thumbnail
ではなく、
news.thumbnail
ですね。
|○○| バーの中がeach文の引数ですね。○の部分です。
<% @user.news.each do |news| %>
<% if news.thumbnail.attached? %>
<%= image_tag news.thumbnail %>
<% end %>
これでようやく、1人のユーザーに対して複数の記事を表示し、
かつ、それぞれの記事のなかに1枚の写真を表示させることができました!
3 展望
大前提として地域の方の多くがこのサイトを見てくれることが必須ですね。
人が集まらないと意味がない。
ビジネスを立ち上げるなら、登録する店舗を増やす施作だけでなく、
閲覧する人をいかに増やすかも考える必要がありますね。
誰かのエラーの解決の助けになれば幸いです。
ここまで読んでくださり、ありがとうございました!(^^)
前回作ったproductionの記事も載せておきます。