< 【2012超まとめ】確実... | http://anond.hatelabo.jp/20120... >

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

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

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

７月２１日～８月１９日の３０日でWebサービスを作りました。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

http://sukideite.net/

■ステップ０：準備

・パソコンを用意

・インターネット接続環境

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

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

・作る理由とやる気

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

■ステップ１：ＨＴＭＬ・ＣＳＳ（10時間）

HTMLとCSSについて調べる。

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

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

■ステップ２：ＰＨＰ（20時間）

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

書いてある通りロカールサーバー(XAMPPかMAMP)を入れて、自分のマシンで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の他の選択肢としてRubyやPythonもあるみたいですが、学習コストがかかりそうなのと、そのままでは動かないサーバーがあったりで、

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

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

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

■ステップ３：サーバー（10時間）

サーバーを借ります。

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

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

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

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

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

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

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

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

FTPソフトはフリーで定番のFFFTPを使います。

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

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

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

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

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

http://filezilla-project.org/

■ステップ４：ワードプレス(10時間)

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

WordPressはPHPで出来たCMS（コンテンツ管理システム）で、ステップ１～３がどう組み合わさって動くのか理解できます。

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

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

オススメはこの本。

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/

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

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

■ステップ５：CakePHP(20時間)

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

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

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

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

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

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

フレームワークは他にRubyのRuby on Rails、PHPだとSymfonyやYiiなどかなりの種類があります。

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月現在、

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

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

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

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

CodeIgniterはCakePHPと同じ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の開発環境でおすすめは２種類。

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

Permalink | トラックバック(2) | 16:54

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