2012-09-26

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

前編はこちら

http://anond.hatelabo.jp/20120926165407

ステップ6:MySQL(10時間)

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

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

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

基礎からのMySQ

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を使ってOKです。

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

ステップ7:休憩(10時間)

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

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

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

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

TwitterGoogleYahooAmazonなどのAPIを使ってサテライトサイトを作っても良いと思います

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

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

それから開発効率UPのため、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/

ステップ8:ドメインを取る(10時間)

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

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

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

さくらドメイン取得

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

ムームードメイン

http://muumuu-domain.com/

バリュードメイン

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

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

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

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

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

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

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

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

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

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

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

ステップ9:サイトの基礎部分の開発(100時間)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ステップ10:サイトデザイン(30時間)

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

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

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

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

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

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

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

今年からクラウド契約が始まり、今なら1ヶ月8000円、年間契約なら1ヶ月5000円で

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/

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

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

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

初めに作る際のお勧めPCサイトです。

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

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

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

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

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

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

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

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

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

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

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

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

http://www.lancers.jp/

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

後編はこちら

http://anond.hatelabo.jp/20120926165920

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

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