2013-03-08

風俗嬢アダルト専用ブックマークサービス作ってみた

秘密ブックマーク、略して「秘ブ」というソーシャルブックマークサービスを作ってみました。

アダルト専用で、(以前の)はてブのようなものを目指して。

今は風俗嬢やってるんですが、(悲しいことに)時間があったっていうのと、

自分が欲しいと思ったもの作ってみたかった。

目次

①作ったサービス

②影響を受けた増田

③作った経緯

④使用したサービスとか

⑤作成のあらまし

⑥秘ブのブックマークボタンとかブックマークレットとか

⑦登録時の注意!

⑧今後の予定

作ったサービス

秘ブ.jp

http://hibu.jp/

アダルト専用のソーシャルブックマークサービス

影響を受けた増田

自分WEBサービスを作りたいと思っている人へ

http://anond.hatelabo.jp/20101203150748

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

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

・週6フリーターWEBサービス作ってみました。

http://anond.hatelabo.jp/20120914214121



作った経緯(基本自分語りなのでそういうのウザい人は飛ばしてね)

私は、早く自立できるようにと高専を出て、田舎から東京に移り住み、事務として働いていた。

この時点ではエクセルとかワードとかは使える、マクロちょっと組める程度のレベル

自立したかったのは父親が生活費パチンコとか女に溶かすような輩だったため。

私が自立したあと、両親は無事離婚。激務で薄給母親と離れて暮らして寂しくても頑張っていた。

そんな中、母が更年期障害鬱病に。

鬱病はつらい。何が辛いって、本人も辛いんだろうけど、荒んだ部屋の中で横になって息を潜めている母親の姿を見るのがきつい。

母親ゆっくり休ませてあげたかった。

いつでも母親の側に駆けつけることができるように、お金時間に余裕が欲しかった。

で、吉原へ。私は風俗嬢になった。

でもねー、全く稼げないwww 笑っちゃうくらい。

大衆店にいるんだけど、女の子もお店も多くて、私より若くて可愛い子がわんさかいる。

お客さんがつかないと収入0なんだよね。

店長やお店のお姉さんがマットや椅子を覚えな、ってアドバイスはくれるんだけど、

その頃教えてくれる先生たまたまいなかった。(今は別の店に修行にいったかバッチリできるけど)

仕方ないかようつべとか動画サイトソープお仕事系の作品を見まくったわけ。

(余談ですがマ◯ティ夫人ってお店のマット技一覧のページはすごいよ!)

お客さんつかないか時間がすんごいあって、待機室でずーっと見てた。

で、マットの動画とか、ボディ洗いの動画探すんだけど、なかなか見つからない。

結構マニアックからね。

で、そんなことをしてるうちに思ったんだけど、エロサイトエロ動画

果てはマニアック趣味情報を共有できるサイトがあったら便利じゃないかな?と。

数少なく接客したお客さんで、わざわざブーツ持参で、顔面を踏みつけてくれ、って人がいたんだけど、

そういうの彼女とか友人とかにあんまり言えないでしょ。

でも日本中を探したら、同じ趣味や、近い嗜好の人がいるんじゃないかな?って。

時間私自身が病むほどあるし、そんなわけで制作に取り組みました、秘密ソーシャルブックマーク

略して「秘ブ」(「秘部」とかけてあったり)

吉原泡姫たちは、タクシー通勤する人が多いんだけど、私は三ノ輪の駅から歩いて通ってた。

元彼に借りたプログラムの本などどっさり持って。めっちゃ重いw

待機室でひたすら落ち込みながら金勘定するより、母親心配をするより、何か生産的なことを考えていたかったんだよね。

この一年でかなり勉強して、ようやく公開できるレベルに達したかなとおもいます

作成期間は、楽しかったし充実してた。

みんなが来てくれるかはわかんないけど、まあ来てほしいなと思う。

さて、湿っぽい話はここらへんにして、どうやって作っていったかを話しましょう。

使用したサービスとか

・Semantic Scuttle

http://semanticscuttle.sourceforge.net/

jQuery

http://jquery.com/

・HeartRails Capture

http://capture.heartrails.com/

はてな Favicon API

http://favicon.hatena.ne.jp/

Twitter Bootstrap

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

・Bootswatch

http://bootswatch.com/

サイトの構成なんかも書こうと思ったけど、セキュリティ的に良くないって聞いたし、

はてな民のみなさんに突っつかれるのが怖いので少しだけ(^_^;)

まあ違う意味で突っつかれるのは慣れてるんだけどw

簡単に書いとくと、HTMLCSSPHPMySqljavascriptくらい…なのかな?

Semantic Scuttleが裏でやってることはあまり詳しく分からないです。

作成のあらまし

前述の通りアダルト系のブクマサービスを作ろうと決めてから

プログラミング勉強を始めることにした。

HTMLCSS

どうやらまずはHTMLCSSをやれということらしいので、そこから始めた。

使ったのはこれ。

ゼロからわかる HTML&CSS超入門

http://www.amazon.co.jp/dp/477414536X/


メモ帳で簡単なWebページを作りながらだと結構スッと頭に入ってくる。

逆に言うと、読んでるだけだと全然あとで思い出せない。

「Ctrl+U」でページのソースを一発で見れることを知り、参考のために色んなサイトソースを見まくった。

全部頭に入ったわけじゃないけど、ここまでで最低限、検索ワードが思いつくぐらいにはなる。

ここまでで大体一ヶ月くらい。

PHPMySQL

もちろんHTMLCSSだけではてブ的なものが作れるわけはない。

っていうかほぼ路頭に迷った感じで「はてブ的なものを作る方法」をググりまくった。

結果「Semantic Scuttle」なるものでそれに近いサービスを作れることが判明。

「Semantic Scuttle」を調べてみると、どうやらPHPMySQLで動いているらしい。

でもダウンロードしてみて中身を覗いてみても何が何やらさっぱり。

これなら漢文のほうがまだ読めるわ!

ということで、PHPMySql勉強することにした。

とりあえず2つ一緒に覚えられそうだと思って元彼にこの本を借りてきた。

実践マスターPHP+MySQLPHP4/PHP5対応

http://www.amazon.co.jp//dp/4881665839



XAMPPインストールをして、PHP書いて、MySQL接続して…

ふむふむ、書いてあるとおりに作ったのは作ったけど、あんまりわからん。というのが感想

特にクラスの理解で躓いた。

ちなみにPHPを書き始めるのにあたって、eclipseという統合開発環境意味いまいちわかってないけど)を紹介され、インストール

コード書きやすすぎ、色分け便利すぎワロタwwwと思ったのを覚えている。

設定はめんどくさかったけどね。

eclipseについて詳しくは→http://www.javadrive.jp/eclipse3/

しかたない、まずはPHPだけでも頑張るかと思い、次に借りたのがこの本。

PHPによるWebアプリケーションスーパーサンプル 第2版

http://www.amazon.co.jp/dp/479733245X/


ひと通りサーッと読んで大体どんなことが書いてあるのかを頭に入れてから

必要そうなところを詳しく読んで作ってみてっていうやり方をした。

MySQLのことにも触れてあるので、そっちの復習もできた。

クラスについても薄らぼんやりわかってきて、動くものを作れるレベルには上達。

この辺りは、サボったり迷ったり環境整えたりで2ヶ月くらいかかったかな。

いよいよSemantic Scuttleを読み解く!

さて、これでいけるだろうと意気込んで長らく保存しておいたSemantic Scuttleのソースコードを見る。

わからん

モニタを見つめながら、頭のなかで脳みそが湯だっていく。

そもそもファイル間の構造がどうなってるのかわからない。

挫折。。

どうすればいいのってことで、元彼にヘルプ

MVCってのがあって、モデルとビューとコントロールってのが多分…」

φ(..)メモメモ

「とりあえずindex.phpから見て行ったらいいんじゃないかな?」

「わかんないところはプロジェクト全体を検索してみなよ」

ふーん。今でもMVCとかってのはほとんど理解してないけど、最後のは役に立った。

ファイル名やら関数名でプロジェクト内を検索しまくって、大体の構造を把握。

からない内部関数は「php関数名)」でググる

と簡単に書いてみたものの、この作業には2ヶ月ほど費やした。

Semantic Scuttleをカスタマイズ

構造はなんとなくわかったものの、実際触ってみると動かなくなるケースが多数。

ひと通りの勉強は一応したけど、実地のカスタマイズは非常に難しい。

ファイル数300を超えるプロジェクトの恐ろしさを知る。

他に使ってる人おらんのかなと思い探してみるとこんなものが。

ソーシャルブックマークソフトScuttleの強化版Semantic Scuttleを導入してみる

http://tukaikta.blog135.fc2.com/blog-entry-70.html

・【閉鎖される前に】Deliciousからデータを移行できるオープンソースCMS・scuttle

http://kachibito.net/software/scuttle.html

ありがたくカスタマイズに利用させてもらう。ホント感謝しまくりです。

でも上のURLに書いてあること以外にもカスタマイズしたいところがあった。

1.ブクマ数を記録したい

2.Voteじゃなくてブクマ数順にソートしたい

3.どうせならブックマークボタンとか作りたい

4.ブックマーク数を表示するシステムを作りたい

5.デザインダサいので変えたい

1はだいぶ考えたんだけど、DBちょっといじくって、フィールドを追加してそこに記録することにした。

2はPHPDBをあれこれして、ド汚いコードながらも根性で実装。

3で再びの挫折。なぜならjavascriptを使わなければならないことが判明したから。

javascript

まだ勉強しなきゃいけないのか…とは思ったが、初心を思い出し、頑張ることを決意。

おらあああ!なんかjavascriptの本貸せやぁああああ!と丁寧に元彼に頼んでみたところこの本が手に入った。

JavaScript 第5版

http://www.amazon.co.jp/dp/4873113296

うん、馬鹿じゃないの。こんなん理解できないよ。こっちは時間がないんだよ!

もう一冊なんか初心者向けを貸せ!

マンガでわかるJavaScript

http://www.amazon.co.jp/dp/4798027839/

おい、馬鹿にしてんのか。とは言わなかったけど拳で表現した。

でもマンガなので超読みやすい。

読了したあと、ネットと前者の書籍必要なところだけ調べることにした。

で、調べていったところ、4については

scriptタグでtypeを"text/javascript"にしてもPHPを読み込めるということがわかり、PHPで強引に表示させることにした。

3はもともとSemantic Scuttleにあったブックマークレットをちょこっと編集して解決。

これで大体1ヶ月半くらい。

デザイン

最後の難所、デザイン

一応CSS勉強したけど、美術センスのない事どこかのはいだしょうこお姉さんレベル

でもデフォルトデザインダサいってことくらいは、かろうじてわかる。

あらん限りの人脈を使ってデザイナーさんを探したところ、やっとのことで0人見つかった。

しかたないので、自分でやることに。

どうも調べたところ、TwitterのBootStrapってのがいいらしい。

CSSを見てみるが、長い! 「Bootstrap 使い方」でググる

よくわからないながらも↓とか見ながら手探りでコードを書いていく。

Twitter Bootstrapの使い方

http://greenapple-room.com/conc/user/TwitterBootstrap/bootstrap.html

これでとりあえず基本的なことがひと通りわかり、ちょっとだけよくなった。

だいぶ前にやったCSSを思い出すのが大変だった。

でもタイトル周りとかが全然ダサイまま。普通に自分で見てて萎えるので、さらに調べる。

見つかったのが↓

Bootswatch

http://bootswatch.com/

あ、なんかこれいいなと思って「Slate」っていうテーマをいじくりいじくり、色々試しながらタイトル周りとかを整理。

デザインができあがるのに、1ヶ月くらいだったかな。

完成!(?)

まあこんな感じで大体できましたー!

全部で約8ヶ月…長かった…。憑かれたぜパトラッシュ

作ってみてわかったこと

ググる ググる ググる!とりあえずなんでもググってみることが一番大事だとわかった。

誰かが同じようなことをしてることも多々あるし、少なくともヒントくらいは見つけられる。

・助けてくれる人がいるとかなり楽

ググっても出てこない情報は厳然としてある。そういう時は、経験者にアドバイスをいただく。

Yahoo知恵袋でもいいし、知人でもなんでも。ネットの優しい人達感謝するようになった。

お店の掲示板では叩かれっぱなしだけどw

プログラマーすごい

今まで何気なく見てたホームページだけど、膨大な技術結晶なんだなと思った。

その端っこに触れただけの私のようなものでもそう感じるんだから、それはそれは深遠な世界なのでしょう。

これ仕事にしてる人とか尊敬します。

秘ブのブックマークボタンとかブックマークレットとか

せっかく作ったので、使ってやって下さい。

ブックマークボタン

ブックマークボタン大(126px × 20px)

http://hibu.jp/bookmarkbutton.php#bmbd

ブックマークボタン小(42px × 20px)

http://hibu.jp/bookmarkbutton.php#bmbs

ブックマークレット

http://hibu.jp/bookmarkbutton.php#bmlt

ブクマ数表示コード

http://hibu.jp/bookmarkbutton.php#bmn

詳しくは↓をご覧あれ。

http://hibu.jp/bookmarkbutton.php

登録時の注意!

このサービスは一応「秘密の」もんなので、普段使ってるSNSユーザー名とか使わないほうがいいんではないかと思います

ブラウザに直接入力でも簡単にいけるようにドメインはまんま「hibu.jp」にしておいたので、

ブラウザブクマするのもはばかられる方はダイレクトに飛んできて下さい。

今後の予定

スマホ版作りたいなぁ…

それから、ご要望があればチューニングしていきます

ちなみに、勉強したおかげか今現在はそこそこ本職のほうで稼げてはいます

もし万が一このサイト成功したりしたら風俗あがることも考えられるのかなぁ…

願わくば、皆さんのエロライフが充実することを。

でも吉原にも遊びに来てくれると嬉しいな。

怖いところじゃないから、気軽にね。

トラックバック - http://anond.hatelabo.jp/20130308124428

記事への反応(ブックマークコメント)

ログイン ユーザー登録
ようこそ ゲスト さん