澤口楓斗

← 実績一覧

介護ストア ひいらぎ オンラインストア・記事公開システム

稼働中

介護ストアひいらぎのサイト。住宅改修や介護用品の記事がカードで並んでいる

依頼

このシステムは、自分から提案した。 家業の店なので運営の話も聞いていて、記事を出す場所と商品を売る場所を自分たちで持てるシステムを作らないか、と相談した。

提案したあと、何ができるようにするか(記事が書ける・商品が売れる)は店側から希望が出た。そこからどう使う形にするかは自分が決めた。Stripe の申し込みと設定も自分で進めた。

記事の執筆、商品の登録、注文への対応と発送は、それぞれ福祉住環境ひいらぎの社員が行っている。返品規定と価格もその人たちが決めている。

記事

見出し・本文・画像といったブロックを積み上げて記事を作成する編集画面を用意した。HTMLを書ける人でなくても公開できる。

  • 過去の記事を複製して書き換える、という実際の書き方に合わせた
  • 未公開の記事は署名付きURLで関係者だけが確認できる
  • 記事はカテゴリで整理し、商品と同じ一覧に並べて回遊させている

物販

1つの商品に色違いを登録でき、選ばれた色ごとにカートの行と数量の上限を分けている。買われた色は注文記録・管理画面・通知・Stripeの領収書まで一貫して残る。

決済は Stripe Checkout に委ねた。購入者の氏名と住所を自分のデータベースに持たないので、そこから漏れることがない。

注文の確定は Webhook の署名を検証したうえで受け取り、Discord へ流している。

管理画面

複数のメンバーが1人1アカウントで使う前提で作成した。

  • 権限による操作の出し分け、2段階認証(TOTP)、ログイン試行によるアカウントロック、ベーシック認証、操作の監査ログを入れている
  • 画像のアップロードは「拡張子の許可リスト → 中身の検証 → WebPへの再エンコード」というひとつの入口に集約した。受け取ったファイルをそのまま配信しない設計にした
  • 未発送の注文数と下書きの記事数をダッシュボードに集め、その場から該当画面へ移動できるようにした

アクセス計測とSEO

計測は外部サービスを使わず自前で実装した。Cookieを1つも発行しない。 ページ別の閲覧数とボタンの押下数を日次で集計している。

  • サイトマップ・robots.txt・商品ページの構造化データ(JSON-LD)を出力している
  • SNSで共有されたときのサムネイルは、保存済みのWebPからJPEGを動的に生成して返す
  • 店舗名・住所・配色・ロゴ・特定商取引法の表記はコードに埋め込まず、管理画面から変更できるようにした。文面の修正に開発者が要らない設計にした

運用

ConoHa VPS 上に Docker Compose(Caddy・Django/Gunicorn・PostgreSQL)で常駐させている。HTTPS証明書の取得と更新は Caddy が自動で行う。静的ファイルとアップロード画像は Caddy が直接返し、アプリケーションを経由させない。

DBのバックアップは手順を整えたうえで、取得したダンプを別のDBへ復元してテーブル構成を突き合わせるところまで確認した。 取れているつもりで復旧できない、という状態を避けるためである。

品質

自動テストと、受け入れ確認の手順書を用意している。手順書は本番へ反映する前に必ず実行する。

1人で作成していても後から判断の経緯を追えるよう、仕様上の判断・実装タスク・進捗・本番で起きた不具合への対応をリポジトリ内のドキュメントに記録し続けている。


現在も機能追加と保守を続けている。

写真

商品一覧。介護用品と車用マグネットが価格付きで並んでいる
記事も商品も、同じ管理画面から登録する。HTMLは書かなくてよい。
商品詳細。色を選んで数量を決め、カートに入れられる
商品詳細。色や数量といった選択肢は商品ごとに設定できる。