土日で作るWebサービス入門

f:id:toyoshi:20130615005055p:plain

先週日曜日に総額480円、プログラムコード200行、作業時間8時間で「給与明細.net」(http://www.給与明細.net)というWebサービスを作ってリリースをしました。これは給与支払明細書のPDFをWebで簡単に作れるWebサービスです。
シンプルな内容なので開発を開始してから8時間以内の作業でリリースできました。このエントリではサクッとサービスを開発してリリースするまでの僕なりの方法を紹介します。

特長

無料
会員登録不要
Excelから一括作成できる（CSVではない）
オープンソース（MITライセンス）

解決したい課題を見つける
ドメインを取得する
サイトマップとURLを決定する
よいツールを集める
まずデプロイ（公開）する
そこそこのデザインにする
最低の機能をつけたらリリースする
広めるための準備をする
おまけ：コードをかく

解決したい課題を見つける

これがないとそもそもWebサービスを作りたいと思わないですよね。
今回はExcelで作れと税理士に指示された給与明細だったのですが、「Excelコピー＝＞数値入力＝＞PDF出力＝＞メール送付」というのを毎月やるというのが絶対に嫌だったので作ることにしました。
それぐらいのことなにが面倒なんだ？と思う人もいるかもしれませんが、とにかく嫌だとか楽しいとか思ったら作ればいいです。
人がなんと言おうとそれがあなたの個性です、面白いサービスってそういう個性からしか生まれないと僕は思います。

ドメインを取得する

まずはドメインを取りましょう、今回はお名前.comで取得しました。サービスできてからでいいじゃんって思うかもしれませんが、これは重要です。たとえ.netが480円といえどもお金を払うことで完了させようという動機がより強くなります。

サイトマップとURL（URI）を決定する

僕がサービスを開発していて悩むのは名前です。特にURIとDBのテーブル名、カラム名は悩みます。
途中で集中力が途切れないように、サイトマップを書いてついでに最初にURIをすべて決定してしまいましょう。
URIの設計にはWebを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)やRESTful Webサービスがといった本が参考になります。

よいツールを集める

Ruby･･･日本産のオブジェクト指向型言語
Ruby on Rails･･･Webアプリケーションフレームワーク
Github･･･ソースコード管理
Heroku･･･ホスティング
ThinReports･･･PDF生成
たぬき油性マジック･･･ロゴ作成

RubyやRuby on Railsがいかに凄いかということはここでは置いておいて、Herokuは後で説明するので、ここではThinReportについて簡単に説明したいとおもいます。
これは帳票生成のためのオープンソースプロジェクトで、超簡単にPDFが作れるのが特長です。
基本的にはThinReportEditorというPDFの雛形を作るアプリケーションと、ThinReportGeneratorというRubyからThinReportEditorで作った雛形を使ってPDFを出力するライブラリで構成されています。

まずこのThinReportEditorがすごいです。以下の画像みたいな感じでマウス操作メインでPDF出力のための雛形がつくれます。

f:id:toyoshi:20130615001335p:plain

さらにこの雛形を読んでPDFを出力するのも超簡単で、今回のサイトもActiveRecordのインスタンスをpdfにするのは下記のような単純なコードで表現できます。

  def to_pdf
    reports = ThinReports::Report.new layout: File.join(Rails.root , 'app', 'reports', 'basic')
    reports.start_new_page do |page|
      page.item(:name).value(self.name) #雛形のnameというラベルのテキストエリアに値をいれる
      #その他のラベルについては省略
    end
    reports.generate
  end

まずデプロイ（公開）する

これもドメインを最初に取ることと同じぐらい大事です。
Hello worldしか表示できなくてもまずは本番環境を用意してデプロイする。デプロイは面倒な作業なのでテンションの高い最初にやって自動化しておくのがいい。ローカルで動いたけど本番では動かないなんてことも当たり前ですので。

本番環境としては普通に個人向けサービスで考えると、さくらインターネットの980円VPSのコストパフォーマンスがずば抜けすぎていて比較対象がないのだけど、今回は2点においてHerokuが勝っているのでHerokuを使うことにしました。

無料で使える
環境設定がほぼ不要、デプロイが超簡単

Herokuは最高なのですが、致命的な欠点として海外にサーバがある都合でどうしても遅いというのがあります。たとえばMisocaのサービスサイトでもHerokuを使っているのですが高速化のためフロントにはAWSのクラウドフロントを使っていたりします。遅いって言っても激遅ではないんですがこのへんは個人の許せる許せないの感覚だと思います。Tokyoリージョン楽しみにしてます。ちなみに最近はRailsアプリ（Rackアプリ）じゃなくてもいろいろ動くようです。

デプロイがどれぐらい簡単かというと、最終的にはHerokuのgitリポジトリにpushするだけで関連ライブラリの導入（bundle install)、データベースマイグレーション、コードの配置、リスタートまでやってくれます。

$heroku create # <= これでHeroku上にアプリが１つホスティングされる。これすごくない？
$git push heroku master # <= デプロイされる

そこそこのデザインにする

デザインが悪いとコードを書いて動いた時の感動に差が出るし、デザインが悪いとそれだけで使ってくれない人がでるので気をつける、最近だとBootstrapを使ったり、テーマを買うのがいいと思う

Twitter BootStrap
Theme Forest (管理画面のテンプレートとかも充実）

最低の機能をつけたらリリースする

今回のサイトだと最低限の機能は「フォームに値を入れてボタンを押したらPDFがでてくる」でした。
なのでまずはそれだけ実装してリリースしました。あとは気になったら増やせばいいんです。例えば今回は、固定の項目以外の項目を入力できるようにしたり、Excelでアップロードというのはあとから追加しました。くどいようですがとにかくリリースを優先します。

広めるための準備をする

TwitterボタンやFacebookのいいねなどは必ずつけておきたいですね。あとは基本的なSEOということで、Googleキーワードツールなどを使って、検索の多い関連キーワードを調べておきそれらをサイトに入れておくようにします。とにかく1語でもいれておかないと検索されませんからね。

基本的なSEOをする。
サイトのアクセス解析をおこなう(Google AnalyticsとNew Rerickをいれた）
ソーシャルブックマーク、Twitterなどのボタンをつける
連絡先を明記する
Twitterで告知する
ブログで告知する
googleにクロール申請をする（http://www.google.co.jp/addurl/）
google webmaster toolsに登録（https://www.google.com/webmasters/）

おまけ：コードをかく

Ruby on Railsのコードを書きましょう。入門者は
RailsによるアジャイルWebアプリケーション開発第4版
の最初のチュートリアルをやったり、
HerokuではじめるRailsプログラミング入門
を最初から最後までやってみるのがいいと思います。

あと学び方については以前まとめましたのでそちらも参考になると思います。

Ruby on Railsはとにかく強力です。今回のサービスでもHTMLテンプレートを除けば200行ぐらいしかコードを書いていません。
Rails3レシピブック 190の技の電子版（SoftBankCreative）を買えばほとんどコピペだけで完成させられるレベルだと思います。

まとめ

参考になったでしょうか、この程度のサービスであれば良いツールやサービスを組み合わせることで短時間でリリースできることがイメージできたんじゃないかと思います。
肝心のコードはオープンソースという形でGithub toyoshi/kyuyoにて公開していますのでよければみてください。

それでは、総額480円、コード200行、作業時間8時間のサービス「給与明細.net」をよろしくお願いいたします。

2013/7/16 追記
この内容を弊社新人バイトに実践してみてもらいました

toyoshiの日記

株式会社トクイテンを有名にするための日記です