【News-cms】管理画面搭載の「お知らせ一覧」をサイトに追加できるシステムを作りました【無料配布】

News-cms：導入ガイドと紹介

このシステムについて

Webサイト制作の際にwordpressを構築するほどではないが「サイトに簡単更新ができるお知らせ欄を追加したい！」というケースがあるのではないでしょうか。
そんな方のために軽量かつシンプルな「お知らせ管理システム」を開発しました。「News-cms」です。
WEB開発者が簡単に導入・カスタマイズできることを重視したこのシステムは、以下の特徴を持っています。

特徴

1. 設置が簡単
   • 必要なファイルをサーバーにアップロードするだけで動作開始。
   • データベース不要。記事データはJSON形式で管理。
2. 利用が簡単
   • シンプルな管理画面で、記事の追加・削除が可能。
   • ユーザーが迷わない、必要な機能のみ搭載した単機能の画面デザイン。
3. セキュリティ対応
   • 管理画面にはIDとハッシュ化されたパスワードによる認証を実装。
   • ログイン試行制限やロック機能を搭載。

主な利用シーン

• 開発中のプロジェクトに手軽なお知らせ管理機能を組み込みたい場合。
• 小規模なブログやニュースサイトと簡易に連携させるための管理ツールが必要な場合。
• Vue.jsを用いてフロントエンドを構築したい方の参考用プロジェクトとして。

デモ画面

管理画面

日付 / タイトル / URLのみを入力するシンプルな作りです。

HTMLフロント側の出力イメージ

HTMLで出力されますので、CSSで自由に装飾ができます。

セットアップ方法

必要環境

• PHP 7.4以上
• サーバー上でJSONファイルが扱える設定
• HTTPS対応推奨

ダウンロード

以下のリンクから最新バージョンをダウンロードしてください。

News-cms お知らせ管理 (PHPプログラム)

1 ファイル 41.59 KB

ダウンロード

ファイル構成

以下のファイルとディレクトリが含まれています：

config.php 設定ファイル（IDとパスワードの管理）
data 記事データ保存用ディレクトリ
└ articles.json 公開用の記事データファイル
index.php 管理画面およびログイン機能
api.php フロントエンドと連携するAPIエンドポイント
CSS 管理画面レイアウト用のCSSファイルディレクトリ
front フロント配置用のディレクトリ
└ news-cms.js フロントエンド設置用のvue.jsファイル
└ sample.html フロント設置サンプル

4. 管理画面設置手順

1. サーバーにアップロード
   ダウンロードしたすべてのファイルをサーバーに配置します。
2. config.phpの設定
   管理用のIDとパスワードを設定します。パスワードはパスワード作成ページを利用して事前に生成してください。
   php

   <?php
   return [
   'admin_id' => 'your_admin_id', // 管理用ID
   'admin_password' => '$2y$10$h4....', // password_hashで生成したパスワード
   ];

6. 動作確認

ブラウザでindex.phpにアクセスし、ログインして記事を追加・削除してみてください。
設置した画面で内容が更新されるか確認してください。

使い方

管理画面

1. IDとパスワードでログイン。
2. 日付、タイトル、リンクを入力して「追加」をクリックすると、新しい記事が作成されます。
3. 作成した記事はリスト形式で表示され、「削除」ボタンで削除可能です。

公開画面

api.phpを通じて、記事データをJSON形式で提供します。Vue.jsでフロントエンドを構築する例を以下に示します。

フロント画面設置手順

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>

<div id="app" data-api-url="../data/articles.json">
<news-list :articles="articles"></news-list>
</div>

<script src="news-cms.js"></script>

ダウンロードリンク

最新版はこちらから

News-cms お知らせ管理 (PHPプログラム)

1 ファイル 41.59 KB

ダウンロード