2014-09-09

クラブ好きな新米エンジニアが1週間でWebサービス作ってみた

こんにちは

文系出身だけど前々からWebサービスつくってみたくて勉強がてら一人でWebサービス作ってみました。

作りたいって思うなら実際に作ってみるのが一番いいってじっちゃんがいってた。

やってみて感じたこととか先輩エンジニアの人たちに教えて欲しいこととかを書いていきたいと思います

じっちゃん、僕にもできたよ!

作ったWebサービス

EDM JACK

http://edmjack.com/

簡単に説明するとクラブミュージック淡々と紹介していくサイト

作ってみた人のあれこれ

・26歳

フリーター(ほぼニート)→知人の会社で営業職→今年の4月Web業界転職

クラブミュージックが大好き。だけど人混みは嫌い。

・営業職だったころにあい時間ドットインストールとかでHTML/CSS勉強をしてた。

大学中退してからフリーターになって、その頃から自分Webサービスとかつくって運営してる人ってかっこいいな〜とか思ってた。

Facebook映画とか見たときは完全に感化されっぱなしだった。

でもいつか作れたらいいな〜って思ってただけでなにもしてなかった。

最近いろいろ環境が変わって少し休みをもらえたので奮起して勉強がてら作ってみることにしたのです。

なにを作るか

漠然と「Webサービス作りたい」って思ってたからまずどんなWebサービスを作るか考えました。

やっぱり好きなことじゃないと続かないと思ったので

自分が好きなクラブミュージックをまとめるサイトを作ることにしました。

ジャンルDJ KAO●Iとかミーハーな感じの曲じゃなくてEDMってやつ。

EDMといえば今月日本でもUltra Music Festivalが開催されるね!やったね!Hardwellに会えるね!

どうやって作るか

まずはプログラミングとやらを勉強することにしました。ドットインストールは偉大です。お世話になりました。

ドットインストール

http://dotinstall.com/

ここでHTML/CSSPHP勉強しました。でもPHPゼロからコードを書いて作ろうとすると重大な問題があることに気が付きました。

時間がかかりすぎる。

今回はとりあえず自分でなにかWebサービスを作ってみるということを経験たかったのでWordPressを使うことにしました。

サーバー環境の構築を勉強した

でもさすがにレンタルサーバーを借りてWordPress入れましたっていうんじゃ先輩エンジニアの人たちに怒られちゃうと思ったので、

WordPressを入れるサーバー環境構築は自分で頑張ってやってみることにしました。

なのでWeb業界ではアイドル存在AWSっていうやつで頑張ることにしました。

ここでもドットインストールにお世話になりました。ほんとなんでもチュートリアルがあってすごい。

最初WebサーバーApacheを入れていたんですが、なんか重たい感じがしていろいろ調べているとNginxナウい感じだったので

Nginxインスタンスを立て直すことしました。環境的にはこんな感じ。

AWS EC2 (t2.micro)

Nginx 1.4.7

php-fpm 5.3.28

MySQL 5.6.13

ドットインストールUnixコマンドとかを勉強したとはいってもNginxの設定周りをいじるのは結構大変でした。

でもNginx使うからにはチューニングしてから使わないとApache先生に怒られちゃうので、

この記事を見ながら頑張ってチューニングしました。

さくらVPS512で、Yahoo!砲食らっても WordPress平常運転させるための設定

http://dogmap.jp/2013/04/16/sakura-vps-performance-tuning/

チューニングテストをしたらTransfer Rate17[Kbytes/sec] くらいから15000 [Kbytes/sec]くらいになった。

Nginxやばい。はやすぎ。なにこのスピード

WordPressを入れていろいろ設定をしてみる

無事にサーバーが立てられたのでWordPressを突っ込んでテーマかいろいろいじりました。

使用したテーマPRONTO

http://www.wpexplorer.com/pronto-wordpress-theme/

基本的にはテーマをそのまま使ってるだけです。

シェアボタンをつけたりFacebookのLikeBoxを入れたりでちょっとテーマいじった程度。

あ、カテゴリタグにpickupってつけたら自動投稿が目立つようにした。これは自分テーマファイルいじって書いた。

入れたプラグインはこんな感じ。Jetpackモバイルテーマのみを有効化してる。

アイキャッチ画像が多いからPhotonも有効化してもいいかなって悩んでる。

Akismet

All In One SEO Pack

Batch Category Import

Favicon Rotator

Font Awesome Icons

Google Analytics

Jetpack by WordPress.com

Mobile Theme Featured images for Jetpack

Newpost Catch

NextScripts: Social Networks Auto-Poster

Nginx Cache Controller

Remote Images Grabber

Video Thumbnails

Wordpress Popular Posts

WordPress Related Posts

WP Multibyte Patch

サイト運用を開始

WordPressなのであとはたらたらと僕がオススメする曲を更新していくだけ。

EC2t2.microだけど、Nginxのおかげなのか特に問題はなし。

今はYoutubeSoundcloudURLをそのまま投稿に入れて、アーティスト名とかDJ名でカテゴリ分けしてる。

せっかくだからドメイン代とかAWS代だけでも回収できればいいなってことでAdSenseも入れてみたw

やってみて思ったこと。

実際に作り始めてから1週間程度でここまでつくることが出来ました。

AWSNginx環境構築→4日

WordPress環境構築→3日

ドットインストールがなかったらここまで速くつくれなかった。ありがとうございます田口さん。

元々非エンジニアでもやる気になればそれっぽいのが作れて感動しました。

でもなんかOGPの設定がうまくできず、Facebookとかでシェアしようとするとたまに全然関係ない画像が表示されてしまう。

テーマファイルに直接書いてもプラグインOGP設定してもよくわからなかった。

Facebookデバッガーつかってキャッシュクリアしてもできたりできなかったり。

これはNginxキャッシュが影響してるんかな。

今後やりたいこと。

将来的にはSoundcloudとMixcloudを足して2で割ったサイトになればいいな。

キュレーター制度とかも入れてみて、僕だけじゃなくていろんなEDM好きやDJおすすめの曲を投稿できるようにしていきたい。

WordPressで構築しちゃったけどできるだけプラグインに頼らずに自分PHP書いて実装できるように頑張らなきゃ。

本とかは一冊も読まずにここまで作れたけどPHPエンジニアならこれは読んどけよ若造ってのがあったら教えてください。

EDMは素晴らしいよ!クラブ好きな人もそうでない人もきっと好きになる曲が沢山あるから聞いてみてね!

EDM JACK

http://edmjack.com

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

    EDMがミーハーじゃないって マジで? 日本のクラブ好きってそういう感覚なの?

  • http://anond.hatelabo.jp/20140909061010

    SK氏また新しいの作ったのね 最近こういう創作多いなぁ

    • http://anond.hatelabo.jp/20140909073343

      SK氏って人を良く知らないんだけど、 http://www.whoismind.com/email/nakayu.0824@icloud.com.html whoisに登録されてた「Registrant Email」で検索したら、suguyomerunews.comというサイトが出てきて、同じ人が作...

  • http://anond.hatelabo.jp/20140909061010

    DJケオリもEDMもミーハー度合いは変わんない! あとWEBサービスって言葉がなんなのかわかんなくなるような内容のサイトですね!

    • http://anond.hatelabo.jp/20140909220527

      つーか日本で単語としてより早く知名度が上がったのってDJケオリの方じゃないかな…… 単語直訳的な意味でのEDMならミーハーじゃないかも知れないけどハウスとかテクノとかは普通EDM...

注目エントリ

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