CurryBu 開発月報 2014 年 1 月号

こんにちは。

idobata.io さんの開発ブログでは毎月、サービスの新機能や変更などを告知されています。個人的にそのような記事を読むのが好きなので、CurryBu でも新機能や変更、修正した点を 当たり障りのない範囲で 紹介してみようと思います。今回は 2014 年 1 月分です。

リニューアル

1 月の一番大きなトピックは、やはりリニューアルです。
リニューアルについては記事を書いていますので、良かったら読んでください。

新しい CurryBu をリリースしました！
http://blog.currybu.com/post/74674615762/new-curry-bu-released

一部の CSS/JS が CloudFront から配信されない件の修正

CSS/JS/画像を CloudFront から配信しているのですが、stylesheet_link_tag や javascript_include_tag で指定している CSS/JS のパスが CloudFront のパスではなく Web サーバーのパスになるという問題が起きていました。

以前は、initializer の中で以下のような感じで config.action_controller.asset_host を設定していました。

# config/initializers/asset_host.rb
Foo::Application.config.action_controller.asset_host = Setting.rails.asset_host

しかし、stylesheet_link_tag などのリンク生成では、initializer ではなく environments 内の環境設定(production.rb など) に書いていないと、asset_host が適用されないようです。(precompile では適用される)

解決方法を知っている方がいましたらぜひ教えてください！

投稿ページで NewRelic の計測スクリプトが埋め込まれない件の修正

NewRelic のブラウザ上のパフォーマンス計測スクリプト(データ)が埋め込まれず、計測されないという問題が起きていました。

newrelic_rpm gem は計測スクリプトを埋め込む時に、ドキュメントの最初の 50 KB から body タグの開始位置を見つけようとします。見つからなかった場合、計測スクリプトは埋め込まれません。

# https://github.com/newrelic/rpm/blob/470d3aa39ee786523fe1e6324a7b9d2d509b4e53/lib/new_relic/rack/browser_monitoring.rb#L60-61
# Only scan the first 50k (roughly) then give up.
beginning_of_source = source[0..50_000]

if body_start = find_body_start(beginning_of_source)
  ...

投稿ページでは、gon gem を使用して、お店の情報を JSON で埋め込むようにしています。今回の場合、body タグの前にお店の JSON データが埋め込まれており、newrelic_rpm gem が body タグを見つけるまでに 50 KB を超えていたために計測スクリプトが埋め込まれない、という状態になっていました。

対応としては微妙なのですが、JSON データを body タグ内の最後の方、サービスの JS を読み込む直前に移動することで解決しました。どちらにしろ、お店の件数が増えてくると、ページ内の埋め込みでは処理できなくなりますので、近いうちに API 化したいなと思っています。

/u/ は /users にリダイレクトする

ユーザーページは、例えば /u/chocoby という URL になるのですが、/u にアクセスした時に 404 になっていました。しかし、/u/ は階層的には「ユーザーページ」の一つ上であり、「ユーザー一覧ページ」になりますので、/users にリダイレクトするようにしました。

@key3 さん、アドバイスありがとうございます。

投稿画像、ユーザー画像のサイズを修正

これまで、画像サイズは thumb/normal の 2 種類を用意していたのですが、今回のリニューアルで、一部のページにおいて最適なサイズの画像が割り当てられておらず、画質が悪く表示される箇所が出てきました。そこで、色々なサイズに対応するため、small/medium/large/xlarge の 4 種類(ユーザー画像は 3 種類)を用意するようにしました。 PC/スマートフォン両方で、Retina ディスプレイでも綺麗に表示できるように調整していますが、画質が良くない箇所がありましたら教えてください。

4 種類の画像を生成するため、登録時のユーザーへのレスポンスが若干遅くなってしまうところを改善したいです。

ブラウザのパフォーマンスの為には、リフローやリペイントが発生しないように、高さと幅がぴったりと合った画像を用意することが良いと言われています。また、サイズに変更があった際に既存の画像のリサイズ処理を行うのも時間がかかります。それらの問題を解決するために、クックパッドさんの tofu のような、URL のパラメーターから画像を動的にリサイズして配信できるような仕組みが欲しいなと思いました。今後の課題です。

また、carrierwave gem では recreate_versions! で画像を再生成した際に、古い version (今回の場合は thumb/normal) の画像が削除されないようでした。 CurryBu では画像の保存に S3 を使用していますので、aws-sdk gem を使用し、以下のようなスクリプトを作成して古い version を削除しました。

s3 = AWS::S3.new

# ...

bucket = s3.buckets[BUCKET]
bucket.objects.each do |obj|
  if obj.key =~ /\/(normal|thumb)_/
    pp obj.key
    obj.delete
  end
end

今回は以上となります。いかがでしたか？

え、そんなことよりカレーが食べたい？今日は金曜日です！お昼はカレーを食べましょう！
そして CurryBu に投稿するのをお忘れなく ;P

CurryBu 開発日誌

今日食べたカレーを共有する CurryBu の開発ブログです。