プロジェクトの背景

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

技術的概要と実装プロセス

1. 作成画面

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

利用者マイページ

【目的】

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

【主な機能】

• 予約状況の表示: 自分の予約情報（訪船日時、船名、座席番号など）を一覧で確認。

• QRコード生成: チェックイン時に必要なユニークなQRコードを表示。スマートフォンを使用するだけでチェックインが完了。

• 多言語対応: 日本語・英語など、利用者の設定に応じて自動的に切り替え。

• レスポンシブデザイン: スマートフォンやタブレットでの利用を最適化し、使いやすさを重視。

スタッフマイページ

【目的】

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

【主な機能】

• 訪船者リストの表示: 当日訪船予定の利用者を検索可能（名前、日付など）。

• チェックイン状況の確認: QRコードスキャン後の訪船者リストをリアルタイムで更新し、未チェックイン者を即座に把握。

• 特別対応の記録: 遅延や予約変更が発生した場合の対応履歴を記録。

• フィルターと並べ替え: 名前、訪船時間などでリストを素早く整理。

管理者画面

【目的】

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

【主な機能】

• 訪船者管理: 一覧表示と詳細閲覧で全利用者の予約情報を確認。

• 検索機能: 名前や予約番号を指定して検索可能。

• 訪船団体管理: 団体予約情報の表示で団体ごとの予約データを一括で確認。

• 団体ごとのチェックイン状況の把握: 特定の団体メンバー全員がチェックイン済みかどうかを表示。

• 訪船予定管理: CSVインポートで訪船予定リストを一括でシステムに取り込む機能。

• Excelダウンロード: 日時や船別の訪船予定をエクスポート。

• ステータス変更: 承認・却下などのステータスを簡単に操作可能。

• スタッフアカウント管理:アカウントの追加・削除: 新規スタッフアカウントの作成や無効化。

• 権限管理: アクセス可能な機能をロールベースで制限。

• お知らせ管理:重要情報や運航変更通知を入力し、全利用者に一斉配信。

• 操作ログ管理:各ユーザーの操作履歴を記録し、不正アクセスやトラブル時の調査を迅速化。
  

2. 実装機能

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

• 利用者マイページに自動生成される ユニークなQRコード を使用し、スキャンするだけで訪船チェックインが完了します。

• スキャン後、システムは即時に該当ユーザーの予約情報を確認し、チェックイン状況をリアルタイムで更新。これにより、管理者側も現状を把握しやすくなります。

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

• 管理画面の表形式デザインに、エクセルの操作感を再現しました。範囲コピー機能: Excelのように複数セルを選択し、コピーが可能。

• フィルターと並べ替え: データを迅速に整理するためのインタラクティブなフィルター機能。

• 固定ヘッダー: 大量のデータをスクロールしても列ヘッダーが固定され、視認性を向上。

• クライアント要望への対応: 特に、範囲コピー機能やセルの操作感はクライアントのご要望を反映したカスタマイズです。

3. 多言語対応

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

4. 申請〜承認フロー

• ステータス管理: 申請内容の新規作成、承認、却下、再申請など、全ステータスを一元管理。

• 通知システム: ステータス異常時には、自動でメール通知やシステム内アラートが送信される仕組みを構築。

• 柔軟な権限設定: 特定の管理者だけが承認操作を行えるように権限を制限。

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

• CSVインポート: 訪船申請データを一括でシステムに取り込む機能を提供。データ検証ロジックを組み込み、フォーマットエラーや重複を自動チェック。

• PDF出力: 訪船証明書や訪船者リストをPDF形式で出力可能。デザインを統一し、視認性と信頼性を向上。

• Excelエクスポート: 管理者が求める複雑なデータ分析にも対応するため、Excelファイル形式での詳細なデータ出力を実現。

6. 権限管理

• ロールベースアクセス制御 を導入。全てのユーザーは必ずいずれかのロールに基づいており、アクセス可能な画面や機能を制御。特定の機能（例: 承認操作やデータ削除）は、権限を持つユーザーのみに限定。

• 操作ログの記録: 各ユーザーの操作履歴を記録し、不正アクセスや操作ミスのトラブルシューティングを支援。

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

アプリケーション

• バックエンド: Laravel 11
  最新バージョンを採用し、パフォーマンスやセキュリティ向上に加え、モダンな開発機能（例: HTTPクライアントの改良、バリデーションルールの強化）を活用。

• フロントエンド: Laravel Blade
  サーバーサイドレンダリングによる効率的なHTML生成。再利用性の高いコンポーネント設計で、コードの一貫性を向上。

• デザイン: Tailwind CSS
  ユーティリティファーストCSSフレームワークを活用し、スピーディかつレスポンシブなデザインを実現。スタッフマイページや管理者画面での複雑なUIを効率的に構築。

• Webサーバ: Nginx
  高速で安定したリバースプロキシを提供し、静的ファイル配信の最適化と負荷分散を実現。

インフラ

• コンピューティング: Amazon ECS
  コンテナ化したアプリケーションを効率的にデプロイ・スケーリング。サービスの可用性を確保するため、オートスケーリングポリシーを設定。

• データベース: AWS Aurora (MySQL 8.0)
  高性能なMySQL互換データベースを採用。自動バックアップやフェイルオーバー機能により、データの安全性を担保。

• CDN: Amazon CloudFront
  世界中に配置されたエッジロケーションを活用し、静的アセット（画像、JavaScript、CSS）の配信速度を高速化。利用者がどこにいても快適にアクセス可能。

• CI/CD: AWS CodePipeline
  自動化されたデプロイフローを構築。Bitbucketとの統合により、コードの変更が即座に環境に反映される迅速なリリース体制を実現。

その他ツール

• ソース管理: Bitbucket
  プルリクエストやブランチ運用を徹底し、チームでの効率的なコードレビューを実現。

• チケット管理: Notion
  開発タスクの進捗管理やドキュメント共有を一元化。メンバー間の情報共有がスムーズになり、プロジェクト全体の透明性を向上。

• デザイン管理: Figma + Draw.io

  Figma: UI/UXデザインを効率化し、クライアントやチームとのコラボレーションを可能に。多言語対応画面のデザインも直感的に操作。Draw.io: シーケンス図やフローチャートを作成し、システム設計の視覚化を実施。
  

実装設計

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

• 業務ロジックを Serviceレイヤー に集約し、データアクセス処理を Repositoryレイヤー に切り分けることで、以下の利点を実現しました。

• コードの保守性向上：業務ロジックとデータ処理の関心事を分離。

• テスト性の向上：ユニットテストの際、Mockオブジェクトを利用してデータアクセス層を容易にモック化可能。

• 拡張性の向上：新しいデータソースやビジネスルール追加時の影響範囲を最小化。

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

• AppServiceディレクトリ に、頻繁に使用される共通処理を集約しました。

• CSV出力・入力機能：業務データをCSV形式でエクスポート・インポートする際の処理を共通化し、コード重複を排除。

• PDF生成：契約書やレポート出力用のPDF生成処理を共通化。

• QRコード生成：チェックイン時に使用するQRコード生成を統一ロジックで管理。

• Excelファイル生成：訪船者リストや訪船予定データの出力処理を実装。

業務ルールの切り出し

• 業務固有の処理やルールを DomainServiceディレクトリ に配置しました。

• 業務フロー管理：訪船申請〜承認フローのステータス変更処理やビジネスルールを集約。

• データ整合性の維持：業務処理でのデータ検証。
  （例：予約重複チェック、CSVのデータ検証ロジック）

• 通知管理：各種イベント（承認、却下、変更）の際に必要な通知処理。

DIによる依存の抽象化

• 依存性注入（Dependency Injection, DI） を用いて以下を実現しました。

• Repositoryの抽象化：インターフェースを通じた抽象化により、DBやAPIなど異なるデータソースへの切り替えが容易に。

• テスト効率化：モックの利用でユニットテスト時にデータベースアクセスを排除し、迅速なテスト実行が可能。

• 柔軟な拡張性：異なる業務ロジックを簡単に追加できる構造を実現。

プロジェクト推進の工夫

開発フローの作成

• 開発チーム全体で以下を共有するドキュメントを作成し、作業のスムーズな進行をサポートしました。

• タスク管理フロー：Notionを活用し、タスクの進行状況や担当者を可視化。タスクのステータス（未着手、進行中、レビュー中、完了）をリアルタイムで確認可能。

• 着手〜完了の手順書：新メンバーにも迅速に開発フローを理解してもらうため、タスクの取り組み方や成果物の提出手順を明文化。

• フィードバックサイクル：各タスクの終了時に振り返りを行い、次のタスクへの改善点を即時反映。

コーディング規約の作成

• 以下の内容を含むコーディング規約を文書化し、チーム内で共有。

• 命名規則：変数名や関数名、クラス名について統一ルールを明示。

• コードフォーマット：Laravel Pintを活用してプロジェクト全体が統一されたフォーマットになるよう設定。

• 静的解析ツールの導入：PHPStanを活用して潜在的なバグや型の不整合を検出。

• レビュー基準の明確化：レビュー時に重点的に確認する項目（例：セキュリティリスク、パフォーマンスへの影響）を事前に共有。

開発コンテナの導入

• Dockerを活用して以下を実現。

• 環境統一：開発者全員が同一のローカル環境を利用できるようにし、環境差異による不具合を防止。

• セットアップ効率化：必要な依存関係や設定を事前にコンテナ内に組み込み、新メンバーが短期間で作業を開始可能。

• 再現性の担保：本番環境に近い設定をローカルで再現することで、リリース前の動作確認精度を向上。

レビュー体制の強化

• 以下の方針でレビューを実施し、品質向上と開発効率を両立。

• 初期段階のベテランレビュー：実装初期はベテランエンジニアによるレビューを徹底。設計や実装方針が定着するまでを重点的にサポート。

• ピアレビューの活用：メンバー間での相互レビューを導入し、知識共有とチーム全体のスキル向上を促進。

• 自動化ツールの利用：Pull Request作成時に自動で静的解析を実行し、レビュー前に基本的なコード品質を担保。

• フィードバックガイドライン：指摘内容をポジティブかつ建設的に伝えるためのテンプレートを用意。
  

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

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

• QRコードチェックインの導入：訪船者が紙のチケットや煩雑な手続きを省略できるように設計。スマートフォン一つで簡単にチェックイン可能となり、手続きの待ち時間を大幅に短縮。

• 直感的なUI設計：利用者が迷わず操作できるよう、デザインガイドラインを基にUI/UXを最適化。多言語対応を導入することで、国内外のユーザーに一貫した利用体験を提供。

• 顧客満足度の向上：これらの改善により、訪船手続きのスムーズさが顧客満足度調査でも高い評価を獲得。

セキュアなデータ管理

• 権限管理機能の実装：各ユーザー（利用者、スタッフ、管理者）の操作範囲を制限し、不正アクセスや誤操作のリスクを最小化。

• データ暗号化と安全性向上：QRコードやCSVファイルなどの出力データには暗号化技術を採用し、データ漏洩を防止。

• ログ管理とトレーサビリティ：管理者が操作履歴を確認できる仕組みを導入し、システム上の変更や操作を記録。問題発生時の迅速な原因特定を可能にしました。

業務負荷の軽減

• 自動化されたデータ管理：申請〜承認フローやデータ出力機能をシステムに組み込むことで、手動操作の削減を実現。

• Excel出力機能：訪船者リストや予約状況を簡単にエクスポート可能。スタッフが紙資料を用意する手間を大幅に削減。

• 操作ログの導入：業務の透明性を確保するとともに、特定の操作や変更に対する説明責任を果たせる環境を構築。

• ミス削減：チェックイン時のQRコードスキャンや訪船者リストのデジタル化により、ヒューマンエラーを抑制。

プロジェクト全体の効果

• 業務効率化により、スタッフが本来の業務（顧客対応や運航管理）に集中できる環境を整備。

• 導入後、運用コストの削減と顧客リピート率の向上が見られ、企業収益への貢献が期待される。

最後に

本プロジェクトを通じて、BASHAKAは顧客体験を最適化するシステムを提供し、今後もさらなる進化を続けます。