プロジェクトの背景

BASHAKAでは、効率的かつ正確な訪船予約の管理を実現するため、完全スクラッチでの「訪船予約申請システム」を開発しました。本プロジェクトでは、訪船手続きや運用の効率化、さらなる顧客体験の向上を目指しました。特に、訪船者のチェックインプロセスや予約データの管理を一元化し、ペーパーレス化と業務効率向上を図ることを重視しました。

作成画面

本システムでは、利用者・スタッフ・管理者向けにそれぞれ専用の画面を開発しました。

利用者マイページ

目的:訪船者が予約状況を簡単に確認し、スムーズなチェックインを行える画面。

  • 予約状況の表示:訪船日時、船名、座席番号などの予約情報を一覧で確認。
  • QRコード生成:チェックイン時に必要なユニークなQRコードを表示。スマートフォンを使用するだけでチェックインが完了。
  • 多言語対応:日本語・英語など、利用者の設定に応じて自動的に切り替え。
  • レスポンシブデザイン:スマートフォンやタブレットでの利用を最適化。

スタッフマイページ

目的:船のスタッフが当日の訪船者情報を迅速に確認・管理できる画面。

  • 訪船者リストの表示:当日訪船予定の利用者を検索可能(名前、日付など)。
  • チェックイン状況の確認:QRコードスキャン後の訪船者リストをリアルタイムで更新し、未チェックイン者を即座に把握。
  • 特別対応の記録:遅延や予約変更が発生した場合の対応履歴を記録。
  • フィルターと並べ替え:名前、訪船時間などでリストを素早く整理。

管理者画面

目的:全体的な予約申請やスタッフの操作を一元管理できる画面。

  • 訪船者管理:一覧表示と詳細閲覧で全利用者の予約情報を確認。
  • 検索機能:名前や予約番号を指定して検索可能。
  • 訪船団体管理・団体ごとのチェックイン状況の把握:団体予約情報を一括で確認し、特定の団体メンバー全員がチェックイン済みかを表示。
  • 訪船予定管理:CSVインポートで訪船予定リストを一括取り込み。Excelダウンロードで日時・船別の訪船予定をエクスポート。
  • ステータス変更:承認・却下などのステータスを簡単に操作。
  • スタッフアカウント管理・権限管理:アカウントの追加・削除、アクセス可能な機能のロールベース制限。
  • お知らせ管理:重要情報や運航変更通知を全利用者に一斉配信。
  • 操作ログ管理:各ユーザーの操作履歴を記録し、不正アクセスやトラブル時の調査を迅速化。

実装機能

1. QRコードを用いたチェックイン

利用者マイページに自動生成されるユニークなQRコードを使用し、スキャンするだけで訪船チェックインが完了します。スキャン後、システムは即時に該当ユーザーの予約情報を確認し、チェックイン状況をリアルタイムで更新。管理者側も現状を把握しやすくなります。

2. エクセル形式UIでのデータ表示

管理画面の表形式デザインに、エクセルの操作感を再現しました。範囲コピー機能(複数セルの選択・コピー)、インタラクティブなフィルターと並べ替え、大量データのスクロール時も列ヘッダーが固定される仕組みなどを実装。範囲コピー機能やセルの操作感はクライアントのご要望を反映したカスタマイズです。

3. 多言語対応

ブラウザの言語切り替えボタンでスムーズに日本語・英語を切り替え可能。

4. 申請〜承認フロー

  • ステータス管理:申請内容の新規作成、承認、却下、再申請など全ステータスを一元管理。
  • 通知システム:ステータス異常時には自動でメール通知やシステム内アラートを送信。
  • 柔軟な権限設定:特定の管理者だけが承認操作を行えるよう権限を制限。

5. CSV・PDF・Excel形式でのデータ操作

  • CSVインポート:訪船申請データを一括取り込み。データ検証ロジックでフォーマットエラーや重複を自動チェック。
  • PDF出力:訪船証明書や訪船者リストをPDF形式で出力可能。
  • Excelエクスポート:複雑なデータ分析にも対応する詳細なデータ出力を実現。

6. 権限管理

ロールベースアクセス制御を導入。全ユーザーは必ずいずれかのロールに基づいており、アクセス可能な画面や機能を制御します。承認操作やデータ削除など特定の機能は権限を持つユーザーのみに限定。操作履歴を記録し、不正アクセスや操作ミスのトラブルシューティングを支援します。

技術スタック・使用ツール

アプリケーション

  • バックエンド:Laravel 11(HTTPクライアントの改良、バリデーションルールの強化などモダンな機能を活用)
  • フロントエンド:Laravel Blade(サーバーサイドレンダリングと再利用性の高いコンポーネント設計)
  • デザイン:Tailwind CSS(ユーティリティファーストで複雑なUIを効率的に構築)
  • Webサーバ:Nginx(高速で安定したリバースプロキシ、静的ファイル配信の最適化と負荷分散)

インフラ

  • コンピューティング:Amazon ECS(オートスケーリングで可用性を確保)
  • データベース:AWS Aurora (MySQL 8.0)(自動バックアップ・フェイルオーバー)
  • CDN:Amazon CloudFront(静的アセット配信の高速化)
  • CI/CD:AWS CodePipeline(Bitbucket連携による自動デプロイ)

その他ツール

  • ソース管理:Bitbucket
  • チケット管理:Notion
  • デザイン管理:Figma(UI/UXデザイン)+ Draw.io(シーケンス図・フローチャート)

実装設計

レイヤードアーキテクチャの採用

業務ロジックをServiceレイヤーに集約し、データアクセス処理をRepositoryレイヤーに切り分けることで、コードの保守性向上(関心事の分離)、テスト性の向上(Mockによるモック化)、拡張性の向上(新しいデータソースやビジネスルール追加時の影響範囲を最小化)を実現しました。

共通処理のディレクトリ化

AppServiceディレクトリに、CSV出力・入力、PDF生成、QRコード生成、Excelファイル生成といった頻繁に使用される共通処理を集約し、コード重複を排除しました。

業務ルールの切り出し

訪船申請〜承認フローのステータス変更処理やビジネスルール、データ整合性の維持(予約重複チェック、CSV検証)、各種イベントの通知処理をDomainServiceディレクトリに配置しました。

DIによる依存の抽象化

依存性注入(DI)により、Repositoryの抽象化(DBやAPIなど異なるデータソースへの切り替え)、モック利用によるテスト効率化、柔軟な拡張性を実現しました。

プロジェクト推進の工夫

  • 開発フローの作成:Notionでタスク進行状況や担当者を可視化。着手〜完了の手順書を明文化し、各タスク終了時に振り返りを実施。
  • コーディング規約の作成:命名規則、Laravel Pintによるコードフォーマット統一、PHPStanによる静的解析、レビュー基準の明確化を文書化。
  • 開発コンテナの導入:Dockerで環境を統一し、セットアップを効率化。本番に近い設定をローカルで再現し動作確認精度を向上。
  • レビュー体制の強化:実装初期はベテランレビューを徹底、ピアレビューで知識共有、PR作成時に自動で静的解析を実行、建設的なフィードバックのテンプレートを用意。

技術的成果とシステムの効果

高い運用効率と顧客体験の向上

QRコードチェックインの導入で手続きの待ち時間を大幅に短縮。直感的なUI設計と多言語対応により、国内外のユーザーに一貫した利用体験を提供し、顧客満足度調査でも高い評価を獲得しました。

セキュアなデータ管理

権限管理機能で不正アクセスや誤操作のリスクを最小化。QRコードやCSVファイルなどの出力データには暗号化技術を採用し、操作履歴の記録で問題発生時の迅速な原因特定を可能にしました。

業務負荷の軽減

申請〜承認フローやデータ出力の自動化、Excel出力機能、操作ログ導入により手動操作を削減。QRコードスキャンや訪船者リストのデジタル化でヒューマンエラーを抑制しました。

プロジェクト全体の効果

業務効率化により、スタッフが本来の業務(顧客対応や運航管理)に集中できる環境を整備。導入後は運用コストの削減と顧客リピート率の向上が見られ、企業収益への貢献が期待されます。本プロジェクトを通じて、BASHAKAは顧客体験を最適化するシステムを提供し、今後もさらなる進化を続けます。