Global Nora Times

ブログ

  • PHPフルスクラッチで開発したタイパンツ専門のECサイト「Sabai」

    PHPフルスクラッチで開発したタイパンツ専門のECサイト「Sabai」

    タイパンツECサイト「Sabai」の概要

    できるだけ多くの方に、手頃な価格でタイパンツを楽しんでもらうために、タイパンツ専門のEC販売サイトを作りました。

     

    Global-nora.com/portfolio/sabai

     

    管理人がタイ現地で仕入れたタイパンツをオンラインで出品します。

     

    タイパンツECサイト「Sabai」を作った目的

    実務に近い形でWEBサービスを作ることを学ぶために作成しました。各機能の処理フローをきちんと理解するため、フルスクラッチでの開発に徹しました。

    また、実際にタイパンツの販売を通じて収益を得ることも想定しています。

     

    開発環境

    • OS：macOS Sequoia
    • 言語：HTML5、CSS3、jQuery 3.7、PHP 8.3
    • Webサーバー：Apache
    • データベース：MySQL 8.0
    • エディタ：VS Code
    • その他：Git、GitHub

     

    ビジネス要件

    既存のショッピングサイトでは、大手ECサイトが多数を占めており、タイパンツに特化したECサイトは、ほとんどありません。

    また、存在してもBaseなどを通じた小規模な販売が中心となっています。

    Googleの検索上位には、タイパンツ特化型のECサイトはありますが、現地でよく見かけるデザインとは違っており、本場感がありません。

    値段についても現地の3倍から5倍以上の値段で販売されており、割高感が目立ちます。

    そこで本プロジェクトでは、「現地らしさ」「手頃さ」「シンプルな販売体験」を重視した構成にすることで、本場同様のタイパンツをサクッと買えるECサイトを目指します。

     

    機能の洗い出し

    ユーザー関連、商品関連、決済関連に分けた上で、以下のように機能を洗い出しました。

     

    ユーザー関連

    • 会員登録機能
    • ログイン機能
    • ログアウト機能
    • 退会機能
    • プロフィール登録機能
    • プロフィール編集機能
    • パスワード変更機能
    • パスワードリマインダー機能

    商品関連

    • 商品一覧表示機能
    • 商品詳細表示機能
    • 商品検索機能
    • 商品登録機能（管理者のみ）
    • 商品編集機能（管理者のみ）

    決済関連

    • ショッピングカート内追加機能
    • 商品購入機能
    • 購入履歴一覧機能

    その他

    • お気に入り登録機能
    • お気に入り一覧表示機能

     

    画面構成

    シンプルな販売体験を意識して、非常にシンプルでわかりやすい画面構成にしました。

    画面のデザインについては、スケッチブックに画面モックを手書きで作成しました。

    作成した画面は、以下のとおりです。

     

    認証関連

    • 新規会員登録画面
    • ログイン画面
    • 認証メール送信画面
    • 認証キー入力画面

    マイページ関連

    • 会員登録情報画面
    • 会員情報変更画面
    • パスワード変更画面
    • 注文履歴一覧画面
    • 退会手続き画面

    商品関連

    • アイテム一覧画面
    • 商品詳細画面
    • ショッピングカート画面
    • お気に入り商品一覧画面
    • 商品登録画面（管理者のみ）

     

    なお、画面の色については、シンプルな配色を意識して、ベースカラーに「ホワイト」、メインカラーに「グレー」、アクセントカラーに「ネイビー」を選択することに決めました。

     

    テーブル設計

    必要な情報を割り出して、DBのテーブルを作成しました。

    今回は決済機能をつけていないため、「ユーザー」「管理者」「商品」の3つを、必要な情報として割り出しました。

    また、ログインしたユーザーが管理者かどうかを識別するために、usersテーブルにuserカラムを入れて、判別することにしました。

     

    usersテーブル

    productテーブル

    order_historyテーブル

    shopping_cartテーブル

    likeテーブル

     

    なお、productテーブルのpriceカラムをvarchar型で指定していましたが、値段を絞り込む際に、検索が機能しないことがわかりました。

    そのため、あとからカラムタイプをint型に変更しています。

     

    クラス設計

    フレームワークを使用していないため、今回はスキップしました。

     

    実装

    画面モックを参考に、HTML5とCSS3で画面をコーディングしていきました。

     

    そして、画面が完成したのち、各機能をPHPで順番に実装していきました。

    実装していて苦労した点としては、画像処理です。

    特に、画像処理は通常のバリデーションチェックと違って、ファイルサイズやファイルタイプについても確認する必要があり、実装が複雑で大変でした。

    また、画像パスの重複を防ぐためにハッシュ化したり、ファイルを保存するために、一時フォルダからの移動が必要である点なども勉強になりました。

    一方で、工夫した点としては、コメントアウトを徹底し、どこに何が書いてるのか見やすくしたことです。

    また、保守性を高めるために、functionで機能をひとつずつ切り分けて、あとから修正しやすくしたことです。

    コードの中身については、GitHubに上げています。

    https://github.com/kunio3/sabai

     

    なお、セキュリティ対策として行った、パスワードの暗号化とサニタイズについては今後も忘れないようにしていきたいです。

     

    テスト

    システムテストとして、手動で機能をひとつずつ確認した。

    テストした項目は、以下のとおりです。

     

    1. ユーザー関連機能
      ーユーザー登録/新規登録フォームに必要事項を入力し、送信　⚪︎

ーログイン/登録済みアカウントでログイン ⚪︎

ーログアウト/ログアウトボタンをクリック ⚪︎

ー退会/アカウント退会操作　⚪︎

ープロフィール編集/名前・メール等を更新して保存 ⚪︎

ーパスワード変更/新しいパスワードに変更しメールを送信　⚪︎

    2. 商品関連機能

      ー商品登録/新商品の登録　⚪︎

ー商品編集/既存商品の編集　⚪︎

ー商品一覧表示/アイテム一覧ページを開く　⚪︎

ーページネーション/ページボタンを押下 ⚪︎

ー商品詳細表示/商品をクリックして詳細画面を表示　⚪︎

ーショッピングカート/商品をカートに追加　⚪︎

ー注文履歴表示/購入した商品を表示 ⚪︎

ー商品検索/該当商品を選択して商品検索を実行　⚪︎

ーお気に入り登録/ハートアイコンを押下　⚪︎

    3. 認証・パスワード関連

      ー認証コード送信/認証メールの送信　⚪︎

ー認証キーの認証/認証キーの入力　⚪︎

ーパスワード再発行/メールアドレスと再発行パスワードを入力 ⚪︎

    上から順番に確認していき、機能していないところは⚪︎が付くまで修正しました。

    テストを行ったことで、ページネーションが上手く表示されない箇所があることや、商品検索で値段の高い順・安い順がきちんと表示されない箇所があることに、気付くことができました。

     

    完成

    以上で、タイパンツECサイト「Sabai」の完成です。

    次回からはきちんと時間を測りながら開発を進めていきたいと思います。

    最後までお読みいただきありがとうございました！