2018-12-04に更新

『THE BINGO』を開発・リリースするまでのTips

『THE BINGO』というサービスをリリースしました。
ビンゴ大会が超簡単に開催できる無料のサービスです。

img.png

サービスを作るとき、アイデア・設計、デザイン、実装、テスト、リリースと多くの工程があり、どの工程もとても重要且つ、とても大変です。また個人で開発する場合は、全てを一人で担当しなければなりません。

僕自身、THE BINGOは4つ目のサービスで、開発〜リリースまでの型みたいなものが出来てきました(お金になっているサービスはありますが、ヒットしたサービスはひとつもありません...悲)。この記事はTHE BINGOを作るまでの流れをまとめました。サービスを作りたいと思っている人、今まさにサービスを作っている人、そんな方々に少しでも役に立つようなTipsになればと思います。

アイデア・設計

なぜ『THE BINGO』を作ろうと思ったのか?

作った経緯などは、以下の個人のブログにまとめています↓↓

『楽しい』と思うから作る

概要だけ話すと、『ビンゴ大会って何でこんなにレガシーなんだ。自動化してくれ』と、強く思っていました。

おそらく、これを思っているのは自分だけではなく、ビンゴを準備している全ての人が感じていることで、その人たちが当日一般の人たちと同様に楽しめたら、もっとお酒いっぱい飲めるだろうなー。と思ったことが発端です。

どういうサービスか?

THE BINGOは、会員登録とかアプリのダウンロードなどをせずに、本当に簡単にビンゴ大会が開催できるWebサービスです。

ビンゴマシン(親)がビンゴカード(子)のURLをLINEやFacebookやTwitterなどで共有して、ユーザーはそのURLをクリックするだけでビンゴカードを作成することができます。

  • 親:ビンゴマシンにアクセスする
  • 親:ビンゴカードのURLをシェアする
  • 子:ビンゴカードのURLに各々アクセスする
  • 親:ビンゴを回す
  • 子:ビンゴを待つ → 自動で更新される

どういう技術を採用しているか?

THE BINGOには『ビンゴマシン』と『ビンゴカード』があります。
『ビンゴマシン』の方はVue.jsで既に作っていました。

【ビンゴマシン】
microsoft-surfacebook-front.png

『ビンゴカード』の方の実装をどうしようかと悩んでいました...。
『ビンゴマシン』で『STOP』したイベントがトリガーになり『ビンゴカード』に出た目を通知する実装が必要でした。色々と調べた結果以下の方法だと、実装できそうだということがわかりました。

  • ① WebSocket
  • ② ポーリング

実装は可能ですが僕が使っているサーバーが弱小なこともあり、どちらもサーバーのリソースを浪費してしまう可能性がありました。そのためなるべくサーバーには負荷をかけずに実装したいという思いがありました。

その問題を解決する術がFirebaseです。

設計.jpg

FirebaseのRealtime Databaseを使うと、データが更新されたとき(ビンゴマシンの『STOP』が押され、目が出た時)に同じデータベースを参照している端末に対して、イベントを起こすことができます(弱小サーバーに負荷がかからない🙌)。

    // ** Initialize Firebase **
    var config = {
        apiKey: "hoge-piyo",
        authDomain: "hoge-piyo.firebaseapp.com",
        databaseURL: "https://hoge-piyo.firebaseio.com",
        projectId: "hoge-piyo",
        storageBucket: "",
        messagingSenderId: "1234567890"
    };
    firebase.initializeApp(config);

    var db = firebase.database();
    var bingoConn = db.ref("/bingo");

    // ** データベースが変更された時の処理 **
    bingoConn.on("value", function (data) {
        console.log(data.val());  // → array[ "1" ]
    });

    array = [];
    array.push("1");

    // ** arrayをFirebaseのデータベースに登録 **
    bingoConn.set({ array });

Firebase側で事前に設定しておく項目もありますが、フロント側の実装はとてもシンプルで簡単です。

デザイン

『THE BINGO』のデザイン・UI(HTML・CSS)は全てSemanticUIというCSSフレームワークを使って作られています。

【SemanticUI Button Sample】
スクリーンショット 2018-07-19 7.51.56.png

SemanticUI超良いです◎ ボタン、ラベル、アイコン、イメージカード、ナビゲーター...etc 豊富な種類からサイズや幅、色などを簡単に自由にカスタマイズすることができます。グリット機能もかなり優秀で、画面幅に合わせてフレームワーク側でレイアウトをタイムリーに調整してくれます。

エンジニアが個人でサービスを作るときデザインやUIって後回しになりがちですが、僕はかなり重要だと思っています。僕自身エンジニアなのでデザインの領域は得意ではありませんが、CSSフレームワークに完全に乗っかることで、エンジニアがそれなりのものを工数をかけずに作り上げることができます。

以前はBootStrapを使ってデザインをしていたのですが、BootStrapぽっくなってしまうのが嫌で、今はSemanticUIを使っています。

デメリットが一つあるとすればIE9より前のバージョンは使えません(HTML5、CSS3を使用しているため)。個人的意見を言うとIE9はマイクロソフトのサポートも終了しているため、無視していいと思っています。試していませんがSemanticUIの公式ドキュメントではIE10まではサポートしていると書いています。(IE11は使えました◎)

実装・テスト

フロントエンドはVue.jsで開発をしています。
特に難しいことはしていません...。こだわりとしては『ビンゴカードは一人一枚』という、本来の仕様をなるべく再現しています。(1ブラウザで1枚のビンゴカードが生成されます)

【ビンゴカード】
iphoneserosegold_portrait.png

一応ローカルで動くビンゴマシンのソースは公開しています。
※Firebaseとの通信はしていません
Github - vue-bingo_machine

リリース

実装とテストが終わったら、リリース作業です。
この作業が一番手間で時間がかかります。以下の手順で作業を進めます。

  1. ドメイン取得
  2. SSL証明書取得
  3. Apacheの設定
  4. 利用規約・プライバシーポリシーの作成
  5. TOPページ・ランディングページの作成
  6. リリース

1.ドメイン取得

僕はさくらサーバーのVPSを使っているので、ドメインもさくらのサービスを利用しました。お名前.comなど類似のサービスはありますが、好きなところでドメインを取得します(お金かかります)

さくらインターネット - ドメイン取得

『the-bingo.jp』というドメインを取得しました。

2.SSL証明書 取得

PCとサーバ間の通信を暗号化するために必要な技術です(HTTPS)。これをしていないとブラウザで『保護されていない通信』的なことが表示されるので、マストだと思います(お金かかります)。

初めてやるとかなり面倒くさい作業です...。僕はいつも以下の記事を参考にさせてもらっています🙇

さくらVPSにSSL証明書を導入しHTTPS通信の構築

これを設定すると → https://the-bingo.jpで暗号化した通信ができるようになります。

3.Apacheの設定

具体的には以下の設定をしています。
・ファイルorディレクトリが存在しない(404)ときホームにリダイレクト
.htmlの拡張子がなくてもページが表示される
httpでリクエストが来たときhttpsにリダイレクトする

上記の設定をするためにルートに.htaccessファイルを作成し、以下を記述します。

# .htaccess
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.html -f
RewriteRule ^(.*)$ $1.html

#↑最終行は必ず改行(らしい)

4.利用規約・プライバシーポリシーの作成

色んなサービスの利用規約などを見て、参考にします。

5.TOPページ・ランディングページの作成

色んなサービスのWebサイトを見て、参考にします。

6.リリース

Twitter、ブログなどを使って告知します!

スクリーンショット 2018-07-19 9.13.46.png

7.打ち上げ

リリースと打ち上げはセットなので、これはだけは絶対に外せません。
30歳前の独身男性が、金曜日の仕事終わりに吉野家で瓶ビールと牛丼を注文して一人で打ち上げをしました。
(文章を読むだけで切ない...。)

サービスのあれこれ

開発期間

  • 2週間
    ※アイデアからリリースまで

かかっている金額

項目 金額 備考
ドメイン 3,909円/年
SSL 972円/年
さくらVPS 1,706円/月 他のサービスも乗っている
Firebase 2,800 円/月 Flameプラン:来月は無料プランに切り替える

お金については結構かかってますね...。
この金額くらいは回収できるようなサービスにしたい(広告入れずに)...。

まとめ

個人でユニークなサービスを開発・運営して収益を上げている、オランダ出身のPieter Levels氏(連続していろんなプロダクトを作る人)が以下のような話をしています。

本当にひどいアイデアもよくありますが、そうなっている理由は、問題に集中していないからです。 新しいフードデリバリーアプリや、新しいファッションデリバリーアプリを作ろうという話を、よく聞きます。 けれど、それはあなたが本当に解決したいと思う問題ではありません。

私のやり方は、自分の生活をよく見ること、そして自分が本当に困っていることが何かを考えることです。 日常生活の中で、自分が何かできることや、あるいは欠けている情報など、何でもいいのです。

リリースしてから1週間が経ちました。バズったときのことを考えてFirebaseのFlameプラン(月額25ドル)にしたのですが、全くバズっていませんし、全く流行っておりません...悲。

利用者はまだ多くありませんが、少なくとも僕自身が抱いていた課題は解決できるようにTHE BINGOは開発しました。これは仮説ですが『自分が本当に困っていること』というのは、同じように困っている人がいると思うんです。そういう人たちに刺さるようなサービスを、これからも作っていきたいと思っています。

そして、できれば保守運用していくために、お金をいただけるような仕組みを構築したいと思っています。
これは僕だけではなく、多くの個人開発者の課題ですね。

とか、真面目な話をしてみたんですが、THE BINGOを使って超簡単にその場でビンゴ大会が開催され、会場が盛り上がっているのを想像すると、やっぱり嬉しいですよね。開発者としての一番のモチベーションはユーザーの反応だと僕は思います。

とても小さいサービスですが、ビンゴ大会を主催する機会があるときはぜひ使ってみてください。

Originally published at the-bingo.jp

フジワラ@CLOCK

Webのお仕事 /ランナー / キーボードを叩くだけのお仕事をしています。何とかCLOCKとかいうサービスを複数作っています。大分生・東京住 → https://t.co/sY02fsMtWr

Crieitはαバージョンで開発中です。進捗は公式Twitterアカウントをフォローして確認してください。 興味がある方は是非記事の投稿もお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか
関連記事

コメント