2013-05-13

素人がそこそこのWebサービスをつくる方法

先日「飲み会版ソーシャルランチをつくってみた」を書いた者です。

上の記事では、僕がつくった「飲活」というサービスの説明が大半で、どうやってつくったのかとか説明が少なかったので、今回はそれについて書いてみようかと思います

まずは僕についてさらっと。

失敗

僕は「「飲活」」を作るまでも、iPhoneアプリを開発したり、webサービスメンテナンスをしたりとプログラミングをしておりました。

なので、プログラミング初心者というわけではありません。

しかし僕も何度かwebサービスの立ち上げを挫折しております。4回くらいかな。

最初xoopsを使って、ツイッターで登録企業広告をつぶやいたらポイントをもらえるサービスでした。

なんとxampp門前払いされました。ローカル環境すらつくれませんでした。「くそ初心者時間無駄にするだけだから辞めろ」と言われた気分でした。

xamppだけに2日くらい朝まで格闘してしまい本当に時間無駄しました。当時はapacheの設定とかなんぞや状態ですからね。

次にやろうとしたのが、大学受験生向けのサイトで、受験生に教科ごとの講義をするのではなく、勉強のやり方を教えるよ!ってサイトです。

ほとんどhtmlでできそうなのですが、phpメールを送ることができず挫折しました。

レンタルサーバーを借りたのですが、レンタルサーバーphpの設定をしないといけないのを知らなかったり、やっと解決しても日本語化けに悩まされて止めた覚えがあります。これほど母国語英語だったらどんなに楽かと思った時はありませんよ。プログラミングしてると今でもたまに思います

次が、キックスターターのようでそうでないクラウドファンディングサービスをつくろうとしました。

ここでjavascript出会いました。いや、ちゃんと交際を始めたと言うべきか・・・。それまでjavascriptとすれ違っても虫を決め込んでいたのですが、いざ必要になって呼び止めてみると意外と良い奴でした。

しかし、ajaxにつまづいたり、サイト構成やディレクトリ構成、データベース構成や、デザインの調整などで複雑で面倒になり挫折してしまいました。

こうして書くと、僕がすごい諦めの早いやつで勉強もまともにしないやつみたいに思えますが、半分正解。諦めは悪いけど「ググればいける」という考えで勉強を怠っておりました。

つくりかた

「「飲活」」をつくった実際の流れを書きたいと思います

だいたいプログラミング言語はどれも根本は似ているので、先述の3つ以外のプログラミング言語をやりたいと思ってる人でも参考になると思います

また、以下の内容は、わけわからんけどwebサービスをつくりはじめる方を前提にしています

まずはじめに:開発環境を整える

まずは開発環境を整えましょう。

開発環境とは、自分の書いたプログラムローカル自分パソコン)でのみ動作させる環境です。

まり自分がつくっているものを外部に見られることはありません。

ローカル開発環境必要なモノは以下です。

です。

まずはこれらをインストールしてください。設定などの説明は割愛します。

ステップ1:プログラミングでいったいどんなことができるのかを知る

僕はphpを使いました。

僕もそうでしたが、素人は当然プログラミングの全体像を想像できません。やりたいことを思いついても、どういうコードを書いたらいいかなんてすぐに想像できませんよね。

これも当然ですがその原因は、そもそもプログラムでなにができるか知らないからです。

なので、POSTやSESSION、配列などの基本的なもの存在を知りましょう。そしたら、「このページにはこの機能必要だろう」というのが、"なんとなく"わかります。書き方はこの時点で別に覚えなくて大丈夫です。

例えば、オブジェクトを格納することが出来る「配列」という存在を覚えます

この時点では、配列の作り方のコードとかは覚えなくていいですよ。「配列という存在を知る」ことが重要です。

基本的なことを学ぶときネットではなく本を使う事を薦めます

本は情報が体系的にまとめられていまうので、ネットよりも学びやすいです。

プログラミング10年以上基本部分は変わっていませんので、「古いものを覚えちゃわない?」という無駄心配はなくて大丈夫

一方、発展的なことではネットで学びましょう、というかわからないことがあればネットで探しましょう。

ステップ2:つくりたいwebサービス必要機能を決める

どんなことを実現したいのかというゴールがないと必ず途方にくれます

なので、まずはゴールを設定します。

例えば「「飲活」」なら、

などなど...。

その後に、各ページ毎に必要機能と大まかなそのページのやることを決めます

例えば、ログインページなら・・・

必要機能

ログインページには、ユーザー入力するフォームと送信ボタンがあって、なにも入力されずに送信ボタンが押されたらエラーメッセージを出そう。エラーがなくログイン成功したら、会員専用のエロビデオを見せよう。

とか。

次に、各ページでどんな情報を表示させるかを決めます

例えば、しっかり考えず適当に、登録ユーザープロフィール画面を開発していて、ユーザー名、生年月日、出身大学を表示させるプログラムをつくったとします。

しかし、プロフィール画面が完成した後にメールアドレスも表示させないといけないことに気がついた場合、少しプログラムの変更が必要になります

最初から、どのデータ必要なのかを決めていれば、こうした効率の悪さは回避できます

実際は奇麗に開発できることは少ないですが、何も考えずに開発するよりは効率的です。

大まかな機能ログイン)→具体的な機能ログインページの機能)→具体的にログインページがやること→必要とするデータ

という流れでサイト機能を決めることで、自分のやることが明確になりますし、勉強すべき内容も最小限に抑えられます

ここで、どういうデザインにするのかを決めればもっと後で楽になります

ステップ3: データベースを用意

webサービスには必ず必須となるデータベースについて知る必要があります

僕は、mysqlを使いました。

サーバーさくらインターネットレンタルサーバーを使ったので、さくらインターネットデータベースを利用しました。

ステップ4:必要機能を実現するための方法を見つける

各ページで必要機能とやることを決めたら、それを実現してくれる方法を本やネットで探します。

先述のとおり、必要機能を決めていればそれを実現してくれるもののみを探せばいいので効率的になります

見つけたら、あとはそれを使ってやりたいことをやるだけです。

具体的にはサンプルコードAPIフレームワークライブラリ)を探すべきだと思います

プログラミングに慣れるまではフレームワークを使うと上手く組み込めず、それが挫折の原因にもなりそうなので、主にサンプルコードを探せばいいと思います

なぜなら、楽だからです。その一言に尽きますよ!

プログラミングってなんのためにあるかというと、人々の生活を楽にするためです。

人々を楽にするプログラミングで、わざわざ辛いやり方をするのは最悪です。

なので、どうぞ堂々と怠けてください。他人のつくったコードを使ってください。APIフレームワークを使ってください。

プログラムを書いたらデバッグしたり、ブラウザ(htpp://localhost)で見てやりたいことができているか確認してください。

「「飲活」」の場合は、基本機能


利用したAPIフレームワークは以下。


特にこのサービスには特別なことや難しいことはやっておらず、正直phpの基本がある程度わかっていれば、このサービスの基本的部分は作れてしまます

ステップ5:大まかなプログラムができたら・・・

デザインをつくりましょう。

僕は一から自分デザインを考えたわけではなく、他の素敵なサイトを参考にさせていただきました。

また、サイトの見た目をつくるにはhtmlcss、時にはjavascriptを使う必要があります

オススメなのはtwitter社の提供するTwitter Bootstrapです。

http://twitter.github.io/bootstrap/index.html

これを利用すれば、簡単にかっこいいデザインを作れます

ちなみに、「飲活」は、htmlcssjavascriptjQuery)を使っています

ステップ6:ドメインを取得、サーバーを用意

つくったサイトをみんなに見てもらうためには、外部とネットワークのあるコンピュータアップロードしなければなりませんし、ドメインもなければいけません。

コンピュータにはIPアドレスがあり、ネットワーク上の住所となっています。これにアクセスすると、「飲活」の住所とか「はてな」の住所とかあったりするわけです。これは数字でできており、これを人間が読みやすものにしようというのがドメインです。

hatena.jpとかnomikatsu.comとかですね。これを取得しましょう!

僕はお名前ドットコムで取得しました。

それからサーバーレンタルしましょう。

外部とネットワークのあるコンピュータですね。

自分で作ったり、VPSを使ったりすることもできますが、自分管理をしなくていいという点で楽なので僕はレンタルしています

僕は、さくらインターネットレンタルしています

僕のようにドメイン管理会社サーバー会社が別だといろいろと設定をしなければなりません。

DNSドメインネームサーバ)というのがあり、「このドメインのあるサーバーはこれ、IPアドレスはこれ」と教えてくれるものです。

名前ドットコムで取得したnomikatsu.comは、さくらインターネットサーバにあるよと設定する必要があります

実際には、さくらインターネットネームサーバ情報を知り、お名前ドットコムでnomikatsu.comはこのネームサーバだよと設定してあげるのです。

これで、数分から時間でnomikatsu.comにネットからアクセスすることが出来ました。

ステップ7:サイト公開

あとはサーバーファイルアップロードすれば、インターネット自分のつくったサイトを見れます

ファイルアップロードの仕方ですが、FTPクライアントを使います

僕は、filezillaを使いました。

filezillaからホスト名やユーザー名などを設定してサーバー接続します。

接続できたら、指定のディレクトリファイルアップロードすればOKです!

最後

とにかく作り始めましょう。

僕は、本が書いてあるサンプルコードをそのまま勉強としてやるのはオススメしません。

だって、つまらないですもん。あれは、プログラムを書いていて基本がわからなくなったときに見返せばいいんです。

最初はまず作りたいものを決めて、PHPで何が出来るのかをざっくり勉強して、それを実現するのに必要コードややり方を見つけて、実際に動くものをつくっていってください。

やりたいことをやらなきゃ飽きますし、本のサンプルコードよりも実際にwebサイトをつくった方が覚えます

プログラミングって難しいものではないですよ。

やったことがない人が勝手に難しいと思い込んでいるだけで、意外とやってみれば難しくありません。

簡単とまでは言えませんが、正直誰でもできます

僕の場合は何度かプログラミング挫折しましたが、こうして一つのものをつくることができるようになりましたし、iPhoneアプリなども会社では開発しています

こんなやつでもできるので、諦めなければできます

そんで、とても楽しいです。

本当につくりたいものがあるのなら、一度やってみる価値はありますよ。

追記:

明記してありますが、僕は初心者ではありません。初心者の方が勉強がてらサービスを作る一つのやり方というか流れを紹介したいと思って記事を書きました。

誤解させてしまタイトルすみません

僕自身、なにもわからプログラミングをはじめたときは、どう勉強したらいいかからず辛い思いをしました。

素人がわけわからプログラミングを始めると挫折やすいと思いまして、僕が素人の時を振り返り、そして勉強してきた経験を使って、素人の方にサービスをつくっていく流れを書いたら素人の方も挫折しにくいかと思いました。

なので、僕は初心者ではありませんが経験者として素人サービスをつくっていく方法を書きました。

また、飲活をつくった実際の流れと書きましたが、飲活をつくった流れを利用して、初心者サービスをつくる流れを説明したかったんです。

説明不足でさらに誤解させてしますみません

トラックバック - http://anond.hatelabo.jp/20130513092207
  • 飲み会版ソーシャルランチをつくってみた

    新卒でweb・スマホアプリ系の会社に入社して、せっかく少しはプログラミングできるようになってきたので、成果を残すためにWebサービスをつくってみました。 僕も就活を経験しまし...

    • 素人がそこそこのWebサービスをつくる方法

      先日「飲み会版ソーシャルランチをつくってみた」を書いた者です。 上の記事では、僕がつくった「飲活」というサービスの説明が大半で、どうやってつくったのかとか説明が少なかっ...

      • http://anond.hatelabo.jp/20130513092207

        どうでもいいけど「インカツ」じゃないんだ。 とりあえずあとで読むためしおり。読んだら消す。

      • 増田の使い方にルールなんてないけどさ。

        http://anond.hatelabo.jp/20130513092207がなんかウザい。 時間帯ずらして同様の内容を二回投稿しているし、他にもWebサービス作ってること言及してないし、 ほんとに初心者で紹介したいのか、 ...

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