独りでWebサービスを開発・リリースするまでのTips

これは2017年の11月から**独り**でWebサービスを作りはじめて、**独り**でリリースをして、**独り**で打ち上げをした、独身男性の備忘録です。

開発からリリースまでの4ヶ月間、自分が開発中に心がけていたことなどを忘れないように、次のサービスに活かせるように、Qiitaに投稿しておきます。

また『Webサービス作るぞ！』と、**独り**で考えている方の参考になればと思います。

# **作ったもの**
[OFFICECLOCK - クラウド型の勤怠管理サービス](https://officeclock.work/)

### **トップ画面**
<img width="1271" alt="スクリーンショット 2018-02-08 8.50.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/147291/89163014-181b-8f17-908d-3df460b8f0ee.png">

## **登録画面**
<img width="1273" alt="スクリーンショット 2018-02-08 9.05.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/147291/f20b71b5-d9a4-7be9-0f0c-c678848403d7.png">


## **勤務表画面**
<img width="1276" alt="スクリーンショット 2018-02-08 9.05.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/147291/4ace6cf9-77bc-96e9-6078-b41a2a45b537.png">


## **打刻画面**
<img width="1265" alt="スクリーンショット 2018-02-08 9.05.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/147291/ee985bd7-b8eb-ac1b-f78a-be72daf67942.png">

# **OFFICECLOCKは何ができるのか？**
##ざっくり説明すると...

* Webブラウザで勤怠管理ができる
* 登録した勤務時間をエクセルで出力ができる
* [HATARACLOCK](http://tech-portfolio.org/)とも連携しているため、LINEでの打刻、勤務表の確認もできる

【連携しているLINEアプリ】
![start.gif](https://qiita-image-store.s3.amazonaws.com/0/147291/5290b282-5ffa-21a1-ea62-4f80b96805d3.gif)
※このLINEbotとWebのサービスが連動している。

## **こだわり**
このサービスのこだわりはシンプルで見やすく、使いやすいということを意識して開発しています。

具体的には、勤務表のページはuser.htmlのみで生成されており、勤務時間の登録等で他のリンクに飛ぶことはありません。モーダルやナビを活用して、1ページで全て完結するようなサービスになっています。

# **動作環境**
**PHP**...サーバーサイド（生のPHPでRestっぽく書いています）
**JavaScript（JQuery、AngularJS）**...フロントエンド
[**Bootstrap Studio**](https://qiita.com/Yuta_Fujiwara/items/10df62b820d056a92e86)...モックアップ
**BootStrap**...CSSフレームワーク
**さくらVPS**...本番サーバ
**MySQL**...Database
**Git**...CentOS上にプライベートのリモートリポジトリを作りました
**Wunderlist**...タスク管理

言語は何でも良かったのですが、このサービスについてはPHPで開発をしました。このサービスはログイン機能を使っているので、パスワードハッシュ、認証、メーラー機能だったり、勤務表画面ではエクセル編集、ファイル出力等を新たに勉強しました。

PHPを現場で書いたことがないので、偏見になるかもしれませんが、PHPを書いて強く思ったことは、動的型付けなので、Javaと比べてスピーディーに開発することができるということです（僕の場合）。

大規模なサービスを複数人で作るときにJavaはとても優れている言語ですが、1KLOC程度であれば、動的型付けの言語でサクッ書き上げる方がいいんじゃないかと思います。独りで何かサービスを作ろうと考えている方はPHP+Javascriptでの開発をオススメします。

サーバ側を設計（Rest）するときは、このページを何度も読み勉強させていただきました。本当にありがとうございます...:bow_tone2:

[RESTfulとは
](https://www.slideshare.net/unsolublesugar/res-tful)

PHP最高です。

# **スケジュール**
以下のようなスケジュールで進めていきました。

* **構想**
* **設計**
* **モック作成**
* **コーディング**
* **テスト**
* **バグ修正**
* **ランディングページ作成、利用規約作成、GoogleAnalytics勉強**
* **リリース**

11月時点では3ヶ月でリリースする予定でしたが、不具合や、出来上がったものが想像以上にダメだったので、作り直したりしていると1ヶ月遅延しました。モチベーションが維持できず、中だるみがあったのも、遅れた要因のひとつです。


# **なぜ作ろうと思ったのか？**
## **ユーザからの要望**
去年の2月に[**HATARACLOCK**](http://tech-portfolio.org/)というLINEBotをリリースして、
ありがたいことに1年間でユーザ数も増えていきました。

利用者からTwitterのダイレクトメッセージで「勤務表作りたい」「新しいレコードを追加したい」「勤務時間の編集がわかりにくい」等の要望を複数いただきました。

LINEのタイムライン上でできることには、限界があったためそれ以外の機能はWeb上で開発しようと思い、今回のサービスを作りました。

## **ゼロからサービスを作ったことがなかった**
これまでエンジニアとして働いてきて、新機能の追加や、リプレイス開発はありましたが、ゼロからサービスを作ったことがありませんでした。サーバもDBも使う方法は知っていますが、自分で構築することがなかったので、ゼロからやるというところにチャレンジしてみたかったというのがあります。

# **開発中に考えていたこと**
## **追われることがない**
一人開発って楽しいですよね。仕事と違って期限に追われることもないし、自分の好きな言語で書けるし、ミスしても怒られないし、サボりたいときはサボれるし、書きたいときはずーーーっと書けるし。「やっぱりプログラムを書くのは楽しい」ということを再確認することができました。

## **モチベーションの維持問題**
一番苦労したのは、モチベーションの維持です。作り始めて１ヶ月はワクワクしながら開発が進むのですが、一回でもモチベーションが落ちてしまうと、上がってくるまでに時間がかかりました。チーム開発だとPMやPLが士気を高めてくれたり、仲間がいたりして、自分自身のモチベーションも維持しやすいですが、一人開発はそうもいきません。

途中からモチベーションに頼るのをやめて、平日の朝7時30分〜9時30分の2時間はとりあえずパソコンを開いていました。2時間Twitter見ている日もありましたし、集中しすぎて仕事に遅れる日もありました。モチベーションや喜怒哀楽や体調を考えずに机に向かった時間を作れたのはよかったなと思います。

## **技術的な共有ができない**
一人開発だとどうしても、自分が持っている引き出しだけで進めてしまうので、詰まったときに時間を無駄にしてしまいました。技術共有のできる相手がいればもっと、スムーズに進めることができたと思います。

## **このサービスは失敗かもしれないという恐怖**
設計が終わってモックアップを作り終えて感じたこと。

【モックアップ - 勤務表】
<img width="1266" alt="スクリーンショット 2018-01-11 8.13.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/147291/a52105e8-de48-307b-f39c-0ea50c3e7410.png">

【モックアップ - 打刻】
<img width="1272" alt="スクリーンショット 2018-01-11 8.16.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/147291/61413cb5-71c8-d6ae-9b41-0704214ed0bf.png">

ものづくりをしていると、作っている最中に**『ヤバイ...これダメかもしれない...』**と、自分の作っているものが、とてつもなくつまらない気がしてしまう瞬間があります（絵を描いたりするときに、自分のイメージと、実際に描き上げた絵が乖離していて、紙を破りたくなる衝動みたいなやつ）。このモックを作った瞬間に僕は感じました。

ですが、大丈夫です。そのつまらないものも時間が経てば、どこがつまらないのかが見えてくるようになります。**「もっと格好いいサービスを作り上げるんだ！」**という気持ちを忘れずに、モックにバインドの処理をガシガシ書いてってください。

# **今後の展開**
OFFICE CLOCKは一般の方は完全無料のサービスなので、様々な方に使っていただいてブラッシュアップしていきたいと考えています。

現在は一般公開していますが、今後はこのサービスを企業向けにパッケージ化しようと考えています。管理者画面を作り勤怠表を全て出力できるようにしたり、企業独自の勤務表のフォーマットを作成できるようなサービスに作り変えていこうと考えています。

ぜひ一度使っていただけたらと思います。

OFFICECLOCK
https://officeclock.work/


## 2018/02/13 - 追記

2/12日〜13日にかけて、サービスが止まってしまう障害が発生していました。原因はプログラムのミスです。現在は復旧しており、通常に登録できる状態になっています。

Qiitaにて多くの反響をいただき、沢山の方々に登録していただいたにも関わらず、大変申し訳ありませんでした。