コンテンツ・メーカー２の画像アップロードアドオンについて

HTMLやCSSを扱えない一般の方がページ内のコンテンツを追加・更新できるプログラムコンテンツ・メーカー２は「画像アップロードアドオン」を追加することができます。

このアドオンを追加すると、管理画面にファイル選択ボタンが出現し、そこでアップロード・保存した内容を公開ページに出力することができるようになります。

現在の最新バージョンは2024年3月22日公開の3.0です。
参考ページ：プログラムをアップデートするの際の思想について

各バージョンごとのアップデート内容については、このページ最下部の「アップデート履歴」に記載してあります。

主な機能や特長

この「画像アップロードアドオン」の主な機能や特長は以下のようになります。

1. 設置作業が簡単。addonフォルダに入れるだけ。
2. ファイル選択時にプレビュー表示する機能。
3. アップロードできる画像ファイル形式はJPG・PNG・GIFになります。(許可する形式はあらかじめ設定しておくことができます)
4. ファイル選択ボタンを増やすことも可能。(解説ページはこちら)
5. 画像を多数掲載したとしても、管理者ページ・公開ページのどちらもページ表示速度は速いままです。
6. サーバーが対応していればWebPやAVIFに自動変換され、ページの表示速度の低下を防ぎます。
7. 設置メールサポート付き。

基本的な機能は以上です。
不特定多数の人に公開・利用されるメールフォームやBBSなどと違い、このようなコンテンツ更新システムはそのサイトの運営者だけが利用するものなので、以下のようなセキュリティ面の機能は必要ないかもしれませんが一応付いています。

1. 選択可能な拡張子を設定可能。
2. 選択されたファイルが許可された形式かどうかを、ページ移動前(送信前)にチェックする機能。
3. HTMLやJavaScriptでの設定は悪意ある攻撃者によって改ざんすることが容易なので、サーバ側でも偽装ファイルかどうかをチェックする機能。
4. アップロード最大容量を設定可能。
5. 選択されたファイルがアップロード最大容量を超えていないかどうかを、ページ移動前(送信前)にチェックする機能。
6. HTMLやJavaScriptでの設定は悪意ある攻撃者によって改ざんすることが容易なので、サーバ側でもその容量チェックをする機能。

サンプルデモ

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

公開ページ(画像付き)のサンプル
このサンプルでは3カラムのレイアウトにしていますが、公開ページのHTMLやCSSはプログラム設置者が自由に設定できます。

設置方法

1、ZIPファイルを展開します。>
ついでにこのZIPファイルをバックアップ保存しておくとベターです。

2、コンテンツ・メーカー２本体にあるaddonフォルダの中にattachmentフォルダ入れます。
以下の場所にattachmentフォルダを設置してください。
css～uploadのフォルダの中身は以下の図では省略しています。

contents-maker-2-v3.0/
  ┃
  ┣━━ contents-maker-2/
  ┃      ┃
  ┃      ┣━━ addon/attachment/ここにアドオンの様々なファイル
  ┃      ┃
  ┃      ┣━━ css/中身を省略
  ┃      ┃
  ┃      ┣━━ db/中身を省略
  ┃      ┃
  ┃      ┣━━ font/中身を省略
  ┃      ┃
  ┃      ┣━━ html/中身を省略
  ┃      ┃
  ┃      ┣━━ js/中身を省略
  ┃      ┃
  ┃      ┣━━ php/中身を省略
  ┃      ┃
  ┃      ┣━━ template/中身を省略
  ┃      ┃
  ┃      ┗━━ upload/中身を省略
  ┃
  ┣━━ index.html (公開ページのサンプル)
  ┃
  ┗━━ sample.css (サンプルページ専用CSS)

管理画面に関しては設置は以上です。
管理画面ページを再読み込みすると、ファイル選択ボタンが出現します。(初期状態では2つ)

3、アップロードした画像を公開ページに出力させるため、template-1.htmlを差し替える
管理画面で保存した画像を公開ページのほうに反映させるためには、アドオンフォルダに同梱されている「表示確認用ファイル」フォルダの中のtemplate-1.htmlを、コンテンツ・メーカー２本体にあるtemplate-1.htmlと差し替えてください。

または、画像の出力用コードである<!–%attachment-1%–>や<!–%attachment-2%–>を、コンテンツ・メーカー２本体にあるtemplate-1.htmlに移植しても同じです。

設置は以上です。
公開ページにブラウザでアクセスして表示を確認してみましょう。

公開ページのデザイン変更について

コンテンツ・メーカー２では公開ページ(コンテンツ・メーカー２本体に同梱のindex.html)のHTMLやCSSはプログラム設置者が自由に設定できます。

また、プログラムから出力されるHTMLはtemplate-1.htmlで定義しておくのですが、このHTMLも自由に設定できます。
極端な話、template-1.htmlの中にHTMLが全く存在しなくても、以下の出力用コードさえあれば画像は表示されます。

管理画面で保存した画像は以下の部分に出力されます。
1つ目のファイル選択ボタン　→　<!–%attachment-1%–>
2つ目のファイル選択ボタン　→　<!–%attachment-2%–>

アップロードできるファイル容量や公開ページでの表示解像度の設定について

以下の設定は変更しなくても特に問題はありません。
もし設定を変更するとしても、まずは上記までの設置作業が正しく完了しており、画像アップロード機能が正常動作するかの確認をした後にしたほうが無難です。

4、attachment-config.phpを開き、送信可能なファイル形式を1または0で指定します。
以下の例はjpgファイルだけを許可する例です。

$cm2_jpg = 1;
$cm2_png = 0;
$cm2_gif = 0;

5、アップロードする画像の最大容量を設定する。
ファイルのアップロードというものは文字のようなテキストデータに比べると圧倒的にデータ容量が大きく、そのぶんサーバに負荷がかかります。

attachment-config.phpを開き、アップロードできるファイルの上限容量を記入します。
以下は2MBに制限する例です。

$cm2_upload_max_size = 2000000;

6、公開ページに出力される画像の解像度を設定する。
公開ページに出力される画像の解像度を変更したい場合は以下の部分で設定します。(単位はpxやvwなど、sizes属性に入れられるものならなんでもOK)

//PC表示での画像の横幅
$cm2_display_pc_width[]  = '500px';

//スマホ表示での画像の横幅 -- ( CSSピクセルでの大きさを記入 ) --
$cm2_display_sp_width[]  = '100vw';

7、投稿画像がない時に公開ページで「NO IMAGE」の画像を表示させるか否か？
初期状態では画像の添付がない投稿には「NO IMAGE」の画像が表示されます。
もしこの画像を表示させたくない場合は、以下の部分を0に設定すればOKです。

$cm2_no_image_output = 0;

なお、上記の設定は公開ページにのみ適用されますので、0に設定したとしても管理者ページでは必ず「NO IMAGE」の画像が表示されます。ご了承ください。

初期状態(このアドオンなし)の状態に戻す方法

初期状態(このアドオンなし)の状態に戻すには、上記の設置手順2でaddonフォルダに入れたattachmentフォルダごと削除すればOKです。
その際には、上記の手順3で追加した出力用コードも削除しておくと良いでしょう。

他のアドオンとの併用について

コンテンツ・メーカー２にはこれの他にも色々なアドオン(追加機能)がありますが、すべて併用することが可能です。
必要な機能だけを組み合わせてお使いください。

なお、コンテンツ・メーカー１の本体やアドオンとは互換性が一切ありませんのでご注意ください。(機能が似ているだけで、全く別のプログラムであるため)

一例として、「画像アップロードアドオン」と「編集機能アドオン」を併用したサンプルを設置しておきます。
投稿された画像を管理画面上で削除したり、別の画像をアップロードし直すことが可能になって便利です。

画像アップロードアドオン・編集機能アドオン付きコンテンツ・メーカー２のサンプル
自由に画像をアップロードしたり、後から別の画像に差し替えたりしてお試しください。
ユーザ名はtani、パスワードは0000です。

公開ページ(画像付き)のサンプル

画像スライダーライブラリ(bxSlider)と組み合わせたサンプル

画像スライダーのライブラリとして有名なbxSliderと組み合わせたサンプルを作りましたので、以下に設置しておきます。
これはコンテンツ・メーカー２のプログラムファイル側のカスタマイズが少し必要になるため、あくまでも「このようなことも可能」という一つの作成例としてご覧ください。

公開ページ(画像スライダー付き)のサンプル
このような画像スライダーに使われる画像をコンテンツ・メーカー２の管理画面から自由に追加・差し替えることが可能です。

管理画面のサンプル
公開ページ側のデザインの都合上、画像の解像度は1920×1080だとちょうど良いサイズになります。(縦横比が異なる画像をアップした場合は引き延ばされます)
自由に画像をアップロードしたり削除したりしてお試しください。
ユーザ名はtani、パスワードは0000です。

動作環境

サーバのPHPのバージョン7.0以降を推奨。
このサイト上に設置してあるサンプルはすべてPHP8世代で動作しています。

販売価格

販売価格は15,000円(税抜)となります。
設置メールサポートがついておりますので、アドオン設置の際につまづくようなことがありましたらご質問ください。

ご購入は以下からどうぞ。
ペイパルと銀行振込でのお支払いの場合は、料金のお支払いをしていただき、その入金確認後にメールで添付にてお送りする形となります。
クレジット決済の場合はお支払後にすぐダウンロードができますので、お急ぎの方にはおすすめです。

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

領収書について

注意点

このアドオンはコンテンツ・メーカー２本体のすべてのバージョンに対応しております。
(コンテンツ・メーカー２本体のバージョンは「version.php」に記載してあります)

なお、コンテンツ・メーカー１の本体やアドオンとは互換性が一切ありませんのでご注意ください。(機能が似ているだけで、全く別のプログラムであるため)

また、普通に使用していてプログラム上のバグ(不具合)があった場合には、追加料金なしでバグ修正を行いますので、そのような際にもご連絡ください。
(お客様の手によってJavaScriptファイルやPHPファイルを独自カスタマイズされている場合は、別途料金が発生します)

(利用規約) アドオンを複数のサイトに使用したい場合

同一の有料アドオンを複数回ご購入していただいた方へ

アドオンのアップデートについて

アップデート履歴

2021/07/16　バージョン1.0 (本体1.0で動作確認済)

• 公開。

2022/04/16　バージョン2.0 (本体2.0～で動作確認済。これ以降は本体1.*とは互換性がありません)

• template-1.htmlに記述する出力用コードを「image-*」から「attachment-*」に変更。
• 投稿画像がない時に公開ページで「NO IMAGE」の画像を表示させるか否かを設定ファイル(attachment-config.php)で設定できるようになりました。

2022/09/08　バージョン2.1 (本体2.0～で動作確認済)

• 透明化PNGに対応。
• 今まで「WebP対応アドオン」として別配布だった機能がデフォルトで組み込まれました。

2024/03/22　バージョン3.0 (本体3.0～で動作確認済)

• 表示速度高速化のため、WebP・AVIF形式へ自動的に変換されるようになりました。(サーバーが対応している場合のみ)
• 投稿を削除した時、または編集機能アドオンによって画像のみを削除した時に、その投稿内にある画像もサーバー上から削除されるようになりました。
• その他、細かな修正など。