Snipe-IT 貸出・返却システム

Snipe-ITの資産管理を簡単にするQRコードベースの貸出・返却システムです。

特徴

• 🚀 高速な操作フロー: QRスキャン → ユーザー選択 → 貸出/返却が数秒で完了
• 📱 モバイルフレンドリー: スマートフォンやタブレットで快適に操作可能
• 🎯 シンプルなUI: 必要最小限の画面で直感的な操作を実現
• 🔄 リアルタイム更新: 貸出・返却後に自動的に最新状態を反映
• 🔍 簡単なユーザー検索: 全ユーザー表示からの即座な絞り込み検索

技術スタック

• Frontend: React 19 + TypeScript
• UI Framework: Material-UI (MUI) v7
• State Management:
  • Zustand (アプリケーション状態)
  • TanStack Query (サーバー状態)
• Form Management: React Hook Form + Zod
• Routing: React Router v7
• Date Handling: date-fns
• QR Code: html5-qrcode
• Build Tool: Vite

前提条件

• Node.js 18以上
• npm または yarn
• Snipe-IT インスタンス（v6.0以上推奨）
• Snipe-IT API キー

インストール

# リポジトリのクローン
git clone <repository-url>
cd snipe-it-extension

# 依存関係のインストール
npm install

開発

# 開発サーバーの起動
npm run dev

ブラウザで http://localhost:5173 を開きます。

ビルド

# プロダクションビルド
npm run build

# ビルド結果のプレビュー
npm run preview

ビルド成果物は dist ディレクトリに生成されます。

初回セットアップ

1. アプリケーションを起動すると、設定画面が表示されます

2. 以下の情報を入力してください：

   • Snipe-IT URL: Snipe-ITサーバーのURL（例: https://snipeit.example.com）
   • APIキー: Snipe-ITの設定画面で生成したAPIキー

3. 「接続テスト」ボタンで接続を確認

4. 「保存」ボタンで設定を保存

使い方

貸出の流れ

1. QRコードスキャン

   • 「QRコードをスキャン」ボタンをタップ
   • カメラで資産のQRコードを読み取る

2. ユーザー選択

   • 自動的に全ユーザーが表示されます
   • 検索ボックスで名前やメールアドレスを入力して絞り込み
   • 貸出先のユーザーを選択

3. 貸出実行

   • 「貸出する」ボタンをタップ
   • 即座に貸出が完了します

返却の流れ

1. QRコードスキャン

   • 「QRコードをスキャン」ボタンをタップ
   • カメラで資産のQRコードを読み取る

2. 返却実行

   • 「返却」ボタンをタップ
   • 即座に返却が完了します

手動入力による検索

QRコードが読み取れない場合は、資産タグまたはIDを手動で入力できます：

1. 検索ボックスに資産タグまたはIDを入力
2. 「検索」ボタンをクリック
3. 資産情報が表示されます

プロジェクト構成

src/
├── api/              # API通信関連
│   ├── client.ts     # APIクライアント設定
│   ├── snipeit.ts    # Snipe-IT API呼び出し
│   └── types.ts      # API型定義
├── components/       # Reactコンポーネント
│   ├── asset/        # 資産関連コンポーネント
│   ├── checkout/     # 貸出・返却コンポーネント
│   ├── common/       # 共通コンポーネント
│   ├── layout/       # レイアウトコンポーネント
│   └── scanner/      # QRスキャナー
├── hooks/            # カスタムフック
│   ├── useAsset.ts   # 資産データ取得
│   ├── useUser.ts    # ユーザーデータ取得
│   └── useCheckout.ts # 貸出・返却処理
├── pages/            # ページコンポーネント
│   ├── Home.tsx      # ホーム画面
│   ├── Settings.tsx  # 設定画面
│   └── NotFound.tsx  # 404画面
├── store/            # 状態管理
│   ├── useAppStore.ts # Zustandストア
│   └── types.ts      # ストア型定義
├── types/            # TypeScript型定義
├── App.tsx           # アプリケーションルート
└── main.tsx          # エントリーポイント

設定

アプリケーション設定は localStorage に保存されます：

• API設定: Snipe-IT URL、APIキー
• アプリケーション設定: テーマ、言語、スキャン音

設定をリセットする場合は、設定画面の「設定をリセット」ボタンを使用してください。

トラブルシューティング

API接続エラー

• Snipe-IT URLが正しいか確認
• APIキーが有効か確認
• Snipe-ITサーバーがCORSを許可しているか確認

QRコードが読み取れない

• カメラの権限が許可されているか確認
• 照明が十分か確認
• 手動入力で資産タグを入力してください

資産が見つからない

• 資産タグが正しいか確認
• Snipe-ITに資産が登録されているか確認
• 先頭のゼロが省略されていないか確認（自動的に補完されます）

ライセンス

このプロジェクトはMITライセンスの下でライセンスされています。

開発者向け情報

コーディング規約

• TypeScriptの厳密な型チェックを使用
• ESLintルールに従う
• コンポーネントはJSDocでドキュメント化

主要な依存関係

• TanStack Query: サーバー状態管理、キャッシュ、自動再取得
• Zustand: クライアント状態管理（設定、UI状態）
• React Hook Form + Zod: フォームバリデーション
• Material-UI: UIコンポーネントライブラリ

ビルド最適化

• コード分割: 各ページは遅延読み込み
• TreeShaking: 未使用コードの自動削除
• 圧縮: Terserによる最適化

サポート

問題や質問がある場合は、GitHubのIssuesセクションで報告してください。