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

いつぞやの飲み会で、

これだけウェブの技術が進化しているのだから、もっとオシャレなエロサイトがあってもいいんでないかい？

という話になりまして。

だけどどうせ作るんならということで、Rails3 と jQuery を使って、結構マジメにつくってみました。

▽ h300 - 人妻動画サイトを Rails3 と jQuery スキルアップのためにつくってみました（R18）

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

当初はエロにオシャレは必要ないのかなーと思ったときもありましたが、いざつくってみると、やっぱり選べるならオシャレなやつの方ががいいよね、という結論に落ち着きました。

今回つくったのは試験的なものなので 90日間限定でしか公開しないつもりですが、日本のエロサイトが今後もっとオシャレに発展していくきっかけになってくれたら嬉しいです。

以下、サイトのコンセプトや使っている技術についてまとめてみます。

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

1. コンセプト

キュレーション

ユーザビリティ

オシャレ

2. 妥協した点

動画の数

検索、タグ、ブックマーク

ソーシャル

3. 使っている技術

Ruby on Rails 3.2

jQuery、jQuery Mobile

スクレイピング

画像加工

アダルトサイトを設置可能なサーバ

負荷対策

LAMP から GUNDAM（笑）へ

4. 直近の課題 - スマートフォン対応

5. 今後の展開

1. コンセプト

今回のサイトをつくるにあたって、コンセプトとしたのは、下記の3つです。

(1) キュレーション

動画を開いてみては「いやいや僕が探しているのはこれじゃない」と思い、閉じて、目的のものに辿り着くまでに結構時間が経ってて、賢者タイムが訪れたらものすごく時間を無駄にした感に襲われるのは僕だけではないはず。

もっとこうさー、動画の数とかは少なくて良いからさー、「当たり」だけを集めたやつってないわけ？？

と以前から考えておりまして。そしたら「まとめサイト」からヒントを得ました。ああ、そうか、最終的には人の手で選抜しちゃえばいいんだと。

なので、動画を集めてくるところまでは自動化しているんですが、最終的にサイトに載せる承認ボタンみたいなものは人の手で押しています。

(2) ユーザビリティ

マネタイズとかは一切無視して、使いやすさのみを追求していったら、どんなカタチになるんだろう？？と考えながらつくりました。辿り着いた現時点での解は、

サムネイルが大きめのほうが、観たい動画かどうか分かりやすい

画面遷移を極力なくしちゃったほうがストレス感じなくてすむ

といったところです。ここはでも、もっと掘り下げる余地があるところですけどね。

(3) オシャレ

オシャレオシャレって連発していますが、僕自身あんまりオシャレな引き出しを持っていないので、そこは他のサイト~~からパ○リました~~を参考にしました。

だけど、エロサイトって、揃いも揃って広告出しまくりで、目がチカチカするやつばかりだけど、それを無くすだけで結構変わるものなんですね。

あわせて画像を Instagram 風にしてみたら、なんということでしょう、それっぽいやつが結構カンタンにできてしまいました。

これで賢者タイムの落胆が半分に軽減されるはずです☆

2. 妥協した点

一方で、時間との兼ね合いで妥協した点もあります。

(1) 動画の数

世の中には動画数が10万を超えるようなサイトもありますが、前述のとおり「当たり」だけを並べることにしたら必然的に動画数は少なくなりました。

最初は100本くらいからスタートして、毎日少しずつ増えていって、最終的には「h300」というサイト名のとおり、だいたい 300本くらいを目安にしています。そのくらいでいいんです、きっと。一度に多くを観ようとしないで、気長に付き合ってあげてください。

あー、ちなみに「h300 の h はナニ？」ってよく訊かれるのですが、それはアナタ、人妻の頭文字ですよ。言わせないでください（笑）

(2) 検索、タグ、ブックマーク

動画を探すときには、検索、タグ、ブックーマーク機能などがあると便利ですが、動画数が少ないため、必須ではないだろうと考えたので妥協しました。

あとでそれらの機能を追加するかもしれませんが、後述するとおりスマートフォン対応の方を優先させます。

(3) ソーシャル

時代はソーシャル真っ盛りですが、そもそも自分にはエロ動画を人と共有したいという感覚があまりありませんで。というか大半の人は自分のタイムラインにエロが表示されることには抵抗があるだろうということで、ソーシャルな機能については現在のところ予定してません。

まー、でも、動画を、閲覧された数順に並べるとかならやるかもしれませんね。

3. 使っている技術

本当のところを言うと、今回つくったサイトは、自分のための、技術の実験場という役割を持っていたりもします。いろんな技術を調べて、h300 で実際に使ってみて、そこで得たものを仕事に活かしていったり、本ブログ等で発信していきたいと考えています。

詳細は改めて取り上げますが、扱う予定のテーマを大雑把に列挙してみます。

(1) Ruby on Rails 3.2

h300 は、Ruby on Rails 3.2 を使っています。現時点での（ほぼ）最新バージョンです。Rails は 3.1 になって、Asset Pipeline など機能が大幅に追加されて、3.2 で安定したと理解しています。下記サイトによると、Rails 2.3 が長く使われたように、3.2 も長く使われる予定だとか。

今回つくったようなシンプルなサイトでは、Rails のようなフルスタックなフレームワークでなくても全然良かったのですが、Rails3 を手に馴染ませておきたかったので採用しました。

(2) jQuery、jQuery Mobile

動画を表示させたり非表示にしたりしたときに、サムネイル等がパラパラと並べ直しされますが、それは jquery.vgrid.js という、jQuery のプラグインを使っています。

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

社内の BDD（Beer Driven Development）な人に教えてもらったのですが、結構定番みたいですね。

jQuery Mobile はまだ使っていませんが、スマートフォンに最適化させるときに使おうかと考えています。

(3) スクレイピング

動画の情報は、Ruby の Hpricot というライブラリを使ってスクレイピングして取得しています。Nokogiri という後継的な位置づけのライブラリもあったのですが、立ち読みした本に「日本語の扱いで問題になることもある」と書かれていたので、もう時間もなかったし Hpricot の方を選びました。余裕が出てきたら Nokogiri も試してみるかもしれません。

(4) 画像加工

動画のサムネイル画像をリサイズしたり Instagram 風にする処理は Photoshop のバッチを利用しています。

画像加工をするライブラリの定番で ImageMagick というもの及びそれを Ruby から使うための RMagick というものもあるようなので、そちらも余裕が出てきたら試してみたいですね。

(5) アダルトサイトを設置可能なサーバ

大半のレンタルサーバはアダルト NG なので、スペックとコストパフォーマンスで満足できるサーバを見つけるのが、実は一番苦労しました。

ようやく見つけたのが SaaSes の「Osukini クラウド」という個人用クラウドサービスです。

クラウドホスティング｜SaaSes

月額 1,000円からスタートできて、サイトが流行って負荷がかかってきたらもう1,000円だして CPU とメモリ増強。さらに流行ったらさらに 1,000円だして、というのが可能なサービスなのですが、もう新規申込は終わっちゃったようですね。

(6) 負荷対策

上記の SaaSes の Osukini クラウドは良いサービスなんだけども、さくらの VPS と比較すると、回線が遅いのではないかと感じます（SSH とかで操作すると体感します）

だから、負荷対策をしっかりやっていないとすぐにサイトが重くなりそうなので、下記サイトなどを見ながら Apache 等のチューニングをし、Apache の ab コマンドや httperf などでベンチマークして、まあ大丈夫だろうなレベルまでもっていきました（といっても大したことはしていないです）

ウェブ開発者のための、1時間でできるLAMP環境構築術（CentOS編） - さくらインターネット創業日記

(7) LAMP から GUNDAM（笑）へ

LAMP というコトバは既に定着していますが、最近は GUNDAM というワードが出てきたみたいですね。

LAMPの次はGUNDAMの時代だって？ - Togetter

こちらは定着しないかもしれませんが、いまは LAMP から新しい技術への過渡期ということのひとつの象徴だと思います。

h300 は前述のとおり、ロースペックなサーバで運用しておりまして、いまは Linux, Apache, MySQL, Ruby で構成しているのですが、それではアクセスを捌き切れなくなったら（あるいは捌き切れなくなる前に）Web サーバとデータベースを、いま流行りのものに置き換えようかと考えています（おそらく、Nginx + unicorn かな。DB はまだ選定していません）

4. 直近の課題 - スマートフォン対応

僕にはその発想はなかったのですが、周りの人に訊いてみたら、エロサイトをスマートフォンで見る需要が結構あるみたいですね。寝室とかトイレとか、あとお風呂とかで見るそうです。

なるほどねー、と思い、スマートフォンに対応することにしました。まだ着手していませんが、最優先で取り組む予定です。

5. 今後の展開

今回、h300 という人妻に特化したサイトをつくりましたが、もっと違うジャンルのものや、あるいは総合的な動画サイト（こちらは検索機能をちゃんとしますよ）もつくっていきたいと考えています。

どうぞ h300 ともどもよろしくお願いします。

▽ h300 - 人妻動画サイトを Rails3 と jQuery スキルアップのためにつくってみました（R18）

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

このエントリーのつづき

Permalink | コメント(2) | トラックバック(5) | 20:12

コメントを書く

西本と申します。 2012/07/13 20:19 90日で「h300」終わってしまうんですね、、、残念です。
もしよければなのですが、現時点で私自身の技術の遥か上をいくサイトですが、別ドメイン別サーバはこちらで用意しますので、譲り受けることはできませんでしょうか？

せっかくこんな格好いいサイトですし、もったいない気がして。。。
是非ご検討頂ければ幸いです。

mens_jpn@ヤフー　西本宛にご連絡頂ければ幸いです。
どうぞよろしくお願いします。