エムスリーテックブログ

エムスリー(m3)のエンジニア・開発メンバーによる技術ブログです

Railsでクレカ決済付きECサイトを作ってみよう！【勉強会イベント紹介】

Ruby

M3ではWebサイト開発が未経験の学生さんに向けて、Webサイトの開発の楽しさ体験してもらう勉強会イベントを不定期で開催しています！

この記事では、クレジットカード決済ができるECサイトをRuby on Railsアプリで開発して、Heroku(サーバ)に公開するまでの手順を紹介します。RubyGemsをうまく組み合わせることで、シュッと作成できるのでWebサイト開発をちょっと試してみたい方にオススメです。

ちなみに、M3は日本／世界に医療に貢献するようなサービスを開発しています。この記事がそういった社会に貢献するサービスの開発に興味を持ってもらうきっかけになれば幸いです。

f:id:ke-mori:20171002113724j:plain

目次

(01) RubyとRuby on Railsについて
(02) ローカル環境構築の準備
(03) Railsアプリケーションの作成
(04) 商品管理画面の作成
(05) MVCとは？
(06) 本番DBにPostgreSQLを使うようにする
(07) Herokuサーバにデプロイ
(08) 認証機能の追加
(09) CSSフレームワークbootstrapの導入
(10) クレジットカード決済機能の追加
(11) 勉強会イベント参加者のコメント
(12) 勉強会イベントへ参加したい学生さん大募集

(1) RubyとRuby on Railsについて

Rubyは日本人のまつもとゆきひろさん(通称 Matz)の開発した動的型付けのプログラミング言語です。プログラマーの書きやすさを大切にして設計されているのが特徴です。Ruby on Railsは、DHHが中心になって開発をしたRubyのWebアプリケーションフレームワークです。

RubyやRuby on Railsは日本語でのドキュメントが充実しているので、日本人には開発がし易いと思います。また、Webアプリケーションに必要な機能がRubyGemsに多く、機能拡張がし易いのも特徴です。

またRubyにはRubyGemsというインターネットを介して便利なツール(ライブラリ)をダウンロードできる仕組みがあり、設定ファイル(Gemfile)にRubyGemsの名前を書くだけでアプリケーションに簡単に取り入れることができます。

(2) 開発環境構築の準備

Macの場合はローカルの開発環境を構築します。Windowsの場合は、Cloud 9を使って開発します。ブラウザは今回は「Google Chrome」を使うことにします。

Homebrewのインストール

「Homebrew」は、macOSのためのパッケージ（ソフトウェア）を管理するツールです。インターネットの向こう側から便利なツールをサクサクインストールしてくれます。Homebrewという名前は、スティーブ・ジョブズとスティーブ・ウォズニアックが最初にApple1を披露したHomebrew Computer Clubに由来しているそうです。

# インストールコマンド
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

# 動作確認 (Usageが出ていれば成功)
brew --help

gitのインストール

Macのアプリ「ターミナル」を開いてgitをインストールします。gitはソースコードのバージョンを管理するためのツールです。

# gitのインストール
brew install git

# 動作確認 (Usageが出れば成功)
git --help

# Gitにユーザー名を登録
git config --global user.name "your-name"

# Gitにメールアドレスを登録
git config --global user.email "your-email"

ちなみに、gitはLinuxを開発したことで有名なリーナストーバルス氏が既存のバージョン管理システムに満足できずに自分で作成したことで有名です。

rbenvとRubyのインストール

Rubyは年に一度バージョンアップが実施されており、サービスごとにRubyのバージョンを使い分けたくなります。そこで、Rubyの複数のバージョンを管理できるrbenvをインストールして、その後Rubyをインストールしてみます。

# rbenvのインストール
brew install rbenv

# rbenvの動作確認(Usageが出れば成功)
rbenv --help

# rbenv listでインストールできるRubyのバージョンの一覧がでます
# 2.4.2のような数字だけのものを選んでください。ここからは2.4.2を例に記述します
rbenv install -l

# Rubyの2.4.2をインストールします
rbenv install 2.4.2

# メインで利用するRubyのバージョンを指定します
rbenv global 2.4.2

# Rubyのバージョンのバージョンを確認 => 2.4.2になっていれば成功
ruby --version

rbenvのパスを読み込むように.bash_profileや.zshrcに次の内容を追記します。

rbenv init

記述が完了したらターミナルを再起動してください。

Atomのインストール

AtomはGitHubが開発しているエディタでプログラミングに適したプラグインが充実しています。ブラウザで https://atom.io/ にアクセスしてAtomをインストールします。

(3) 新規アプリケーションの作成

プロジェクトのディレクトリを作成します。

# プロジェクトのフォルダを作成
mkdir projects
cd projects

Rubyのライブラリを管理するRubyGemsからRuby on Rails(rails)のライブラリをインストールします。

gem install rails

次にrailsコマンドを使ってRuby on Railsのプロジェクトを作成します。

# Ruby on Railsのプロジェクト作成
rails new e-shop

# アプリケーションディレクトリへの移動
cd e-shop

# Ruby on Rails の webサーバのプロセスを起動
bundle exec rails s

Webブラウザで http://localhost:3000/ にアクセスできれば成功です。

f:id:ke-mori:20171005092324p:plain

(4) 商品管理画面の作成

先程のrails sをしたターミナルとは別のターミナルを立ち上げて、e-shopディレクトリに移動して、rails g scaffoldを実行します。

rails g scaffold product name price:integer stock:integer note:text

rails g scaffoldはModel、View、Controllerのひな型をまとめて作成してくれる便利なコマンドです。

次にDBにテーブルを作成します。

rails db:migrate

http://localhost:3000/products にアクセスして商品情報を登録できれば成功です。

f:id:ke-mori:20171005092437p:plain

ここまでの変更をgitに登録します。

# ここまでの変更内容を認識
git add . -A

# 変更内容をgitの履歴に登録
git commit -m "Initial commit"

(5) MVCとは？

Ruby on Railsは、Controller、Model、Viewを組み合わせてウェブアプリケーションを構築するためのフレームワークです。

Model(モデル): 主にデータベースとのやりとりを担当
View(ビュー): 主にWebブラウザへのHTMLの表示を担当
Controller(コントローラ): View(ビュー)とModel(モデル)との間の橋渡しを担当

ブラウザからWebアプリケーションにリクエストが来てから、MVCを通ってHTMLを返すまでの流れを簡単に図にしてみました。

f:id:ke-mori:20171002113638p:plain

(6) 本番DBにPostgreSQLを使うようにする

Herokuというサーバにアップする前に、PostgreSQLというDBを使えるようにします。PostgreSQLはオープンソースのDBの一つです。M3でも多くのシステムをPostgreSQLで構築しています。

次にこのプロジェクトで使うライブラリRubyGemsが書かれたGemfileの中でgem 'sqlite3'と書かれた行を次の2行に書き換えます。

gem 'sqlite3', groups: [:test, :development]  
gem 'pg', group: :production

これによって開発、テストをする際にはファイルベースのDB sqlite3 を使い、本番環境(production)ではPostgreSQLというDBを使うためのライブラリが取得されるようになります(Herokuの制約です)。

これが終わったら、次のコマンドを実行するとRubyGemsがローカルに導入されます。

bundle install --without production

この変更を、再度gitに登録します。

# ここまでの変更内容を認識
git add . -A

# 変更内容をgitの履歴に登録
git commit -m "本番環境のDBでPostgreSQLを使えるようにする"

このようにgit commit -mのメッセージに変更の理由や目的を記述しておくことで、後から他の人がどんな変更をしたのかを簡単にわかるようにすると良いです。

(7) Herokuサーバにデプロイ

「Heroku」を使ってRailsアプリをインターネットに公開します。Herokuは、Webブラウザからサインアップして、ソースコードをGitで転送するだけで簡単に本番環境を作れる超便利サービスです。

  1. ブラウザで「https://www.heroku.com/」にアクセス
  2. 「Sign upボタン」からユーザーを作成
  3. 画面に従ってアプリを作成

f:id:ke-mori:20171003091148p:plain

f:id:ke-mori:20171003091213p:plain

次にHeroku用のツールをローカルにインストールして、ログインします。

# heroku CLIのインストール
brew install heroku

# heroku ログイン
# ユーザー名とパスワードを聞かれるのでブラウザでユーザー登録した情報を記入
heroku login

ログインしたらherokuのgitリポジトリにここまでの変更内容をpushします。

# your-app-nameをherokuの管理画面で登録したアプリ名に変更
heroku git:remote -a your-app-name

# herokuのgit リポジトリに変更内容をpush
git push heroku master

Pushが完了したら、ターミナルで次のコマンドを実行して、

heroku open

ブラウザで「https://.../products」(/productsを付与)にアクセスしてみて下さい。おそらくErrorが表示されると思います。

エラーが発生したらheroku logsでエラーの原因を知ることができます。

ここではheroku上のサーバでDBのマイグレーション(テーブルの作成)が必要なので次のコマンドで実行します。

heroku run rails db:migrate

もう一度、ブラウザで「https://.../products」(/productsを付与)にアクセスすると成功すると思います。

f:id:ke-mori:20171002120639j:plain

(8) 認証機能の追加

deviseの導入

Webサイトにログイン(認証)の仕組みを導入するために「devise」を導入します。基本的にはGitHubのREADMEに従うようにして下さい。

Gemfileの最後に次の内容を追記します。

gem 'devise'

deviseをローカルに取得するために次のコマンドを実行します。

# RubyGemsをローカルにDL (bundle installの省略形)
bundle

deviseの設定

deviseで使うファイルの雛形を生成します。

rails generate devise:install

ファイルのconfig/environments/development.rbに次の内容を追記します。

Application.configure do
  # ↓ を追加します。 メールを送信するためのホスト名の設定です
  config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }
end

ユーザー情報を保持するためのモデル(ここではUser)を生成します。

# ユーザー情報を保持するためのモデルの生成
rails generate devise User

# DBへのテーブルの作成
rails db:migrate

app/controllers/application_controller.rbに次の内容を追記します。

class ApplicationController < ActionController::Base
  # ↓ を追記
  before_action :authenticate_user!
end

追記したら、railsサーバを再起動して下さい(rails sをしたターミナルでctrl + cを実行すると止まります。止めたら再度rails sを実行し直して下さい)。

http://localhost:3000/productsにアクセスすると認証が要求されるようになります。

f:id:ke-mori:20171004094737p:plain

ログインするためのユーザーは「Sign up」から登録してください。

では再度Herokuにアップしてみます。(以後は省略しますが、コミットメッセージだけ変更して同じコマンドを実行して下さい)

# git に変更の履歴を登録
git add . -A
git commit -m "認証機能を追加"

# Heroku に push
git push heroku master

(9) CSSフレームワークbootstrapの導入

bootstrap-sassの導入

「Twitter Bootstrap」はデザインを整えるためのCSSライブラリで、エンジニアがWebサイトを開発する時によく使われます。

最新はバージョン4ですが、ここではバージョン3の導入的順を紹介します。Gemfileに「bootstrap-sass」を追加します。合わせてBootstrapが使うjQueryも追加します。

gem 'jquery-rails'
gem 'bootstrap-sass'

Gemfileを変更したのでローカルにRubyGemsをダウンロードします。

bundle

bootstrap-sassの設定

インストールしたら、app/assets/stylesheets/application.cssに次の内容を追記します。

@import "bootstrap-sprockets";
@import "bootstrap";

app/assets/stylesheets/application.cssをapplication.scssにファイル名を変更します。

次にapp/assets/javascripts/application.jsに次の内容を追記します。

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets

ブラウザでhttp://localhost:3000/productsにアクセスしエラーがでないのを確認して下さい。

Bootstrapデザインの適用

app/views/products/index.html.erbのtableタグにクラスを追加します(class="table"を追記)。これによってBootstrapの持っているTableデザインが適用されます。

<table class="table">

ブラウザでhttp://localhost:3000/productsにアクセスするとテーブルのデザインが変わっている事がわかると思います。

f:id:ke-mori:20171004095428p:plain

さらにデザインをカスタマイズしてみたい場合は、「https://getbootstrap.com/docs/3.3/」を参照してください。

スマートフォン対応

app/views/layouts/application.html.erbに次の内容を追加してスマートフォンの横幅にも最適化されるようにします。

<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, initial-scale=1">

この状態でhttp://localhost:3000/productsにブラウザのスマートフォン表示で変更を確認しましょう。Chromeであれば「表示(view) => 開発者(developer) => 開発者ツール(developer tool)」を起動してtoggle device toolbarを起動するとブラウザ風の見た目で表示確認ができるようになります。

f:id:ke-mori:20171004100105p:plain

(10) クレジットカード決済機能の追加

pay.jpの導入

今回は「PAY.JP」をアプリに組み込んでクレジットカード決済ができるようにしてみましょう。今回組み込むクレジットカード決済は、本当に自分のクレジットカードを使った決済(お金の処理)ができてしまいます。テストの際はテスト用のクレジットカード番号をつかうように注意して下さい。

PAY.JPが提供しているRubyGems「payjp-ruby」をGemfileに追加します。

gem 'payjp'

Gemfileを変更したのでbundleを実行します。

bundle

テスト用のカード情報と認証情報

テスト用のカード情報は「PAY.JP API 利用ガイド | PAY.JP」に書かれていますので確認してみて下さい。(以下は2017/10/1時点のもの)

カード番号: 4242424242424242
有効期限: 12⁄20
CVC: 123
カード名義: YUI ARAGAKI

テスト用の認証情報はこちらです。

秘密キー: sk_test_c62fade9d045b54cd76d7036
公開キー: pk_test_0383a1b8f91e8a6e3ea0e2a9

pay.jpの設定

app/controllers/products_controller.rbに次の内容を追記します。

class ProductsController < AdminApplicationController
  # この行に「:pay」を追加
  before_action :set_product, only: [:show, :edit, :update, :destroy, :pay]

  # payを private よりも前に追加
  def pay
    Payjp.api_key = 'sk_test_c62fade9d045b54cd76d7036'
    charge = Payjp::Charge.create(
      :amount => @product.price,
      :card => params['payjp-token'],
      :currency => 'jpy',
    )
    redirect_to @product, notice: 'ありがとうございました。'
  end
end

app/views/products/show.html.erbに次の内容を追記します。

<%= form_tag(action: :pay, method: :post) do %>
  <script type="text/javascript"
    src="https://checkout.pay.jp"
    class="payjp-button"
    data-key="pk_test_0383a1b8f91e8a6e3ea0e2a9">
  </script>
<% end %>

config/routes.rbには次の内容を追記します。

Rails.application.routes.draw do
  # ↓ の3行を追加
  resources :products do
    post :pay, on: :member
  end
end

http://localhost:3000/productsで商品を登録して、http://localhost:3000/products/xxページを見るとPay.jpの「カードで支払うボタン」が出ていると思います。

f:id:ke-mori:20171004095818p:plain

カードで支払うボタンをクリックして先程のテスト用のカード情報を入力、決済ボタンを押して「ありがとうございました。」という文字が表示されると成功です。

(11) 勉強会イベント参加者のコメント

実際に勉強会イベントに参加してもらえた学生さんからのコメントです。

  • 環境構築など初めのハードルをアドバイスを頂きながら、みんなで乗り越えられる
  • 普通のチュートリアルでは中々たどり着かない、決済サービスという実用的なWebサービスの実装までたどり着けた
  • 所々で詳細Tips等を挟んでいただき、知識欲を満たしてくれた

大学の授業や研究などでプログラミングは少しやったことあるけど、Webアプリケーションの開発が未経験な学生さんに特にオススメとの感想をいただけました！

(12) 勉強会イベントへ参加したい学生さんを大募集

この勉強会イベントは不定期で開催しています。また、ここに書かれたECサイトを開発した後にも幾つか応用の実装課題があります。もし興味があれば「エムスリーエンジニア紹介ページ」からお気軽にお問い合わせ下さい😊

f:id:ke-mori:20171004090648j:plain

おまけ１：漫才

何故か休憩時間に漫才が始まりましたww

f:id:ke-mori:20171003090835p:plain

おまけ２：🍣

半日の勉強会イベントの後は、もちろんお寿司食べました！

f:id:ke-mori:20171002120735j:plain