< 横だけど | http://anond.hatelabo.jp/20130... >

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結構マニアックだからね。

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

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

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

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

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

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

略して「秘ブ」（「秘部」とかけてあったり）

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

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

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

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

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

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

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

使用したサービスとか

・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/

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

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

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

簡単に書いとくと、HTML、CSS、PHP、MySql、javascriptくらい…なのかな？

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

作成のあらまし

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

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

HTMLとCSS

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

使ったのはこれ。

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

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


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

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

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

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

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

PHPとMySQL

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

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

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

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

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

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

ということで、PHPとMySqlを勉強することにした。

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

実践マスターPHP+MySQL―PHP4/PHP5対応

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



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

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

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

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

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

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

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に書いてあること以外にもカスタマイズしたいところがあった。

１．ブクマ数を記録したい

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

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

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

５．デザインがダサいので変えたい

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

２はPHPとDBをあれこれして、ド汚いコードながらも根性で実装。

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

javascript

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

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

JavaScript 第5版

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

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

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

マンガでわかるJavaScript

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

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

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

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

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

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

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

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

デザイン

最後の難所、デザイン。

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

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

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

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

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

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

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

Twitter Bootstrapの使い方

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

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

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

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

見つかったのが↓

Bootswatch

http://bootswatch.com/

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

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

完成！（？）

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

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

作ってみてわかったこと

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

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

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

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

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

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

・プログラマーすごい

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

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

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

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

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

ブックマークボタン

・ブックマークボタン大（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」にしておいたので、

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

今後の予定

スマホ版作りたいなぁ…

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

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

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

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

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

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

Permalink | 記事への反応(5) | 12:44

記事への反応 -

記事への反応（ブックマークコメント）

人気エントリ

注目エントリ

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