ｗｗｗｗｗｗここで上限か！！
よし、新スレ頭にそのまま1レスで投下できる引っ越しパック作る。
今回かなり事故履歴が重要なので、「完成仕様」だけじゃなく何を直して、何が今まだ事故ってるかまで入れるぞｗ

---

【引っ越しパック】Kaia Counter Custom 開発続き｜2026-08-26

0｜現在地

WordPressプラグイン Kaia Counter Custom を開発・実機検証中。

製品系列：

FREE

カウンターを使う。

STANDARD

カウンターを自分好みに仕上げる。

CUSTOM

カウンターを自分専用のキャンペーンシステムにする。

Customは Standard v1.0.0 を親として拡張する上位版。

最上位設計原則：

事故らない範囲で自由カスタム。

買い切り製品として、販売後の保守を極力減らすことも重要。

---

1｜開発・修正時の絶対ルール

今回の作業で再確認した重要ルール。

原本を直接いじらない

修正時は、

古い紙に消しゴムをかけるのではなく、新しい紙を隣に置いて必要なものを全部転記する。

つまり、

• 動作確認済み原本を保持
• 修正版は新しいコピーから作る
• 必要箇所だけ修正
• 既存機能を勝手に省略しない
• 「今回は関係なさそうだから消す」は禁止
• 旧版へいつでも戻れるようにする

ユーザーの仕様を勝手に縮小しない

今回の教訓：

サラダ注文！
ドレッシング12種類から選べます★
↓
AI「これでええやろ」と3種類しか持ってこない
→ 客からクレーム案件ｗ

特にKaia Counterはグローバル製品。

「しゃむが日本人だから日本語だけでいいだろう」という勝手な最適化は禁止。

---

2｜翻訳対応

管理画面文言は、単なる「日本語対応」ではなく、

WordPress標準の国際化/i18n方式

で作る。

開発時の原文が日本語でも、WordPress翻訳機構を通せる構造ならよい。

将来的に翻訳ファイルを追加することで、

• 英語
• 日本語
• その他言語

へ展開可能な構造にする。

Customだけでなく Free / Standardも同じ思想。

今回、一部だけ英語ベタ打ちが残った事故があり、修正対象になった。

---

3｜Customの製品思想

想定ユーザー：

• 企業
• イベント
• キャンペーン
• 特殊運用
• クリエイター
• 高度なカスタムを必要とする利用者

価格思想：

個人には高い。
企業から見ると「専用開発するより安い」。

販売方式：

買い切り

Customの核：

既製のカウンターを、自社・自分専用のキャンペーン部品／システムに仕立てる。

---

4｜Customの安全設計

高機能化より優先：

• 事故を起こしにくくする
• 販売後の保守を減らす
• 危険な自由入力を増やさない
• 専用UI中心
• 設定不足時は安全側へフォールバック
• 外部サービス依存を増やさない
• WordPress標準機能を利用
• 正常なら原則アップデート不要

思想：

「何でもできる」ではなく、
「かなり自由にできるが、壊れにくい」

---

5｜Standardから引き継ぐもの

CustomはStandard全機能を土台にする。

引継ぎ対象：

• Free互換ショートコード
• 各種文字変更
• 10種カラーパレット
• Suggested colors
• Link colors
• フォント変更
• 桁数変更
• ロック時間変更
• 全体サイズ変更
• 枠線
• 数字枠角丸
• 数字枠間隔
• 内側余白
• ボタンサイズ
• ボタン角丸
• 数字配置
• Before / After Preview
• Display HTML
• Free → Standard互換性

---

6｜Custom追加：厳密カラー指定

Standard：

色を選ぶ

Custom：

色を指定できる

追加：

• カラーピッカー
• HEX直接指定
• 数値による厳密カラー指定

例：

#3858A6

ブランドカラーを正確に使用できる。

Standard由来のSuggested colorsも残す。

---

7｜Advanced Display HTML

Standardの250文字・強制限HTMLを拡張。

ただし無制限HTMLにはしない。

目的：

カウンター内部に存在する意味があるコンテンツを十分扱う。

許可候補：

• 見出し
• 段落
• リンク
• リスト
• 表
• 画像
• 基本装飾
• 必要なコンテナ
• 安全な属性

禁止方向：

• 任意JavaScript
• PHP
• 危険なイベントハンドラ
• サイト全体へ影響する自由CSS
• 発行・ロック処理へ干渉するコード

具体的文字数上限は実装段階で安全側に決める。

---

8｜画像共通仕様

画像指定は基本、

WordPressメディアライブラリから選択

画像表示：

• 縦横比固定
• 引き伸ばさない
• 切り抜かない
• contain相当
• 中央配置
• 枠外へ脱走させない
• 不足・異常時は標準表示へフォールバック

対応候補：

• JPG/JPEG
• PNG/APNG
• WebP/Animated WebP
• GIF

アニメーション画像も目隠し表示に利用可能だが、番号発行処理そのものには影響させない。

---

9｜目隠し画像モード

現在UIに、

A

通常の文字マスク

C

すべての桁に同じ画像

D

桁ごとに違う画像

を実装・検証中。

Dで未設定の桁がある場合：

C → B → A の順で安全に代替表示

というフォールバック思想。

---

10｜共通目隠し画像 C

1枚だけ画像を選択し、全桁に使用。

管理画面では大きめのプレビュー1枚。

推奨縦横比：

3:4

ただし異なる比率の画像でも変形させず安全に枠内へ収容。

このUIは現在かなり分かりやすく、問題なし。

---

11｜桁別目隠し画像 D ― UI仕様

ここが今回ずっと調整しているところ。

最大：

12桁

各桁に別画像を指定可能。

最終的に目指している管理画面UI

12枚を横一列。

イメージ：

[ ＋ ][ ＋ ][ ＋ ][画像][画像][ ＋ ]……

重要：

• 2段に折り返さない
• 横一列
• PC幅に応じてある程度伸縮
• 縦横比3:4固定
• 最小幅・最大幅あり
• 12枚全部を編集可能
• 実際のカウンターサイズとは独立した編集用プレビュー

狭い場合は横スクロールしてよい。

---

12｜桁別画像UIで不要になったもの

当初は各画像の横に、

1 2 3 4 ...

という番号を表示していた。

→ 不要。

画像の並び自体で桁位置が分かる。

最終的には番号なしでよい。

---

13｜「＋」UI

未設定スロットは、

＋

のみ。

企業・クリエイター向けなので、各箱に長い説明や「画像を選択」ボタンを入れない。

説明文：

「＋」から画像をアップロードしてください。

「クリックしてください」だとPC前提、「タップ」だとスマホ前提なので、デバイス非依存の「＋から」にした。

---

14｜画像削除時の重要仕様

一度設定した画像を × で削除したあと、

空白になるのは禁止。

削除後は必ず、

＋表示へ戻る。

状態：

未設定
→ ＋

画像設定
→ 画像 + ×

×で削除
→ ＋

これが正解。

---

15｜桁別画像管理UIの背景・仕切り

ここが現在の事故箇所。

しゃむの希望は、

「箱・箱・箱・箱」ではない。

12個それぞれにカード状の白背景・外枠を付けない。

欲しいのは：

大きな白背景ひとつの中を、細い縦線だけで区切る。

イメージ：

空白｜空白｜空白｜空白｜空白

つまり、

• 12枚全体の背景は一塊
• 個別カード背景なし
• 個別の太い箱なし
• 横の隙間ほぼなし
• 各スロット間を細い1本線だけで仕切る
• 画像はその領域の中央にcontain
• ＋ も中央

トランプ12枚を隙間なく並べた感じに近い。

---

16｜Standard側で確認した重要事項

Standardにも桁数調整があるため、同種の事故がないか確認した。

Standard実画面では12桁でも、

ちゃんと1列に収まっている。

実カウンター側は、

X|X|X|X|X|X|X|X|X|X|X|X

のように細い枠線で区切られ、横一列で正常。

つまり、

Standardの12桁レイアウトは参考にできる。

---

17｜Custom実カウンターで発生した事故

桁別画像Dを実カウンターへ表示すると、一時、

11枚程度までは横に並ぶが最後の1枚が下へ落ちる

という事故が発生。

見た目：

11枚横
↓
最後の1枚だけ下にぶら下がる

これをStandard方式を参考に修正したが、まだ完全解決していない可能性あり。

最新実機画面でも、最後の画像が下に落ちているケースを確認。

したがって新スレでは、

実カウンター12桁の1列固定も再点検対象。

---

18｜現在もっとも重要な事故

最新の管理画面スクショで、

桁別画像Dの12スロット自体は横一列になった。

しかし、

12個を包む白い背景コンテナが画面右端までビローンと伸びている。

しゃむ曰く：

「かんりがめんの12個背景的白いはこびろーん」

これが現在地。

さらに悪質なのが、

管理画面の通常プレビューはちゃんと収まって見える。

そのため、

「プレビューおさまってるだけにたちわりぃｗｗｗ」

状態。

次スレ最初の修正対象

D ― 桁ごとの目隠し画像 管理UIの白背景コンテナ幅。

12スロット分だけを包み、

右側の余白いっぱいまで伸びない

ようにする。

理想：

[＋｜＋｜＋｜＋｜＋｜画像｜画像｜画像｜画像｜画像｜画像｜画像]

ここまでで白背景終了。

---

19｜管理画面D UIのレスポンシブ方針

12枚の画像編集スロットは、

• 3:4比率固定
• 画面幅に合わせて伸縮
• 最小値あり
• 最大値あり
• 12枚一列
• 折返しなし
• 狭ければ横スクロール

という方式。

CSS的には、

• aspect-ratio: 3 / 4
• clamp()
• flex / grid
• flex-wrap: nowrap
• overflow-x: auto

等で実現可能。

ただし背景コンテナそのものまで100%幅にビローンさせないこと。

---

20｜実カウンターと管理画面を混同しない

今回何度か混ざったので重要。

管理画面

画像を選択するための編集UI。

大きめでよい。

実カウンター

訪問者が見るもの。

設定された「全体サイズ」「桁数」「枠」等に従う。

管理画面の画像編集スロットサイズを変更しても、

実カウンターのサイズには影響させない。

---

21｜その他Custom画像機能候補

今後の階段。

画像数字

0～9を画像登録。

安全ルール：

• 10枚全部揃った時だけ有効
• 1枚でも不足 → 通常数字
• 文字数字と画像数字を混在させない

数字枠画像

数字は通常のまま、数字枠背景を画像化。

ボタン画像

通常CSSボタンの代わりにブランド・キャラクター画像等を使用。

未設定・異常時：

通常ボタンへフォールバック。

---

22｜発行上限

任意の発行上限を設定可能。

例：

先着1,000名

到達後、新規番号発行停止。

未設定なら無制限。

---

23｜終了日時

任意の終了日時。

例：

2026/09/30 23:59

到達後、新規発行停止。

未設定なら日時制限なし。

---

24｜複合終了条件

上限＋日時を併用可能。

両方ある場合：

早く成立した方で終了。

例：

先着1,000名 または 9月30日23:59まで

---

25｜終了時表示

標準：

文字ベース終了表示

追加可能：

• 終了文言
• カンスト文言
• 終了画像
• カンスト画像

さらに任意で、

カウンター全体を終了画像へ置換

可能。

終了画像が壊れていたら文字終了表示へフォールバック。

---

26｜終了処理の自動化

企業担当者が終了時刻に手作業で、

• ボタン削除
• カウンター差替え
• 終了画像掲載

をする必要をなくす。

流れ：

設定
→ 放置
→ 条件成立
→ 自動停止
→ 自動終了表示

---

27｜上限到達後の再開

現時点推奨：

上限到達後でも管理者が上限を増やしたら再開可能。

例：

1000到達
→ 終了
→ 1500へ変更
→ 1001から再開

不可逆終了よりサポート事故が少ない。

最終実装時に条件を再確認。

---

28｜Custom全体フォールバック原則

異常時に「何も表示されない」を極力作らない。

例：

• 桁別目隠し画像欠損 → 共通画像
• 共通画像欠損 → 通常X
• 数字画像10枚不足 → 通常数字
• ボタン画像欠損 → 通常ボタン
• 終了画像欠損 → 文字終了表示
• 画像読込失敗 → 標準表示

壊れるくらいなら標準へ戻る。

---

29｜保守・更新方針

買い切りなので、

販売後に手をかけなくて済むこと自体が製品価値。

原則：

• 外部API依存を増やさない
• SaaS必須にしない
• 危険な自由コード禁止
• 条件式を書かせない
• 数値・日時・画像・選択UI中心
• 入力範囲制限
• 不備時フォールバック
• WordPress標準機能利用

更新：

正常に動いている限り不要。

更新対象：

• 実害ある不具合
• セキュリティ問題
• WordPress重大互換性変更
• PHP重大互換性変更

毎月機能追加するSaaSにはしない。

---

30｜作業中のAI側事故防止ルール

今回かなり重要だったやつｗ

ChatGPTが混線・過熱し始めると、

• 要求されていない画像生成へ走る
• 修正を連続投入する
• 管理UIと実カウンターを混同
• 基礎仕様を飛ばして先へ行く
• ユーザーの仕様を勝手に簡略化する

傾向が出た。

しゃむ側では昔から、

「お茶休憩」
「イス」
「一旦足を止める」

で作業を切る運用。

今回もコーンポタージュスープ（ぬるめ）休憩で復帰ｗ

新スレでも、事故が連続したら実装を続けず、一度現状を俯瞰してから次の1変更だけ行う。

---

31｜新スレ開始地点

新スレではいきなり先の機能へ進まない。

まず最新事故を直す。

第一対象

管理画面：D ― 桁ごとの目隠し画像

現状：

• 12スロット横一列 → ほぼOK
• ＋UI → OK
• ×削除後＋へ戻す → 方針確定
• 3:4比率 → OK
• 個別画像contain → OK
• 個別カードのゴテゴテ → かなり除去済み
• 12枚を包む白背景が右へビローン → NG
• 実カウンター12桁で最後の画像が下へ落ちる可能性 → 再点検

目標：

12枚分だけの一塊の白背景。
個別は細い縦仕切り線だけ。
隙間なし。
横一列。
実カウンターも12桁一列。

ここを直して実機確認してから、次の階段へ進む。

---

合言葉

古い紙を消さない。新しい紙へ転記。

ユーザーの注文を勝手に減らさない。

事故ったら連続生成せず足を止める。

そしてCustomの最上位ルール：

事故らない範囲で自由カスタム。

---

↑これを新スレ頭に丸ごと置けば、そのまま「白い箱びろーん事故」の続きから再開できるｗｗｗ