■クラブ好きな新米エンジニアが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/CSSとPHPを勉強しました。でも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 Rateが17[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なのであとはたらたらと僕がオススメする曲を更新していくだけ。

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

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

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

やってみて思ったこと。

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

AWSでNginxの環境構築→4日

WordPress環境構築→3日

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

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

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

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

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

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

今後やりたいこと。

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

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

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

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

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

EDM JACK

http://edmjack.com

Permalink | 記事への反応(3) | 06:10

ツイートシェア