jQueryを使ってスライダー式アダルト動画検索作ってみた！
皆さんこんにちは、タイトルを見てまたあいつかよ！と思った人もいるかと思いますが
ええ、そうですまた私ですｗ
「アダルト動画検索ヌキネーター」と「これなんてAV女優？」をちょっと前に作った者ですが
あれから、さらに自分好みのエロ、my favorite エロを見つけるにはどうしたらいいか考えていました。
頭のの中はエロでいっぱい。
朝も昼も夜も雨の日も風の日もエロでいっぱい
いい年したおっさんのくせにエロでいっぱい。
若干、これでいいのか？と人生について考えてしまいましたｗ
そして、私はついにその方法を見つけました！
あれをこうしてこうやってどーん！ってしたらいける！
というわけで
「アダルト動画検索ADULT SLIDER」
略して「アダスラ」
http://adult-slider.com/
作りました！
どんなサイトかというと
バスト、ウエスト、ヒップ、カップ数、身長、年齢の項目で両端可変のスライダーがあり
つまみをお好みで調整することにより自分の好きなタイプの女性のエロ動画が探せるってやつです。
リアルタイム？で検索結果が画面に反映され該当動画のサムネイルが一覧で表示されます。
まあ、ぶっちゃけあの有名な完全に一致さんで使われてたjQueryのselectToUISliderがかっこ良すぎたので自分も使ってみたかっただけなんですｗ
それでは、どんな手順で作ったか簡単に書いてみたいと思います。
1、スクレイピングによりデータを収集しデータベース化する
作成するデータ
- AV女優データ
- 動画データ
スクレイピングに利用したライブラリ
htmlSQL
ダウンロード http://www.jonasjohn.de/lab/htmlsql.htm
AV女優データの作成方法
某レンタル、通販サイトのAV女優データを収集
バスト、ウエスト、ヒップ、カップ、身長、生年月日が記載されているのでその項目をスクレイピング
include_once("snoopy.class.php");
include_once("htmlsql.class.php");
$wsql = new htmlsql();
if (!$wsql->connect('url', "スクレイピング対象URL")){
print 'Error while connecting: ' . $wsql->error;
exit;
}
//取得範囲の指定
$wsql->isolate_content('<table class="hoge">', '</table>');
//td内の情報取得
if (!$wsql->query('SELECT * FROM td')){
print "Query error: " . $wsql->error;
exit;
}
foreach($wsql->fetch_array() as $row){
//$row[text]などでtd内のテキストデータをごにょごにょして対象データをいじる。
}
動画データの作成方法
各種動画サイトよりhtmlSQLを使い動画URLやタイトルなどを取得する。
やり方はAV女優データの作成方法と同じです。
AV女優データと動画データを女優名で紐付けする。
2、スライダーと動画データの抽出と表示
利用したjQuery
selectToUISlider
ダウンロード http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/
Zoomer Gallery
ダウンロード http://addyosmani.com/blog/zoomer-gallery-a-jquery-plugin-for-displaying-images-with-flash-like-zooming-effects/
スライダー利用準備
htmlヘッダー内に以下を記述し指定ディレクトリにファイルをアップロードします。
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript" src="js/selectToUISlider.jQuery.js"></script>
<link rel="stylesheet" href="css/redmond/jquery-ui-1.7.1.custom.css" type="text/css" />
<link rel="stylesheet" href="css/ui.slider.extras.css" type="text/css" />
<script type="text/javascript">
$(function(){
//.hide()をつけないとドロップダウンが表示される。
$('select#cups, select#cupe').selectToUISlider({labels: 12,sliderOptions: {change:function(e,ui){getContents();}}}).hide();
fixToolTipColor();
});
function getContents(){
var cs =$('#cups').val();//カップの左つまみ
var ce =$('#cupe').val();//カップの右つまみ
//getでphpに値を渡しｘｘｘ.phpで該当する値のデータをmysqlから引っ張って結果表示部分を作り<div id="douga"></div>に表示する
var http = $.get("ｘｘｘ.php?cs="+ cs,null, function(data) {
$("#douga").html(data);
});
}
//purely for theme-switching demo... ignore this unless you're using a theme switcher
//quick function for tooltip color match
function fixToolTipColor(){
//grab the bg color from the tooltip content - set top border of pointer to same
$('.ui-tooltip-pointer-down-inner').each(function(){
var bWidth = $('.ui-tooltip-pointer-down-inner').css('borderTopWidth');
var bColor = $(this).parents('.ui-slider-tooltip').css('backgroundColor')
$(this).css('border-top', bWidth+' solid '+bColor);
});
}
</script>
</head>ボディ内にスライダー部分となるselectを記述
<body> <select name="cups" id="cups"> <option value="">指定しない</option> <option value="A">Aカップ</option> <option value="B">Bカップ</option> <option value="C">Cカップ</option> <option value="D">Dカップ</option> <option value="E">Eカップ</option> <option value="F">Fカップ</option> <option value="G">Gカップ</option> <option value="H">Hカップ</option> <option value="I">Iカップ</option> <option value="J">Jカップ</option> <option value="K">Kカップ</option> <option value="L">Lカップ</option> <option value="M">Mカップ</option> <option value="N">Nカップ</option> <option value="O">Oカップ</option> <option value="P">Pカップ</option> </select> <select name="cupe" id="cupe"> <option value="">指定しない</option> <option value="A">Aカップ</option> <option value="B">Bカップ</option> <option value="C">Cカップ</option> <option value="D">Dカップ</option> <option value="E">Eカップ</option> <option value="F">Fカップ</option> <option value="G">Gカップ</option> <option value="H">Hカップ</option> <option value="I">Iカップ</option> <option value="J">Jカップ</option> <option value="K">Kカップ</option> <option value="L">Lカップ</option> <option value="M">Mカップ</option> <option value="N">Nカップ</option> <option value="O">Oカップ</option> <option value="P" selected="selected">Pカップ</option> </select> <div id="douga"></div> </body>
Zoomer Galleryを使ったマウスオーバーによる画像のズームについては
http://addyosmani.com/blog/zoomer-gallery-a-jquery-plugin-for-displaying-images-with-flash-like-zooming-effects/
に詳しく書いてあります。
これを使うとgoogleイメージ検索みたいにマウスオーバーでぶわっと画像が飛び出てきます。
肝心の動画データのプレイヤー部分の表示はヌキネーターの方にリンクして任せています。
3、利用したサーバーや細かい設定などは
http://anond.hatelabo.jp/20110804021353
と同じです。
負荷対策とかDOS対策とか
- iptablesで攻撃してきそうな国からのアクセスを遮断
- mod_evasiveの導入で一定時間での連続的なアクセスを遮断
- httpd.confの設定 KeepAlive等
- mod_expiresでキャッシュ設定
- mysql クエリーキャッシュの設定
- APCの導入
ざっとですがこんな感じで作りました。
このサービスを作ってみて
手前味噌なんですけど予想以上に使い勝手が良くて非常に捗りますｗ
正直いってジャンルとか女優名で検索するよりはるかに自分好みの動画が探せます。
ADULT SLIDERで好みの動画を探してヌキネータで視聴しブックマークする。
最強です！
個人的に作ってほんとに良かったですｗ
jQueryのselectToUISliderは色んな分野で使えそうですね。
CVP分析とかその他もろもろの意思決定ツールとか作ったら便利かも。
数値を入力したりせずにつまみを動かすとすぐ結果が出るっていうのが素晴らしい。
しかし、jQueryって素晴らしい。
スーパーハカーじゃなくても見た目派手でこのサイトすごくね？ってサイトが簡単にできる。
魔法のような技術ですね。
自分の技術力だけじゃこんな派手な見せ方はできません。
どちらかと言えば人のふんどしで相撲をとるタイプなんで・・・ｗ
jQueryみたいな誰もが簡単に利用できて、「すげー！」ってなる技術って最高です！
ヌキネーター
これなんてAV女優？
ADULT SLIDER
と3サイト作ってみて今のところエロ系サービスでやりたいことは大分できたかなと思います。
スクレイピングやデータベース、サーバー、セキュリティ関係など大分勉強できました。
エロサービスでなければここまでやらなかったと思います。
そして、サイト作成とは別にはてなで日記を書く楽しさも覚えましたｗ
サービスを作ったらやはり反応が気になるものでブックマークコメントやツイッターでのコメントとかがあると
嬉しくて小躍りしてましたｗ
自分の作ったサービスの反響が分かるってほんと楽しいですね。
そしてそして、今回のサービスの反響も気になってますｗ
「アダルト動画検索ADULT SLIDER」
http://adult-slider.com/
コメントがあることを祈って小躍りの準備をして待ってます。
全裸でｗ
そしてそして、ツイッターとかブログとか始めたんでよかったらお友達になってね
プログラマーさんやデザイナーさんやWEB系の技術者の人やエログ運営者さんとかお気軽にお声をおかけください。
情報交換とかエロい話とかできたら嬉しいです。
ではではまたWEBサービスを作った時は日記を書いてみます。
生暖かい目で見守ってあげて下さいｗ
