初めに

他業種からてエンジニアの転職をして、約1年たったものです。（その前にバイトもしたので、原則的には2年目ですね。）
主にRuby on RailsとPythonを触っています。
今回はついに！　私が個人開発をしたWeb番号札のデプロイをすることができたので、そのお話をしてみたいと思います。

うる覚えですが、ウクライナの戦争で学生エンジニアが避難民のための避難場の情報がわかるサービスを提供したようなニュースを見て、自分のものづくりで人を助けることができるようにしたいと思って、仕事以外でも練習や学習のために色々作ってみようと頑張っています。

でも、最後まで作り切るのができず、1年経った今、やっとデプロイできましたので本当に感激です！

下記が、デプロイしたWEB番号ふだになります。

Githubコードも公開しています。

最初のうまくいかなかったサービス

最初の最初はポートフォリオになりますが、作っている最中に転職が決まったので、やめませいた。8割完成でしたね。
こちらはNext.js（Typescript）とRailsとDocker環境で何とか動くものを作りましたが、仕事に慣れるのが優先だと思って、そのまま放置ですね。

公式の初開発はReactとChat GPTだけで作りました。
Chat GPTが優秀すぎるから、自分でコーディングはしないで、基本GPT任せで作りました。
読みやすいコードなんかは気にせずGPTの解答のみで何とか完成しましたが、ちょっとした修正をしようとしても、自分が書いてないので、把握ができず、放置しました。
あ、Vercelで自動デプロイっぽいものはできなので、一応これも完成とデプロイはできましたね。

2回目

次はNext.js13とRailsとDocker環境で作りました。
Next.jsが13になって書き方を勉強しながら、ログイン周りとかしっかりしようとしたらDockerのエラーなどで時間の無駄が多くて、6割完成のところで、諦めたというか、、放置になりました。

ここで、習ったのが、続けるためには慣れている技術を使いつつ、1つだけ新しい技術を入れることですね。
欲張って新しい言語や環境にしてしまうと、学習やデバックに時間がかかりすぎて、サービスを作るためか、学習をするためかがわからなくなるし、時間もかかりすぎて、自然に手放してしまうというのが私の結論です。

それで今回は実務で使うRailsとHeroku、新しい技術としてTailwindcssを採用しました。
そして、サービスも簡単なものにして、完成すること集中するようにしました。

背景

Web番号札は馴染みのある、行列ができる店や病院に行くと順番待ちのための機能をWebにサービスにしたものです。
日常生活の不便さをサービスにしてみるという単純な考えと、なんか作りやすそうだと思い、作り始めました。

サービス説明

ユーザー側

番号札生成

QRコードで、番号札生成画面を表示されて、生成ボタンを押すことで、番号札の生成ができます。
何組が待っているのかと店名が表示させました。

ポイント

イタズラ防止
イタズラ防止に関しては、URLさえわかれば、生成ボタンを連打することで、店やお客に被害を与えることができると思い、sessionを使って、1日10回以上の生成をすると、それ以上生成ができないようにしました。
(sessionの保存ができないブラウザに関しては、イタズラが可能になりますが、、)

sessionが使える環境下を試すコードになります。

def check_session_availability
    if session[:session_available].nil?
      begin
        session[:session_available] = true
        @session_available = true
      rescue ActionDispatch::Cookies::CookieOverflow
        @session_available = false
        session.delete(:session_available)
      end
    else
      @session_available = session[:session_available]
    end
  end

番号札画面

何番かと、自分の前の人が何組かがわかるようにしました。
Reloadボタンを入れて、後何組かが簡単に更新できるようにしました。

ポイント

URL
URLですが、番号札のIDなどをURLにそのまま表示すると、他人の番号札を表示することができるのでuuidを使って、推測できないようにしました。
とにかくユーザーが見る画面のURLはuuidを使いました。
/users/358b61a7-3898-4ee0-a35d-b53ae0d7607e/bango_hudas/8e2da725-8bab-4548-a19e-955fd3bbad89

店側

ログイン

ログインはお客さんの情報をあまり持ちたくないのと、便利さのために、Googleログインのみにしました。
ログインしていないと、ユーザー側の画面以外は、全部ログインが必要なので、ログイン画面に遷移するようにしました。

管理画面

番号札管理

一番コアなところなので、結構悩んだところですね。
待機中の番号札から、案内をした、順番だったけど不在だった、キャンセルした、この3つの状況を考えて、作りました。

案内済み、不在、キャンセルは、待機中の列に戻すことができるようにしました。

ポイント

Resetボタンを入れて、開店時に、古い番号札新たに番号札の受付ができるようにしました。

案内済み、不在、キャンセル、resetそれぞれにフラグを立てるように設計をしました。

ActiveRecord::Schema[7.1].define(version: 2024_05_01_121151) do
  create_table "bango_hudas", force: :cascade do |t|
    t.integer "bango", null: false
    t.boolean "is_no_show", default: false
    t.boolean "is_done", default: false
    t.boolean "is_canceled", default: false
    t.integer "user_id", null: false
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.boolean "is_showed", default: false
    t.boolean "is_reseted", default: false
    t.string "uuid"
    t.index ["user_id"], name: "index_bango_hudas_on_user_id"
    t.index ["uuid"], name: "index_bango_hudas_on_uuid", unique: true
  end

ユーザー情報修正

店名の変更しかないですが、店名の入力をしないと、番号札管理ができないようにしましたので、入力必須です。

簡単ですが、入力は必須にしました。

QRコード画面

QRコードは大きくして、アイパッドの画面に表示するか、印刷して使われるようにしました。

番号札を作る

こちらは、店側でも、お客と同じ環境が試せるように、ボタンを入れました。
（UXがちょっとはよくなるかと思い、、）

タスク管理

タスク管理は今の会社と同じような感じで行いました。（アジャイル開発）
issueを切って、PR作成時に紐付けて、一緒にCloseしました。
簡単なサービスでもタスク管理をすべき理由としては、

毎日実装ができないので、タスク管理することで、何をすべきかがわかる
タスクの優先度が決めやすい
思いついた要件などを簡単にまとめて見える化ができる
なくなるタスクを見てモチベーションが上がる

適当に書いているものですが、公開しています。

習ったこと

学びが多い

サービスを作るたびに感じることが、仕事以外にコーディングをすることは新たな学びいが多いということですね。

仕事で使うスキルを深めることができる
仕事以外で使うスキルを試すことができる
とにかく自由（自由だから色々試したり壊したりできる！）

やることが多い

一人で企画、要件定義、タスクを捌いて実装をしてわかったのが、
簡単なサービスでも考慮すべきものがとても多い。
一人で全部やるというのはやはり大変ですね。
あ、これもやらないといけない、これも、あれも、になってどんどんタスクが増えていきました。
でも優先度を決めて、先にやるべきものをやることで割と効率高く実装ができたので、本業のタスク管理にも役立ったと思います。

自分に足りない知識

本業では既に作られているサービスに参画するので、セキュリティー関連機能を一から作ることがほぼないですね。
なので、今回はセキュリティー関連の方が不安で、Googleログインのみで、できるだけお客情報を持たないようにしました。
調査してuuidを活用したのも一ついい気づきでよかったです。

GPTの活用方法

デザイン知識がないので、デザインの勉強とかもしましたが、GPTと対話しながら、作り上げるフロント側は奇跡のようでした。
バックエンド側でも自信がないところはアドバイスを求めながら実装をしました。

次のステップ

テスト

当初はテストもいらないくらい簡単だと思いましたが、テストの作成もして品質をあげたいと思っています。

CICD

テストを含め、Herokuのデプロイも自動化したいので、Github Actionを投入してCICDを自動化します。

セキュリティー

ログインまわりなどのセキュリティーを強化したいと思います。
やっておくことで、次のサービスを作る時にはより高品質のものが作れるようにしたいですね。

サービス提供

コードを公開しているので、サービスの提供はしない予定です。

最後に

2日おきで、2-3時間かけて作りました。全部で3ヶ月くらいかかりましたね。
すごく簡単だと思って作り始めたのが、こんな時間かかるんだ、、と
個人開発は簡単なものでないことを実感しました。

でも、このサービスを作った経験でかなり強くなったと思いますので、冒頭で言ったように、
自分のものづくりで社会貢献ができるように今後もものづくりを頑張っていきたいと思います。

最後まで読んでいただき、ありがとうございました。

WEB番号札

Githubコード

Xアカウント