新着情報欄をクライアント側で更新できるプログラム


新着情報欄の更新に特化したシステム「Contents Maker(コンテンツメーカー)」をアップデートさせ、見た目や使い勝手をさらに良くしました。
PHPが動作するサーバーであれば使用できます。データベースは必要ありません。

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

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

現在の最新バージョンは2018年1月29日公開の4.0です。

機能やサンプル

主な特徴は以下の通り、

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

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

URLの書き込みはできますが、リンクの設定はできません。
HTMLの知識のない一般のクライアントがSEO面でマイナスになるような記述をしないよう、HTMLタグはすべて無効化されるようにしてあります。

自動的に日付順に並ぶわけではありません。
その分、管理者の方が自由に日付設定をすることができます。

公開する新着情報ページのサンプル
このようなHTMLページの新着情報欄を更新することができます。

設置方法

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

2、サーバに全部アップロードする。

3、contents-maker/php/admin.php にアクセスし、ログイン画面が表示されるか確認する。
ユーザー名とパスワードはconfig.phpに記載されていますが、それらの変更はプログラムの正常動作を確認した後のほうが無難です。

4、ログイン後、適当に新規投稿をしてみて、正常に動作するかを確認する。

5、index.html にアクセスし、投稿した内容が表示されているかを確認する。

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

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

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

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

既存のサイトに組み込む場合は、上記の手順に従って初期状態で正常動作するかを確認した後にしてください。
以下の解説は同梱のindex.htmlからコピーすると間違いがないでしょう。

1、組み込みたいページにid名がnewsのdiv要素を追加する。

<div id="news" data-href="ここにcontents-makerフォルダへのパス"></div>

2、上記コードのdata-href属性の部分に、読み込みたいページからcontents-makerフォルダへのパスを記入する。
相対パスじゃなく絶対パスでもOKです。

3、設置するディレクトリ階層に合わせて、contents-maker.jsの読み込みのパスを変更する。
このcontents-maker.jsの設置場所は自由です。
例えば組み込むサイトにjsフォルダのようなものがすでにあるなら、その中に設置してもOKです。

<script type="text/javascript" src="ここを変更/contents-maker.js"></script>

組み込み作業は以上です。
同梱のサンプルページ(index.html)で読み込んでいるreset.cssやsample-page.cssは、既存サイトに組み込む場合は必要ありません。

出力されるHTML

この新着情報欄更新システムによって出力されるHTMLは以下のようになります。

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

新着情報を読み込む手段はJavaScript(Ajax)によって読み込む形となります。
早い話が以下のページをAjaxによって読み込むだけです。(HTMLソースをご確認ください)
https://www.1-firststep.com/samplephp/contents-maker-v4.0/contents-maker/php/index.php

上記ページのソースを基にしてCSSで見た目を整えればOKです。

必要動作環境

PHPが動作するサーバ。
データベースは不要です。

販売価格

電卓
販売価格は15,000円(税抜)18,000円(税抜)です。(設置代行サービスを無くしたことで価格改定しました)
しかし、設置メールサポートは付いていますので、初期状態で正常動作するまでの作業でわからないことがあったらご質問ください。

カスタマイズに関しては無償サポート外となりますが、この新着情報欄の更新システム「Contents Maker(コンテンツ・メーカー)」は既存ページに組み込んで使用すること前提としておりますので、既存サイトへの組み込みまでは上記の設置メールサポートに含まれます。

注意点:組み込んだ際にプログラムを正常動作させるまでのサポートです。
既存サイトのデザインに合わせるための作業は、お客様ご自身でCSSを編集していただく形になります。
各CSSファイルはプログラムの動作に一切無関係ですので、どのように編集していただいても問題ありません。

設置代行サービス(10,000円)では、既存サイトのデザインに合わせてプログラム設置をいたします。
お問い合わせページからご相談ください。

【コンテンツ・メーカーのご購入】
ペイパルでご購入
お問い合わせページからお申込み(銀行振込)
このサイトでご購入(クレジットカード決済) (決済後ダウンロード可能)

※ クレジット決済の注意点
上記のペイパルと銀行振込以外の場合は、お支払後にアドオンファイルをすぐにダウンロードできます。

このサイトでのクレジット購入の場合は、ダウンロードはそのセッション中(ブラウザを閉じるまで・または24分以内)にのみ可能となります。
再ダウンロードしたい場合は、お問い合わせページからご連絡くだされば、本人確認後にメール添付にてお送りいたします。

追加アドオンについて

このコンテンツ・メーカーには、アドオンという形で「画像アップロード機能」を後から追加することができます。
新着情報欄に画像も表示させたい場合は導入をご検討ください。

画像アップロードアドオン付きコンテンツ・メーカーのサンプル
自由に書き込んだり削除したりしてお試しください。
ユーザ名はtani、パスワードは0000です。

公開する新着情報ページ(画像付き)のサンプル
新着情報欄に画像を同時に表示させることができます。

画像アップロードアドオンについては以下のページを参考にどうぞ。
コンテンツ・メーカーの画像アップロード機能アドオンについて

使用上の注意点

著作権は放棄していませんが、著作権表示などは必要ありません。
購入後に再配布や無断での販売は禁止いたします。

カスタマイズしたり、自分のお店サイトやクライアントの企業サイトなどに使用するのはOKです。
ただし、お客様側で独自のカスタマイズをした場合は無償サポート外となります。

充分なバグチェックはこちらで行っておりますが、万が一カスタマイズせず普通に使用していて不具合があった場合には無償で修正を致します。

複数のサイトに使用したい場合

このサイトで販売している有料のプログラムは、1つのご購入につき1サイトで使用可能です。
(異なるドメインのページは、異なるサイトとみなします)

例えば、1つのサイト内に複数設置する場合は、購入は1つでOKです。
しかし、複数のサイトに設置する場合は、2つ目以降は「ライセンス料」という形で1サイトにつき1,000円(税抜)をお支払いいただければ幸いです。

ライセンス料のお支払いは以下からお願いいたします。

【使用ライセンスのご購入(1サイト毎)】
ペイパルでお支払い
お問い合わせページからお申込み(銀行振込)

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

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

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

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

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

アップデート履歴

すでに有料のプログラムを購入済みの方には、そのプログラムの新しいバージョンは無償提供しています。
ご希望の場合はお問い合わせページからお求めください。

その際には、現在お持ちのプログラムファイル一式をメール添付して送っていただくことで、購入済みである証明とさせていただきます。

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

サポートBBS

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

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

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

ダウンロード一覧へ

カレンダー

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

ダウンロード一覧へ

BBS

ダウンロード一覧へ

新着情報欄の更新
その他おすすめ

ダウンロード一覧へ

Web制作のブログ

ブログ記事一覧へ

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