はじめに
お知らせ機能はユーザーとの重要なコミュニケーション手段の一つです。今回、既存の「お知らせ管理」機能に以下の新機能を追加しました：
- 掲載期間の設定：お知らせの掲載開始日と終了日を指定できるように。
- 掲載ステータスの設定：お知らせが「下書き」または「公開」状態であるかを管理。
これにより、ユーザーに適切なタイミングで情報を届けることが可能になり、管理者の運用負担を軽減します。
改修内容
1. データベースの拡張
「お知らせ管理」テーブルに以下の新しいカラムを追加しました：
publish_start：掲載開始日時publish_end：掲載終了日時status：掲載ステータス（draftまたはpublished）
以下はSQLクエリの例です：
ALTER TABLE announcements
ADD COLUMN publish_start DATETIME NULL,
ADD COLUMN publish_end DATETIME NULL,
ADD COLUMN status ENUM('draft', 'published') DEFAULT 'draft';2. バックエンドの改修
お知らせの公開判定ロジック
お知らせがダッシュボードに表示される条件を以下のように設定しました：
statusがpublished。publish_startが現在日時より過去、または未設定。publish_endが現在日時より未来、または未設定。
以下は、この条件を実現するPHPコードの例です：
public function getDisplayedAnnouncements() {
$query = "SELECT * FROM announcements WHERE status = 'published' AND
(publish_start IS NULL OR publish_start <= NOW()) AND
(publish_end IS NULL OR publish_end >= NOW())
ORDER BY publish_start DESC";
$stmt = $this->db->query($query);
$announcements = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode(['success' => true, 'announcements' => $announcements]);
}フロントエンドに提供するAPI
管理者用エンドポイント /api/admin/announcements にも掲載期間とステータスのデータを含めるように修正しました。
3. フロントエンドの改修
一覧画面の改善
管理画面に以下の項目を表示するようにしました：
- 掲載期間（開始日～終了日）
- ステータス（公開／下書き）
- 現在お知らせが「表示中」か否かの判定
formatPeriod(start, end) {
const startDate = start ? new Date(start).toLocaleString('ja-JP') : '未設定';
const endDate = end ? new Date(end).toLocaleString('ja-JP') : '未設定';
return `${startDate} ～ ${endDate}`;
},
isDisplayed(announcement) {
if (announcement.status !== 'published') return false;
const now = new Date();
const start = announcement.publish_start ? new Date(announcement.publish_start) : null;
const end = announcement.publish_end ? new Date(announcement.publish_end) : null;
return (!start || now >= start) && (!end || now <= end);
},編集モーダルの追加項目
モーダルで以下の項目を管理できるようにしました：
- 掲載開始日
- 掲載終了日
- ステータス
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2">掲載開始日</label>
<input type="datetime-local" v-model="form.publish_start" class="w-full px-3 py-2 border rounded-lg">
</div>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2">掲載終了日</label>
<input type="datetime-local" v-model="form.publish_end" class="w-full px-3 py-2 border rounded-lg">
</div>実装のポイント
- 柔軟性：
掲載期間を設定しない場合、常に「公開」扱いとなるため、利用者の状況に応じた設定が可能です。 - リアルタイムな情報管理：
「公開」「非公開」の条件が自動的に切り替わるため、手動管理の負担を軽減しました。
改修後の画面イメージ
- お知らせ管理一覧
- 掲載期間と現在の表示状況がひと目で確認可能。
- ダッシュボード
- 現在公開中のお知らせのみが表示される仕様に。
おわりに
今回の機能拡張により、情報の管理と公開プロセスをさらに効率的に行えるようになりました。今後は通知メールやユーザーアクションログなど、さらなる機能追加を検討していきます。
コメント