Rails3、Twitter Bootstrap、Bootswatch を使ったレスポンシブなエロサイト「babyshark」をリリースしました

Webサービス, Ruby

今年の3月に下記のエロサイトをリリースしまして。

• Rails3 と jQuery で、真面目にオシャレなエロサイトをつくってみました - h300

サイトは当初の予定どおり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 を使っています。

• Ruby on Rails

この半年の間に、いろんな他サービスのコードを GitHub で読みあさって、へー、こんな便利なライブラリがあるんだーとか、こんな書き方ができるんだーとか大変勉強になりました。それらを知っている限り詰め込んだつもりです。詳細は別エントリーで書いていきます。

(2) テスト、テスト、テスト

これもこの半年の間に覚えたことです。仕事で Rails を使うようになって「テストコードを書いていないものは、リリースしてはダメ」というルールを導入したので、テストに慣れるために、babyshark でも、RSpec や capybara を使ってテストを書きまくりました。

• RSpec.info: home
• jnicklas/capybara

というより、テストがうまく書けなかったので、何かサイトをつくって練習するかー、ということでつくりはじめたのが、実は今回のきっかけだったりします。

(3) Twitter Bootstrap、Bootswatch

今年の夏に初めて Twitter Bootstrap を使ってみて、それっぽいデザインが、しかもレスポンシブなものが、デザイナーでなくてもカンタンにできてしまうことに感動しました。

• Bootstrap

しかし、Bootstrap デフォルトのままでは、ちょっとシンプル過ぎるかな感じていたところ、Bootswatch という、Bootstrap のテーマ集みたいなものを見つけまして。

• Bootswatch: Free themes for Twitter Bootstrap

それを使うと、なんということでしょう、CSS をほとんど編集することなく、クールなデザインがあっという間に出来上がってしまいました。

もちろんもっと良くできる余地はあるかもしれませんが、

エンジニアが、CSS 編集ほとんどなしで、ここまでできる

というサンプルになったのではないかと考えています。

(4) jQuery、jquery.vgrid.js

前作同様、僕のお気に入りの可変グリッドの UI を実現するために、jquery.vgrid.js という、jQuery のブラグインを使っています。

• 可変グリッドレイアウトのjQueryプラグイン書いたよ | Xlune::Blog

一方で、前作で使う候補に挙げていた jQuery Mobile は、触ってみた結果、下記の理由により採用していません。

• jQuery Mobile の Ajax と、Rails の Ajax が、ことごとくぶつかる
• jQuery Mobile が自動で HTML の id や class を埋め込んだりするので、思わぬ挙動やデザイン崩れを引き起こす
• jQuery Mobile の読込に時間がかかって、表示速度が遅くなる

なお、jQuery Mobile の Ajax 機能や、id や class を埋め込む機能については、オフに設定できます。ただ、それでは jQuery Mobile を使う意義が半減してしまうなーと思った次第です（スマホでのページ遷移とかをカッコ好良くしたかったのです）

(5) スクレイピング

前作では、Ruby の Hpricot というライブラリを使ってスクレイピングをしていました。後継的な位置づけである Nokogiri を使わなかったのは、立ち読みした本に「日本語の扱いで問題となることもある」と書かれていて、それを Nokogiri でも大丈夫かどうか検証する時間がなかったからです。

今回もまずは早くリリースしたかったので、前回のコードを参考にして（といかコピペ多い）Hpricot を使っていますが、先日 Nokogiri の最新バージョンを試してみて、日本語も全く問題なく扱えたので、処理速度の向上を期待して、Nokogiri に置き換えようと考えています。

(6) 画像加工

前作同様、動画のサムネイル画像をリサイズしたり Instagram 風にする処理は Photoshop のバッチで。いずれ ImageMagick + RMagick で全自動化を目論んでいます。

• dbox - Instagram Filters as Photoshop Actions
• 写真画像を1クリックでInstagram風にかっこよくする -Instagram Action | コリス

また、ファイルサイズを小さくするために JPEGmini の Mac アプリ版を使っています。

• JPEGmini | Mac App
• h300 にかかった CDN 利用料と、それを半分に抑えてくれた JPEGmini

(7) 画像サーバ

前作での高負荷対策を活かし、今回は最初から AWS の Amazan S3 に画像を置いて、CloudFront という CDN サービスを使って画像を配信しています。

• オシャレエロサイト「h300」をリリースして、10万PV/日を捌くためにやったこと

ただ、AWS のサーバ代は個人でやっていくには馬鹿にならないので（前作では 10万PV/日で、月に3万円ほどかかった）、AWS を使わなくてもアクセスを捌けるようであれば、月額1,000円くらいの VPS に画像を移しても良いかなと思ったり。ここはこれから試行錯誤していきます。

(8) Web サーバ

こちらも早くリリースしたかったからという理由で、前作に引き続き、使い慣れた Apache + Passenger でとりあえず構築しました。

最近のデファクトスタンダードは Nginx + Unicorn のようなので、そちらも試してみたのですが、まだチューニングに慣れていないせいか、パフォーマンスが（わずかですが）落ちてしまったので元の構成に戻しました。いずれ再チャレンジしようと考えています。

(9) サーバ監視

前作と同様 munin で監視していますが、併せて New Relic という Web サービスを利用してみました。

• New Relic : Web Application Performance Management (APM) & Monitoring

• サイトのページ表示速度等を監視したり、
• サーバの CPU、メモリ、ロードアベレージ、ディスクIO、ネットワークIO、プロセス 等を監視したり、
• 一定の条件でアラートメールを送信したり

その他いろいろと便利な機能が使えて重宝しています。

3. 今後の展開 - リーン・スタートアップ

この半年の間に勉強したことのうち、もっとも大きな影響を受けたのが「リーン・スタートアップ」というビジネス手法でした。

• 「開発者のためのリーン・スタートアップ」「リーン・キャンバス入門」の資料を公開します - delirious thoughts

僕なりの解釈では

「小さく始め」て、「仮説を検証し」ながら、細かいサイクルを回し、正しい方向へ進む

というものなのですが、提唱者の著書のうち、下記の一節がハッとさせられました。

自分たちが作っているのは誰も欲しがらないモノなんじゃないだろうか。もしそうなら、スケジュールや予算を守ることにどんな意味があるのだろうか。

まだまだ手探りの状態ですが、今回の babyshark のリリースにおいては、いくつかの「仮説」を立てています。そして、それを「検証」するためのデータを取るようにしています。

なので、いくつかの項目については既にやることを決めていますが、それ以外のことについては、その検証データを見ながら、いますぐやるべきか後回しにすべきかを決定し、柔軟に対応していこうと考えています。

以上です。babyshark を通して得られた知見については、適宜このブログ等で共有していこうと思いますので、今後ともよろしくお願します。

▽ babyshark - 日本人AV女優の動画を XVIDEOS などから厳選して配信（スマートフォン対応）

（※閲覧は18歳になってから）

ツイートする

Permalink | コメント(8) | トラックバック(3) | 18:50