やっと、ベータ版として人にギリギリ人に見せられるところまできました。
と、作ってる事自体は公言してたんですが、内容については言及してなかった。なぜなら、扱っている内容が結構際どかったので・・・。
形になりつつあるで、ここで技術的な話と作成時のあれやこれを合わせて紹介してみようかと思います。まずは技術的な話から。
作ったもの
こちらになります。
作成の経緯
異性含めた友達達と下ネタで盛り上がってる時に、いわゆる猥談ではなく、どちらかというと悩み的な話になっていって。男性も女性も色々と悩んでるんだなぁと実感して。そして、そういう情報って酔った勢いじゃないと話せなかったりするよねっていうのも考えたりして。
インターネットが発達している世の中で、もし、料理が上手にできないっていうなら、クックパッド見れば良い。ただ、こういった悩みに対して答えがネット上にあるかっていうと、怪しい薬かグッズ、もしくは情報商材のページばかり。
じゃぁ、性のクックパッド作ればいいんじゃない？という考えに至りまして、作成に着手した次第です。
技術的な話 - 開発着手前の僕のスキル-
仕事で業務システムのWebアプリは作ってるけど、最近のモダンなものは全く疎い状況。そんな状況がよくわかるのが、前に書いたこの記事。
レイアウトといえばテーブルレイアウト一択。CSSなんて知りません。
デザイン以外の技術的な事でいえば、Javaなら人並みに分かるけど、今回選んだのはDjangoというPythonのフレームワーク。あまり役には立ちません。
これから1ヶ月。しかもブラック企業勤務の為、使える時間は通勤時間に本を使っての勉強、コーディングは夜1時間くらいをやりくりして作っていきました。
技術的な話 -デザイン編-
まず第一に、ケータイに対応させたかった。このブログも半分以上の読者はケータイからのアクセスだったりするので、コンテンツを扱うのであれば必須だと思った。
そこで、レスポンシブデザインをキーワードに、色々検索したり、本を買ったり。そもそもHTMLやCSS、JavaScriptにも疎いので、そこから勉強しはじめました。
買った本の一部達。
で、知識は前と比べて比べて格段に上がりました。が、悲しいかな、センスというものはそんなに急に上がらない。
ここで、初期の版を見てみましょう。
はい、すごくダサいです。レスポンシブ(画面サイズに応じた動的コンテンツ変更)もできてるんですが、いかんせん物凄くダサい。
これは本当頭抱えて悩みました。どう頑張ってもダサくなる。
そこで、一つの救世主と出会います。Bootstrapです。
Twitter社が出しているCSS、JavaScriptのセットで、これでもかというくらい豊富な部品が揃ってます。
http://getbootstrap.com/components/
こいつを使う事によって、このダサいものがそれなりに見えるように変化しました。
画像はどうしたの？
使っている画像ですが、トップページで使っている写真は、お金出して買いました。国内の画像販売サイトだと、１枚数万円が多いんですが、海外で探すと数千円で買えたりします。国内のサイトを探して「高すぎる！」と思う方は、海外のサイトで探してみてもいいかもしれません。
ロゴや暗号化の絵については、自分で書きました（部品はSVG画像を拾ってきてたりもします）。
iDrawというMacのソフトを利用しました。ペジェ曲線が簡単に扱えるのでおすすめです。
技術的な話 -インフラ編-
こちらは、相変わらずherokuを使っています。
前回の記事でノウハウは溜まっていたので、割とすんなり構築する事ができました。
技術的な話 -プログラム編-
こちらは、言語としてはPython、フレームワークとしてはDjangoを使っています。
Pythonのバージョンは3、Djangoは1.7を使ったんですが、日本語のドキュメントがなくて大変でした・・・。もしDjangoで何かを作ろうとするなら、Python2.xとDjango1.3あたりを使うといいのかなと思っています。
Djangoを使うにあたり、一番衝撃的だったのが、SQLを一つも書くことなくものが作れてしまったこと。例えば、
Tag.objects.annotate(article_count=Count('article')).filter(tagname=tag).order_by('-article_count')
なんていうコードが
SELECT TAG_NAME, COUNT(ARTICLE.ARTICLE) AS ARTICLE_COUNT FROM TAG LEFT OUTER JOIN ARTICLE ON (TAG.TAG_NAME = ARTICLE.TAG_NAME) GROUP BY TAG_NAME ORDER BY ARTICLE_COUNT
といったSQLになって実行される。最近の仕組みってすごいなぁと感心しました。
なお、Pythonはある程度分かるけど、Djangoはほとんど分からない状態から、1ヶ月で公式の説明( Django documentation | Django documentation | Django )でなんとかなったので、これから何かWebサービスを作ってみようという人には割とオススメです。何か分からないことあれば、質問くれれば僕の分かる範囲で答えます。Twitterで@nakazyeまで連絡ください。
技術的な話 -Google AdWords-
画像にお金をかけたし、ドメインにもお金をかけた。ここまで来たら広告にもお金かけていいんじゃないかと思い、Google広告を出してみました。
広告を貼り付けた事がある人は多いかもしれませんが、広告を出稿する側になったことがある人は少ないんじゃないでしょうか。こんな感じの画面になっています。
ちなみにこの広告の見出しや文、物凄く文字数制限がきつい。何も書けない。かなり悩みました。
先ほどこのリリース記事に先立ち設定したんですが、いきなりアクセスがポツポツとあってびっくりです。
ただ、お値段はかなり高めです・・・。１クリックで100円以上持っていかれます。
技術的な話 -残TODO-
いろいろ残っておりますが・・・この辺りが実装できれば、正式版としようかなぁと思ってます。
- 本文の編集機能
- お気に入りにソート、削除
- そう思う/違うと思うボタン設置
- タグ/本文の検索機能
- デザインもうちょっとがんばる
そんな訳で、まずは技術編でした。後編として、周りに見せた時の反応や、これをどうしていこうと思ってるか。この取り組みで自分はどんなノウハウを得たいと思っているかなどを記事にしようかなと思ってます。
というわけで、新しく始めたサービス、できれば見てみてくれると嬉しいです。
また、立ち上げたばかりなので、もし面白そうだなと思いましたらしたのハテブボタンでブックマークに追加していただけると幸いです。こういうのって、最初に知ってもらえるか/使ってもらえるかというのが勝負だと思うので・・・