今日学んだこと

読書感想文とか、勉強した内容とか

趣味で性の悩みを話せるWebサービスをつくってみました

やっと、ベータ版として人にギリギリ人に見せられるところまできました。

と、作ってる事自体は公言してたんですが、内容については言及してなかった。なぜなら、扱っている内容が結構際どかったので・・・。

形になりつつあるで、ここで技術的な話と作成時のあれやこれを合わせて紹介してみようかと思います。まずは技術的な話から。

作ったもの

こちらになります。

*Google先生に不健全と怒られたので「lovepoints」で検索してね!*

作成の経緯

 異性含めた友達達と飲み会盛り上がってる時に、性の悩み的な話になっていって。酔った勢いじゃないと話せなかったりする悩みっていうのも多いよねと。

インターネットが発達している世の中で、もし、料理が上手にできないっていうなら、クックパッド見れば良い。ただ、こういった悩みに対して答えがネット上にあるかっていうと、怪しい薬かグッズ、もしくは情報商材のページばかり。

じゃぁ、性のクックパッド作ればいいんじゃない?という考えに至りまして、作成に着手した次第です。

技術的な話 - 開発着手前の僕のスキル-

仕事で業務システムのWebアプリは作ってるけど、最近のモダンなものは全く疎い状況。そんな状況がよくわかるのが、前に書いたこの記事。

レイアウトといえばテーブルレイアウト一択。CSSなんて知りません。

デザイン以外の技術的な事でいえば、Javaなら人並みに分かるけど、今回選んだのはDjangoというPythonフレームワーク。あまり役には立ちません。

これから1ヶ月。しかもブラック企業勤務の為、使える時間は通勤時間に本を使っての勉強、コーディングは夜1時間くらいをやりくりして作っていきました。

技術的な話 -デザイン編-

まず第一に、ケータイに対応させたかった。このブログも半分以上の読者はケータイからのアクセスだったりするので、コンテンツを扱うのであれば必須だと思った。

そこで、レスポンシブデザインをキーワードに、色々検索したり、本を買ったり。そもそもHTMLやCSSJavaScriptにも疎いので、そこから勉強しはじめました。

f:id:nakazye:20141102235743j:plain

買った本の一部達。

で、知識は前と比べて比べて格段に上がりました。が、悲しいかな、センスというものはそんなに急に上がらない。

ここで、初期の版を見てみましょう。f:id:nakazye:20141103000133p:plain

f:id:nakazye:20141103000158p:plain

はい、すごくダサいです。レスポンシブ(画面サイズに応じた動的コンテンツ変更)もできてるんですが、いかんせん物凄くダサい。

これは本当頭抱えて悩みました。どう頑張ってもダサくなる。

そこで、一つの救世主と出会います。Bootstrapです。

Twitter社が出しているCSSJavaScriptのセットで、これでもかというくらい豊富な部品が揃ってます。

http://getbootstrap.com/components/

こいつを使う事によって、このダサいものがそれなりに見えるように変化しました。

画像はどうしたの?

使っている画像ですが、トップページで使っている写真は、お金出して買いました。国内の画像販売サイトだと、1枚数万円が多いんですが、海外で探すと数千円で買えたりします。国内のサイトを探して「高すぎる!」と思う方は、海外のサイトで探してみてもいいかもしれません。

ロゴや暗号化の絵については、自分で書きました(部品はSVG画像を拾ってきてたりもします)。

f:id:nakazye:20141103001130p:plain

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広告を出してみました。

f:id:nakazye:20141103003525p:plain

広告を貼り付けた事がある人は多いかもしれませんが、広告を出稿する側になったことがある人は少ないんじゃないでしょうか。こんな感じの画面になっています。

ちなみにこの広告の見出しや文、物凄く文字数制限がきつい。何も書けない。かなり悩みました。

先ほどこのリリース記事に先立ち設定したんですが、いきなりアクセスがポツポツとあってびっくりです。

ただ、お値段はかなり高めです・・・。1クリックで100円以上持っていかれます。

 技術的な話 -残TODO-

いろいろ残っておりますが・・・この辺りが実装できれば、正式版としようかなぁと思ってます。

  • 本文の編集機能
  • お気に入りにソート、削除
  • そう思う/違うと思うボタン設置
  • タグ/本文の検索機能
  • デザインもうちょっとがんばる

 

そんな訳で、まずは技術編でした。後編として、周りに見せた時の反応や、これをどうしていこうと思ってるか。この取り組みで自分はどんなノウハウを得たいと思っているかなどを記事にしようかなと思ってます。

 

 また、立ち上げたばかりなので、もし面白そうだなと思いましたらしたのハテブボタンでブックマークに追加していただけると幸いです。こういうのって、最初に知ってもらえるか/使ってもらえるかというのが勝負だと思うので・・・

<<追記>>

後編を書いてみました!