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

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

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

サイトは当初の予定どおり90日でクローズしましたが、サイト作成を通して Rails 開発力がつき、仕事でも Rails を使ったプロジェクトに参加できたので、とても有意義な経験でした。

そしてこのたび、更なる高みを目指して下記サイトをつくったので紹介します（職場で開くときは、後ろに人がいないか注意してくださいね）

（※リンクは削除しました）

この半年の間に学んだいろいろなことをギュッと詰め込んで、ガチでつくりました。以下、サイトのコンセプトや使っている技術をまとめます。

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

コンセプト -キュレーション -ユーザビリティ -スマートフォン対応（レスポンシブデザイン）
使っている技術 -Ruby on Rails 3.2 -テスト、テスト、テスト -Twitter Bootstrap、Bootswatch -jQuery、jquery.vgrid.js -スクレイピング -画像加工 -画像サーバ -Web サーバ -サーバ監視
今後の展開 - リーン・スタートアップ <<

*1. コンセプト

**(1) キュレーション

これは前作から継続です。動画数が少なくても「当たり」だけを集めるようにしています。仕組みとしては、当たりだと思うAV女優さんの作品だけをスクレイピングしてきて、よしなに表示させています。

「当たり女優リスト」さえ人の手で作成すれば後はほぼ全自動にできたので、このあたりは人妻動画を扱っていた前作よりも楽なロジックで実現できました。

出演者の年齢層が前作よりも若いのですが「若いけどあなどれないヤツ」という意味を込めて、サイト名を付けました。

**(2) ユーザビリティ

こちらも前作からの継続。エロサイト史上最高のユーザビリティを目指しています。

-サムネイル画像が大きめのほうが、観たい動画かどうか分かりやすい -画面遷移をできるだけなくしたほうがストレス感じなくてすむ -リンク切れの動画は残念な気持ちになるので、できるだけ早く非表示にする <<

という 3点を意識してつくりました。今後は表示速度と検索機能にこだわっていきたいと考えています。

**(3) スマートフォン対応（レスポンシブデザイン）

前作のアクセスのうち、3分の1強はスマートフォンからのものでした。つまり確実にスマートフォンからエロサイトを見る需要はあるようなので、PC から見てもスマホから見ても、あるいはタブレットから見ても表示が崩れないようにしました。

このあたりは、後述の Twitter Bootstrap を活用しています。

*2. 使っている技術

**(1) Ruby on Rails 3.2

Ruby on Rails のバージョン 3.2.8 を使っています。

-Ruby on Rails

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

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

これもこの半年の間に覚えたことです。仕事で Rails を使うようになって「テストコードを書いていないものは、リリースしてはダメ」というルールを導入したので、テストに慣れるために 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 | コリス