277
308

More than 5 years have passed since last update.

ごくごく普通の人がWebサービスを立ち上げるためにやったことのまとめ

Last updated at Posted at 2015-04-27

WEBサービスを立ち上げるっていろんなことを考えるんだ

2015年4月にWEBサービスをひっそりとこっそりと?オープンしました :smile:
(追記:2015年5月にさらにこっそりと2つ目のサービスをオープンしました :blush:)

なんとか自分の中ではオープンまでいきましたが、
WEBサービスを立ち上げるために考えたことが予想以上に多岐にわたりました。

サービス内容が1番大事ですが、
サービスを具現化するためのテクノロジーやその他もろもろ色々なことが必要でした。
実際やってみるとあれもこれもやらなければ・・・と予想以上でした。
(世の中のWEBサービスを提供している方たちはすごいですね。。)

自身の備忘もかね、考えたこと、考えないといけないこと、
参考サイトなどをここにまとめておきます

はじめに(作ったサービスのご紹介)

作ったWEBサービス

:one: WEBタイムレコーダー「U-time」

WEBブラウザ1つあれば利用可能な無料のWEBタイムレコーダーです。
日々の出勤・退勤や学校の登下校といった勤怠・出欠管理をWEB上で行うサービスです。

U-time0428.png

:bulb: 特徴

  • インターネットに繋がる環境とWEBブラウザが1つあれば利用可能
  • 打刻したデータはcsvファイルで出力可能
  • グループごとに管理ができるため、拠点や店舗・グループごとの利用が可能
  • 打刻ボタンの数とボタンの名称を変更できるため、利用用途に合わせて設定できる
  • 打刻したタイミングで指定したアドレスへメール通知が可能(子供の登下校の確認にも利用できる。)

:sweat_smile: 感想

  • 初めて作ったWEBサービスになるので、日々勉強しながら試行錯誤を繰り返しながら作りました。
  • 「開発スピードよりも理解」を大事にして1日1,2時間程度しか作業ができないため、日々コツコツと作りました。開発期間としては約3ヶ月程度かと思います。

:two: 「フリーエンジニア案件Serach」

2つ目のサービスとしてこっそりリリースしましたが現在も日々拡張中ですのサービスです。
その名の通り、フリーエンジニア(フリーランスのSE)の方向けの案件情報を検索できるサイトです。
フリーエンジニア向けの案件情報は各企業がそれぞれのサイトに掲載しているため、その都度複数のサイトを見にいく必要がありますが、
それを1つのサイトで横断的に検索できるサービスです。

:bulb: 特徴

  • 複数のサイトに掲載されているフリーエンジニア向け案件情報をまとめて検索可能

:wink: 感想

  • 2つ目のサービスということでイメージしたものをRubyOnRailsで実現するスピードは格段にあがりました。
  • まだまだ開発を始めた段階でもありますが、それなりに使えるものにするのに約3日程度でした。

WEBサービスの紹介サイトを作る

せっかくよいWEBサービスを作ってもその存在を知ってもらえなければ意味がありません。
WEBサービスを世の中に知ってもらうためにサービスを紹介するサイトが必要です。
WEBサービス自体を作る話は後半にするとして、
まずは紹介サイトの作成に関連してまとめておきます。

1 . サイトのURL(独自ドメイン)を考える

WEBサービスの名称が決まってからかもしれませんが、
http://○○○.comなどの○○部分を考える必要があります。

独自ドメインもスタンダードなものは既に取得されていることも十分にあり得るため、
サービス名称と合わせて希望のドメインが取得できるかもチェックする必要があります。
ドメイン管理は自分でやろうと思えばできるものではありますが、
ドメイン管理業者を通して取得するのが一般的だと思います。

:small_blue_diamond: MuuMuudomain(ムームードメイン)

ドメイン管理の大手。取得料金が安く昔からちょこちょこ愛用してます。
よく期間限定で取得費用割引のキャンペーンをやっているのでタイミングが合えば
少ないコストでドメインが取得できます。

:small_blue_diamond: お名前.com

こちらもよく聞く老舗のドメイン管理サービスです。

2 . レンタルサーバーを借りる

独自ドメインを取得したら、次に必要なのが
WEBサービスのプログラムや紹介サイトのhtmlファイルなどを管理・運用する場所を確保します。
これも自宅にサーバーを構築して自分で運用するということもできますが、
一般的にはサーバやスペースを管理している業者からレンタルするのが一般的です。

:small_blue_diamond: lolipop(ロリポップ)

ドメイン取得で紹介したムームードメインと同じ会社が運営しているサービス。
サービスが連動しているのでムームードメインでドメインを取得した流れで
申し込むことができます。また、同時に申し込むと割引がある場合もあります。

:small_blue_diamond: サクラインターネット

こちらもレンタルサーバを提供している大手老舗。
企業向けから個人向けまで色々なプランがありますので
自分に合ったものを選ぶとよいかと思います。

その他にもレンタルサーバに関してはネット上で検索すると、
山のようにサービス事業者が出てきます。
有料のものだけでなく無料のものがあったりと、各社サービス内容が様々なので
自分の気に入ったところを選ぶとよいかと思います。
最初はコストをかけたくない場合には、
無料でスペースを貸してくれるサービスもたくさんあるので
そこを利用するのも1つの方法です。

尚、レンタルサーバを選ぶ基準はサービス内容などによって様々かと思いますが、

  1. 利用したい技術が利用できるか
  2. 利用料金はいくらか
  3. サーバのスペックはどれぐらいか
  4. 容量(スペース)はどれぐらいか

といったところが選ぶときに見るところかと思います。
最近はサーバのスペックや容量はどんどんよいものになっているので、
よっぽどのことでなければあまり気にする必要はないぐらいになってきていると思います。

なので選ぶ基準で重視するのは
「1.使える技術」「2.費用」の2つかと思います。

3 . サイトデザインを考えサイトを作る

ドメインとスペースを確保した後は、
実際の紹介サイトをhtmlやcssなどを駆使して構築していきます。
紹介サイトを構築する際に参考にしたことをまとめます。

:small_blue_diamond: bootstrap

説明は不要かと思いますが、言わずと知れた今風なWEBサイトが作れる
デザインテンプレートです。
デザインの苦手なエンジニアでもそれなりの見栄えのサイトが作れます。
また、レスポンシブWEBデザインにも対応しているので、
スマートフォン向けの対応も合わせてできます。
紹介サイトでも利用しましたが、WEBサービスにもこのbootstrapを使いました。

:small_blue_diamond: Font Awesome

無料で使えるフォントアイコンのサイトです。
ボタンやメニューに表示するアイコン素材のスタンダード的なサイト。
bootstrapと合わせ色々なサイトに使われていますので、
アイコン自体の差別化は難しいですが
文字だけのサイトに簡単にアイコンをつけることで直観的にわかりやすいサイトが作れます。

今回のWEBサービスでも上記の
bootstrap + font Awesomeの組み合わせでWEBサービスを構築しました。

:small_blue_diamond:bootstrapzero

bootstrapで作られたテンプレートのサンプルがダウンロードできるサイトです。
サンプルのクオリティーがかなり高いので、
サンプルをもとに少し手を加えるだけであっという間にお洒落なサイトができあがりそう。

:small_blue_diamond:startbootstrap

ここもbootstrapで作られたテンプレートのサンプルがダウンロードできるサイト。
気に入ったテンプレートがあればダウンロードできます。

:small_blue_diamond: WEBサービスやアプリ・製品サイトを作るときに参考にしたいWEBデザインとキャッチコピー

世の中の他のWEBサービスやアプリのサイトを参考にしたいときに見ると便利なリンク集です。
その名のとおり今風のサイトやWEBサービスのサイトがまとまっているので、
自分のイメージに近いサイトを参考する場合に利用するとよいと思います。
また、趣旨とは違いますが、こんなサービスあったんだ?という新たな発見もあるかもしれません。

4 . ブログ機能を開設する

サービス内容を紹介するサイトは情報が静的なものになるので、
ブログを使って、サービスの更新内容や、自身の考えやメッセージを発信するのが
いまや一般的になっています。

:small_blue_diamond: Wordpress

ブログ機能を簡単に作れるCMSパッケージです。
bootstrap同様、あまりに有名なので説明は不要かと。
尚、言語はPHPで作られているのでPHPがわかれば独自にカスタマイズもできます。

ブログ機能を簡単に導入できるパッケージには
MovableTypeなどWordpress以外にもいろいろありますが、
情報量の多さや、各レンタルサーバーでも対応しているサービスが多く
マニュアルなどがあるの場合もあります。
よって独自にブログ機能を立ち上げるときにはWordPressを利用するとよいと思います。

また、紹介サイト上とは別になりますが、
既にあるブログサイトを利用するやり方もあります。

:small_blue_diamond: アメブロ

説明するまでもないですが、芸能人も多数利用しているブログサイト

アメブロなどを利用して、サービスを紹介して、
自分のサイトに誘導するやり方もあります。
新着記事などで表示されたりもするのである程度の人の目に触れる機会は
上がると思います。

5 . SNSを使って情報を発信する

このQiitaもそうですが世の中にあるSNSサービスを利用して
作ったサービスの内容は更新情報を配信していくことが必要です。
そもため、各SNSでアカウント作りました。

6 . Webサービスのまとめサイトに登録する

冒頭でも書きましたが、
WEBサービスを作ったけど世の中にその存在を知ってもらい
実際に使ってもらわなければ、せっかくよいサービスでも意味がありません。
そのため、世の中のWEBサービスをまとめて紹介しているサイトがいくかあるので
そこに掲載されることで、見てもらえる機会を作ります。

:small_blue_diamond: WEBサービスまとめてみた

WEBサービスを自薦・他薦問わずサイトから申請ができます。
申請しても登録されるかはわかりません。

:small_blue_diamond: マメテソ

こちらもサイトから申請できるが登録されるかどうかはわかりません。

:small_blue_diamond: ツクログ

Twitterかfacebookのアカウントでログインでき、WEBサービス内容を投稿できます。
効果はわかりませんが、すぐに掲載されるのが良い点と、
しばらくは新着サイトとして目につくところに表示されるのがよいです。
またサービスに対する評価やコメントがあれば記載もされるので
場合によっては、反応を確認することができます。

:small_blue_diamond: startapp

Twitterかfacebookのアカウントでログインして作ったサービスを紹介できるサイト
という点では他のWEBサービスサイトとあまりかわりません。
大きくことなる点はインタビュー形式でWEBサービスの紹介をする記事がかけます。

:small_blue_diamond: WebFolio

国内のWEBサービスをまとめたサイト。
なんでも掲載というより大手の有名サイトを集めている印象。
問い合わせフォームから掲載依頼ができますが、掲載されるかはわかりません。

:small_blue_diamond: ソーシャル図鑑

twitterアカウントでログインできます。
2015年5月現在新規申請を停止しているようです。

:sunny: WEBサービスを作る

今まではWEBサービスを世の中に知ってもらうためのサイト作りなどの話でしたが、
ここからは本題の、そもそものWEBサービスを作ることに関連する内容をまとめます。

WEBサービスの内容の企画や構想立案などは当然あるとして、
具体的に「こんなサービスを作るぞ」という具体的なモノづくりに入る部分から
考えたこと書いていきます。

1 . プログラミング言語/フレームワークを決める

まず最初に決める必要があるのが、数あるプログラミング言語/フレームワークの中から
「何の技術」を使うかを決める必要があります。

一番大事なのは、

自分が提供しようとするサービスが実現できる技術であるか

ということですが、それ以外に以下のことを考えました。

採用する言語の基準

:white_check_mark: 学習が容易か

何をもって容易というかはわかりませんが、
ゼロからその言語やフレームワークを学習して身につけるために
どれぐらいの期間が必要となるのかは
サービスを世に生み出すスピードにも関わる話なので、とても大事です。

:white_check_mark: 情報量が豊富か

基本的にプログラムを組んでサービスを作っていく過程で、
思い通りにすんなりプログラムが動くかというとそんなことはまあないと思います。

教科書通りに作ればその通りに動きますが、
自分の思い通りのものを作ろうとすると実際にはうまく動かない・・・といったことが
何度となくあると思います。

その場合に、周りに聞く人がいればよいですが、
インターネットや参考書などを自分で調べて自分で解決することになりますので、
やはり情報が豊富にあれば解決もできますが、
そもそも情報がない状態ではどうしようもないこともあるので、
ある程度世の中に普及した技術でノウハウやトラブルシュートがたまっているものが
よいと思います。
(先進的なまだ使っている人が少ない新しい技術を使ったサービスを
 展開する場合には違うと思いますが。)

:white_check_mark: 開発生産性

生産性のよいプログラム言語かどうか。
サービスを立ち上げるのは荒削りでもよいのでスピードが重視されます。
できるだけ少ない作業・コーディングで動くものが作れることがよいと思います。

railsもそうですが、
最近のフレームワークはある程度必要なファイルは自動的に作成してくれたり、
SQLを書かなくても勝手にDBから値を取得してくれたりと
便利な機能がいろいろついています。

ただ「生産性がよいか」という部分は自分の好みや相性もあるので、
実際に使ってみて使いやすいとか便利とか思うものがきっとよいのかなーと思います。

:white_check_mark: レンタルサーバやインフラが対応しているか

せっかく作ったWEBサービスを動かくサーバやインフラ環境が、
利用した言語やフレームワークなどに対応しているかどうかも重要です。
最近のレンタルサーバは

  • 言語ならPHP
  • DBならMysql

はほぼ対応していると思います。
しかしRuby on railsに対応しているレンタルサーバーは実際なかなかないのが現状です。
もっと増えてくれればいいのに・・・と思います。

というようなことをいろいろ考え、自身のサービスとしては
Ruby On Railsを使うことにしました。

もう少し詳しく書くと、最初は下に書いたPHP + cakephpで作ろうと思って
参考書も買って勉強しながら動かしてみました。

なぜphp + cakephpを選んだかというと、大抵のレンタルサーバが対応しているので
あまりインフラ面を気にする必要がなく、ものができてしまえば公開できるかなと
思ったからです。

しかしこれは個人的な好みや相性なのかもしれませんが、
なんかしっくりこない・・・いまいち理解が腹に落ちないというか・・・という状態で
そんなときにRailsも少しいじってみようかなと思い、ざっくり動かしてみたところ
これだ。と思いRailsで作ることにしました。

railsの方が(自分は)わかりやすいのかもしれませんね。

いろいろ書きましたが、詳しい人が選ぶ場合にはアーキテクチャ的にいろいろ考えますが、
あまりわからない自分なんかが選ぶ場合には好みで選ぶものかもしれません。。

流行の言語

現在WEBサービスを作る場合の2大人気言語は

  • Ruby
  • PHP

だと思います。
企業向けの業務システムではJavaや.netなどの言語もまだまだ主流ですが、
WEBサービスではもやはこの2つの言語が主流だと思います。

流行のフレームワーク

こちらもRubyとPHPのそれぞれの人気フレームワークになります。

:small_blue_diamond: Ruby on Rails

Rubyのフレームワーク
世の中のWEBサービス(日本だけかもしれない)で流行っている言語。
規約を重視し、繰り返しをなくした少ないコーディングで生産性よく開発できる。
今回のWEBサービスもこのRuby on Railsを採用しています。

:small_blue_diamond:CakePHP

PHPの人気フレームワーク
最近バージョン3.0がリリースされました。
バージョン2.X→3.Xでmodelの部分が大きく仕様がかわり、
2.X系をそのまま3.Xでは使えないという話のようです。
3.X系もリリース直後のため、まだまだ情報もすくないため、
もうすこし後のタイミングで採用したほうがよいのかなと思います。

:small_blue_diamond:FuelPHP

最近登場したPHPのフレームワーク
参考書もいくつか出ているので情報もそれなりにありますが、
他のフレームワークに比べるとまだこれからという印象。

2 . 開発環境(開発ツール)を整える

言語を決めたら次は開発する環境を作る必要があります。
最近のWEBサービス企業や世の中のお洒落なカフェにいくと
Macを使っている人が多い気がします。

が、私はWindowsのごくごく普通のPCしか持っていない・・。
という状況で開発環境をどうしようという問題は結構悩みました。

まずはプログラムを書くためのエディタを決める必要があります。
railsは極端な話、メモ帳などテキストエディタがあれば作れるので、

  • テキストエディタで作る
  • railsの開発専用環境で作る

の大きくはどちらかに分かれることになりますが、
私は後者を選択し、開発ツールとしてRubymineを購入しました。

一度使ってしまうともう手放せないぐらい便利だなと思います。
ツールの表記はすべて英語だし、色々な機能が豊富にあって使えるのかなと
最初は心配しましたが、いざ使ってみると意外とすんなり使い始められました。
まだまだ使っている部分はごく一部で、
もっと便利な機能がたくさんあるのでしょうけど、サービスをリリースするまでの
一連の作業に関しては支障なく使えるようになりました。

:small_blue_diamond: Rubymine

私も使っているrubyの開発ツール。railsで開発する場合にはよいかと思います。
トライアルで一定期間利用することもできるのでとりあえず使ってみて
あえば購入してもよいかと思います。
ライセンスが企業用と個人用で販売されていて個人用を購入しました。
1つのライセンスで複数のPCにインストールすることもできるので
作業用PCが複数あっても1ライセンスでOKです。

:small_blue_diamond: aptana studio

よく参考書でも紹介されるrailsの開発環境です。
javaの開発環境で有名なEclipseがベースのrails環境になるようです。
実際にインストールして動かしてみましたが動作が重い印象。
(自分のPCのスペックもあるのでしょうけど)いまいちしっくりきませんでした。
フリーのツールなので合えば利用すればよいと思います。

:small_blue_diamond: sublimetext

テキストエディタでよく紹介されるのがこちら。
railsに限らず、htmlやcssなどwebサイトの開発に利用されているイメージ。
ただテキストエディタなので、テキストエディタ以上は求められないのではと思いました
また、有料なのでコストがかかります。

3 . 開発環境(OS周り)の実行環境を整える

私の作業環境はWindowsということは書きましたが、
railsを使う場合、Linuxに近いMacで作業したほうがいろいろ便利な情報がいろいろありました。

  • Windowsでこのまま開発するか
  • それともMacを購入するか

と悩みましたが、結論Windowsでいったん開発はすることにしました。
ゆくゆくはMacにしたいですが今は現状ある資源でできることをしようと思いました。

尚、今はWindows上でそのまま開発していますが、
VM環境(バーチャルマシン環境)をWindowsに構築して
そこにLinuxを入れて開発するやり方もあるなと思いました。

まず、世の中のVM環境を提供しているサービスは

  • VMware
  • VirtualBox

の2強かと思います。

:small_blue_diamond: VMware

バーチャル環境提供ベンダーの大手。
個人で利用する分には、無料でVMwareのソフトをインストールして利用できます。

:small_blue_diamond: Oracle VM VirtualBox

Oracleが提供するバーチャル環境ソフト。
できることはVMwareと同じでこれも無料で利用することができます。

VMソフトをインストールしてVM環境ができたら次はVM環境で動かすOSが必要です。

:small_blue_diamond: ubuntu

フリーで利用できVM環境でrailsを動かす事例もいくつか紹介されているLinux系OSです。

また、VM環境をいくつも用意したり環境を効率的に作りたいという場合には、
vagrantが流行っていますね。

:small_blue_diamond: vagrantup

VM環境の設定をいくつも自動的に作る場合に設定情報等を記録しておくことができます。

4 . サービス運用環境を整える

開発環境が整い、実際にコーディング・ローカルでの動作が確認できたら
実際にサービス公開に向けて運用環境を準備する必要があります。

Ruby on Railsのレンタルサーバ

世の中にレンタルサーバ(ホスティングサービス)をしてくれる業者は
山のようにありますが、
Ruby on Railsのアプリケーションに対応しているレンタルサーバはまだまだ
少ないのが現状です。

私は自分でサーバ構築やメンテナンスをする時間や手間を考え、
そのあたりを意識しなくてよいsqaleを使うことにしました。

:small_blue_diamond: sqale

ムームードメインやlolipopレンタルサーバを運用しているGMOペパポが提供しているサーバ
特徴はアプリケーションをアップするだけですぐに使えるようになります。
railsのファイルをアップすると自動的にデプロイしてくれます。
なのでインフラ周りの設定やOSとかネットワークとかあまり詳しくなくてもアプリをリリースすることができます。
対象はPHPかRubyの2つに特化しているので、Ruby on Railsのアプリを運用するにはよいと思います。
またコストは月額980円からだし、トライアルでお試し利用もできるので、
とりあえず使ってみるということもよいかと思います。

:small_blue_diamond: Heroku

sqaleの海外版のようなサイト
無料でアプリケーションをデプロイして公開できるサイトで
Ruby on Railsアプリのリリースでよく雑誌やメディア等でも紹介されるサービス

:small_blue_diamond: さくらインターネット

Ruby on Railsも対応していますが、
サービスを公開するためにOS(cent OS)のインストールや
設定をする必要があるため、ある程度インフラ・サーバ周りの知識がないと厳しいかもしれません。

ざっとインターネットでrailsが動かせる環境を提供しているのは上記ぐらいかと思います。
まだまだ選択肢が少ないのでこれからもっといろいろなサービスが出てくればよいなと
思います。

ファイルアップロード

サービスを運営するサーバが決まった後は、
サーバに自分の作った実際のプログラムやhtmlのファイルをアップロードする必要があります。

アップロードの方法はいくつかありますがFTPソフトを利用するのが一般的

:small_blue_diamond: FFFTP

FTPソフトの老舗。かなり昔からある。
FTPだけでなくSFTPという暗号化した通信も対応している。
大抵のファイルアップロードはこれでよいと思います。

:small_blue_diamond: Cyberduck

FTPソフト。WindowsだけでなくMacにも対応している。
また、amazonやgoogleにも対応していると書いてあるぐらい
最近もupdateがされていていま勢いのあるソフト

メールサーバの準備

アカウント登録時やサービス内容の更新など、
自分のサービスからメールを送るケースがあると思います。
その場合、メールサーバを用意して、メールサーバ経由でメールを配信する必要があります。

どうするかというと、やり方は以下2つで、

  1. 自分でメールサーバを構築して使う
  2. メールサーバを借りて利用する

現実的には1は大変なので2を選択します。
メールサーバを貸してくれるサービスはいくつかありますが、
なるべく初期コストを抑える必要があるし、
どれぐらいの人が使ってくれるのかもよくわからない状態のため、
最初は無料のフリープランがあるところがよいと思います。

:small_blue_diamond: SendGrid

大手サービス企業も使っているメール送信サービス。
1日400通までは無料だし、実績もあるから安定感もあります。
利用登録をしてもすぐには使えず、管理会社の承認後に利用が開始できます。

:small_blue_diamond: Gmail

言わずとしれたgoogleのメール。
以前は独自ドメインなどgmail以外を送信元にできたみたいですが、
いまはgmailを送信元にしかできないようです。
gmailのアカウントがあればほかに登録などいらないので、
テストとかでさくっと使う場合には便利。

:small_blue_diamond: Amazon

こちらも言わずとしれたAmazonのメールサービス。
トライアル期間は無料だがフリープランはないみたい。

:small_blue_diamond: Zoho

クラウドでいろいろなサービスを提供しているシンガポールの会社。
フリープランがあるから無料で利用したい場合にはこちらもオススメ。

取得した独自ドメインを送信元にしてメールを配信したい場合にはSendGridかZoho。

今回は実績もあるSendGridにしてみよう思っていましたが、
登録審査があったので結局とりあえずgmailでの運用にしました。
(当面それで困ることはないので。)

最後に

ざっといろいろと考えたことを自分の頭の整理もかねて記載しました。

サービスを立ち上げるためには
サービスの内容がとても大事なことはもちろんですが、

  • そのサービスを知ってもらうための取り組みや
  • そのサービスを安定的に継続的に提供できる環境作り

などサービスの内容以外にもいろいろ大事な取り組みがあります。

満足のいくものを提供できているかというとまだまだですが、
なんだかんだでサービスをオープンまでもっていくために実は一番大事なのは

:relaxed: 毎日少しづつでもつづけること

なのではないかと思います。
一人で作業をしていると困難な場面に遭遇したり、
終わりのない作業にモチベーションを保つことが結構難しかったりします。

あきらめずに毎日少しづつでも何に取り組めば
何かしら得るものがあると考えて、少しづつでも前進すれば
きっと満足のいくサービスを提供できることに近づくのかなと思います。

とまだまだこれからですが、いったんのまとめです。

277
308
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
277
308