いかにしておっぱいをだら見する仕組みを作るか「DaraPic Searchってのを作ったよ」

先ほどTumblr、Twitpicの写真をだら見するビューアーを作りましたが、 やっぱりおっぱいをだら見したいよね ということで、おっぱいやおっぱいやおっぱい以外のもの画像検索キーワード結果をだら見する「DaraPic Search」というのを作りました。

この「おっぱいをだら見する仕組みを作る」という命題は、凝りだすと結構コツがいるので、それを課題ごとに解説します。

1.おっぱい画像を検索する

最初に直面した問題はこれです。どこからキーワード「おっぱい」として画像検索して、 JSを使いたかったのでJSONでひっぱってこれるかということです。当初、写真だったらFlickrだろ！ということでFlickrで「おっぱい」と検索してみても、どーも刺激の非常に低いものばかり。お次に検索エンジンで！ということで、 Google Ajax Search API を使おうということで、エロい画像がでてくるのを確認済みでやってみようとしましたが、はたと思い出しました。 Google Ajax Search API って検索結果の件数に確かすごい制限があるんですよね。 100枚ももってこれねーんじゃないかな。ということで今回はYahoo、しかも米のものを使うことにしました。日本のAPIはJSONでとって来れないのよね〜このYahoo API、やはり検索結果の件数に規制があるものの確か1000件まではいけるので、こちらを使います。

2.にょろにょろ出す

JSで、というかjQueryで上から下へスライドダウンしながら、かつフェードインさせると気持ちよく画像が見れます。そのソースがこんな感じです。この二つのエフェクトを同時にするってのが肝ですね。

 var div = $("<div/>");
//画像をdivに入れたりする
div.hide();
$("#panel").prepend(div); //#panelの頭に挿入
div.animate({
  "height": "toggle", "opacity": "toggle"
}, 500 );

3.画像を先読みさせる

にょろにょろ出すことには出せたんですが、その瞬間に画像のロードがかかるんで、なんかスムーズじゃないです。ということで、画像をあらかじめ検索結果を取得した時点で、先読みさせて、のちほどインターバルを置いていっこいっこ描画する際にはもうすでにロードされているということにしましょう。するとスムーズに描画されます。

 //JSONを持ってきて、結果をループで回している時に
//jQueryでimg要素を作って描画させておく
$("<img/>").attr("src", this.Url);

4.リファラがないと表示できない系の画像はYahooにあるサムネイル画像を使う

某fc2.comとかdtiblogとかに張ってある画像はリファラがなくって直接閲覧しようとすると404かなんかを返してみれません＞＜よく「おっぱい」でひっかる画像がそういうの多いので、これじゃあ悲しいので、そういう時はYahooの検索APIで用意されているサムネイル画像を使いましょう。

 var photoUrl = photo.Url;
if( photo.Url.match(/\.fc2\.com|dtiblog\.com/) ){
  photoUrl = photo.Thumbnail.Url;
}

まずは簡単に正規表現で決めうちマッチさせたものはサムネイルでって感じにします。それでもこのパターンにひっかからずに描画できないものもありますよね。ということでそういうのは、スキップします。 imgという変数で写真のURLを読み込ませてあるので、 attr('width')を使って写真の幅を取得し、それが0の時には描画処理を飛ばします。

 var img = $("<img/>");
img.attr('src',photoUrl);
if(img.attr('width') > 0 ){
  //描画処理
}

5.まとめ

てな感じで、おっぱいだら見が気持ちよーくできるようになりましたとさ。よかったらだら見してください。

Darapic Search