News-cmsの設置方法｜PHP対応サーバーでお知らせ管理【無料配布】

サイト公開・運用
2024.12.07

 

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

News-cmsは、PHPを使って小規模な「お知らせ欄」を管理するための無料配布プログラムです。HTML/CSSだけを置ける無料公開サービスではPHPが動かない場合があります。ダウンロード前に、設置先でPHPが使えるか、HTTPSが有効か、ファイルを書き込めるかを確認してください。

設置前に確認すること

  • PHPが動くか：契約中のサーバーの公式仕様と、管理画面で選択中のPHPバージョンを確認します。
  • HTTPSで公開できるか：管理画面へID・パスワードを入力するため、HTTPSを有効にします。
  • 試験用フォルダを作れるか：既存サイトへ直接上書きせず、別フォルダで動作確認します。
  • バックアップできるか：更新前に設定ファイルと記事データを保存します。

エックスサーバーではPHP 8系・7系などをドメインごとに選択できます。ただし、サーバーがPHPに対応していることと、この配布プログラムの全機能が各バージョンで動くことは別です。まず試験用フォルダでログイン・追加・削除・公開表示を確認してください。詳しくはエックスサーバー公式のプログラム仕様を確認できます。

公開方法やサーバー用語から確認したい方は、HTML・CSSで作ったページを公開する方法とサイト制作に必要なサーバー用語説明も参考にしてください。

PHP対応サーバーを新たに用意する場合

エックスサーバーのスタンダードは、通常料金では36か月契約時に月額換算990円（税込）、初期費用0円です。2026年11月4日17時までの新規申込向けキャンペーンでは、12か月・24か月・36か月契約の初回利用料金が割引対象です。表示額は月額換算で、契約期間分を一括で支払うため、申込前に通常料金とキャンペーン条件、更新時の料金を確認してください。

広告

PHP対応サーバーをこれから用意する場合は、PHPの対応状況、契約期間、支払総額、更新時の通常料金を確認してから選びましょう。学習や一時的な確認だけなら、すでに利用中のPHP対応環境で試し、新たな長期契約を急ぐ必要はありません。



このシステムについて

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. 

  2. 日付、タイトル、リンクを入力して「追加」をクリックすると、新しい記事が作成されます。
    3. 

  3. 作成した記事はリスト形式で表示され、「削除」ボタンで削除可能です。
    4. 





公開画面


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


フロント画面設置手順






sample.htmlが参考となるファイルです。

ニュース一覧を設置したいページに以下の記述をする必要があります。


vue.jsのCDNの読み込み


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


作成しているページの表示箇所にタグの配置。

※data-api-urlはjsonファイルの場所にパスに書き換えが必要です


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


news-cms.jsの読み込み　※body閉じタグの内側に設置を推奨。


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






ダウンロードリンク


最新版はこちらから






    

        

            
アイコン

            

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

                
 1 ファイル  41.59 KB

            

            

                ダウンロード
            

        

    






      


      
      
      

    






  
  
  

  
  
      

        

  
  
  
  
  





          


        

      


    


    
    
    
    
    

    
    
    

    





    

      
  


    
            
            

            

































    


  

  

  

    
タイトルとURLをコピーしました