プログラマ向けデザイン勉強会の内容を参考にして妻のパン屋のWebサイトをリニューアルしてみた」の続編2本目です。Herokuで開発・運用されています。今回のエントリでは開発や運用で活用した技術的なトピックを紹介します。内容はどちらかというと、Rails/Herokuの入門者(最近Railsを使い始めたエンジニア)向けです。上級者の方は「そんなん誰でも知っとるわー!」という話ばっかりかもしれませんので、予めご了承ください〜。Webサイトのソースコードつらつらと文章だけ書いていってもイメージがわきにくいと思うので、Webサイトのソースコードを公開することにしました。掘り下げて確認してみたい内容があれば、サイトのコードを直接見てもらうことができます。https://github.com/JunichiIto/cbあくまで学習用に見てもらうことを目的としていますので、無断で改変したり再頒布したりすることはNGでお願いしますね。Railsに特化したトピック最初に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設定を変更しなければならないことがあるので、ちょっと注意が必要です。8.8.4.4)を使うようにしています。Pow/Powderについてはネット上にたくさん情報がありますので、詳細についてはそちらを確認してください。ERBじゃなくてHaml、CSSじゃなくてSass改めて僕が紹介するまでもないかもしれませんが、Railsで開発するならHamlやSassを使うことを強くオススメします。コード量がぐっと減りますし、タグやカッコの閉じ忘れのようなポカミスもなくすことができます。最初は取っ付きにくいかもしれませんが、使ってみればすぐに慣れるはずです。ERBやCSSでコードを書いている場合は、オンラインのコンバーターがあるのでそれを利用すると移行が楽になります。http://html2haml.heroku.com/http://css2sass.heroku.com/ちなみに僕も旧サイトはERBやCSSを使っていたので、リニューアルのタイミングでHamlとSassに移行しました。プログラマ向けデザイン勉強会」で一躍有名になった「ズルい」シリーズですが、自分でSassのmixinを定義しなくても、「zurui-sass-rails」というGemを導入すると、便利なmixinを自動的に導入してくれます。「ズルいボタン」はこんな感じでスタイルを定義できます。1)ちなみに「zurui-sass-rails」は弊社ソニックガーデンの「ズルいプログラマ」こと、@mah_labの作ったGemです。Analyticsを利用するためにはクライアント上でJavaScriptを実行する必要があります。妻の店のWebサイトでは「UA-xxx-1」のようなプロパティIDを指定するだけでこのJavaScriptを出力してくれる「dekiru」というGemを使っています。使い方はこんな感じです。google_analytics(ENV["GOOGLE_ANALYTICS_CODE"])引数が空だとJavaScriptが出力されないので、本番環境にだけ環境変数を設定しておけば、他の実行環境における不必要なJavaScript出力を抑制できます。他にも「いいね!」ボタンやツイートボタンを表示する機能もあるのですが、妻の店のWebサイトでは利用していません。ちなみに「dekiru」は弊社ソニックガーデンの若きCTO、@matakiの作ったGemです。UIには様々なアイコンが用意されており、妻の店のWebサイトでもこのアイコンをいくつか利用しています。このアイコンを表示するのに思ったよりも時間がかかったので、簡単に手順をまとめておきます。ui-icon-search'結果だけ見ると非常にシンプルなのですが、やり方を知らないと予想以上に試行錯誤してしまうときってよくありますよね〜。ローカルでメール送信機能をチェックする場合はletter_openerが便利letter_openerというGemを利用すると、ローカルでメール送信を実行したときに送信内容をブラウザ上に表示してくれます。導入もgemを追加して、configを一行追加するだけなので簡単ですよ〜。ルーティングの変更と、旧URLから新URLへのリダイレクト旧サイトでは以下のようなルーティングをしていました。"pages#home"endしかしこれだとRESTらしくないですし、URLに"pages"が付くのもなんか冗長です。新しいサイトでは以下のようにルーティングを変更しました。create)endただ、これだけで終わると「http://coupe-baguette.com/pages/menu」のような旧URLでアクセスしてきた人が困るので、以下のようなルーティングも加えて旧URLから新URLへリダイレクトするようにしています。redirect('/contact')未存在URLへのアクセスは404エラーではなく、rootへリダイレクトする存在しないURLにアクセスされた場合は404エラーページを表示するのではなく、トップページへリダイレクトするようにしました。以下のようにルーティングの定義でワイルドカードを使っています。redirect('/')endまた、このワイルドカードは最後の行に書く必要があります。途中に入れると、そこから後ろの設定がすべて無効になり、rootにリダイレクトされてしまいます。Herokuに関するトピック続いてRailsデベロッパの強い味方、Herokuに特化したトピックです。Gemの導入は必須かな〜と思います。Heroku用の便利なrakeタスクを用意してくれるので、デプロイや環境変数の設定が簡単に行なえます。使っていない人がいたら、導入することをオススメします。導入手順については@mah_labの書いたこちらのブログが参考になるかと思います。Bambooスタックで運用していました。Cedarスタックに移行しています。Cedarスタックへの移行方法に付いては@mah_labの書いてくれたこちらのQiitaの記事がかなり役立ったのですが、それでも「楽勝!」というわけにはいきませんでした。Herokuにデプロイするタイミングでなかなかassetsがプリコンパイルされず、configをあれこれ変えて試行錯誤してました。false」を指定するのがポイントだったと思うのですが、なんかそれだけではダメだったような。結局何がキーポイントだったのか、自分でもハッキリ覚えていません。Add-onをいくつか紹介していきます。メール送信に便利なSendGridHerokuからメールを送信する方法は色々とありますが、SendGridというAdd-onを使うのが一番便利そうです。フリー版は1ヶ月あたり最大6,000通ですが、妻の店のお問い合わせフォームならリミットに到達することはまずありません。Add-onを追加し、定型のActionMailer用のSMTP設定を書くだけでHerokuからのメール送信が可能になります。詳しくはこちらのサポートページを見てください。S3にデプロイしてくれるTrackman予期せぬシステムエラーが発生した場合や、メンテナンスのためにシステムが一時的にダウンしたりする場合に表示されるデフォルトの500/503ページは、汎用的なデザインなのでちょっと味気がないです。ユーザーフレンドリーで、デザイン的にも調和のとれた自作の500/503ページを表示させるとベターかなと思います。S3にデプロイし、エラー時にそのページへリダイレクトする設定が簡単に実現できます。AWSのアカウントを作ったりする必要もないので、色々とラクだと思います。Add-on自体はフリーで提供されています。導入手順についてはこちらのサポートページを見てください。RelicHeroku上のアプリケーションは一定時間アクセスがないとスリープ状態になってしまい、アクセスしても起動するまで10秒ぐらい待たされてしまいます。RelicというAdd-onを使って1分おきにPingを飛ばしています。Relic自体は本来パフォーマンス監視用のツールなので、パフォーマンス監視用の機能もたくさん備えています。Add-onもStandard版はフリーです。導入時はgemと設定ファイルを追加した上で、アプリケーションをHerokuにデプロイする必要があります。詳しくはこちらのサポートページを参照してください。Availability」を選択すると、Ping設定用の画面が表示されます。ログの確認や検索、条件によるメール通知などが行なえるPapertrailheroku上で出力されるログはコンソールから確認することもできますが、PapertrailというAdd-onを導入するとWeb上から確認できるようになります。発生時刻やキーワードによる検索も簡単に行なえて、コンソールで確認するよりもはるかに便利です。必要であれば、条件を指定して特定のログが出力されたタイミングでメール通知を送ることもできます。フリー版は1日あたり最大10MB、保持期間7日までという制約が付いていますが、妻の店のWebサイトのように小規模なサイトならフリー版でも十分かなと思います。導入もAdd-onを追加するだけで終わるので簡単です。Centerまとめというわけで、今回はデザインやマークアップの話題から離れて、RailsやHerokuの技術的な舞台裏を書いてみました。上級者はもっといろんなGemやテクニックを使いこなしているはずですが、冒頭でも書いたように「最近Railsを始めました」という人がエントリのターゲットなので、そういったプログラマ/エンジニアの参考になると嬉しいです。感想や質問があれば画面右下のMessageLeafから何か送ってください〜。バゲット妻の店のWebサイトはこちらです。このエントリでも書いた通り、RailsとHerokuで動いてます。site.サイトのソースコードが気になる方はこちらをどうぞ。try妻の店のWebサイト関連のエントリ・その1です。try妻の店のWebサイト関連のエントリ・その2です。try妻の店のWebサイト関連のエントリ・その4です。はてなブログPro株式会社ソニックガーデンで働くRubyプログラマ。2017年11月に「プロを目指す人のためのRuby入門」を出版。blog)はてなブログをはじめよう!JunichiItoさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。