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

前編はこちら

http://anond.hatelabo.jp/20120926165407

■ステップ６：ＭｙＳＱＬ(10時間)

会員情報や文章などのコンテンツを保存しておくデータべース、ＭｙＳＱＬを調べます。

データベースは他にもPostgreSQLやSQLiteなどが有名ですが、やはり王道を勉強します。

MySQLはCakePHPや、ステップ４のWordPress他、よく使いますので把握しておきましょう。

基礎からのＭｙＳＱＬ

http://www.amazon.co.jp/%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E3%81%AEMySQL-%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E3%81%AE%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E%E3%81%AE%E7%A8%AE%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E8%A5%BF%E6%B2%A2-%E5%A4%A2%E8%B7%AF/dp/4797344385/ref=sr_1_1?s=books&ie=UTF8&qid=1348063628&sr=1-1

今はまだ関係ありませんが、余裕があればこれも読むといいです。

MySQLによるタフなサイトの作り方

http://www.amazon.co.jp/MySQL%E3%81%AB%E3%82%88%E3%82%8B%E3%82%BF%E3%83%95%E3%81%AA%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9-%E4%BD%90%E8%97%A4-%E7%9C%9F%E4%BA%BA/dp/4797353937/ref=sr_1_1?s=books&ie=UTF8&qid=1348063787&sr=1-1

操作はコマンドラインを覚えていく方向で、始めはブラウザで操作できるphpMyAdminを使ってＯＫです。

ストレージエンジンはとりあえずInnoDBで。

■ステップ７：休憩(10時間)

技術調査はこの位にして、これからは実際にWebサイトを作っていきます。

ここまで来ると何となく、Webサイトがどんな仕組みで動いてるかが分かってくるので、

ステップ０でイメージした作りたいサイトがどんな技術で実現出来るか調べます。

冒頭の「完全に一致」の中の人のようにスクレイピングしたり、

TwitterやGoogle、Yahoo、AmazonなどのAPIを使ってサテライトサイトを作っても良いと思います。

が、高度な事をするとはまりやすいので、ある程度やって無理だったらあきらめて次回にまわしましょう。

まずは何か一つ完成させる事のほうが大切です。

それから開発効率ＵＰのため、Chromeにプラグインを入れましょう。

説明はそれぞれのリンク先を見て下さい。

CSSViewer

https://chrome.google.com/webstore/detail/ggfgijbpiheegefliciemofobhmofgce

Firebug Lite for Google Chrome

https://chrome.google.com/webstore/detail/bmagokdooijbeehmkpknfglimnifench

View Selection Source

https://chrome.google.com/webstore/detail/fbhgckgfljgjkkfngcoeajbgndkeoaaj

Pendule

https://chrome.google.com/webstore/detail/gbkffbkamcejhkcaocmkdeiiccpmjfdi

BuiltWith Technology Profiler

https://chrome.google.com/webstore/detail/dapjbgnjinbpoindlpdmhochffioedbn

iPSim

https://chrome.google.com/webstore/detail/gcligifbhamdimemnemmlkffkpmflehh

Color Picker

https://chrome.google.com/webstore/detail/ohcpnigalekghcmgcdcenkpelffpdolg

CSS Tester

https://chrome.google.com/webstore/detail/pjncppaiejjkcjlcgegcbmhgkflhenfp

MeasureIt

https://chrome.google.com/webstore/detail/pokhcahijjfkdccinalifdifljglhclm

あとはFireFoxにはFireBug。デバッグの定番らしいです。

https://addons.mozilla.org/ja/firefox/addon/firebug/

それから、空いた時間に無料のプログラミング動画サイト「ドットインストール」を見ておくと

ここまでの知識が定着すると思います。

ドットインストール

http://dotinstall.com/

■ステップ８：ドメインを取る(10時間)

ステップ７で作りたいサイトがイメージ出来てきたら、ドメインを取りましょう。

サーバーがさくらの場合はドメインもさくらで取得すると楽ですが、もっと安いところもあります。

希望するドメインが空いているか調べて取得、空いていなければ他のドメインを考えます。

さくらのドメイン取得

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

ムームードメイン

http://muumuu-domain.com/

バリュードメイン

http://www.value-domain.com/

定番の.com、.net、.orgは誰が見ても親しみがあるし安いので、できればこの３種類のどれかにしたい所ですが、

一般的な言葉はほぼ埋まっているので、その場合は.jp等にしても良いでしょう。

日本語ドメイン(www.日本語.netみたいな)は流行っていないですが、

自分のサイト名が「○○○.com」のような名前の場合は一緒に取得して、アルファベットのドメインにリダイレクトしましょう。

（ChromeユーザーがURL欄で検索する時、「○○○.com」のように後ろに.xxxが付いているとそのURLに直接アクセスしてしまい、

　検索にならないので、アクセスの機会損失を防ぐため。）

僕はバリュードメインで取得して、サーバーはさくらのレンタルサーバーにしました。

その際の親切な設定方法の解説はこちら。

VALUE DOMAIN で取得したドメインをさくらのレンタルサーバで使う

http://nekohacks.com/wordpress/domain/value-domain/

■ステップ９：サイトの基礎部分の開発(100時間)

実際にサイトを開発していきます。

どんなサイトで、どんな機能があって、どんなページがあるかノートに書き出して行きます。

初めにデータベースのテーブルやレコードの構造を考えて、

次にメインとなる機能をプログラムして行きます。

サイトの基本的なレイアウトをCSSで組みながら、デザインのイメージもしておきましょう。

ここではデザインはまだやりません。

先にデザインを作っても、プログラムを進めていく過程で変更がでたりする為です。

（でもあんまり後回しにしても、見た目がチープなせいでモチベーションが下がったりするので、次のステップでやります）

あと、ここで気をつけたいのは、あくまでメインとなる機能の開発を優先することです。

「あったほうが良いな」程度の機能は後回しにします。

外堀から埋めていくとそこでモチベーションが尽きてしまったり、

メインの機能を実装してみたら外堀の修正が発生してしまったりするためです。

始めると分からない事がどんどん出てくると思うので、本を読み返したりGoogle先生で検索しながら進めて行きます。

なかなか進まなくて検索８割、コーディング２割くらいの進め方になると思いますが、それでＯＫです。

長い暗闇を抜けると、少しづつ視界が開けてきます。

メインの機能がなんとなく出来たら次に進みます。

■ステップ１０：サイトのデザイン(30時間)

メインの機能が何となくできたら、デザインをやります。

鉛筆殴り書きで良いので紙に描いてみます。

いきなり慣れないＣＧソフト上でデザインすると、

いじっているだけでモチベーションを使い切ってしまったりするので危険です。

ＣＧソフトは色々ありますが、おすすめはフォトショ(Photoshop)です。

WebサイトのデザインはFireworksなども有名ですが、学習コストがかかるので、

Webサイトにもそれ以外にも使えて一番つぶしが効くフォトショップでOKです。

今年からクラウド契約が始まり、今なら１ヶ月８０００円、年間契約なら１ヶ月５０００円で

Adobeのソフトが全部使い放題です。

Adobe Creative Cloud

http://www.adobe.com/jp/products/creativecloud.html

お勧めの本はこれ

10日でおぼえるPhotoshop入門教室

http://www.amazon.co.jp/10%E6%97%A5%E3%81%A7%E3%81%8A%E3%81%BC%E3%81%88%E3%82%8BPhotoshop%E5%85%A5%E9%96%80%E6%95%99%E5%AE%A4-CS2-CS%E5%AF%BE%E5%BF%9C-%E4%BA%95%E4%B8%8A-%E3%81%AE%E3%81%8D%E3%81%82/dp/4798111953/ref=sr_1_1?s=books&ie=UTF8&qid=1348498454&sr=1-1

基本操作を覚えたらWebで情報を収集します。

PHOTOSHOP VIPさんが親切です

http://photoshopvip.net/

一から全部自分で作らなくても、素材サイトからダウンロードして加工するなどして手間を省きます。

ＰＣ・スマホ・携帯(ガラケー)全部に対応するのは大変なので、

初めはそのサービスを最も使うだろうと思われるどれか１つに絞ります。

初めに作る際のお勧めはＰＣ用サイトです。

ＰＣ用サイトならスマホでも最低限アクセスはできるし、携帯は縮小傾向なので優先度低、

スマホは画面サイズがまちまちでタブレット端末が目下発展中、AndroidはブラウザがたくさんあるがChromeに統一されていくかも、

な混沌とした状況なのでお勧めしません。

複数デバイスへの対応はリリース後でも遅くありませんが、

対応する際はＣＳＳを切り替えてレスポンシブレイアウトにするのがお勧めです。

その他、困ったらTwitter社が公開しているブートストラップを使うのもお勧めです。

ブートストラップはcssのフレームワークで、簡単にシャレ乙なデザインに仕上がります。

超便利！Twitter BootstrapでさくさくWeb開発

http://blog.asial.co.jp/887

どうしても自分でイケてるデザインが出来ないと思ったら、友だちに頼んだり、ＳＮＳのコミュで募集したり、

デザイン系の大学や専門学校の掲示板にビラを貼らせてもらったりしましょう。制作費が出せればランサーズで募ってもいいかも。

Lancers - 仕事をフリーランスに発注できるクラウドソーシングサービス

http://www.lancers.jp/

僕はたまたまフォトショップの使用経験があったので、ここにかけた時間は30時間ではなく5時間程です(トータル275時間で開発)。

後編はこちら

http://anond.hatelabo.jp/20120926165920

Permalink | 記事への反応(3) | 16:55

ツイートシェア