2012-09-26

【2012超まとめ】確実にWEBサービスを作りたい人へ【前編】

(記事が長すぎたので前編・中編・後編に分けました)

僕ももう、リストラされそうなとあるおっさんなんですが、先日Webサービス公開しました

きっかけになったのはこの記事です。

自分WEBサービスを作りたいと思っている人へ

http://anond.hatelabo.jp/20101203150748

こんな事できたら良いなぁと思っていると、他にもやっている方たちがいました。

たった2日で製作されたWebサービス「お部屋晒し」って?

http://matome.naver.jp/odai/2131952812556433001

WEBサイト発注してみた。

http://anond.hatelabo.jp/20120318122617

Rails3 と jQuery で、真面目にオシャレなエロサイトをつくってみました - h300

http://d.hatena.ne.jp/inouetakuya/20120331/1333192327

週6フリーターWEBサービス作ってみました。

http://anond.hatelabo.jp/20120914214121

その他、ロプロスさんがまとめてくれています

http://blog.ropross.net/archives/99

これらを読んで自分もやってみたくなり、

先日の家入さんの折れずに挑戦を続ける姿を見てモチベーションも高まり

7月21日~8月19日の30日でWebサービス作りました

最後の一週間はお盆休みでしたが、それ以外は平日は仕事をしながら土日をフルに使っています

試行錯誤込みで、だいたい300時間くらいだと思います

その方法をできるだけ詳しく、具体的に書きます

と言っても、いきなり高度な事をするのは大変なので、

本当に自分が作りたいサイトをやる前に、一度シンプルサイトを作ってみる、という所までです。

やってみて改めて分かったのは、「自分WEBサービスを作りたいと思っている人へ」の中の人はかなりがんばったんだなぁ、と。

かなりの熱意とモチベーションをもって、効率良くやらないと、一から勉強してあの短期間であのサイトは作れません。

プロ顔負けの技術とおもしろいアイデア情熱をもって短期間でそれをやってしまった中の人は凄いです。

からWebサービスに夢を見る人(僕)も、Web業界の人も、あとHな人もブクマするのでしょう。(賞賛

それでは、一般人が一般的ながんばりで確実にやれるだろう手堅いラインをお届けします。

偏差値40の僕が最低限ここまで出来たので、きっとあなたならもっと出来るはず。

ステップ7まではサクサク進めて、分からなくてもどんどん次に行きましょう。

今回ぼくが作ったサイトはこちら

気になるあの人に内緒告白!「好きでいて.net

http://sukideite.net/

ステップ0:準備

パソコンを用意

インターネット接続環境

ブラウザChrome,IE,Firefox,Safariあたりをインストールしておく。Chrome便利。

・作りたいサイトアイデアデザインイメージドメイン名(○○○.comとか)のイメージ

・作る理由とやる気

はてブ便利、Web業界の皆さんの空気感を知るため、なるべくPCスマホでチェック。

ステップ1:HTML・CSS(10時間

HTMLCSSについて調べる。

ブラウザ右クリックして「ソースを表示」すると出てくるアレです。

Yahoo!とかのソースを見るとかなり長いけど、全部書くわけじゃないか大丈夫

ネットで調べても良いけど、やっぱり基礎知識は本が良いと思います

これを半日くらい眺めます

よくわかるHTML5+CSS3教科書

http://www.amazon.co.jp/%E3%82%88%E3%81%8F%E3%82%8F%E3%81%8B%E3%82%8BHTML5-CSS3%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8-%E5%A4%A7%E8%97%A4-%E5%B9%B9/dp/4839943486/ref=sr_1_2?ie=UTF8&qid=1347970693&sr=8-2

メモ帳で書いてブラウザで表示して、メモ帳で直してブラウザF5で更新して確認、

って流れで挙動を把握していきます

何となく分かってきたら、より具体的に理解するためにこの本を読みます

概要が分かればあとは実践で伸びるのでだいたいでOK。

XHTML/HTML+CSSスーパーレシピブック

http://www.amazon.co.jp/XHTML-HTML-CSS%E3%82%B9%E3%83%BC%E3%83%91%E3%83%BC%E3%83%AC%E3%82%B7%E3%83%94%E3%83%96%E3%83%83%E3%82%AF-%E3%82%A8%E3%83%BB%E3%83%93%E3%82%B9%E3%82%B3%E3%83%A0%E3%83%BB%E3%83%86%E3%83%83%E3%82%AF%E3%83%BB%E3%83%A9%E3%83%9C/dp/483993276X/ref=sr_1_1?s=books&ie=UTF8&qid=1347974663&sr=1-1

ステップ2:PHP20時間

PHPについて調べる。

初めはこの本が勉強になりました。

よくわかるPHP教科書

http://www.amazon.co.jp/%E3%82%88%E3%81%8F%E3%82%8F%E3%81%8B%E3%82%8BPHP%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8-%E3%81%9F%E3%81%AB%E3%81%90%E3%81%A1-%E3%81%BE%E3%81%93%E3%81%A8/dp/4839933146

書いてある通りロカールサーバー(XAMPPMAMP)を入れて、自分マシンPHPが動くようにします。

データベースの使い方も一緒に書いてあるので入門に最適です。

次はこれを読みます

普通に読んでいくと中盤のフレームワークを作る所で挫折するはずなので、一旦そこまででOK。

パーフェクトPHP

http://www.amazon.co.jp/%E3%83%91%E3%83%BC%E3%83%95%E3%82%A7%E3%82%AF%E3%83%88PHP-PERFECT-SERIES-%E5%B0%8F%E5%B7%9D-%E9%9B%84%E5%A4%A7/dp/4774144371/ref=sr_1_1?s=books&ie=UTF8&qid=1347971428&sr=1-1

PHPの他の選択肢としてRubyPythonもあるみたいですが、学習コストがかかりそうなのと、そのままでは動かないサーバーがあったりで、

PHPと比べてまだまだエレガント感があります

最先端プログラマーになる必要はないので、レガシー&枯れたPHP一択です。

カッコつけずにモチベーションが持続するうちに勝負です。

ステップ3:サーバー10時間

サーバーを借ります

VPS(専用サーバーを仮想的に分割して安くしたサーバー)が流行ってますが、

学習コストがかかるのと勉強する事が増えるので割りきって始めは普通レンタルサーバーします。

VPSを借りるとLinuxの知識やWebサーバーメールサーバー、及びそれらの保守管理などの知識が必要になります

レンタルサーバーならある程度マネージドで、作ったプログラムが動かない時の原因の切り分けもしやすいです。

おすすめは「さくらレンタルサーバー」のスタンダードプランです。データベースの使えない「ライトプランは止めましょう。

http://www.sakura.ne.jp/

その他、ロリポップCORESERVERなどいろいろあるので最低限PHP,MySQLが使えるサーバーを選びます

サーバー契約したらアカウント情報を確認して、FTPログインしてみましょう。

FTPソフトフリー定番FFFTPを使います

http://sourceforge.jp/projects/ffftp/

ログインできたら、ステップ1で練習したファイルアップロードしてブラウザで表示してみたり、

ステップ2で作ったPHPファイルアップロードしてブラウザで実行してみたりします。

ローカルサーバーと同じように動けばOK。

慣れてきたらFileZilla FTP Clientが便利です。

http://filezilla-project.org/

ステップ4:ワードプレス(10時間)

Webサービスのしくみを理解するために、WordPressを借りたサーバーに入れてみます

WordPressPHPで出来たCMSコンテンツ管理システム)で、ステップ1~3がどう組み合わさって動くのか理解できます

ブログ会社案内サイト程度は作れてしまうので触れておいて損はないです。

テーマをいじったり、プラグインで遊んでみると理解が深まります

オススメはこの本。

WordPress レッスンブック 3.x対応

http://www.amazon.co.jp/WordPress-%E3%83%AC%E3%83%83%E3%82%B9%E3%83%B3%E3%83%96%E3%83%83%E3%82%AF-3-x%E5%AF%BE%E5%BF%9C-%E3%82%A8%E3%83%93%E3%82%B9%E3%82%B3%E3%83%A0/dp/4883377245/ref=sr_1_2?s=books&ie=UTF8&qid=1348060950&sr=1-2

プラグインのまとめはこの辺りが親切。

2011年版!絶対にインストールしたいWordPressプラグイン45個

http://vanilla-stone.com/blog/wordpress/2011-edition-45-wordpress-plugin-pieces-install-absolute/

TwitterInstagram連携するプラグイン入れたり、CRONで自動化したりすると楽しくなってきます

簡単なSNSくらいならここまでで出来てしまうかも。

ステップ5:CakePHP(20時間)

ここまでで何となくWebサイトのしくみが理解できると思いますが、

自分の作りたいサイトを一から書いていくと思うと心が折れると思います

そこで、CakePHP(ケーキピーエイチピー)というフレームワーク勉強します。

フレームワークというのはWebサイトの開発で必要になることが多い色んな機能をまとめてくれている枠組みソフトです。

PHPの文法で、フレームワークの書き方のルールに従うだけで、様々な便利機能を簡単に使用でき、

慣れると開発の効率も激しく上がります

フレームワークは他にRubyRuby on RailsPHPだとSymfonyYiiなどかなりの種類があります

CakePHPおすすめなのはこの二冊。

CakePHP 1.3によるWebアプリケーション開発―オープンソース徹底活用

http://www.amazon.co.jp/CakePHP-1-3%E3%81%AB%E3%82%88%E3%82%8BWeb%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E9%96%8B%E7%99%BA%E2%80%95%E3%82%AA%E3%83%BC%E3%83%97%E3%83%B3%E3%82%BD%E3%83%BC%E3%82%B9%E5%BE%B9%E5%BA%95%E6%B4%BB%E7%94%A8-%E6%8E%8C%E7%94%B0-%E6%B4%A5%E8%80%B6%E4%B9%83/dp/4798026646

プロになるための PHPプログラミング入門

http://www.amazon.co.jp/%E3%83%97%E3%83%AD%E3%81%AB%E3%81%AA%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE-PHP%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%85%A5%E9%96%80-%E6%98%9F%E9%87%8E-%E9%A6%99%E4%BF%9D%E5%AD%90/dp/4774149721/ref=sr_1_2?s=books&ie=UTF8&qid=1348062131&sr=1-2

あと、余裕があればこれも購入。

この本の情報Webで調べれば解決できるのでなくてもOK。

Pocket詳解 CakePHP辞典

http://www.amazon.co.jp/Pocket%E8%A9%B3%E8%A7%A3-CakePHP%E8%BE%9E%E5%85%B8-%E6%BB%9D%E4%B8%8B-%E7%9C%9F%E7%8E%84/dp/4798027456/ref=sr_1_1?s=books&ie=UTF8&qid=1348062432&sr=1-1

注意したいのは、現在CakePHPバージョンは1.3系と2.0系がありますが、1.3を使うという事です。

2.0系は新しい機能が付いたりパフォーマンスが良くなったりしていますが、2012年9月現在

バージョンアップが激しく、関連書籍は2~3冊程度、Web検索でもヒットするのは1.3の情報が圧倒的に多いです。

MVCというデータ処理・表示処理・それらのコントロール処理を分離して記述するルールや、

ステップ2では踏み込んでいなかったクラスが出てきますので、慣れるまではかなりの心折設計です。

難しすぎて僕は理解できなかったので、ここで一旦CodeIgniter浮気しました。

CodeIgniterCakePHPと同じPHPで書かれたフレームワークで、インド方面で良く使われてるらしい。日本だとまだマイナー、かな。

ライセンス問題で下火になっていますが習得の容易さとパフォーマンスが良いのでフレームワークという概念の把握にはオススメです。

本はこれ一冊しか出ていませんが分かりやすくてオススメです。

僕はこれを読んでCodeigniterだけじゃなくてCakePHPも理解できました。

CodeIgniter徹底入門

http://www.amazon.co.jp/CodeIgniter%E5%BE%B9%E5%BA%95%E5%85%A5%E9%96%80-%E6%B2%B3%E5%90%88-%E5%8B%9D%E5%BD%A6/dp/4798116769/ref=sr_1_1?s=books&ie=UTF8&qid=1348062829&sr=1-1

ただ、CodeIgniterは簡単・高速で習得しやすいけど、

その分シンプル機能が少ないので、ちゃんとしたサイトを作ろうと思うほど自分で書く部分が増えていきます

セキュリティユーザー認証なども素人が自前で一から作るのは危険なので、やっぱりCakePHPお勧めです。

開発する時はgitHubに上がっているデバッグキットを入れると便利です。

cakephp / debug_kit

https://github.com/cakephp/debug_kit/tree/1.3

それから、ここいらで開発環境を導入します。

PHPの開発環境おすすめは2種類。

Eclipse+PDT

http://codezine.jp/article/detail/5105

NetBeans IDE

http://ja.netbeans.org/

僕はNetBeansを使ってます

NetBeansを使う時のCakePHP用の追加モジュールはここ

https://github.com/evilbloodydemon/cakephp-netbeans/tree/autocomplete

中編はこちら

http://anond.hatelabo.jp/20120926165533

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

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