GitHub:

https://github.com/yaokai4/Shopping

開発した動機

開智国際大学は800人以上の学生を抱える小さな社会のような存在です。学生たちは生活費や学業費に余裕がなく、不要になった物品を売却したり、中古品を購入することで資金の負担を軽減したいという需要がありました。特に、卒業生と新入生の間では、教科書や生活用品の譲渡がスムーズに行えるプラットフォームの必要性が高いと感じました。

また、一般的な中古取引とは異なり、同じ大学に所属するという距離の近さが、信用性と利便性を高める点に着目しました。さらに、対面取引により商品の状態を確認できる仕組みが、取引の効率や安全性を向上させ、学生や教職員に大きな価値を提供できると考えました。このような背景から、開智国際大学専用の中古ショッピングサイトの開発を行いました。

ソフトウェアの機能説明

本システムは主に中古品の取引を目的としたプラットフォームであり、開智国際大学の学生および教職員を主な利用者としています。各学生はアカウントを登録することで、購入者または販売者として利用することができます。登録が完了した後、利用者はキャンパスを選択し、販売する商品を追加することが可能です。購入希望者は、システム内のチャット機能を通じて販売者と連絡を取り、対面で取引を行うか、商品の郵送を選択することができます。

販売者は自身が登録した商品の内容を編集することが可能であり、購入者は商品の評価やコレクション履歴を閲覧することができます。また、管理者は商品情報の審査および管理、さらにサイト内でのお知らせの掲載といった機能を利用することができます。

商品検索および分類機能も備わっており、これらの操作に関するプレゼンテーション動画や導入チュートリアルも用意されていますので、ご参考いただけます。ただし、現在のバージョンではオンライン決済機能をサポートしておらず、PayPayやクレジットカードなどの支払いインターフェースを導入するには法人認証が必要となります。現時点では、現金での対面取引や、その他の電子決済方法を利用することを推奨しています。将来的にシステムが正式にオンライン運用される際には、オンライン決済機能の追加も検討しております。

システム構造

  • バックエンドアーキテクチャ
  • Spring Boot + Spring Framework + MyBatis + MySQL + Maven
  • フロントエンドアーキテクチャ
  • HTML5 + CSS + JavaScript + LayUI + Vue

 

開発環境(必要なインストール項目)

  • JDK(バージョン 1.8 以上、システム環境変数の設定が必要)
  • MySQL(バージョン 5.7 以上)
  • Navicat for MySQL(データベースの可視化管理ツール)
  • Maven(プロジェクトの依存関係管理ツール)
  • Lombok プラグイン(エンティティクラスの簡略化をサポート)
  • 開発ツール:IntelliJ IDEA

 

技術概要

Kaichi SHOPPINGは開智国際大学の学生および教職員向けに開発された中古品取引プラットフォームであり、主にJava Web技術をベースに構築されています。以下に技術的なポイントをまとめます。

フロントエンド技術

ウェブサイトのフロントエンドは主にHTML5とJavaScriptを使用して開発され、LayUIとVueというWebフロントエンドフレームワークを採用しています。これにより、インターフェースの設計とユーザー体験を向上させています。

バックエンド技術

バックエンドでは、Spring Bootフレームワークを中核に、Spring FrameworkおよびMyBatisを組み合わせて使用しています。Spring Bootは、Springアプリケーションのセットアップおよび開発プロセスを簡素化するために使用され、標準化された設定により効率的な開発を実現します。

Mavenは、依存関係管理やビルドプロセスの効率化をサポートするためのツールであり、パッケージングやデバッグ用のプラグインも提供しています。

データベース技術

MySQLデータベースを採用し、商品情報およびユーザーデータを安全に管理します。データは暗号化され、不正アクセスから保護されています。

UIおよびチャットシステム

管理者用バックグラウンドのUIはLayUIをベースに開発されており、システム内のチャット機能もLayUIを活用して実装されています。

 

苦労した点と対応策

課題1: システム全体のパフォーマンス最適化

  • 問題: 商品データが増加するにつれ、検索速度やページロード速度が低下。
  • 対応策:
    • Redisキャッシュを導入し、データベースへの負担を軽減。特に検索結果やよく利用される商品情報をキャッシュすることで、レスポンスタイムを500ms以下に抑えることに成功。
    • MySQLのクエリを最適化し、必要なインデックスを適切に設定することで、データ取得の効率を向上。

課題2: セキュリティの強化

  • 問題: ユーザー登録や商品購入時のセキュリティ脆弱性が懸念される。特に、SQLインジェクションや不正アクセスのリスクが顕在化。
  • 対応策:
    • Spring Securityを用いて、認証および認可機能を実装。特に、トークンベースの認証方式を採用し、安全なセッション管理を実現。
    • データベースクエリにはすべてプリペアードステートメントを採用し、SQLインジェクションを防止。
    • HTTPS通信を導入し、データ転送時のセキュリティを向上。

課題3: モバイルユーザー体験の最適化

  • 問題: プラットフォーム利用者の多くがスマートフォンを利用しており、レスポンシブデザインが十分に機能していないと指摘された。特に、画面の一部要素がモバイル端末で崩れる問題が発生。
  • 対応策:
    • CSSフレームワーク(LayUI)に加えて、メディアクエリを活用したカスタムレスポンシブデザインを導入。
    • モバイルファーストの設計を採用し、すべてのページがスマートフォン画面サイズに最適化されるよう調整。
    • ユーザーからのフィードバックを収集し、UIを継続的に改善。結果として、スマートフォンでの直帰率を20%以上削減。

 

中古ショッピングサイトの開発において、いくつかの課題がありました。

  1. 信用問題の解決
    中古取引では、商品が実際に説明通りであるか、買い手と売り手の信頼性に疑問が生じることが多いです。特に、匿名性が高いオンライン取引ではトラブルのリスクが増加します。
  2. 利便性の向上
    他の一般的な中古取引プラットフォームと比較して、大学特有のニーズを満たしながら、簡単かつ効率的に取引を行える仕組みを構築する必要がありました。
  3. 物流コストの削減
    通常の中古取引では商品の配送が必要ですが、大学内での取引においては、配送コストを削減する方法を考える必要がありました。

課題解決にむけたアクション

  1. 大学内特化の信用システム
    大学という小さなコミュニティを活かし、学生同士、または教員と学生間の直接取引を促進する設計を行いました。対面取引を前提とすることで、商品状態を直接確認できる仕組みを採用しました。
  2. キャンパス内取引の利便性強化
    サイト上での検索機能や、商品カテゴリーの明確化、出品と購入の手続きの簡略化を行い、ユーザーが直感的に利用できるインターフェースを設計しました。また、授業後や空き時間に取引が可能なキャンパス内取引を推奨することで利便性を向上させました。
  3. 配送の不要化
    キャンパス内で直接手渡しで取引できるよう、売り手と買い手が指定する受け渡し場所や時間を調整できる機能を追加しました。これにより配送コストを削減し、取引スピードも向上しました。