打倒COOKPAD!!Rails4とNokogiriでレシピまとめサイトを作ってみた
こんにちは。ichikoichです。
初めてWebサービスを作り、嬉しくなったのでブログを書いてみました。
作ったもの
COOKPAD, 楽天レシピのレシピをつくレポ数順に並べたまとめサイトを作りました。
「レシピの新聞」というコンセプトで、「Recipe + Paper = ReciPaper」です。
個人的に見てておしゃれだなと思ったPinterestのレイアウトを採用しました。
なぜレシピまとめなのか
奥さんが、毎日３〜４時間レシピサイトを手動で横断検索していたからです。
特にCOOKPADの人気ランキングが有料会員のみ見れるということもあって、無料でさらに見やすくみせてやりたい！と思いました。
振り返って思うこと
実際に開発にかけた時間は1週間くらいなのですが、ほんとに色々なことを学べました。
自分が今回作ったものは「OSSの寄せ集め」です。OSSすげーです。
UI
レスポンシブに対応するために、Twitter Bootstrapを使いました。自分は本開発で初めてレスポンシブという言葉を知りました。実際にアクセス解析すると、ほとんどがスマホからのアクセスで、レスポンシブは必須だなと思いました。
「Pinterestのレイアウトにしたい」という想いがあり、Wookmark jQuery PluginというCSSを使わせていただきました。
最初は、CSS-Only Pinterest Style Columns Layout | CSSDeckというJavaScript無しでスタイルシートで実現するテクニックを採用したのですが、並び方が左➡右にしかならず制御できなかったので、WookMarkに乗り換えました。
サーバサイド
さくらのVPSを借りて、Ruby on Railsで作りました。これは、2014年のDeveloper's SummitでWantedlyの仲さんの講演を聞いたのがきっかけです。当初一人でRailsをベースにWantedlyをローンチしたと聞いて、自分も一度やってみようと思った次第です。幸い、Railsに関する文献は多く、特に自分でカスタマイズすることもなく組み合わせるだけで、思ったサービスを作ることができました。ほんとに基本中基本しか触っていないという前提です。（先駆者の方恐るべしです）
COOKPADはWeb APIを公開していないため、スクレイピングOSSのNokogiriでレシピ情報をとってきました。
⬇参考サイト
http://morizyun.github.io/blog/ruby-nokogiri-scraping-tutorial/
取ってきたレシピ情報はDBに保存しています。初DB保存でした！
反省点
そもそも、全然人が来ないです（汗）
一日、新規ユーザ5〜10人のペース。。
肝心の奥さんは、このサービスに満足しているので最低限の目標は達成？？かと。
やっぱりお金を稼ぎたいですね。
今回は勉強のためということもあり、どうやって儲けるかをあまり考えていなかったのですが、やはり最初にちょっとでも考えておくべきでした。次のサービスでは、「どう稼ぐか、どう集客するか、」を一番はじめに考えたいと思います。
COOKPADは売り上げの約５０％が有料会員からもらっているというのは凄っす。
