■Rails3 とTwitter Bootstrapで、オシャレなエロサイトをつくってみました。

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

http://d.hatena.ne.jp/inouetakuya/20120331/1333192327

に触発されて、オシャレエロサイトを作ってみました。

以下は製作記になります。

オシャレエロサイトを作ろうと思ったのはいいのですが、デザインは苦手なので途方に暮れていました。

h300の方はペパボのソフトウェアエンジニアらしいのですが、こっちはただの素人プログラマー。

オシャレなサイトなんて作れるわけがありません。

そこで何か裏ワザみたいなものはないかとググっていると、Twitter Bootstrapという文字が目にとまりました。

Bootstrapの名前は知っていましたが、深い内容までは知りませんでした。

ですが、紹介記事を読んでみると自分の理想に近かったので早速使ってみることにしました。

Twitter Bootstrapとは？

Twitter Bootstrapはある程度有名だと思うんですが知らない方のために説明すると、

CSSフレームワークの一つで、ウェブデザインの作成を手助けしてくれるものです。

色々なCSSフレームワークを見ましたがTwitter Bootstrapが一番完成度が高いと感じました。

ウィキを見ると最初のリリースが2011年8月なので比較的最近のものですね。

CSSフレームワークの説明は難しいんですが、

普段、みなさんがウェブサイトを作る時、HTML + CSSで作られるかなと思うんですよね。

この時、CSSが事前に用意されているとすごく楽じゃないですか？

CSSフレームワークはCSSの大部分を前もって用意してくれているんですよ。（フレームワークによりますが）

ですので基本的にCSSに合わせてHTMLを記述するだけでウェブサイトが出来てしまいます。

CSSに合わせてHTMLを記述するとはどういうことでしょうか？

匿名ダイアリーでも似たようなことができるのでやってみます。

この文章は薄い青色でハイライトされていますよね？
Bootstrapで似たようなことをする場合
＜div class="well"＞
ハイライトしたい文章
＜/div＞
という感じになります。

classにwellと指定しているだけですね。

なぜそうするだけで文章がハイライトされるかというと、

divのclassにwellが付いていたら、いい感じでハイライトしてねっていう指示が

Twitter BootstrapのCSSに書いてあるからです。

BootstrapのCSSには、divのclassにalert alert-errorっていうのがあったら警告文だしてねとか、

button class="btn"ってあったらボタン表示させてねとか色んなことが最初から書いてくれています。

もちろん見栄えがよくなるように記述されていますので、classを指定するだけでモダンなデザインになるわけですよ。

CSSに合わせてHTMLを記述するだけでウェブサイトが出来るというのはこういうことです。

でも、最近のウェブサイトは HTML + CSS + JQueryという場合も多いですよね。

安心してください。Twitter Bootstrapの場合はJQueryの基本的な部分も用意してくれています。

ですのでドロップダウンメニューやタブ、スライドショーなどの実装も簡単にできます。

それに加えてBootstrapはよく使うアイコン数百種類まで用意してくれています。

至れり尽くせりですよ。

神様ですね。

CSSフレームワークを使うメリットはまだまだあります。

CSSが固定化されていると、HTMLも自動的に固定化されます。

CSSに合わせて記述するので当たり前といえば当たり前ですね。

CSSの記述は一定、HTMLもある程度一定なので、メンテナンスが格段にやりやすくなります。

個人プログラマーの方だと、サイトごとにHTMLもCSSもグチャグチャという方も多いのではないでしょうか？

フレームワークを使えばそういうこともなくなるということです。

Twitter Bootstrapの凄さはそれだけではありません。

現在、ユーザーがどんなデバイスでウェブサイトにアクセスしてくるか分かりません。

PC、スマートフォン、iPad、TV、3dsなど全てのデバイスに合わせてデザインを作るのは時間がかかりすぎます。

でもTwitter Bootstrapならbootstrap-responsive.cssというCSSを選ぶだけで、

デバイスの横幅に合わせてデザインが変わるレスポンシブなウェブサイトができます。

iPhone、iPad対応もすぐですよ。

もちろんデメリットもありまして、サイトのデザインが似てしまうというのが難点です。

ですが基本はBootstrapを使って、ちょっと自分でカスタマイズしてオリジナルっぽくすることもできますので、

一度Twitter Bootstrapを使ってみる価値はあると思います。

http://twitter.github.com/bootstrap/

Bootstrapの説明が長くなってしまいましたね…。

ここからはアダルトサイト作成の説明です。

クローラ作り

1.エロいサイトを巡って、XVIDEOSやFC2動画などのリンク、embedされたものがあれば取得。

2.リンクから動画のサイトへアクセスしてサムネイルを取得。

3.データベースに登録。

一連の作業をクローラーにやらせるプログラムをRubyで書く。

RailsでBootstrapを使う。

RailsでBootstrapを使うにはtwitter bootstrap railsというgemを使うらしいです。

しかし、使おうと思ったのですが、windowsでは上手くインストールできませんでした。

windowsでRubyを使うとバグが多いです。

仕方なく、代わりにsass-rails-bootstrapというものを使いました。

違いはcssにLESSをつかっているかsass（scss）を使用しているかだと思います。

http://d.hatena.ne.jp/tkawa/20120219/p1

の記事が参考になりました。

ちなみにLESSとかSassってのはcssを効率的に書けるすぐれたものです。

最近、webクリエイターボックスさんでも紹介されていました。

http://www.webcreatorbox.com/tech/css-sass/

LESSとかSass（Scss）もお勧めですよ。

railsでは3.1からcoffee scriptと共にsassがデフォルトで使えます。

このあたりがRailsの素晴らしさですね。

Bootstrapは画像を綺麗に並べて表示することにも向いているので、

アダルトサイトと相性がいいなと感じました。

タグリスト実装

AV女優名とか女子校生、人妻などのジャンルのタグがあれば便利ですよね。

Railsではacts-as-taggable-onというgemを使い実装しました。

動画のタイトルが事前に用意したAV女優名リスト、ジャンルリストと合致すればタグ付けするという感じです。

AV女優リストはDMMから、ジャンルリストは大手アダルトサイトから作成しました。

AV女優のタグを名前順でソートしたいと思ったのですが、

漢字はソートできないのでしばらく悩んだ結果、

タグ付けするときに　あおいそら-蒼井そら　みたいな感じでタグ付けするようにしました。

もっとスマートな方法があるはずですが思いつかなかったので仕方ないです。

ア行、カ行…のように行別にわけて、なおかつアイウエオ順で表記してますので

お気に入りのAV女優名を探しやすいはずです。

簡易ブックマーク実装

クッキーを使ってログイン不要のブックマーク機能を作りました。

jquery.cookie.jsを使って、cookieを配列に直してごにょごにょしてという感じで実装しました。

削除ボタンを押すと非同期で通信して…などいろいろ面倒でした。

でも、動画の数はかなり増やしていこうと思っていましたので頑張って実装しました。

動画の下のブックマークするボタンを押していただければブックマークできます。

ブックマークするボタンの表示などにBootstrapの便利さを感じました。

アダルト動画を大画面で見れるようにする。

実はこれが一番やりたいことでした。

多くのアダルトサイトは広告だらけで、肝心の動画がポツンと小さくあるだけというのが多いです。

世の男達は疲弊しています。それは本当に疲弊しています。

戦場で疲れた兵士たちに、そんなせせこましい画面でアダルト動画見ろって？

そんな野暮なこと言いませんよ。

PCスクリーンの画面いっぱいに、大画面で、ドカーンとエロ動画を楽しんで下さいよ。

動画はできるだけ大きく表示しています。もちろんレスポンシブです。

全画面表示にすりゃいいじゃん…っていうのは違うんですよ。

全画面表示だと逃げれないじゃないですか！

不意に誰かが部屋に入ってきたらどうするんですか？　

1クリックと2クリックは大違いですよ。

コンマ一秒で守れる尊厳がある。

そう考えております。

スマホ対応

Bootstrapでデザイン面はスマホ対応にはなっているのですが、

加えてjpmobileというh300で紹介されていたgemを使って、

スマホでアクセスされたら表示する動画の数を減らしてとか、

広告の種類を変えるなどの微調整をしました。

サーバー選び

osukiniサーバーのGT2プランにしました。

初期費用1900円、月940円で

CPU　2.66GHz、メモリ　2.2GB　HDD200GBです。

チューニングは正しいかわからないですね。

まぁ、アクセス捌けなくなってから考えます。

Nginx + Unicornを使おうとして結局やめる。

Railsは遅いので少しでも速くするためにApacheの代わりにNginx使おうと思ったのですが、

PC用のキャッシュとスマホ用のキャッシュを別々に保存して使う

ということがどうしてもできませんでした。

PC用のキャッシュがある場合、スマホ用のキャッシュがなくてもキャッシュがあると認識されるなど、

もともとNginxとrailsのページキャッシュは相性が悪いようです。

Nginx側でキャッシュする、もしくはスマホ用のアドレスを別にすればできるかもしれないですが、

http://m.サイト名　みたいにするのが嫌だったので最終的にNginxを使うことをやめました。

Nginxに関するネット上の記述も少ないので運用するのは危険かな、ということもあります。

Nginxを少しだけ使ってみた感触はかなり速いというものだったので残念でした。

バージョンが変われば、また挑戦したいですね。

Apache　+ passengerは遅いんですよ…。

【追記】

キャッシュの問題はRails側の問題だったので

やっぱNginxでもいけるかもしれないですね。

暇なときに試してみます。

出来上がったサイト紹介

オシャレのハードルを上げすぎて紹介しづらくなったのですが、

紹介しないと終わらないということで紹介します。

http://nukisen.com 　（エロ注意）

サイト名はオシャレに横文字でNukisenにしました。読み方はヌキセンです。

http://bootswatch.com　でダウンロードできるBootstrapのテーマそのままですが、

オシャレというかクールなデザインです。

Bootstrapを使うと自動的に細部まで凝ったデザインになるので最高ですね。

下にスクロールしていくと背景のグラデーションが変化したりとか、とても一人ではできないですよね。

長々と説明してきましたが、

ぜひNukisenで大画面のアダルト動画を体感してほしいです。

動画の数をいきなり大量に増やすとグーグル様に怒られるので、

しばらくは一日30本ぐらいの更新でいく予定です。

アダルトサイト同士の相互リンクでアクセス増やしてなどはしない方向です。

最後に

新しいことに挑戦すると得られるものが多いなと感じました。

ウェブサイトを作る際、無意識のうちに自分のできる範囲の技術で構築しがちだと思うんですが、

そうすると成長はないですね。

新しい技術に柔軟に対応していきたいです。

長文失礼しました。

Permalink | 記事への反応(5) | 16:10

ツイートシェア