【欲しい方どうぞ!】HTMLと.jsonで作る超軽量Web特売チラシの設置・運用完全ガイド
「データベース(MySQLやSQLite)やPHPの設定は難しそうだけど、自分のサーバーにWebチラシを設置してみたい!」
「HTMLやJSONのファイルだけで動く、軽くてシンプルなWebチラシがあれば試してみたい」
そんなパソコン好きの店長様や、自力で自社ホームページを管理しているオーナー様向けに、HTMLと.jsonファイルで動作する超軽量Web特売チラシシステムを公開しています。
■ 実際の動作画面・公開デモページ
実際のWebチラシ画面と、ブラウザから簡単に特売品を入力できる編集画面をご確認いただけます。
Webチラシ閲覧画面 デモを見る 🔗 入力編集画面(editor.html)デモを見る 🔗1. HTML+JSONで作るWebチラシとは?どんな仕組み?
一般的なWebチラシシステムはデータベースを必要としますが、このシステムは**「HTML(表示用)」**と**「JSON(データ保管用)」**のみで構築されています。
- Webチラシ本体(index.html): お客様がスマホやパソコンで閲覧する特売ページ。
- 編集画面(editor.html): 店長様がブラウザ上で商品名・価格・画像を登録・更新する画面。
- データファイル(tokubai.json): 登録した特売品データが保存される軽量テキストファイル。
データベース設定が一切不要なため、ロリポップ!やさくらのフォルダ、XServerなどのレンタルサーバーにファイルを置くだけで即座に動作します。
2. HTML+JSON版 Webチラシのメリット・デメリット
メリット
- 超軽量・爆速表示: データベース接続がないため、スマホでの読み込みスピードが非常に高速です。
- 設置が極めて簡単: PHPやSQLの専門知識がなくても、FTPでファイルをアップロードするだけで完了します。
- 管理画面(editor.html)から楽々更新: HTMLを直接書き換える必要がなく、専用フォームから入力するだけでデータ(JSON)が自動生成されます。
デメリット(注意点)
- ファイル書き込み権限(パーミッション)の設定が必要: サーバー上でJSONファイルを更新するため、パーミッション指定(666や777など)の理解が少し必要です。
- 複数店舗の管理には不向き: 1つの設置場所につき1店舗・1チラシ用となるため、チェーン店などで大規模に運用する場合はPHP+データベース版の方が適しています。
3. 自分で設置してみよう!作り方とアップロードから公開までのステップ
自社サーバーへ導入するための基本的な手順を解説します。
STEP 1 テキストエディタで準備
ファイルの修正や設定を行う際は、Windows付属の「メモ帳」ではなく、文字コードトラブルを防ぐために**TeraPad(テラパッド)**などのテキストエディタを使用します。
※保存時は必ず文字コードを「UTF-8N」、改行コードを「LF」に設定します。
STEP 2 FTPソフトでサーバーへアップロード
FFFTPやFileZillaなどのFTPソフトを使って、ご自身のレンタルサーバーの公開フォルダへ一連のプログラムファイルをアップロードします。
STEP 3 入力画面(editor.html)から特売更新!
ブラウザで `editor.html` にアクセスし、商品名や特売価格を入力して保存ボタンを押すだけで、`index.html` に最新の特売品が即座に反映されます。
4. システム仕様の比較(HTML+JSON版 vs PHP+SQLite無料レンタル版)
| 比較項目 | HTML+JSON版(自作設置) | PHP+SQLite版(無料レンタル) |
|---|---|---|
| 導入難易度 | FTP操作・パーミッション知識が必要 | ◎ 登録のみで即日スタート |
| サーバー環境 | 自前でレンタルサーバーが必要 | ◎ サーバー不要(完全無料レンタル) |
| 更新作業 | editor.htmlから入力 | ◎ 管理画面から直感操作(画像自動圧縮あり) |
| カスタマイズ性 | ◎ HTML/CSSを自由に改造可能 | 標準最適化デザイン(設定変更可能) |
サーバー設定やFTP作業なしで「今すぐ使いたい」店長様へ
「HTMLやFTPの設定に自信がない…」「もっと手軽にスマホから今日明日のおすすめ品を投稿したい!」という場合は、設置作業不要の**【無料レンタルWebチラシ(PHP+SQLite版)】**がおすすめです。