2013-05-13
■素人がそこそこのWebサービスをつくる方法
先日「飲み会版ソーシャルランチをつくってみた」を書いた者です。
上の記事では、僕がつくった「飲活」というサービスの説明が大半で、どうやってつくったのかとか説明が少なかったので、今回はそれについて書いてみようかと思います。
まずは僕についてさらっと。
- web、スマホアプリ開発の会社に入社。それまで他会社でwebサービス、iPhoneアプリの開発。
- ガチ文系
- php、objective-cを基本的な動作を実現させられる程度 （高度なことやるときはコピペだもん！）
- webサービスのプログラムを書いたり、iPhoneアプリをつくったりしてます
- 好きな女性芸能人はミムラと橋本愛ちゃん。愛ちゃんなんで夜更かししちゃったの！
失敗
僕は「「飲活」」を作るまでも、iPhoneアプリを開発したり、webサービスのメンテナンスをしたりとプログラミングをしておりました。
しかし僕も何度かwebサービスの立ち上げを挫折しております。4回くらいかな。
最初はxoopsを使って、ツイッターで登録企業の広告をつぶやいたらポイントをもらえるサービスでした。
なんとxamppで門前払いされました。ローカル環境すらつくれませんでした。「くそ初心者は時間を無駄にするだけだから辞めろ」と言われた気分でした。
xamppだけに2日くらい朝まで格闘してしまい本当に時間を無駄にしました。当時はapacheの設定とかなんぞや状態ですからね。
次にやろうとしたのが、大学受験生向けのサイトで、受験生に教科ごとの講義をするのではなく、勉強のやり方を教えるよ！ってサイトです。
ほとんどｈｔｍｌでできそうなのですが、phpでメールを送ることができず挫折しました。
レンタルサーバーを借りたのですが、レンタルサーバーのphpの設定をしないといけないのを知らなかったり、やっと解決しても日本語化けに悩まされて止めた覚えがあります。これほど母国語が英語だったらどんなに楽かと思った時はありませんよ。プログラミングしてると今でもたまに思います。
次が、キックスターターのようでそうでないクラウドファンディングサービスをつくろうとしました。
ここでjavascriptと出会いました。いや、ちゃんと交際を始めたと言うべきか・・・。それまでjavascriptとすれ違っても虫を決め込んでいたのですが、いざ必要になって呼び止めてみると意外と良い奴でした。
しかし、ajaxにつまづいたり、サイト構成やディレクトリ構成、データベース構成や、デザインの調整などで複雑で面倒になり挫折してしまいました。
こうして書くと、僕がすごい諦めの早いやつで勉強もまともにしないやつみたいに思えますが、半分正解。諦めは悪いけど「ググればいける」という考えで勉強を怠っておりました。
つくりかた
だいたいプログラミング言語はどれも根本は似ているので、先述の３つ以外のプログラミング言語をやりたいと思ってる人でも参考になると思います。
また、以下の内容は、わけわからんけどwebサービスをつくりはじめる方を前提にしています。
まずはじめに：開発環境を整える
まずは開発環境を整えましょう。
開発環境とは、自分の書いたプログラムをローカル（自分のパソコン）でのみ動作させる環境です。
つまり、自分がつくっているものを外部に見られることはありません。
です。
まずはこれらをインストールしてください。設定などの説明は割愛します。
ステップ１：プログラミングでいったいどんなことができるのかを知る
僕はphpを使いました。
僕もそうでしたが、素人は当然プログラミングの全体像を想像できません。やりたいことを思いついても、どういうコードを書いたらいいかなんてすぐに想像できませんよね。
これも当然ですがその原因は、そもそもプログラムでなにができるか知らないからです。
なので、POSTやSESSION、配列などの基本的なものの存在を知りましょう。そしたら、「このページにはこの機能が必要だろう」というのが、"なんとなく"わかります。書き方はこの時点で別に覚えなくて大丈夫です。
例えば、オブジェクトを格納することが出来る「配列」という存在を覚えます。
この時点では、配列の作り方のコードとかは覚えなくていいですよ。「配列という存在を知る」ことが重要です。
基本的なことを学ぶときはネットではなく本を使う事を薦めます。
本は情報が体系的にまとめられていまうので、ネットよりも学びやすいです。
プログラミングは10年以上基本部分は変わっていませんので、「古いものを覚えちゃわない？」という無駄な心配はなくて大丈夫。
一方、発展的なことではネットで学びましょう、というかわからないことがあればネットで探しましょう。
ステップ２：つくりたいwebサービスに必要な機能を決める
どんなことを実現したいのかというゴールがないと必ず途方にくれます。
なので、まずはゴールを設定します。
例えば「「飲活」」なら、
などなど...。
その後に、各ページ毎に必要な機能と大まかなそのページのやることを決めます。
ログインページには、ユーザーが入力するフォームと送信ボタンがあって、なにも入力されずに送信ボタンが押されたらエラーメッセージを出そう。エラーがなくログインに成功したら、会員専用のエロビデオを見せよう。
とか。
例えば、しっかり考えず適当に、登録ユーザーのプロフィール画面を開発していて、ユーザー名、生年月日、出身大学を表示させるプログラムをつくったとします。
しかし、プロフィール画面が完成した後にメールアドレスも表示させないといけないことに気がついた場合、少しプログラムの変更が必要になります。
最初から、どのデータが必要なのかを決めていれば、こうした効率の悪さは回避できます。
実際は奇麗に開発できることは少ないですが、何も考えずに開発するよりは効率的です。
大まかな機能（ログイン）→具体的な機能（ログインページの機能）→具体的にログインページがやること→必要とするデータ
という流れでサイトの機能を決めることで、自分のやることが明確になりますし、勉強すべき内容も最小限に抑えられます。
ここで、どういうデザインにするのかを決めればもっと後で楽になります。
ステップ3： データベースを用意
webサービスには必ず必須となるデータベースについて知る必要があります。
僕は、mysqlを使いました。
サーバーはさくらインターネットのレンタルサーバーを使ったので、さくらインターネットのデータベースを利用しました。
ステップ４：必要な機能を実現するための方法を見つける
各ページで必要な機能とやることを決めたら、それを実現してくれる方法を本やネットで探します。
先述のとおり、必要な機能を決めていればそれを実現してくれるもののみを探せばいいので効率的になります。
見つけたら、あとはそれを使ってやりたいことをやるだけです。
具体的にはサンプルコードやAPI、フレームワーク（ライブラリ）を探すべきだと思います。
プログラミングに慣れるまではフレームワークを使うと上手く組み込めず、それが挫折の原因にもなりそうなので、主にサンプルコードを探せばいいと思います。
プログラミングってなんのためにあるかというと、人々の生活を楽にするためです。
人々を楽にするプログラミングで、わざわざ辛いやり方をするのは最悪です。
なので、どうぞ堂々と怠けてください。他人のつくったコードを使ってください。API、フレームワークを使ってください。
プログラムを書いたらデバッグしたり、ブラウザ（htpp://localhost）で見てやりたいことができているか確認してください。
特にこのサービスには特別なことや難しいことはやっておらず、正直phpの基本がある程度わかっていれば、このサービスの基本的部分は作れてしまいます。
ステップ５：大まかなプログラムができたら・・・
デザインをつくりましょう。
僕は一から自分でデザインを考えたわけではなく、他の素敵なサイトを参考にさせていただきました。
また、サイトの見た目をつくるにはhtmlとcss、時にはjavascriptを使う必要があります。
オススメなのは、twitter社の提供するTwitter Bootstrapです。
http://twitter.github.io/bootstrap/index.html
ちなみに、「飲活」は、html、css、javascript（jQuery）を使っています。
ステップ６：ドメインを取得、サーバーを用意
つくったサイトをみんなに見てもらうためには、外部とネットワークのあるコンピュータにアップロードしなければなりませんし、ドメインもなければいけません。
コンピュータにはIPアドレスがあり、ネットワーク上の住所となっています。これにアクセスすると、「飲活」の住所とか「はてな」の住所とかあったりするわけです。これは数字でできており、これを人間が読みやすいものにしようというのがドメインです。
hatena.jpとかnomikatsu.comとかですね。これを取得しましょう！
自分で作ったり、VPSを使ったりすることもできますが、自分で管理をしなくていいという点で楽なので僕はレンタルしています。
僕は、さくらインターネットでレンタルしています。
僕のようにドメインの管理会社とサーバー会社が別だといろいろと設定をしなければなりません。
DNS（ドメインネームサーバ）というのがあり、「このドメインのあるサーバーはこれ、IPアドレスはこれ」と教えてくれるものです。
お名前ドットコムで取得したnomikatsu.comは、さくらインターネットのサーバにあるよと設定する必要があります。
実際には、さくらインターネットのネームサーバ情報を知り、お名前ドットコムでnomikatsu.comはこのネームサーバだよと設定してあげるのです。
これで、数分から数時間でnomikatsu.comにネットからアクセスすることが出来ました。
ステップ７：サイト公開
あとはサーバーにファイルをアップロードすれば、インターネットで自分のつくったサイトを見れます。
ファイルアップロードの仕方ですが、FTPクライアントを使います。
僕は、filezillaを使いました。
filezillaからホスト名やユーザー名などを設定してサーバーに接続します。
接続できたら、指定のディレクトリにファイルをアップロードすればOKです！
最後に
とにかく作り始めましょう。
僕は、本が書いてあるサンプルコードをそのまま勉強としてやるのはオススメしません。
だって、つまらないですもん。あれは、プログラムを書いていて基本がわからなくなったときに見返せばいいんです。
最初はまず作りたいものを決めて、PHPで何が出来るのかをざっくり勉強して、それを実現するのに必要なコードややり方を見つけて、実際に動くものをつくっていってください。
やりたいことをやらなきゃ飽きますし、本のサンプルコードよりも実際にwebサイトをつくった方が覚えます。
やったことがない人が勝手に難しいと思い込んでいるだけで、意外とやってみれば難しくありません。
簡単とまでは言えませんが、正直誰でもできます。
僕の場合は何度かプログラミングを挫折しましたが、こうして一つのものをつくることができるようになりましたし、iPhoneアプリなども会社では開発しています。
こんなやつでもできるので、諦めなければできます。
そんで、とても楽しいです。
本当につくりたいものがあるのなら、一度やってみる価値はありますよ。
追記:
明記してありますが、僕は初心者ではありません。初心者の方が勉強がてらサービスを作る一つのやり方というか流れを紹介したいと思って記事を書きました。
僕自身、なにもわからずプログラミングをはじめたときは、どう勉強したらいいかわからず辛い思いをしました。
素人がわけわからずプログラミングを始めると挫折しやすいと思いまして、僕が素人の時を振り返り、そして勉強してきた経験を使って、素人の方にサービスをつくっていく流れを書いたら素人の方も挫折しにくいかと思いました。
なので、僕は初心者ではありませんが経験者として素人がサービスをつくっていく方法を書きました。
また、飲活をつくった実際の流れと書きましたが、飲活をつくった流れを利用して、初心者がサービスをつくる流れを説明したかったんです。
新卒でweb・スマホアプリ系の会社に入社して、せっかく少しはプログラミングできるようになってきたので、成果を残すためにWebサービスをつくってみました。 僕も就活を経験しまし...
先日「飲み会版ソーシャルランチをつくってみた」を書いた者です。 上の記事では、僕がつくった「飲活」というサービスの説明が大半で、どうやってつくったのかとか説明が少なかっ...
どうでもいいけど「インカツ」じゃないんだ。 とりあえずあとで読むためしおり。読んだら消す。
http://anond.hatelabo.jp/20130513092207がなんかウザい。 時間帯ずらして同様の内容を二回投稿しているし、他にもWebサービス作ってること言及してないし、 ほんとに初心者で紹介したいのか、 ...
13
