はじめに
日々の業務の中で、メールアカウントの発行申請プロセスに非効率を感じていませんか？
手動での申請や承認フローは、対応漏れや申請状況の不透明さにつながりやすく、担当者にとっても負担が大きい課題です。
そこで、申請から承認、ステータス管理までを一元化する「社内用メールアカウント申請システム」を開発しました。本記事では、開発の背景、技術スタック、機能について解説します。
開発の背景と目的
これまでは、メールアカウントの申請をExcelファイルやメールで行い、担当者が手動で処理する方法を採用していました。しかし、以下の課題が浮き彫りになりました。
- 作業の属人化：担当者が不在の場合、処理が滞る。
- 申請状況の不透明性：申請が現在どの段階にあるか、申請者が把握できない。
- 承認プロセスの遅延：手動での確認・承認作業が必要で、時間がかかる。
これらを解決するために、申請プロセスの効率化と可視化を目的としたシステムを開発することになりました。
開発プロセス
1. 要件定義
- 申請者がフォームから必要事項を入力し、申請を送信できる。
- 管理者が申請内容を確認し、承認または却下を行える。
- フィルタリング機能により申請内容を素早く検索できる。
- ユーザー管理機能やセキュリティ対策（ログイン認証、CSRF防止）を実装。
2. 基本設計と詳細設計
ユーザーの申請フローと管理者の承認フローを分離し、それぞれに必要なUIとAPIを設計しました。
- フロントエンドの設計：
Vue.jsとVue Routerでシングルページアプリケーション（SPA）を構築。 - バックエンドの設計：
PHPとMySQLでAPIを構築し、申請データの保存や認証機能を提供。
技術スタックの紹介
フロントエンド
- Vue.js：コンポーネントベースで開発を効率化。
- Vue Router：画面遷移を管理。
- TailwindCSS：モダンで簡潔なUIスタイリングを実現。
バックエンド
- PHP：RESTful APIを実装。
- MySQL：データの永続化。
- PHPMailer：申請結果をメール通知。
実装した主な機能
1. ユーザー登録・ログイン機能
新規ユーザーの登録と、ログイン機能を実装。認証トークンに基づくログイン状態の管理も対応。
2. 申請作成フォーム
申請者が希望するメールアドレスや個人情報を入力して申請を行えるフォームを提供。
コード例（申請作成フォームの一部）
export default {
template: `
<form @submit.prevent="createApplication">
<label for="email">希望メールアドレス</label>
<input v-model="form.email" required />
<button type="submit">申請する</button>
</form>
`,
methods: {
async createApplication() {
const response = await fetch('/api/applications', { method: 'POST', body: JSON.stringify(this.form) });
const data = await response.json();
if (data.success) alert('申請が作成されました！');
},
},
};3. 申請状況確認機能
申請者が自身の申請ステータスを確認可能。ステータスには「承認中」「承認済み」「却下」の3種類を設定。
4. 管理者用機能
申請内容を一覧表示し、承認または却下を行うインターフェースを提供。フィルタリング機能も搭載。
成果物のコードサンプル
主要なAPIエンドポイント
if ($uri === '/api/applications' && $method === 'GET') {
(new ApplicationController())->getApplications();
exit;
}
if ($uri === '/api/applications/update-status' && $method === 'PUT') {
(new ApplicationController())->updateStatus();
exit;
}Vue Routerによるルート定義
const routes = [
{ path: '/login', component: LoginForm },
{ path: '/application', component: ApplicationForm, meta: { requiresAuth: true } },
{ path: '/status', component: ApplicationStatus, meta: { requiresAuth: true } },
{ path: '/admin/applications', component: AdminApplications, meta: { requiresAuth: true } },
];今後の展望
- 通知機能の強化：現在はメール通知のみですが、SMS通知やプッシュ通知にも対応したい。
- パフォーマンス向上：申請が増えた場合でもスムーズに動作するよう最適化を進める。
コメント