2012-11-17
Rails3、Twitter Bootstrap、Bootswatch を使ったレスポンシブなエロサイト「babyshark」をリリースしました
今年の3月に下記のエロサイトをリリースしまして。
サイトは当初の予定どおり90日でクローズしましたが、サイト作成を通して Rails 開発力がつき、仕事でも Rails を使ったプロジェクトに参加できたので、とても有意義な経験でした。
そしてこのたび、更なる高みを目指して下記サイトをつくったので紹介します（職場で開くときは、後ろに人がいないか注意してくださいね）
▽ babyshark - 日本人AV女優の動画を XVIDEOS などから厳選して配信（スマートフォン対応）
（※閲覧は18歳になってから）
この半年の間に学んだいろいろなことをギュッと詰め込んで、ガチでつくりました。以下、サイトのコンセプトや使っている技術をまとめます。
Rails3、Twitter Bootstrap、Bootswatch を使ったレスポンシブなエロサイト「babyshark」をリリースしました
1. コンセプト
- キュレーション
- ユーザビリティ
- スマートフォン対応（レスポンシブデザイン）
2. 使っている技術
- Ruby on Rails 3.2
- テスト、テスト、テスト
- Twitter Bootstrap、Bootswatch
- jQuery、jquery.vgrid.js
- スクレイピング
- 画像加工
- 画像サーバ
- Web サーバ
- サーバ監視
3. 今後の展開 - リーン・スタートアップ
1. コンセプト
(1) キュレーション
これは前作から継続です。動画数が少なくても「当たり」だけを集めるようにしています。仕組みとしては、当たりだと思うAV女優さんの作品だけをスクレイピングしてきて、よしなに表示させています。
「当たり女優リスト」さえ人の手で作成すれば後はほぼ全自動にできたので、このあたりは人妻動画を扱っていた前作よりも楽なロジックで実現できました。
出演者の年齢層が前作よりも若いのですが「若いけど あなどれないヤツ」という意味をを込めて、サイト名は「babyshark」にしました。
(2) ユーザビリティ
こちらも前作からの継続。エロサイト史上最高のユーザビリティを目指しています。
という3点を意識してつくりました。今後は表示速度と検索機能にこだわっていきたいと考えています。
(3) スマートフォン対応（レスポンシブデザイン）
前作のアクセスのうち、3分の1強はスマートフォンからのものでした。つまり確実にスマートフォンからエロサイトを見る需要はあるようなので、PC から見てもスマホから見ても、あるいはタブレットから見ても表示が崩れないようにしました。
このあたりは、後述の Twitter Bootstrap を活用しています。
2. 使っている技術
(1) Ruby on Rails 3.2
babyshark は、Ruby on Rails のバージョン 3.2.8 を使っています。
この半年の間に、いろんな他サービスのコードを GitHub で読みあさって、へー、こんな便利なライブラリがあるんだーとか、こんな書き方ができるんだーとか大変勉強になりました。それらを知っている限り詰め込んだつもりです。詳細は別エントリーで書いていきます。
(2) テスト、テスト、テスト
これもこの半年の間に覚えたことです。仕事で Rails を使うようになって「テストコードを書いていないものは、リリースしてはダメ」というルールを導入したので、テストに慣れるために、babyshark でも、RSpec や capybara を使ってテストを書きまくりました。
というより、テストがうまく書けなかったので、何かサイトをつくって練習するかー、ということでつくりはじめたのが、実は今回のきっかけだったりします。
(3) Twitter Bootstrap、Bootswatch
今年の夏に初めて Twitter Bootstrap を使ってみて、それっぽいデザインが、しかもレスポンシブなものが、デザイナーでなくてもカンタンにできてしまうことに感動しました。
しかし、Bootstrap デフォルトのままでは、ちょっとシンプル過ぎるかな感じていたところ、Bootswatch という、Bootstrap のテーマ集みたいなものを見つけまして。
それを使うと、なんということでしょう、CSS をほとんど編集することなく、クールなデザインがあっという間に出来上がってしまいました。
もちろんもっと良くできる余地はあるかもしれませんが、
というサンプルになったのではないかと考えています。
(4) jQuery、jquery.vgrid.js
前作同様、僕のお気に入りの可変グリッドの UI を実現するために、jquery.vgrid.js という、jQuery のブラグインを使っています。
一方で、前作で使う候補に挙げていた jQuery Mobile は、触ってみた結果、下記の理由により採用していません。
なお、jQuery Mobile の Ajax 機能や、id や class を埋め込む機能については、オフに設定できます。ただ、それでは jQuery Mobile を使う意義が半減してしまうなーと思った次第です（スマホでのページ遷移とかをカッコ好良くしたかったのです）
(5) スクレイピング
前作では、Ruby の Hpricot というライブラリを使ってスクレイピングをしていました。後継的な位置づけである Nokogiri を使わなかったのは、立ち読みした本に「日本語の扱いで問題となることもある」と書かれていて、それを Nokogiri でも大丈夫かどうか検証する時間がなかったからです。
今回もまずは早くリリースしたかったので、前回のコードを参考にして（といかコピペ多い）Hpricot を使っていますが、先日 Nokogiri の最新バージョンを試してみて、日本語も全く問題なく扱えたので、処理速度の向上を期待して、Nokogiri に置き換えようと考えています。
(6) 画像加工
前作同様、動画のサムネイル画像をリサイズしたり Instagram 風にする処理は Photoshop のバッチで。いずれ ImageMagick + RMagick で全自動化を目論んでいます。
また、ファイルサイズを小さくするために JPEGmini の Mac アプリ版を使っています。
(7) 画像サーバ
前作での高負荷対策を活かし、今回は最初から AWS の Amazan S3 に画像を置いて、CloudFront という CDN サービスを使って画像を配信しています。
ただ、AWS のサーバ代は個人でやっていくには馬鹿にならないので（前作では 10万PV/日で、月に3万円ほどかかった）、AWS を使わなくてもアクセスを捌けるようであれば、月額1,000円くらいの VPS に画像を移しても良いかなと思ったり。ここはこれから試行錯誤していきます。
(8) Web サーバ
こちらも早くリリースしたかったからという理由で、前作に引き続き、使い慣れた Apache + Passenger でとりあえず構築しました。
最近のデファクトスタンダードは Nginx + Unicorn のようなので、そちらも試してみたのですが、まだチューニングに慣れていないせいか、パフォーマンスが（わずかですが）落ちてしまったので元の構成に戻しました。いずれ再チャレンジしようと考えています。
(9) サーバ監視
前作と同様 munin で監視していますが、併せて New Relic という Web サービスを利用してみました。
その他いろいろと便利な機能が使えて重宝しています。
3. 今後の展開 - リーン・スタートアップ
この半年の間に勉強したことのうち、もっとも大きな影響を受けたのが「リーン・スタートアップ」というビジネス手法でした。
僕なりの解釈では
「小さく始め」て、「仮説を検証し」ながら、細かいサイクルを回し、正しい方向へ進む
というものなのですが、提唱者の著書のうち、下記の一節がハッとさせられました。
自分たちが作っているのは誰も欲しがらないモノなんじゃないだろうか。もしそうなら、スケジュールや予算を守ることにどんな意味があるのだろうか。
リーン・スタートアップ ―ムダのない起業プロセスでイノベーションを生みだす
- 作者: エリック・リース,伊藤穣一(MITメディアラボ所長),井口耕二
- 出版社/メーカー: 日経BP社
- 発売日: 2012/04/12
- メディア: ハードカバー
- 購入: 23人 クリック: 349回
- この商品を含むブログ (74件) を見る
まだまだ手探りの状態ですが、今回の babyshark のリリースにおいては、いくつかの「仮説」を立てています。そして、それを「検証」するためのデータを取るようにしています。
なので、いくつかの項目については既にやることを決めていますが、それ以外のことについては、その検証データを見ながら、いますぐやるべきか後回しにすべきかを決定し、柔軟に対応していこうと考えています。
以上です。babyshark を通して得られた知見については、適宜このブログ等で共有していこうと思いますので、今後ともよろしくお願します。
▽ babyshark - 日本人AV女優の動画を XVIDEOS などから厳選して配信（スマートフォン対応）
（※閲覧は18歳になってから）