Ruby on Rails で販売しない EC サイトを作ってみた

人に頼まれて、販売しない EC サイトを作ってみた。
初めて Ruby on Rails を使ってみたので備忘録。

現在の成果物

  • Home, About, Contact などの静的なページ
  • Product の一覧画面、詳細画面
  • 管理画面（AdminUser, Product の管理）


開発の流れ

開発期間は Ruby on Rails の勉強も含めて３週間くらい。

Ruby on Rails Tutorial を熟読（２週間）

Ruby on Rails Tutorial を読みながらサンプルアプリを作成。
始めは原著で勉強しようとしていたけれど、内容が濃いのでスピードを重視して日本語にシフトした。
Git, Ruby, RubyGems, Rails のインストールに始まり、Heroku のセットアップ、デプロイ、
Twitter ライクな簡易ブログアプリの開発方法まで丁寧に教えてくれる良書。
RubyGems や Heroku にはこの本で初めて触れた。
Rails は「15分でブログを作れる」みたいなイメージが強く、それこそ魔法のようなもので、
それゆえに中で何が起こっているのか把握しづらくて拡張も難しい、という思い込みがあったのだけれど、
この本では最初に魔法のコマンド Scaffold を封印して、
一通りの開発をマニュアルで行うと宣言してくれたので安心して読めた。
あとテスト駆動開発を徹底しているのが良い。
演習を含めて 100 個くらいのテストを書くことになるので、
Capybara を使った TDD に慣れることができた。

Ruby on Rails Tutorial Chapter 3 を参考に静的なページ（Home, About, Contact）を作成

読み終わる頃には Ruby on Rails の MVC について朧気ながら理解できてきていたので、
手始めに Home や About, Contact などの静的なページを作ってみた。
これは Ruby on Rails Tutorial の Chapter 3 そのままだけれど、
今まで Sample App だったところが自分のアプリ名になっただけで嬉しかった。

Ruby on Rails Tutorial Chapter 6 を参考に Product モデルを作成

今回は「販売しない」ので User モデルは要らない（AdminUser モデルは作る）けれど、
Product モデルは必要。
ここで Ruby on Rails Tutorial とは違う道を歩き始める。
Product モデルは次のように定義した。

  • name:string
  • price:integer
  • description:text
  • main_image:string
  • sub_image_0:string
  • sub_image_1:string
  • sub_image_2:string

RailsAdmin を使って管理画面を作成（管理者も作成）

Ruby on Rails Tutorial では管理者ユーザーも管理画面も自作していたけれど、
しっかりしたものを自作するのは大変そうだと感じたので、
「rails 管理画面」で google してみると、RailsAdmin なるものが目に入った。
アプリの管理画面をよろしく作ってくれる RubyGems らしい。
もう少し具体的に説明するとアプリのモデル (M) に対して管理用のビューとコントローラ (VC) を
よろしく作ってくれるもののようだ。
こちらを参考に
AdminUser モデルを作成しつつ、さっそく試してみると本当にあっという間にきれいな管理画面ができた。
これで管理者は Product を登録できるようになった。

１点だけ問題が

いろいろな記事を参考にしてみたが、管理者用の認証画面ができず、
/admin にアクセスすると認証なしで管理画面に移動してしまう状態だった。
公式の Github に解決方法が書いてあった。

# config/initializers/rails_admin.rb

RailsAdmin.config do |config|
  config.authenticate_with do
    warden.authenticate! scope: :user
  end
  config.current_user_method &:current_user
end

CarrierWave を使って Product の画像をアップロードできるように

管理画面ができて、Product を登録できるようになったけれど
この時点ではまだ画像をアップロードできない状態だった。
「rails 画像アップロード」で google していると、
CarrierWave という RubyGems を見つけた。
「RailsAdmin CarrierWave」で検索してみると RailsAdmin と連携もできそうだった。
さっそく CarrierWave を導入してみると驚くほど簡単に画像アップローダが実装できた。
Heroku でも正しく動作しているようだ。
（ように思えたが、Heroku ではただ CarrierWave を導入しただけだとダメだった。詳細は後ほど）

Ruby on Rails Tutorial Chapter 9 を参考に Products コントローラを作成（index, show アクション）

画像も含めて Product を登録できるようになったので、
Products コントローラの実装に取りかかった。
Ruby on Rails Tutorial Chapter 9 で Users コントローラを実装していたので、
これを参考にして、Pagination を含めて一通りのビューを表示する所までは簡単にできた。
見た目の部分は Chrome Developer Tools を使いながら
ZOZOTOWN などの EC サイトを参考にさせてもらった。
ここで clearfix の意味を知る。

fog を使って CarrierWave の保存先を Amazon S3 に

できたと思っていたら、Heroku にアップロードした画像が消えていた。
「Heroku CarrierWave 消える」で google してみると、
push のタイミングで消えてしまうらしい。
無料で画像アップロードし放題なんてそんな虫のいい話があるはずなかった。
さっそくこちら を参考に、
fog という RubyGems を使って、CarrierWave の保存先を Amazon S3 にしてみた。
AWS のアクセスキーなどは環境変数に保存することにしたので、
上手い扱い方はないかと「Rails 環境変数」で google して
dotenv という RubyGems を見つけて導入してみた。

ここまでやってみて

Ruby on Rails Tutorial を一通り読み終わった段階で Rails の「魔法感（≒畏怖）」は半減し、
読みながら実際にアプリを作ってみて魔法感は 80% ほど減ったと思う。
RubyGems の充実ぶりがすごくて、「Rails ◯◯」で google してみたらやりたいことは大体できるという印象だった。
逆に言うと、ここに書いたくらいのことができてもエンジニアとしての付加価値はほとんどゼロに等しくて、
現存する RubyGems でできないようなことを思いついて実際に手を動かせるエンジニアにならないと、
この先生きのこれないなと強く思った。