読者です 読者をやめる 読者になる 読者になる

give IT a try

プログラミング、リモートワーク、田舎暮らし、音楽、etc.

妻のパン屋のWebサイトのソースコードと、サイトで活用したRails/Heroku関連の技術的なトピック

Coupe Baguette Ruby

はじめに

先日公開した「第一回 プログラマ向けデザイン勉強会の内容を参考にして妻のパン屋のWebサイトをリニューアルしてみた」の続編2本目です。


妻の店のWebサイトはRails + Herokuで開発・運用されています。
今回のエントリでは開発や運用で活用した技術的なトピックを紹介します。


内容はどちらかというと、Rails/Herokuの入門者(最近Railsを使い始めたエンジニア)向けです。
上級者の方は「そんなん誰でも知っとるわー!」という話ばっかりかもしれませんので、予めご了承ください〜。


https://github.com/fluidicon.png Webサイトのソースコード

つらつらと文章だけ書いていってもイメージがわきにくいと思うので、Webサイトのソースコードを公開することにしました。
掘り下げて確認してみたい内容があれば、サイトのコードを直接見てもらうことができます。


https://github.com/JunichiIto/cb


あくまで学習用に見てもらうことを目的としていますので、無断で改変したり再頒布したりすることはNGでお願いしますね。


http://rubyonrails.org/images/rails.png Railsに特化したトピック

最初にRailsに特化したトピックを挙げていきます。


「rails s」ではなくて「Pow/Powder」が便利!(ただしMac限定)

Railsの標準的なローカルでの実行方法はコンソール上で「rails s」を叩くことだと思いますが、Powというツール(Rackサーバー)を使うと「rails s」を叩くことなく、「http://myproject.dev」のように直接ブラウザからURLを叩いてRailsアプリを実行することができます。
PowderはPowをさらに使いやすくするためのラッパーツールです。


Powを使うとRailsの開発が楽になるだけではなく、「http://myproject.192.168.1.1.xip.io」みたいなURLで、VirtualBox上のWindowsやiPhoneといった、同一ネットワーク上の別マシンからMac上のRailsアプリにアクセスすることもできるようになります。


ただし、この場合アクセスする側のマシン(つまりWindowsやiPhone)でDNS設定を変更しなければならないことがあるので、ちょっと注意が必要です。
僕はGoogle Public DNS(8.8.8.8, 8.8.4.4)を使うようにしています。


Pow/Powderについてはネット上にたくさん情報がありますので、詳細についてはそちらを確認してください。


ERBじゃなくてHaml、CSSじゃなくてSass

改めて僕が紹介するまでもないかもしれませんが、Railsで開発するならHamlやSassを使うことを強くオススメします。
コード量がぐっと減りますし、タグやカッコの閉じ忘れのようなポカミスもなくすことができます。
最初は取っ付きにくいかもしれませんが、使ってみればすぐに慣れるはずです。


すでにERBやCSSでコードを書いている場合は、オンラインのコンバーターがあるのでそれを利用すると移行が楽になります。


HTML2Haml | Convert HTML Snippets to Haml
css2sass | Convert CSS Snippets to Syntactically Awesome StyleSheets code


ちなみに僕も旧サイトはERBやCSSを使っていたので、リニューアルのタイミングでHamlとSassに移行しました。


「ズルいxxx」を使うなら「zurui-sass-rails」が便利

第一回 プログラマ向けデザイン勉強会」で一躍有名になった「ズルい」シリーズですが、自分でSassのmixinを定義しなくても、「zurui-sass-rails」というGemを導入すると、便利なmixinを自動的に導入してくれます。


例えば、「ズルいボタン」はこんな感じでスタイルを定義できます。

@import compass/utilities
@import compass/css3
@import zurui-sass

input.button
  // @includeでzurui-sass-railsのmixinを使っている
  $button_color: #3D93B6
  @include zurui-ts-000
  @include zurui-gradient-top-lighten($button_color)
  @include zurui-box-emboss(.2, .1, .3)
  color: rgba(255, 255, 255, .9)
  text-align: center
  padding: 10px 30px
  font-size: 20px
  line-height: 1em
  font-weight: bold
  &:hover
    @include zurui-gradient-top-lighten($button_color, 15%)
    text-decoration: none
    color: rgba(255, 255, 255, 1)


ちなみに「zurui-sass-rails」は弊社ソニックガーデンの「ズルいプログラマ」こと、@mah_labの作ったGemです。


Google Analytics用のJavaScriptを出力してくれる「dekiru」

Google Analyticsを利用するためにはクライアント上でJavaScriptを実行する必要があります。
妻の店のWebサイトでは「UA-xxx-1」のようなプロパティIDを指定するだけでこのJavaScriptを出力してくれる「dekiru」というGemを使っています。


使い方はこんな感じです。

Gemfile

gem "dekiru"

app/views/layouts/application.html.haml

%head
    = google_analytics(ENV["GOOGLE_ANALYTICS_CODE"])

 

引数が空だとJavaScriptが出力されないので、本番環境にだけ環境変数を設定しておけば、他の実行環境における不必要なJavaScript出力を抑制できます。


他にも「いいね!」ボタンやツイートボタンを表示する機能もあるのですが、妻の店のWebサイトでは利用していません。


ちなみに「dekiru」は弊社ソニックガーデンの若きCTO、@matakiの作ったGemです。


RailsでjQuery UI アイコンを使う方法

jQuery UIには様々なアイコンが用意されており、妻の店のWebサイトでもこのアイコンをいくつか利用しています。
f:id:JunichiIto:20130120072117p:plain


このアイコンを表示するのに思ったよりも時間がかかったので、簡単に手順をまとめておきます。

Gemfile

gem "jquery-rails"
gem "jquery-ui-rails"

app/assets/stylesheets/application.css

/*
*= require_self
*= require jquery.ui.core
*= require jquery.ui.theme
*= require_tree .
*/

アイコンを表示するページのhtml.haml

= content_tag :span, '', class: 'ui-icon ui-icon-search'

 

結果だけ見ると非常にシンプルなのですが、やり方を知らないと予想以上に試行錯誤してしまうときってよくありますよね〜。


ローカルでメール送信機能をチェックする場合はletter_openerが便利

letter_openerというGemを利用すると、ローカルでメール送信を実行したときに送信内容をブラウザ上に表示してくれます。


f:id:JunichiIto:20130120061002p:plain


導入もgemを追加して、configを一行追加するだけなので簡単ですよ〜。


ルーティングの変更と、旧URLから新URLへのリダイレクト

旧サイトでは以下のようなルーティングをしていました。


config/routes.rb

Cb::Application.routes.draw do
  resources :inquiries, :only => [:create, :new]

  get "pages/home"
  get "pages/concept"
  get "pages/menu"
  get "pages/shop_info"

  root :to => "pages#home"
end


しかしこれだとRESTらしくないですし、URLに"pages"が付くのもなんか冗長です。
なので、新しいサイトでは以下のようにルーティングを変更しました。

Cb::Application.routes.draw do
  root to: "information#show"
  resource :concept, only: :show
  resource :menu, only: :show
  resource :shop_info, only: :show
  resource :contact, only: %w(show create)
end


ただ、これだけで終わると「http://coupe-baguette.com/pages/menu」のような旧URLでアクセスしてきた人が困るので、以下のようなルーティングも加えて旧URLから新URLへリダイレクトするようにしています。

  match "pages/concept" => redirect('/concept')
  match "pages/menu" => redirect('/menu')
  match "pages/shop_info" => redirect('/shop_info')
  match "inquiries/new" => redirect('/contact')

 

未存在URLへのアクセスは404エラーではなく、rootへリダイレクトする

存在しないURLにアクセスされた場合は404エラーページを表示するのではなく、トップページへリダイレクトするようにしました。


以下のようにルーティングの定義でワイルドカードを使っています。

config/routes.rb

Cb::Application.routes.draw do
  #...

  # 「*path」の「path」は「path」と書く必要はなく、何でもOK
  match '*path' => redirect('/')
end

 

また、このワイルドカードは最後の行に書く必要があります。
途中に入れると、そこから後ろの設定がすべて無効になり、rootにリダイレクトされてしまいます。


f:id:JunichiIto:20130121052410p:plain:w32 Herokuに関するトピック

続いてRailsデベロッパの強い味方、Herokuに特化したトピックです。


何はともあれ、heroku_sanを使いましょう

Rails + Herokuで開発するなら、heroku_san Gemの導入は必須かな〜と思います。
Heroku用の便利なrakeタスクを用意してくれるので、デプロイや環境変数の設定が簡単に行なえます。


まだ使っていない人がいたら、導入することをオススメします。
導入手順については@mah_labの書いたこちらのブログが参考になるかと思います。
Rails3.1 with Compassをherokuにdeployする - blog.mah-lab.com


Rails3.2.11化とCedarスタックへの移行

旧サイトはRails3.0.9 + Heroku Bambooスタックで運用していました。
これをサイトリニューアルのタイミングでRails 3.2.11(2013年1月時点の最新版) + Heroku Cedarスタックに移行しています。


Cedarスタックへの移行方法に付いては@mah_labの書いてくれたこちらのQiitaの記事がかなり役立ったのですが、それでも「楽勝!」というわけにはいきませんでした。
Herokuにデプロイするタイミングでなかなかassetsがプリコンパイルされず、configをあれこれ変えて試行錯誤してました。


以前自分で書いたQiitaの記事のように、config/application.rbで「config.assets.initialize_on_precompile = false」を指定するのがポイントだったと思うのですが、なんかそれだけではダメだったような。。。
結局何がキーポイントだったのか、自分でもハッキリ覚えていません。ごめんなさい。


続いて、ここからは妻の店のWebサイトで使っているHeroku Add-onをいくつか紹介していきます。


https://s3.amazonaws.com/assets.heroku.com/addons.heroku.com/catalogs/58/original.png メール送信に便利なSendGrid

Herokuからメールを送信する方法は色々とありますが、SendGridというAdd-onを使うのが一番便利そうです。
フリー版は1ヶ月あたり最大6,000通ですが、妻の店のお問い合わせフォームならリミットに到達することはまずありません。


Add-onを追加し、定型のActionMailer用のSMTP設定を書くだけでHerokuからのメール送信が可能になります。
詳しくはこちらのサポートページを見てください。
SendGrid | Heroku Dev Center


https://s3.amazonaws.com/assets.heroku.com/addons.heroku.com/catalogs/513/original.png 自作の500/503エラーページを簡単にAmazon S3にデプロイしてくれるTrackman

予期せぬシステムエラーが発生した場合や、メンテナンスのためにシステムが一時的にダウンしたりする場合に表示されるデフォルトの500/503ページは、汎用的なデザインなのでちょっと味気がないです。


なので、もうちょっとユーザーフレンドリーで、デザイン的にも調和のとれた自作の500/503ページを表示させるとベターかなと思います。(もちろん、あまり頻繁に表示すべきページではありませんが)


TrackmanというHerokuのAdd-onを使うと自作の500/503ページをAmazon S3にデプロイし、エラー時にそのページへリダイレクトする設定が簡単に実現できます。
Amazon AWSのアカウントを作ったりする必要もないので、色々とラクだと思います。


Add-on自体はフリーで提供されています。
導入手順についてはこちらのサポートページを見てください。
Trackman | Heroku Dev Center


https://s3.amazonaws.com/assets.heroku.com/addons.heroku.com/catalogs/144/original.png パフォーマンス監視・・・というより、HerokuがスリープしないようにPingを飛ばすNew Relic

Heroku上のアプリケーションは一定時間アクセスがないとスリープ状態になってしまい、アクセスしても起動するまで10秒ぐらい待たされてしまいます。
この現象を回避するために、New RelicというAdd-onを使って1分おきにPingを飛ばしています。


なお、New Relic自体は本来パフォーマンス監視用のツールなので、パフォーマンス監視用の機能もたくさん備えています。


New Relic Add-onもStandard版はフリーです。
導入時はgemと設定ファイルを追加した上で、アプリケーションをHerokuにデプロイする必要があります。
詳しくはこちらのサポートページを参照してください。
New Relic | Heroku Dev Center


ちなみにPingの設定をする場合は、New Relicの管理画面から「Reports > Availability」を選択すると、Ping設定用の画面が表示されます。


https://s3.amazonaws.com/assets.heroku.com/addons.heroku.com/catalogs/360/original.png ログの確認や検索、条件によるメール通知などが行なえるPapertrail

heroku上で出力されるログはコンソールから確認することもできますが、PapertrailというAdd-onを導入するとWeb上から確認できるようになります。


発生時刻やキーワードによる検索も簡単に行なえて、コンソールで確認するよりもはるかに便利です。
必要であれば、条件を指定して特定のログが出力されたタイミングでメール通知を送ることもできます。


フリー版は1日あたり最大10MB、保持期間7日までという制約が付いていますが、妻の店のWebサイトのように小規模なサイトならフリー版でも十分かなと思います。


導入もAdd-onを追加するだけで終わるので簡単です。
Papertrail | Heroku Dev Center


まとめ

というわけで、今回はデザインやマークアップの話題から離れて、RailsやHerokuの技術的な舞台裏を書いてみました。


上級者はもっといろんなGemやテクニックを使いこなしているはずですが、冒頭でも書いたように「最近Railsを始めました」という人がエントリのターゲットなので、そういったプログラマ/エンジニアの参考になると嬉しいです。


感想や質問があれば画面右下のMessageLeafから何か送ってください〜。
(ただし、MessageLeafが表示されるのはPC用ビューのみです)


あわせて見たい・読みたい

Coupé Baguette クープ バゲット
妻の店のWebサイトはこちらです。
このエントリでも書いた通り、RailsとHerokuで動いてます。


JunichiIto/cb · GitHub
サイトのソースコードが気になる方はこちらをどうぞ。


「第一回 プログラマ向けデザイン勉強会」の内容を参考にして妻のパン屋のWebサイトをリニューアルしてみた - give IT a try
妻の店のWebサイト関連のエントリ・その1です。


妻のパン屋のWebサイトを四苦HackしてIE対応した話 - give IT a try
妻の店のWebサイト関連のエントリ・その2です。


妻のパン屋のWebサイトで対応した問題や開発上のTips等々 - give IT a try
妻の店のWebサイト関連のエントリ・その4です。