サイトの新着情報欄をクライアント側で更新できるプログラムの無料ダウンロード


新着情報欄の更新に特化したシステム「Contents Maker(コンテンツメーカー)」をアップデートさせ、本体を無料化しました。
このプログラムさえあれば、ウェブサイトの新着情報欄の更新のためにWordPressを組み込む必要がなくなります。

静的なHTMLサイトのまま組み込むことができます。
PHPが動作するサーバーであれば使用できます。データベースは必要ありません。

また、WordPressサイトでも使用できるので、このページ右側にある「アップデート情報」はこのプログラムを使用して更新・表示しています。(スマホ表示の場合は下のほうにあります)

WordPressサイトの場合は投稿ページや固定ページの追加をしないとこのような一覧の部分は更新されませんが、このプログラムを使用すればそれらの追加をしなくても追加・削除することができます。

現在の最新バージョンは2018年7月09日公開の5.0です。

主な機能や特長

主な特機能や特長は以下の通りです。

  1. HTMLでできているページにも組み込み可能。
  2. デザインはすべてCSSで設定。自由に変更可能。
  3. 新着情報欄の更新だけに特化しているので、管理画面がシンプルで一般の方でも迷うことなく操作ができる。
  4. サーバ側でデータベースを用意する必要なし。
  5. WordPressサイトでも使える。
  6. クライアント側から新着情報欄を自由に追加・削除できる。
  7. HTMLの知識のない方が入力しても常に理想的なHTMLで出力するので、SEOの面で安心。
  8. 美しいHTMLとCSS。W3C準拠。HTML5 & CSS3 文法エラーなし。
  9. ページ移動なしで必須項目の入力チェック。
  10. 送信決定時・削除決定時(管理者のみ)にはアラートウインドウで誤送信を防止。
  11. 書き込みを行った後に、ブラウザの「戻る」や「進む」ボタンやページ再読み込みなどによってページを行き来してもトラブルが起きない仕様。
  12. 入力エラーがあった場合にはその項目まで自動でスクロールして戻る機能。
  13. 新着情報欄に画像をアップロードする機能をアドオンで追加可能。
  14. 過去の投稿内容を管理画面上で編集できる機能をアドオンで追加可能。
  15. 投稿を公開する日時の予約設定ができる機能をアドオンで追加可能。
  16. 過去の投稿の順番をドラッグ操作で変更できる機能をアドオンで追加可能。
  17. HTMLタグを出力できる機能をアドオンで追加可能。

サンプルデモ

Contents Maker(コンテンツメーカー)のサンプル
自由に書き込んだり削除したりしてお試しください。
ユーザ名はtani、パスワードは0000です。

自動的に日付順に並ぶわけではありません。
その分、管理者の方が自由に日付設定をすることができます。
並び替えアドオン」を追加すると、ドラッグ操作で順番を操作することができるようになります。

公開する新着情報ページのサンプル
このようなHTMLページの新着情報欄を更新することができます。
このページを既存サイトに組み込む前提で作られています。

Contents Maker(コンテンツメーカー)のダウンロード
最新バージョン(5.0)がダウンロードできます。

動作環境

PHP5.6以降を推奨。
このサイト上にあるサンプルデモはPHP7世代で稼働しています。

バージョン5.0からログの保存はSQLite方式となりました。
しかし、サーバ側でデータベースを用意する必要ありません。

安いレンタルサーバで運用中のサイトには特におすすめ

このプログラム自体はPHPでできているので、PHPが動作するサーバである必要があります。
PHPに加えてさらにデータベースも使えるサーバの場合はWordPressを使うことが第一選択肢になると思われるので、このような新着情報欄の更新システムは特に必要がないかもしれません。

しかし例えば、さくらインターネットのライトプランロリポップのエコノミープランのような月額100円台で借りられるレンタルサーバだと「PHPは使えるけど、データベースは使えない」といった環境になります。

そのようなサーバではWordPressは使えないので、ページの更新をクライアント(お客さん)側で行えないケースがありえます。
新着情報欄にたかが数行書き込むだけのことを毎回Web制作会社に依頼するのはお客さん側としては気が引けるし、制作会社側も料金を請求するほどの作業でもないのでただ面倒なだけだったりします。

そのような状況で運用中のサイトには最適なのではないでしょうか。
WordPressのような大規模なプログラムではないので動作も軽いし、Webの知識のない方がどのように書き込んだとしてもSEO面で問題になるようなHTMLの出力は起きないので安心です。

設置方法

説明
1、ZIPファイルを展開する。

2、そのまますべてのファイルをサーバ上にアップロードする。

3、contents-maker/php/admin.php にブラウザでアクセスし、管理画面にログインしてみる。
ユーザー名とパスワードは同じディレクトリ内にあるconfig.phpに記載されていますが、それらの変更は以下の手順4~5でのプログラムの正常動作を確認した後のほうが無難です。

4、管理画面にログインができたら、適当に新規投稿をしてみて、正常に書き込まれるかを確認する。

5、index.html にブラウザでアクセスし、上記手順4で書き込んだ内容が表示されているかの確認をする。

以上です。
上記すべての確認がOKだったら、contents-maker/php/config.php を開いてログインのためのユーザ名とパスワードを必ず変更しておきましょう。

// (必須) 管理者ユーザー名
$cm_admin_user = 'tani';

// (必須) 管理者ログインパスワード
$cm_admin_pass = '0000';

既存のサイトに組み込む方法

既存のサイトに組み込む場合は、上記の手順に従って初期状態で正常動作するかを確認した後にしてください。

0、新着情報欄を表示させたいページで以下の作業をしてください。
以下の内容は同梱のindex.htmlのソースを参考にするとわかりやすいでしょう。

1、新着情報欄を表示させたい部分に以下のコードを追加する。

<div id="news"></div>

2、contents-maker.js を読み込ませる。
新着情報欄を表示させるために必要なのはこの contents-maker.js だけです。jQueryは必要ありません。
以下のようにid名はそのまま付けておいてください。

<script src="contents-maker/js/contents-maker.js" id="contents-maker-js"></script>

contents-maker.js は初期状態では contents-maker/js/ の中にあります。この場所から移動させてはいけません。
新着情報を表示させたいページからcontents-makerフォルダまでの階層が深い場合は、以下のようにパスを適宜合わせて読み込ませてください。

<script src="ここに階層/ここに階層/contents-maker/js/contents-maker.js" id="contents-maker-js"></script>

組み込み作業は以上です。

同梱のサンプルページ(index.html)で読み込んでいる reset.css や sample-page.css は、既存サイトに組み込む場合は必要ありません。
これらはサンプルページでの見た目を整えているだけの役割なので、sample-pageフォルダごと削除しても問題ありません。

新着情報欄のデザイン変更について

デザイン
この新着情報欄更新システムによって出力されるHTMLは以下のようになりますので、あとはCSSにて自由にデザインしてください。
以下のHTMLが上記のdiv id=”news”の中にAjax通信によって挿入されるとお考えください。

<div id="information">
  <div>
    <dl>
      <dt>ここに日付</dt>
      <dd>ここに入力の内容。</dd>
    </dl>
  </div>
  <div>
    <dl>
      <dt>ここに日付</dt>
      <dd>ここに入力の内容。</dd>
    </dl>
  </div>
</div>

実際のHTMLを直接見たい場合は contents-maker/php/index.php にブラウザでアクセスすれば見ることができます。(以下のページのHTMLソースをご覧ください)
https://www.1-firststep.com/samplephp/contents-maker-v5.0/contents-maker/php/index.php

Ajaxによって動的に生成されるコンテンツのSEOについて

このプログラムによる新着情報欄はJavaScriptのAjax通信によって「動的に」表示されます。
「動的に」というのは、「HTMLソースには表示されない」という意味でもあります。

しかし、現在のGoogleのクローラーはJavaScriptやAjaxコンテンツを解釈できますので、SEOの面で不利ということはありません。
むしろ「HTMLソースには存在しているのにCSSなどで非表示にしているコンテンツ」のほうがSEO面では不利になります。

【参考ページ】
JavaScriptで生成されたコンテンツもリンクも静的なものと同等にGoogleは評価する。ただし時間がかかることも | 海外SEO情報ブログ

同様の理由から、「クリックしたら動的に生成されるコンテンツ」や「スクロールしたら動的に生成されるコンテンツ」というのもやめたほうが良いでしょう。
GoogleのクローラーはJavaScriptを解釈できるとは言っても、クリックやスクロールの操作はできないからです。

余談:「スクロールしていくと下からふわっと表示されてくる」ウザイ糞サイトについて

怒る
余談になりますが、最近よくある「スクロールしていくと下からふわっと表示されてくる」というウザいサイトは、

  1. HTML上に存在しているコンテンツをCSSやJSで非表示にしておく。
  2. スクロール操作に応じて「非表示 → 表示」に変更する。

という処理をしていると思われます。
つまり、最初の時点で「非表示」になっているわけですから、SEOの面で重要度は下げられるでしょう。
再度言いますが、Googleのクローラーはスクロール操作はしないのです。

そんなウザい糞サイトは検索順位を落とされれば良いのです。
あんな制作側の自己満足の演出は、見る人にとっては迷惑なだけですから。

【参考ページ】
[続報] 重要なコンテンツならタブや展開ボタンで隠さないほうがいい | 海外SEO情報ブログ
クリックしたときに作られるJavaScriptコンテンツはGoogleにインデックスされない | 海外SEO情報ブログ
2015年~2016年 クソサイトのトレンドはこれだ! | もうダメだ.com

注意点

本プログラムの使用においていかなる損害が発生したとしても、当方は責任を負いません。
了承していただける方のみご利用ください。
著作権は放棄していませんが、著作権表示などは必要ありません。

ダウンロードできるのはこのページだけにしたいため、再配布や無断での販売だけは禁止いたします。
それ以外であれば、カスタマイズして自分のお店サイトやクライアントの企業サイトなどに使用するのも自由です。

サポートに関して

サポート者
無料のものですから、基本的にはサポートはありません。
しかし、初期状態での設置に関しては、サポートBBSにて対応しております。

初期状態とは、ダウンロードしたままの状態、またはconfig.phpだけを編集した状態のことを指します。
それ以外のファイルが編集されていたり、既存サイトに組み込んだ場合などのお問い合わせは有償となります

しかし例外として、当サイト上で解説されているカスタマイズ方法だけを実践して正常動作しない場合は、無償サポート対象内になります。
その理由は、そのような使い方を想定してプログラムが作られているからです。

有償メールサポートと設置代行サービスについて

無償サポートの範囲外に関するものは、有償メールサポートや設置代行サービスがありますので、お問い合わせページからご相談ください。

追加アドオン(追加機能)について

アドオンを追加することで、以下の機能を使用することができるようになります。
必要な方は導入をご検討ください。
すべて併用することが可能ですので、必要な機能だけを組み合わせて使うことができます。

【画像アップロードアドオン】
新着情報欄に画像をアップロードすることができるようになります。
https://www.1-firststep.com/archives/4516
【編集機能アドオン】
過去の投稿内容を管理画面上で編集できるようになります。
https://www.1-firststep.com/archives/6004
【公開予約アドオン】
投稿を公開する日時の予約設定ができるようになります。
https://www.1-firststep.com/archives/6006
【並び替えアドオン】
過去の投稿をマウスのドラッグ操作だけで自由に並び替えることができます。
https://www.1-firststep.com/archives/6009
【HTMLタグアドオン(無料)】
HTMLのタグを含んでいる内容を投稿できるようになります。
https://www.1-firststep.com/archives/6011

アップデート履歴

2015/05/20 バージョン1.0
  • 過去バージョンを公開。
2015/??/?? バージョン2.0
  • データは残っていますが、何をアップデートしたのか忘れました。
2017/03/03 バージョン3.0
  • 完全リニューアル。すべてのファイルを白紙から作り直しました。
    その結果、ファイル構成は少なく、ソースコードも少なく、使用上のページの移動も少なくなりました。
2018/01/29 バージョン4.0
  • 管理画面の見た目をリニューアル。
  • CSRF対策としてトークンを追加。
  • 新着情報の読み込みにjQueryの使用を廃止。
  • 新着情報の読み込みにiFrameやPHPのincludeを廃止。Ajaxに一本化。
  • ファイル構成やコードを最適化。
  • 写真を添付できる機能をアドオンとして追加。
2018/06/03 バージョン4.1
  • メンテナンスしやすいようにファイル構成の整理。
2018/06/15 バージョン4.2
2018/07/09 バージョン5.0

サポートBBS

サポートBBS

サイト内を検索
アップデート情報

この「アップデート情報」欄はコンテンツ・メーカーを使用して更新・表示しています。

サイト運用事例
提供サポートなど
メールフォーム

ダウンロード一覧へ

カレンダー

これはビジネスカレンダーのサイト組み込みサンプルです。
サンプル管理画面から定休日の変更操作ができます。
ご自由にお試しください。(ユーザ名はtani、パスワードは0000です)

ダウンロード一覧へ

新着情報欄の更新

ダウンロード一覧へ

BBS

ダウンロード一覧へ

その他おすすめ

ダウンロード一覧へ

Web制作のブログ

ブログ記事一覧へ

カテゴリ別
制作者の詳細
  • 谷元博のブログ
  • Google+