個人ウェブサービス開発開始から3ヶ月で月間5万PVを達成した話〜開発から公開まで〜

この記事は GMOアドマーケティング Advent Calendar 2021 21日目の記事です。

はじめに

GMOアドマーケティングの吉岡です。
皆様は趣味で開発することはありますでしょうか？
エンジニアであれば面白いサービスを開発して世に公開したいという方も多いと思いますし、非エンジニアでも公開までの流れは気になると思います。
今回は自分の興味あるテーマでウェブサービスを公開した結果、ありがたいことに多くのアクセスがあったので、開発構想から公開までの簡単な流れを紹介したいと思います。

開発構想

まずはどんなサービスを作るかを決めていきます。
今回は新型コロナウィルスワクチンの職域摂取が始まるというタイミングでワクチンの仕組みを調べた結果、自分の考えと政府を含めた大多数の人の考えに大きな乖離があったため、わかりやすいウェブサイトを作ろうと考えたことがきっかけです。
開発するテーマを選定する上で重要だと思うものは以下の3点です。

興味あること
多くの人が同じ問題で困っていること
開発するイメージが湧いていること

興味あること

興味がないと続けられないと思うので重要項目です。作りたいものや興味あることがないという人は、気になるニュースを深く調べたり、いろいろなことにチャレンジしてみるといいと思います。

多くの人が同じ問題で困っていること

こちらはPVを重視する上では必要だと思います。
興味あるテーマのウェブサイトを作るだけでもいいと思いますが、多くの人が同じ問題で困っている場合、その人たちにサービスを使ってもらえます。
本当にみんなが困っている場合、メディアに取り上げてくれることも期待できます。
自分の場合はメディアに取り上げられたときに大きくPVが伸びました。

開発するイメージが湧いていること

構想だけで作ることができないのであれば意味がありません。
開発できなかったり、イメージができない場合は経験不足の可能性が高いので、まずはスキルを高めていきましょう。

ウェブ開発に必要なスキル

個人でウェブサービスを公開するにはどんなスキルが必要なのでしょうか？
今回使っている技術を列挙してみます。
自分は物理サーバーを使っていますが、クラウドにするともう少し敷居が低くなると思います。

Webサービスバックエンド
- Ruby on Rails
データベース
- mariaDB
デザイン
- Bootstrap
ドメイン
- FC2
- お名前.com
  - DNS設定
サーバー構築
- 物理サーバー
  - Ubuntu
  - 固定IP
  - ルーター設定
サーバー構成管理
- ansible
ウェブサーバー
- nginx
SSL
- Let’s Encrypt

開発〜公開手順

ローカル開発

初心者でまずは作ってみたいという方は、データベースを設定してRuby on Railsをローカルで動かしてみるといいと思います。
今回はユーザーからの登録がないため、データベースの内容を表示するだけとなっています。
管理者ページからPDFやCSVをインポートする機能はありますが、必ずしも必須ではありません。

デザイン

ローカルで開発しながらデザインを調整していきます。BootstrapなどのデザインフレームワークでHTMLを構築していきますが、はじめはテンプレートをベースにすると開発しやすいと思います。 https://getbootstrap.jp/docs/5.0/getting-started/introduction/

ドメイン

ローカルでの開発で満足いくものができたら次はサービス公開に向けて準備します。
テーマと公開予定が決まっていれば、早めにドメインを取得することをお勧めします。
普段はFC2でドメインを管理しているのですが、jpドメインのDNS設定に対応していなかったので、おとなしくお名前.comなどを使っておけばよかったです。
https://www.onamae.com/
ドメイン取得後、すぐに移管ができないみたいだったのでDNSサーバーを立てようとも考えましたが、フリーのClouDNSというサービスでDNSを設定することができました。
フリーで運営されているのは本当にありがたいです。

サーバー構築

まずは物理サーバーを購入する必要があります。 OSはUbuntuをインストールして、24時間動作するサーバーを作ります。
外部からサーバーにリクエストする必要があるので、プロバイダで固定IPサービスを契約します。通常の契約ではIPアドレスが定期的に変わってしまうため安定した固定IPを契約しますが、DinamicDNSを使う方法もあります。
自分は役割ごとに仮想マシンを作成してansibleで管理していますが、はじめは物理サーバーにRailsの動くアプリサーバーやnginx、DBやSSLの設定を同居させても良いと思います。
固定IPとDNSを紐付け、ルーターにアクセスが来たらウェブサーバー(nginx)に飛ばす設定をすれば一通り完了です。

SSL

最近のWebサービスはSSLが必須となっており、対応していない場合、情報を盗み取ろうとする危険なサイトですという表示が出てしまいます。
このような警告が出てしまうと間違いなくユーザーは離脱するので、SSL対応する必要があります。
Let’s EncryptというサービスでSSL証明書が無料で使えるので、こちらを設定します。
nginxに証明書の場所を指定することで、ウェブサーバーにアクセスが来たときにSSLで暗号化した情報を表示することができるようになります。

成果物

前回の記事で公開しましたが、今回作成したサービスです。
ワクチン副反応データベース SideEffect.jp

Google Analytics

まとめ

開発構想から公開までの簡単な流れをまとめましたが、いかがでしたでしょうか？
PVも重要だと思いますが、まずはサービスを公開してみることが重要だと思います。
次回はアクセスが増えてきたときの運用編を執筆したいと思います。
今回の記事を参考に、オリジナルのサービスが公開されると嬉しいです。

明日は@fiemonさんによる「サクッとApacheのerrorlogをJSON化してBigQueryにLoadします」に関しての記事です。
引き続き、GMOアドマーケティング Advent Calendar 2021 をお楽しみください！

■エンジニア採用ページ～福利厚生や各種制度のご案内はこちら～
https://note.gmo-ap.jp/n/n02cbeb6edb0d

■noteページ～ブログや採用、イベント情報を公開中！～
https://note.gmo-ap.jp/

S.Y