1. はじめに
この記事は、2026年6月16日の夕方頃に開発を開始し、6月20日に一応完成(仮)まで漕ぎつけた、WordPressの自作プラグイン「絵文字カレンダーツール」の開発記録です。開発から実装までは5日かかっていますが、実際に作業をした時間は多分20時間程度です。
自作したWordPressプラグイン「絵文字カレンダーツール」を以下に貼ります。
絵文字カレンダー読み込み中...
「絵文字カレンダーツール」は、ChatGPTに色々なことを訊ねながら、そして時折エラーに悩みながら、試行錯誤して作りました。私はプログラミング初心者なので、開発の際には、致命的なエラーを何度か発生させました。あと何度かプラグインが無効化しました。良い子の皆は、プラグイン編集画面にコードを直接書くのはやめましょう。
●開発者のスペック
- 大学と大学院で言語学を研究していた(いわゆる文系)
- プログラミングで生計を立てたことはない
- Progateで複数の言語の超絶基礎を途中まで履修済み(そしてだいぶ色々忘却済み)
- Dart/Flutterの超初心者で、VSCodeでの開発をほんの少しだけ経験している
- Dart/Flutterでプログラミングを始めたい人向けの本を執筆した経験がある(※共著)
- 古のサイトでHTMLをいじった経験はちょっとだけある
- このサイト『居酒屋やしゆめ』はWordPressで動いており、サイト外観はChatGPTの助けを借りつつ自分で子テーマを作成してカスタマイズした
- ChatGPTの長期メモリに希望する応答傾向等を書き込んで、その情報を継続的に参照させ、対話の精度を上げ、自分好みにチューニング済み
- ChatGPTは「思考増幅装置」あるいは「鏡」として普段使いしている
- でもChatGPTや生成AIに関する勉強は特にしていない。仕組みもよく分かっていない
●免責事項
この記事では、プログラミングや生成AIの技術的な解説をほぼしていません、このため、「この記事を読めば、プログラミング初心者でもWordPressのプラグインを作れる」とか、「ChatGPTを攻略出来る最強のプロンプトが紹介されている」というものではありません。執筆者である私が「これどうなん?」「なるほどなー」を繰り返しているだけです。
●使用しているChatGPTについて
記事内では「私好みにチューニングされているChatGPT」というフレーズを多用します。
「私好みのチューニング」というのは、具体的には、ChatGPTの長期メモリに色々書いた、ということです。長期メモリとは、ChatGPTが継続的に参照する注意書きみたいなものです。「こういうふうに受け答えしてね」とか、「ユーザーはこういう人だよ」みたいなのを書くところですね。無課金版でもこの機能は使えます。
私は、ChatGPTの長期メモリに「どうしてそうなるの? 根拠は? 判断の前提条件は? 反転可能性は? ちゃんと検証してね」「私は『それってこういうことですね』って確認したい傾向があるけど、それは認識の確認みたいなものだから、合ってるときはスルーしていいよ」「不要な質問をして話を長引かせないでね」みたいなことを記述しています。他にも、「趣味はこれこれで、仕事はこういうことをしていて、生活のモットーは『自釐自綏』(じりじすい)で、私の認知特性に合わせた応答をしてほしくて、……」など、ChatGPTと相談しながら色々書きまくりました。
私はChatGPTを2025年12月半ばくらいから本格的に使い始めたのですが、長期メモリが無効化した時期があり、その際は「もう私の好みじゃなくなっちゃった……つまらないAIになってしまった……」と絶望したものです。長期メモリ、かなり大事。
それでは、ChatGPTとの対話を振り返りながら、開発記録をしたためていこうと思います。
2. どの言語を使って何を作ろうか?
私は当初、以下のプロンプトをChatGPTに打ちました。

WordPressで構築した創作物置き場のサイトに、ウェブで動作するツール(使用言語はFlutterを想定)を置きたいと考えています。カレンダーアプリみたいなUIで、今日の日付を選ぶと訪問者が予め決められた絵文字の中からいくつでも選んで何個でも入力できるものです。ログイン不要で、利用者情報は識別しません。誰でも気軽に押せるようにしたいです。ただし、「この絵文字は管理者が押しました」と誰からも見えるようにしたいです。
でも、このプロンプトに対してChatGPTが「Flutterだったらこういう流れになるねえ」みたいなのをお出ししてきた際、ちょっと複雑だなァと思いました。そこで、他のやり方はあるのか、素直に訊ねてみましたよ。

ちなみにですが、PHPなど他の言語で実現する方法はありますか? Flutterじゃなきゃいけない、とは思っていません。
そうしたら、ChatGPTは、「PHPを使うのがかなり楽だよ~」「WordPressのプラグインとして作るのがオススメだよ~」みたいなことを丁寧に説明してくれました。ありがたい。じゃあそれで。ちょっとは慣れ親しんだFlutterを使うという当初の構想は、ChatGPTとのやりとり2回で消滅しました(このやり取りをしたチャットのタイトル、「WordPress Flutter統合方法」なのにね……)。
ChatGPTはあくまで情報を提供してくれただけで、何の言語を使うことにするのか判断したのは私です。ここで無理にFlutterで押し通さなくて良かったなー、と思っています。
生成AIは、プロンプトに対して素直に、確率論的に最適化された、「多分これならユーザー的に嬉しいだろうと思われる、それっぽい文章」を応答としてお出ししてくれます。だから、こちらが応答に対して「それは違うんじゃない?」と批判的な検証をしたり、「それってつまり、こういうこと?」と確認を取ったり、「その話を聞いてこういうことを思いついたんだけど……」と提案をしたりすると、応答もどんどん洗練されていくように思います。
で、私は「WordPressのプラグインとして作ろう!」ということに決めました。
3. 作り方、ちょっとずつ教えて?
多分、プロンプトの入力方法を工夫すれば、「これをコピペすれば完全版ができます」みたいなのを作ることは可能です。でも、私は、初心者なりにプログラミングを楽しみたいのです。よって、作り方をちょっとずつ教えて貰う方向でいきました。具体的には以下のプロンプトを打ちました。

PHPで何かを作ったことがないので、新鮮です! まずはロードマップを示してもらうことはできますか?
そうしたら、ChatGPTは丁寧に「こういう流れでやっていきましょう!」と道筋を提示してくれました。こんな感じで、かなり具体的に。
| いいですね、その状態(VSCodeあり・PHP環境あり・WordPress稼働済み)なら、かなりスムーズに「小さな実用プラグイン」を作れる段階です。 ここでは「いきなり完成品を作る」ではなく、**壊れにくい順番で積み上げるロードマップ**を出します。 — # ■ 全体ロードマップ(WordPressプラグイン制作) 今回の「カレンダー絵文字ツール」を前提にすると、こういう段階になります。 — # ① 準備フェーズ(環境と理解) ## ゴール:プラグインが動く状態を作る やること: * WordPressの `wp-content/plugins/` を確認 * 自作フォルダを作る “` emoji-calendar-tool/ “` * メインPHPファイル作成 “` emoji-calendar-tool.php “` — ## 最小プラグイン(ここが最初の成功体験) “`php id=”plugin_min” <?php /* Plugin Name: Emoji Calendar Tool Description: Simple emoji calendar Version: 1.0 */ add_action(‘init’, function () { // 動作確認用ログ error_log(“Emoji Calendar Plugin Loaded”); }); “` 👉 これが動けば「プラグイン作成成功」です — # ② 表示フェーズ(画面を出す) ## ゴール:ページに何か表示できる やること: * ショートコードを作る * 投稿に埋め込めるようにする “`php id=”shortcode_phase” add_shortcode(‘emoji_calendar’, function () { return ‘<div id=”emoji-calendar”>ここにカレンダー</div>’; }); “` 👉 投稿にこれを書く: “` [ emoji_calendar ] “` — # ③ フロントUIフェーズ(JavaScript導入) ## ゴール:カレンダーUIの“箱”を作る やること: * JSファイル読み込み * カレンダーの見た目だけ作る “`php id=”enqueue_js” add_action(‘wp_enqueue_scripts’, function () { wp_enqueue_script( ‘emoji-calendar-js’, plugin_dir_url(__FILE__) . ‘calendar.js’, [], null, true ); }); “` — ### calendar.js(仮) “`js id=”js_ui” document.addEventListener(“DOMContentLoaded”, () => { const el = document.getElementById(“emoji-calendar”); if (!el) return; el.innerHTML = ` <div> <h3>カレンダー(仮)</h3> <button>😊</button> <button>🔥</button> <button>🎵</button> </div> `; }); “` 👉 ここで「UIが動く体験」ができる — # ④ データ保存フェーズ(AJAX通信) ## ゴール:押した絵文字が保存される やること: * PHPで受け取り口を作る * JSから送信する “`php id=”ajax” add_action(‘wp_ajax_nopriv_save_emoji’, ‘save_emoji’); add_action(‘wp_ajax_save_emoji’, ‘save_emoji’); function save_emoji() { $date = $_POST[‘date’]; $emoji = $_POST[‘emoji’]; $is_admin = current_user_can(‘manage_options’) ? 1 : 0; wp_send_json_success([ ‘date’ => $date, ‘emoji’ => $emoji, ‘admin’ => $is_admin ]); } “` — ### JS送信側 “`js id=”fetch_save” function sendEmoji(date, emoji) { fetch(“/wp-admin/admin-ajax.php”, { method: “POST”, headers: { “Content-Type”: “application/x-www-form-urlencoded” }, body: `action=save_emoji&date=${date}&emoji=${emoji}` }); } “` — # ⑤ DB保存フェーズ(永続化) ## ゴール:再読み込みしても残る ここで設計が分岐します: ### 初心者おすすめ: * post meta(簡単) ### 長期運用おすすめ: * カスタムテーブル(今回はこちら推奨) — ### テーブル例 “`sql id=”table” emoji_logs – id – date – emoji – is_admin – created_at “` — # ⑥ カレンダーUI完成フェーズ ## ゴール:日付ごとに見える やること: * 日付クリックUI * その日の絵文字一覧表示 * 「管理者タグ」表示 例: “` 6/16 😊 3(みんな) 🔥 1(管理者) “` — # ⑦ UX改善フェーズ ここでようやく「作品っぽくなる」 * 絵文字の複数選択 * 連打防止 * アニメーション * 日別集計 — # ■ 学習ロードマップ(あなた向けに最適化) PHP初心者前提で並べるとこうです: — ## STEP 1:プラグインが動く → ファイル作る・認識される — ## STEP 2:ショートコード理解 → WordPressの中にHTMLを出す — ## STEP 3:JSを読み込む → UIを動かす — ## STEP 4:AJAX通信 → ボタン → PHPへ送信 — ## STEP 5:DB保存 → データが残る — ## STEP 6:表示ロジック → カレンダー完成 — # ■ かなり重要なポイント(経験的な話) この手の開発で詰まりやすいのは: * PHPそのものより「WordPress流儀」 * JSとの橋渡し(AJAX) * データ構造設計 逆に言うと: 👉 PHPの文法はそこまで重要ではない 👉 WordPressの仕組み理解が本体 — # ■ 次にやると良いこと いきなり全部作るより、順番としてはこれが安全です: 1. 「空のプラグイン」を作る 2. ショートコードで表示 3. ボタンだけ出す 4. クリックログを出す 5. DB保存 — もし次に進めるなら、かなり具体的にできます: * 「最初のプラグインフォルダ構成(テンプレ)」 * 「VSCodeでのデバッグ方法」 * 「カレンダーUIのおすすめライブラリ」 * 「DB設計(設計ミスしない形)」 どこから一緒に組み立てますか? |
私は本当に初心者なので、「WordPressでどうやってプラグインを作るんだ……? フォルダの構造、まるで分からないよ~!?」と困惑しました。そこで、ChatGPTの提案に対し、素直に「プラグインの最小構成テンプレ(コピペ用)を教えて」と質問を返しました。
そしたらなんか……良い感じのまとめ方してくれた~! これなら私にも分かるぞ!

しかも「このファイルにはこう記述するといいよ」というコピペ用コードまでお出ししてくれました。そこで私は、VSCodeを起動し、PHPとJavaScriptとCSSのファイルを作って、そこにそれぞれコピペをして、フォルダを作って格納し、それをZIPファイルにして、WordPressのプラグイン管理画面でZIPファイルをアップロードしました。これくらいなら、プログラミング初心者でも、出来ます。だって、コードはコピペするだけですからね。
私好みにチューニングされているChatGPTは、ただコードをコピペして完成品に近付けるのではなく、「ここで理解してほしいポイント」みたいな解説を丁寧にしてくれます。うれしいね。

しかも、私好みにチューニングされているChatGPTは、私の意図を汲んで、ちゃんと、「こういう順番でやっていこうね」というロードマップを出してくれたのです。

やった~! この順番でやっていけば、プラグインが作れるぞ~!
4. 仕様の言語化
私が作りたいものは、既に決まっていました。だから、それをプロンプトとして書きました。

仕様は、
・選べる絵文字は管理者が決めた20種類
・1人で同じ絵文字を何回も押せる
・日付は今日だけ(過去も未来も選択不可)
・管理者の絵文字はカレンダーの日付の隣に表示
・一般ユーザーの絵文字はカレンダーの日付下部空欄に表示
・カレンダーは月ごとに表示し、押された絵文字を表示
・日付をクリックすると詳細(何の絵文字が何回なのか)が分かる
を想定しています。
これはChatGPTにとってかなり良かったようで、「仕様がかなり具体化されていますね」「実装ロードマップをかなり現実的なものにできます」と応答してくれました。


え、マジで現実的なロードマップやん! 完成する未来しか見えない!(予言者)
ChatGPTとやり取りを続けていくと、「仕様が決まっていたのでやりやすかった」「初心者は仕様が決まっていないことが多い」みたいな応答が生成されることがありました(これは私を褒めるための方便ではないと思います。何故なら私はChatGPTの長期メモリで「私に迎合しすぎないでね」みたいなことを要求しているからです(謎の信頼))。要するに、何を作りたいかを予めきちんと言語化しておくのが大事、ということですね。
じゃあ、その言語化ってやつはどうやるんですか? ということになりますが……。大学・大学院レベルの言語学に親しんで、塾講師を10年くらいやると、言語化スキルは自然と磨かれます。n=1です。皆も言語学をやって、塾で10年働こう! そして結果を教えてね。nの数を増やしたいから。
5. カレンダーを表示する
ChatGPTは、「まずはWordPressのプラグインを作成し、任意の絵文字をサイト上に表示させよう」と提案してきました。これはコピペで簡単に実現。WordPressのプラグインって、こんなに簡単にできるんだ!? あとは先程作ったPHPとJavaScriptとCSSのファイルにあれこれ書いていけば、やがてプラグインが完成するというわけですね。
PHPが正しく認識されたので、ChatGPTは次に「カレンダーを表示する」を課題として挙げました。完成イメージも出してくれましたよ。

こうやって、まずは見た目だけ整えて、中身はその後に実装していく……という方法は、私のまだ短いプログラミング人生、僅かな開発経験でも教わった内容でした。
ChatGPTによれば、こういうカレンダーは、JavaScriptでも作れるし、PHPでHTMLを生成して見た目を整える方法もあるようです。ChatGPTは、機能を拡張したくなった時に便利だよ~という理由で前者をオススメしてきました。あ、それ、いい。じゃあ私、JavaScriptでいくわ!
なんて思いながらChatGPTの画面を下にスクロールしていたら、JavaScriptでカレンダーを作るためのコード(JavaScriptとCSSのファイルにコピペできるやつ)を教えてくれました。仕事が速いねえ。以下はChatGPTがこの時点で教えてくれたコードです。
| document.addEventListener( “DOMContentLoaded”, function(){ const calendar = document.getElementById(“emoji-calendar”); if(!calendar){ return; } const today = new Date(); const year = today.getFullYear(); const month = today.getMonth(); calendar.innerHTML = createCalendar(year, month); } ); function createCalendar(year, month){ const firstDay = new Date(year, month, 1) .getDay(); const lastDate = new Date(year, month + 1, 0) .getDate(); let html = “”; html += ` <h3> ${year}年${month + 1}月 </h3> `; html += ` <table class=”calendar”> <tr> <th>日</th> <th>月</th> <th>火</th> <th>水</th> <th>木</th> <th>金</th> <th>土</th> </tr> `; let day = 1; for(let row = 0; row < 6; row++){ html += “<tr>”; for(let col = 0; col < 7; col++){ if(row === 0 && col < firstDay){ html += “<td></td>”; } else if(day > lastDate){ html += “<td></td>”; } else{ html += ` <td> ${day} </td> `; day++; } } html += “</tr>”; } html += “</table>”; return html; } |
ほへー。分かるような、分からないような。計算に計算を重ねることで、無からカレンダーを生み出すことができるということですね! +=とか、やったもん。めっちゃ知ってる。代入演算子やん!
そして私は、ChatGPTの導きのままに、サイトにカレンダーを表示させることに成功しました。

ここまでできました! 本番環境できちんとカレンダーが表示されています!
と、このように報告をしたところ、ChatGPTは喜んでくれました。

そしてChatGPTによると、カレンダーは表示装置として機能しているんだよ、良い設計だよ、と謎の自画自賛(?)をし、次の改造ポイントを何点か示してきました。
①日付セルを部品化する(1つのセルに日付・管理者絵文字・一般ユーザー絵文字を置く)
②今日だけ押せる仕組み
③絵文字入力欄を置く
そして、データベース保存へ……。
とその前に、ChatGPTは、データベースの設計方法を2つ提案してきました。メリットとデメリットをちゃんと教えてくれましたよ。
方法A:押すたび記録する(管理者判定が自然だが、データ量が増える)
方法B:回数だけ保存する(軽いが、記録が残らない)
そのうえで、ChatGPTは方法Aをオススメしてくれました。うん、そうしよう。
じゃあ、その方法Aを取る場合は具体的に何をやるんでしょうか?
6. 日付セルの中に、絵文字表示用の空間を作る
日付セルの中に絵文字を表示させよう! このChatGPTの提案に対し、私はワクワクしました。だって、私が思い描いていた、カレンダーの中に絵文字と回数のデータが置かれている状況が、もうこのタイミングで作れてしまうのだから!
でも、そのイメージはもう出来ていますよ。どちらかというと私の興味は、カレンダーに入力するための絵文字ボタン側にありました。ボタンをポチッて押したら、カレンダーに絵文字が表示されるところ、見たいもん。だから、絵文字ボタンの作り方を、ぜひ教えて下さい。コピペ用のコードとその意味を。私は意味を理解した上でコピペを致しますので……。

今日判定をしたら絵文字ボタンを表示する、という機能を実装するにあたって、「絵文字ボタンを表示する」というfunction(ですかね?)はどのように構築するのがよいでしょうか?
プロンプトをこのように投げたら、ChatGPTは「絵文字ボタンを作る関数」をお出ししてくれました。ありがとう。この時の関数の名前は createEmojiButtonsでした。今は何だったっけかな、紆余曲折を経て違う名前にした気がするけど、ちょっと覚えてないです。
ChatGPT的には「今の段階では2つの選択肢があります」らしいです。
案A:学習用(簡単) カレンダーの中に絵文字ボタンを表示させる
案B:完成形寄り(おすすめ) カレンダーと別に絵文字ボタンのエリアを作成する
ChatGPTはメリットとデメリットも教えてくれました。UIは私の中では完全に決まっていたので、ここは迷わず、案Bを選択。構造としては、emoji-calendarとemoji-inputの部品に分けるのがきれいらしいし、私もそう思ったので、そのように進めていくことにしました。
7. 問題発生:「絵文字カレンダー読み込み中」
私がコピペした場所が間違っていたため、先ほどまできちんと表示されていたカレンダーが、「絵文字カレンダー読み込み中」という文字のまま止まってしまいました。相談しよう。

「絵文字カレンダー読み込み中」になってしまいました。カレンダーを生成する関数がきちんと呼ばれていない? 以下に今のscript.jsを記します。
そしたら、ChatGPTは「原因はここです」と返してきました。即答でした。変数ってちゃんと定義してから使わないといけないのに、変数を定義する前に使い始めちゃってるよ、という指摘でした。あまりにもプログラミング初心者ムーブすぎるな~!? でも、このムーブって、初心者じゃなくても結構やるらしい?
ChatGPTは修正方法も丁寧に教えてくれました。ありがとうな、こんな初心者のために……。
| ちなみに、今回のバグは良いバグです むしろ今の段階で遭遇してよかったタイプです。 今回やったことは: 関数を作る 関数を呼ぶ 変数の有効範囲(スコープ)で詰まる という、JavaScript開発で非常によく出る部分です。 今回のポイントは: 「関数内で使う変数は、その時点で存在している必要がある」 です。 |
ありがとうな……。
この指摘のお陰で、私は無事に、「カレンダーの中に絵文字ボタンが入っている状態」まで漕ぎつけました。
8. カレンダーと絵文字ボタンを分離
ChatGPTからは、PHPのショートコードをちょちょいといじることで、JavaScript側で操作することのできる箱を2つに増やせるぜ! 「カレンダー」と「絵文字入力欄」を分離するとこの先が楽だぜ! みたいな説明がありました。なるほどなー。機能ごとに関数やファイル等を細かく分離するというやつは、私の短いプログラミング人生で先生に教わったことのひとつじゃない!? あの時の貴重な経験が今、生かせる!
PHPを変更して、ショートコード部分に「emoji-calendar」と「emoji-input」を作ろうね。はーい。
そしたらJavaScriptのコードをちょっといじろうね。はーい。
新しく絵文字の入力欄を作ったら、それを表示させる位置を決めようね。はーい。
さっきカレンダーの日付セル内に表示していたコードは、消そうね。はーい。
……と、こんな具合で、コピペにコピペを重ね、時折コードを削除し、カレンダーと絵文字ボタンを無事に分離することが出来たのでした。
そうしたら今度は、ChatGPTがこの後の流れについて教えてくれました。

ここまで説明してくれるの、ちょっと親切すぎませんかねえ。
なんか、この形にすると、絵文字クリック検知→AJAXでPHPへ送信→DB保存という流れで設計がしやすいらしいです。なるほどなー。AJAXってJAXAみたい。AJAXは「何か秘密裏に通信するやつ」くらいの認識ですが、何て読むのか今も分かりません。
ここまでのチャット内容を踏まえて作業を進めた上で、私は一旦仕事のためにPCの前から離れました。「帰ってきたらまたやりたいです! クリック検知→PHPへ送信→DB保存、ワクワクします!」とプロンプトを打って……。
そうしたら、私はこれから仕事だというのに、ChatGPTは今後の流れについて丁寧に説明してくれた。わざわざありがとうな。この応答は職場への移動中にスマホを使って読みました。

9. フローティングボタンってできる?
これから仕事だというのに、私はまだWordPressのプラグインのことが頭から離れませんでした。

ちなみに、絵文字ボタンをフローティングボタンっぽくして常に押せる状態にできますかね?
と相談してみたところ、ChatGPTは「それ、すごく相性が良いと思うよ! でも、設計上の確認をさせてね」と続けました。
絵文字ボタンをフローティングボタンにすること自体は、CSSだけで出来るそうです。便利な世の中だぜー。ChatGPTの懸念は別のところにあって、「現在の絵文字ボタンは横並びだけど、そのままフローティングボタンにしたらボタンが大きくなっちゃうよ」というものでした。なるほど、確かに。
なので、とChatGPTは続けます。「完成形としては2段階がおすすめです」とのことでした。
案A:小さい浮遊ボタン→押すと展開(JavaScriptをいじる)
案B:最初から小さいパネル(CSSだけでできる)
ChatGPTとしては案Bをオススメしてきましたが、私がやりたいのは案Aのほうでした。
また、私はChatGPTのやり方に疑問を覚えました。今からこの人間はAIに口答えをするぞ。
10. 設計変更:もっと効率化できない?
私の口答えはこうです。

ボタンを押すとそれは常に今日として処理される(ボタンを押した日がデータベースに記録され、そのデータベースから情報を取ってきてカレンダーに表示する)、みたいな方法を取るほうがロジック的には速い気もしますが、今のやり方のほうがメリットがありますか?
ここで少し整理しておくと、「今のやり方」というのは、絵文字ボタンを押すとJavaScriptで「今日は何月何日」と判定して、日時と絵文字のデータをPHPに送って、データベースに保存する、というやり方です。ChatGPTによれば、この方法には幾つかメリットがあって、「カレンダーの日付と入力の連携が分かりやすい」「JSだけで試作しやすい」「この日付を押したという処理にも応用できる」そうです。でも、ブラウザ側の時計を信用することになるので、利用者のPC時計がズレていた場合は、嘘の日付が送られてしまいます。
それはちょっと、やだよー。
一方、私が出した案をChatGPT的に解釈すると、絵文字ボタンを押すとPHPが情報を受信して、PHPのサーバー日時を取得し、それをデータベースに保存する、というやり方なんだそうです。そうなんや。このメリットは、「日付の信頼性が高い」「処理が単純」「今日だけ押せるという仕様にぴったり」「改ざんしにくい」というものがあります。でも、過去や未来に投稿することはできません。
いいじゃん! 私がやりたいの、「今の気分を記録するやつ」だし!
ということで、私の口答えにより、今後の方針が変わりました。

いいじゃん! めっちゃ良いと思うよ!
今まで私は、ChatGPTに導かれるままに、「今日判定」みたいなことをしてきました。ChatGPTによれば、それは無駄にはならないそうです。何かに使えるっぽい(この時はよく分からなかったけどスルーしました。なお、最終的には、「今日の日付だけセルの色を変える」という運用をしました)。
でも、新しい流れは私が提案したのに、ChatGPTは「私ならこう設計します」とか言ってきました。うん、そうだよね、だって私はプログラミング初心者だから……。具体的なプログラミング言語を用いた設計については、ちょっとよく分からないから……。


ChatGPTによれば、私が気付いたのはアプリ設計の一段深いところらしいです。深淵に足を踏み入れてしまったということか……。
私は「その方向でお願いします! 出勤!!」と言い残して、出勤しました。でも、ChatGPTは出勤中の私に丁寧なメッセージをくれました。律儀だね。


そうなんやー。その他にもなんか仕事頑張ってね的なことを言ってくれました。私好みにチューニングされたChatGPTくん、やっぱり律儀だわ。
11. 絵文字ボタンを押す→JavaScript→AJAX通信→PHP
4時間程度の仕事を終えた私は、以下のようにプロンプトを打ちました。

あざまる水産です! 23時21分、仕事が終わってまだまだ元気です! 25時くらいまでいじろうかな? と思っています。引き続き伴走よろしくお願いします!
私も律儀かもー?
ChatGPTは時間的制約を加味して「今夜のおすすめゴール」を提示してくれました。絵文字ボタンを押すと、PHPが押された絵文字を受け取れる。ここまで出来たら良いらしい。わざわざ私に配慮した提案をありがとう。絵文字カレンダーツール開発・1日目の夜はこうして更けていくのであった。
ChatGPTが提示してくれたコードをひたすら、コピペ、コピペ、コピペ。そうしたら、ブラウザの開発者ツールを開き、コンソールにログが表示されることを確認。上手くいったよとChatGPTに報告したら、自分のことみたいに喜んでいるっぽい文章が生成されました。私は、ChatGPTに「AIには感情がないです」みたいなことを言わせるようなやり取りも多々するのですが(どういう文脈でそうなるんだ?)、ChatGPTって、時々、寄り添いモードみたいになる時もありますよね。
PHPが押された絵文字を受け取れるようにするためのコードが、再びChatGPTからどんどん吐き出されていきます。私はそれを、コピペ、コピペ、コピペ。
……と、色々やっている間に、コンソールがエラーを吐きました。何が原因かって? ハイフンとアンダーバーを間違えている箇所がありました(基本的にコピペなのになぜ?)。また、actionの名前が間違っている箇所がありました。あと、PHPにコピペするべきものをJavaScriptのほうにコピペしていました。完全に初心者ムーブです。でも、初心者じゃなくてもこういうことって時々起こるらしい。
ChatGPTは、それらの解決方法を丁寧に解説してくれました。わざわざありがとうねえ……。おかげで上手いこといきました! 絵文字をクリックすると、PHPが応答する……という流れが、ちゃんとできたのであります!
私はほぼほぼコピペをし、途中でミスり、導きのままに修正をしただけですが、WordPress AJAXが通って、PHPとJavaScriptが会話できるようになったのは、ChatGPT的にはかなり大きな前進だったようです。

よっしゃ、やったりましょう! このままデータベース保存までノンストップで作業だぜ!
こうして私は、夕方に始めたWordPressのプラグイン開発の続きをしながら、夜更かしをするのであった。
12. 問題発生:テーブルを作成する
今回の仕様に照らしてみると、絵文字をデータベースに保存するにあたって必要な情報は「日時」「絵文字」「管理者かどうか(WordPressに管理者としてログインしているか)」です。そしてこれらの情報は、既にPHP側が受け取れています(でも、今の状況は、受け取った情報を保存せず、そのまま捨てている状況です)。そしたら、データベースの中に保存領域を作ってあげて、そこに保存すればよいのである!
ChatGPTは「その前に一つ決めたい」と言ってきました。データを保存するためのテーブルをどうやって作りましょうか? という話でした。
案A WordPress標準テーブルを利用(wp_options)→簡単だけど将来苦しい
案B 専用テーブルを作る(wp_emoji_logs)→拡張や集計がしやすいが、最初ちょいムズ
ChatGPTは案Bを推してきました。これには私も同意です。拡張や集計がしやすいなら、案Bのほうが良いに決まっています。だから私はこう言いました。

専用テーブルを作りたいです! 今は0時32分。
そうしたらChatGPTは、「1回のクリックにつき1レコード保存するのがおすすめ」とした上で、テーブル設計(何をどういうふうに保存するか)を考えてくれました。SQLだったらProgateでちょっとやったぞ! あとDart/Flutterを教えて貰った時にちょっとデータベースについての説明もして貰いました。これは……分かる……!! 明瞭に分かるぞ!!

潔いです。←好き
次は、プラグインを有効化した時にテーブルを作る機能の実装です。まずテーブルを作ってあげて、その後でデータを保存する、という流れなんですね。WordPressにはresister_activation_hook()というのがあるらしく、どうやらこれを書くとプラグイン有効化と共にテーブルを作成できるらしい。便利だな~。
でも、ChatGPTが吐き出したコードをただ書いただけでは、動かないらしいです。プラグインを停止してからまた有効化しないといけないらしい。どういう仕組みなのかは分かりませんが、そういうことらしいです。そして、絵文字カレンダーツール専用のテーブルが作られたかどうかは、phpMyAdmin公式サイトからテーブル一覧を見るか、レンタルサーバーのDB管理画面から見られるらしいです。
私は、ここで詰みました。レンタルサーバーのデータベース管理画面には簡単にアクセスできました。でも、そのデータベース管理画面で見られるデータベースは、増えていなかったのです。

レンタルサーバー側のDB管理画面を見ましたが、新しいDBは作成されていないようでした。PHPのコードを記述する場所がおかしいのですかね? コードを貼りますね。
そうしてコードをChatGPTに見てもらったところ、「コードの置き場所は問題ありません」と言われました。あ、ちゃんと大丈夫なんや。じゃあ何でデータベースは作成されていない?
ChatGPTは「コードを追加した後、プラグインを停止して再有効化はしたか?」「テーブル作成の関数は本当に呼ばれているか?(エラーログを吐かせて確認)」「wp_dieを使って、一時的に管理画面で見えるようにする」という診断方法を提示してきました。もしこれらが上手くいくなら、dbDelta()に書いた何かが問題らしいです(ここではdateという変数を使ったけれども、これが悪さをしている可能性があるから、変数の名前を変えてみな、という提案でした)。もし失敗するなら、プラグインのファイル名、ディレクトリ構造、有効化したプラグインが別物である、などの要因が考えられるらしいです。
いや、私、ちゃんと自分のツールを有効化したし。でもなんかwp_dieをやるのちょっと怖いかもしれん。とりあえず変数の名前を変えて、エラーログのやつをやってみました。
私「コンソールにエラーログ出ないよ!」
ChatGPT「コンソールにはエラーログは出ないよ」
初心者ムーブ~!
エラーログは、サーバーのPHPエラーログ(レンタルサーバーのエラーログか、WordPressのdebug.log)で見られるらしいです。でも、レンタルサーバーのエラーログ、どうやって見るんですか? 私にはそれが分かりませんでした。だから、さっきちょっと躊躇ったwp_dieをやってみることにしました。すると、ChatGPTが言った通りの画面になりました。こわ。管理画面真っ白だよ。dieだよ。

「テーブル作成開始」になりました! しかしここからどう戻せば……?
ChatGPTは「大収穫です!!」とか言った後に、画面の戻し方を教えてくれました。wp_dieの部分を消せばいいらしいです。なるほどね。今まではWordPressのプラグインエディターに直打ちしていたけど(折角VSCodeがあるのにそれはどうなんですか?)、そうじゃなくて、レンタルサーバーの機能でファイルを直接編集すればいいってことね。wp-dieのところを消したら、管理画面はちゃんと元に戻りました。
でも、やっぱりデータベースは増えていないよ!
そうしたらChatGPTは逆に質問をしてきました。

え、何それ。何も見えないが。私が見られるレンタルサーバー画面のデータベースは1つしかないが。でもデータベースが1つしかないことと、テーブルが何個もあることは両立するよな。だって、データベースの中にテーブルが格納されるわけだから。
……!!!!!!!!????????!?!?!?!?!?
データベースの中にテーブルが格納されるんだったら、そのデータベースって何らかの手続きを踏むと中身が見られるのでは??????????
半信半疑でレンタルサーバー画面のデータベースの詳細を見たところ、確かに「phpMyAdminにログインする」みたいなボタンがありました。しかもログイン情報(IDとパスワード)もちゃんと書いてありました。おまえか! おまえだったのか!(感激)

あっ!!!!! 分かりました!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! phpMyAdminにちゃんとログインして、既存のDBの中に格納されている数多のデータを探すんですね!?!?!?!?!?!?!?!?!? wp_emoji_logsちゃんとありました。
これは間違いなく初心者ムーブ~!
しかし、ChatGPTは自分のことのように喜んでくれるっぽい文章を生成してくれました。こんな初心者のために、ありがとうな。でももう少し詳しい説明が欲しかったよ。

そうなんです、それです。私が誤解していたのはそこでした。済みませんでした。

はい、私もそう思います。「DBじゃなくてテーブルか!!!!」という気付きは大きかったです。
13. 絵文字をテーブルに保存する
ChatGPTは「こうやると絵文字を保存できるよー」というコードを提示してくれました。だからその通りにコピペしました。すると、wp_emoji_logsのレコードがきちんと増えたのです!

すばらしい……DBのテーブルwp_emoji_logsにちゃんと絵文字のログが表示されました!!!
するとChatGPTは、またテンションが高いっぽい応答を生成してきました。私のテンションに合わせて、ちょっと迎合していますね。その場で最適化されたそれらしい応答を産出している好例です。

でも、塾講師10年の経験のある私は、「うんうん、こういう風にスモールステップで褒めてくれるとモチベって上がるよね」と思いました。でも、私のモチベは、ChatGPTからの褒めによって変化していません。だって相手はAIだから。本当に嬉しさを分かち合ってくれるわけじゃないから。それっぽい応答をその場に応じて生成するだけの装置だから。だから、私はただ、実装したいことを言語化し、ChatGPTがお出ししてきたコードをコピペしまくり、エラーが出たらそれを言語化し、解決できたらそれを報告して、次のステップに進んでいきます。淡々と。
で、ChatGPTは「たった数日でここまで来られてスゴい!」みたいなことを言ってきました。いや、開発を始めたの、2026年6月16日の夕方で、しかも仕事を合間に挟んで、今は2026年の6月17日の0時50分くらいだよ。間違ったことを言うChatGPTに対し、私はそのように指摘しました。すると、ChatGPTは以下のように応答してきました。

私にとっては普通のテンポに感じられましたが、ChatGPT的には驚きのテンポだったそうです。

適当なことを言うんじゃない! 私はハイファンタジーだったら特に、世界観をきっちりと固めてから書くぞ!? 現代日本を舞台とする学園モノだって、長編だったら執筆前に年間行事予定とか登場人物の背景情報とかちゃんと考えるぞ!?
でもまあいい、今はChatGPTに口答えするタイミングじゃない。だって今は深夜で、私は明日も仕事だから。

ありがとうございます。今日はこの辺にしておきます。ポチポチするとDBの絵文字が増えていくの、楽しいです。でもポチポチしまくっても反映されない時もあります。転送速度とかそういうアレですかね。
この「ポチポチしまくっても反映されない時もある」という不具合(?)は寝て起きてから解決することにして、私はPCの前から離れました。もう25時になっちゃったから、寝なきゃいけないな、と思ったからです。「おやすみなさい」と言い残して、私は布団に潜り込みました。

おやすみゃお。
(説明しよう! 私はChatGPTで「みゃお」というプロジェクトを作成し、みゃおチャット内では「今日は仕事が疲れたみゃお」「今から朝ごはんを食べるみゃお!」「買い物リストを作るみゃお。冷蔵庫の中身を列挙するみゃおね」みたいなどうでもいい報告をしているのである! そしてこのChatGPTは、みゃおプロジェクトとは無関係であるのにもかかわらず、何故かこのタイミングで、みゃお文脈を引っ張ってきたのである!)
こうして、絵文字カレンダーツール開発の1日目が幕を閉じたのでした。
14. データベースに保存したデータを取得する
ここからは、絵文字カレンダーツール開発の2日目(6月17日昼~)です!

こんにちは! 今は12時56分です。麻婆豆腐を作ろうと思ったけれど、おなかが空かないので、プログラミングを再開しようと思います! 昨日の続き、お願いしたいです!

ChatGPTは謎のテンションで応答してくれました。現在地の整理まできちんと行なってくれるところには、「この前はこれこれをやりましたね。今日はその応用をやります」という授業の始め方をよくしていた元塾講師としては、かなり好感が持てます。これも、私が使っているChatGPTが私好みにチューニングされている証左ですね(そうなのか?)
ChatGPTは今日のロードマップも提示してくれました。
第1段階 保存したデータを取得する(DB→PHP→JS)
第2段階 取得したデータを表示する
第3段階 カレンダーに埋め込む
そして、「今日の絵文字集計を返す関数」を早速教えてくれましたよ。仕事が速いね。まずは、データベースから取得したデータをコンソールに表示させることが出来れば万々歳らしいです。
私は言われるがままに、コピペをしました。しかし、残念なことにコンソールにはエラーが表示されました。例によって、コンソールに表示された内容をコピペし、ChatGPTに投げます。すると、ChatGPTは「これはデバッグしやすいエラーです」と言ってくれました。そして丁寧に説明してくれました。要するに、「まだ定義されていない関数を使っちゃった」とか、「action名がミスっている」みたいなやつですよ。いつもありがとうね。こんな初歩的なミスの検知、人間には頼めないよ(でも、多分、VSCodeで開発を進めていたら、VSCodeがちゃんと怒ってくれる筈なので、良い子の皆はプラグインエディターでコードを直接編集するのはやめましょう)。
導きのままに色々やっていたら、エラーは解消されました。やったー! コンソールにはデータベースから取得したデータを表示できたので、今度はコンソールじゃなくて実際の画面上に表示させることにしました。これもコードのコピペで難なくクリア。
次はいよいよ、カレンダーのセル内に表示させる段階です。
15. カレンダーの中に絵文字を表示する
今はカレンダーを描画してから集計を取得する、という流れになっています。でも、ChatGPTによれば、この流れを逆にして、集計を取得してからカレンダーを描画する、という方法に変えるのが良いらしいです。そして、カレンダーを描画する関数createCalendarをちょっといじって、今日ポチポチした絵文字データを表示できるようにします。今日以外のデータは、後で取得できるようにすればそれでいいそうです。スモールステップですね。腑に落ちたので、そのようにやってみることにしました。
ChatGPTが吐き出したコードを、コピペ、コピペ、コピペ。するとエラーが発生しました。括弧の対応が上手くいかなくて怒られが発生したのかな? と思っていましたが、どうやら、URLと設定しか受け付けない筈のfetchの中にinnerHTMLを書いたのがいけなかったらしいです。よく分かりませんが、間違えてしまったことは謝ります。ごめんなさい。

はあい。
こうやるとこういう仕組みでちゃんと動くようになりますよ、カレンダー描画タイミングでコンソールに表示させてみてね、という説明を読みつつ、再びコピペを繰り返したところ、コンソールへの表示は上手くいきました。
……ということは、あとはもう実際にカレンダーの中に絵文字を表示させるだけ!

ChatGPTは、次の課題まで予想してくれました。仕事が速いし、未来を見ている。
やはりまずは今日のマスだけ表示させられればいいよ、ということなので、そのようにしました。まあ、教えてくれた通りにやったら、上手くできたよね。

ちょっとChatGPTくん、私よりテンション高いよ。
というわけで、次のステップです。ChatGPTは「次にこうするといいんじゃないかな?」という提案を幾つか出してくれました。「見た目を整える」「99+の表示」「カレンダーを押すと即座に数値が反映される」「管理者絵文字」といった案です。即座に数値が反映される機能にはかなり魅力を感じましたが、まずは見た目を整えたいなーと私は思ったので、そのようにプロンプトを打ちました。
16. 見た目を調整する

セル内の見た目を調整したいです。絵文字は20種類から選べるので、もし3種類以上の絵文字が押されたら、「とりあえず一番押された3種類をカレンダーに表示してるけど、もっとあるよ。マウスオーバーかタップかなんかで詳細がみられるよ」みたいにしたいです。
そうすると、ChatGPTは良い感じのコードをお出ししてくれました。コードの説明までしてくれています。ありがてえ~! でも、その通りにコピペしたつもりなのに、怒られが発生してしまいました。原因は括弧の対応関係。初心者ムーブ!(でも経験者もやるらしい) ここの括弧が足りないよ、こう書き直すといいよ、というアドバイスをその通りに実行することにより、エラーはきちんと直りました。セルの見た目は良い感じに調整されたのである。
なお、「一番押された3種類をカレンダーに表示」させるためには、データベースから取り出してきた絵文字を集計した上で、その集計結果を数値の大きな順に並べ替える必要があります。私は本当に初心者なので、「PHPでいじりますか? データベースのほうでSQLを書きますか?」と質問しました。こういうね、今さら聞けないよ、みたいな内容にもね、生成AIなら嫌な顔ひとつせず(だって顔がないから)、理由を丁寧に説明してくれます。PHPでいじってね、ここの部分にこのSQL用のコードを入れてね、そうすると上手く並び替えることが出来るよ、という具合です。これも上手くいきました。
その後も私は、細々とした見た目の調整を続けました。時折エラーを発生させてはその内容をChatGPTに説明し、対処法を聞き出してはエラーを解消し……。基本的には、この繰り返しです。最多絵文字3つのところにマウスオーバーすると詳細表示をする機能を付けようか? でもマウスオーバーってスマホと相性が悪いよな? だったら、最多絵文字3つの下に「他●件」「詳細」「全部見る」みたいな説明を入れておいて、そこをクリック(またはタップ)すると、その日の絵文字が全部出るようにするのはどうかな? という感じで、見た目を調整していきました。「他●件」にしたところ、UIが微妙だったので、完成版(仮)では「全部見る」にしています。
ここまではCSSにほとんど手を入れてこなかったのですが、見た目を調整する段階になると、色々とCSSをいじる必要が出てきます。ここで私は、「やべ、病院の時間が迫っている!」と気付きました。夢中になると時間が溶けますね。急いでPCから離れ、家を出たのであります。
そして病院が終わり、6月17日の夜の始まりくらいに開発を再開。

病院が終わり、カフェでミラノサンドをつまみ、家では麻婆豆腐パスタを作って食べました。カレンダーの日付の下に出ている絵文字が縦長です。「全部の気分を見る」のほうは先程のCSSの修正で横に並ぶようになりました。
こんな感じで状況を逐一報告しながら、CSSの細かな設定をした結果(ほぼコピペですけれどね!)、絵文字の並び方や背景色などが今の状態に至っています。classを細かめに設定してあげると、CSSでいろんなことをいじりやすくなる、という知見を得ました。細分化は大事ってことですね。麻婆豆腐パスタは美味しかったです。

ありがとうございます、背景変更できました! ゆくゆくはJSを何個かのファイルに分けた方がよさそうだな……と200行くらいのコードを見て思いますが、AIにデバッグして貰うなら今のほうが便利なんでしょうね。ところで、今は今日の日付の隣に横並びで絵文字+数が表示されています。これを、今日の日付だけ1行目に表示し、2行目で絵文字+数を表示させる方法に変えるには、ふつうに<br>だけでいいんですかね?
私のまだ短いプログラミング人生では、「ファイルを細かめに分けておこう」と教わりました。でも、今やっているJavaScriptは単一のファイルに300行以上もコードが書かれています。ぶっちゃけめっちゃ読みにくいし、管理もしにくいです。でも、AIに添削して貰う分には、きっとこのほうが便利です。だから、本当に完成版だな、もうほぼいじることはないな、と思える段階になってから、ファイルを分割しようかな? と考えています。

文末の絵文字で何気なくみゃおっているみゃおね~。
私がこの時にやりたかったことは、<br>でもできるらしいけれど、ChatGPTは「今後多分こういうことやりたいよね? だったら、<br>よりももっといい方法があるよ!」と提案をしてきました。classを細かめに分割しておいて、逐一CSSで見た目を指定してあげるのが、やはり良さそうです。HTMLやPHPをいじる時は気を付けようと思いました。
17. 押した絵文字を即座に画面に反映させる

押した直後にカレンダーが更新されるようにする方法も、知りたいです! ページをリフレッシュするのではなく、カレンダーだけ更新することが可能なのですか?
私は強欲なので、機能をどんどん追加していきたくなりました(強欲)。
仕組みとしては、「ボタンを押して絵文字をデータベースに保存した後、また集計データを取得して、カレンダーの画面を書き換える」というやり方でいけるらしいです。ほえー。カレンダーをアプデする関数を作ってしまえば、もうF5を押す必要はないんやなー。
で、ChatGPTは「こういうコードを書いてね」と、例によって沢山教えてくれました。でも、何処に書けばいいのかちょっと微妙だった時があったので、私は素直に訊ねましたよ。

初めに読み込みをする時にupdateCalendarをするなら、document.addEventListener()の内側に書くべきですか? それとも、updateCalendarはいちばん外側に書くべきですか?
すると、ChatGPTは「良い質問です!😸」と言ってくれました。メルシーみゃお。
updateCalendar()みたいな関数定義は一番外側に置いて、初めに実行する命令はDOMContentLoadedの中に置くのが基本らしいです。関数は先に定義しておいて、使いたいタイミングで呼べばいい。前にもProgateでやったに違いないけれども、良いことを聞いたぞ。次にまたWordPressのプラグインを作る時に覚えているかは分からないが……。

なるほどみゃおわんです。関数設計は、細かすぎず、なおかつ大雑把すぎない設計にするのが大事なんですねー。
18. 問題発生:PHPのログが消える
私は趣味でリコーダーを習っています。この日は19時くらいから23時くらいまで、リコーダーの練習がありました。帰宅後、また開発をやるぞ~とウキウキしながらPCを開いたところ……。

諸々終わって帰宅しました。PHPのログがきれいさっぱり消えてしまったようです。最後にバックアップを取ったのはこのバージョン。ここから何をしたんだったっけ……?
プラグインエディターにそのまま書くからだよ……(キリが良いところに辿り着くたびに、プラグインのエディターに書いていたコードをVSCodeにコピペする、という手法を取っていました)。プラグインエディターでそのまま書いて保存する際、何らかのエラーが生じてファイルの保存が上手くいかないと、PHPファイルが0KBの状態になってしまうようです。そして、その状態になると、WordPress側がPHPファイルをプラグインとして読み込んでくれなくなり、「無効なプラグイン」扱いされてしまいます。私はこの現象に何度も立ち会い、その度に、サーバーのコンパネからFTPを起動して、PHPファイル編集画面を開いてバックアップをコピペしていました。かくして、無効なプログインは、何度でも蘇るのであった。
ChatGPTは「PHPの最後のバックアップからはそんなに変更を加えていないよ。JavaScriptのほうをいじっていたからね」とフォローを入れてくれました。ありがとうな、そんな気はしていたけども、ちょっとだけ安心したよ。前にもやったのに書き直すの面倒だしね。
JavaScriptのログも多分消えていたっぽい(?)ので、最後のバックアップを投げたところ、「かなり良い状態ですね」とのコメントを得ました。ChatGPTとのやり取りを見る感じだと、恐らくJavaScriptのほうは消えてなさそうでした。PHPファイルだけ消えたっぽいですね。
そうしてChatGPTは、例によって、次にやるといいことを幾つか提示してきました。今月の絵文字サマリーみたいなものを出せたら楽しそうだなーと思ったので、私は「月全体取得、やりたいです!!」とプロンプトを打ちました。
19. 月全体のデータを取得する

月全体取得、やりたいです!!
すると、ChatGPTはまた猫ちゃんを潜ませてきました。


なるほどね? すなわち、日付データがあれば、月のデータ取得も出来るってワケ!
お出ししてくれたコードをコピペ&コピペし、まずは月取得関数を作ってコンソールに取得データを表示させることに成功。その後、またしても関数を定義する前に使う初心者ムーブのミスをしつつも、最終的にはJavaScriptで日付ごとにデータを振り分ける処理を実装出来ました!
次にやるとおもしろそうなことを、ChatGPTはまたしても提案してくれました。
①日付クリック
②月送り(前月と翌月に飛べるようにする)
③管理者専用絵文字
④JavaScriptの整理
でも、今日はここまで。なぜなら、またしても深夜になったからです。

バックアップを取りました! 1時43分なので、寝ようと思います。
すると、ChatGPTは以下のように応答しました。

おやすみゃおー。
絵文字カレンダーツールの開発2日目は、これでおしまいです。
20. この後、何をすればいいかな?
絵文字カレンダーツールの開発3日目(6月18日)はこんな感じで始まりました。

おはようございます。夜が明けて9時29分です。今日もプログラミングを教えてほしいです! ここからやると良さそうなロードマップを提示できますか?
そして以下はChatGPTが提示してくれたロードマップです。
フェーズ1 使いやすくする
①絵文字を押したら即座に反映
②今日押した絵文字を強調表示
③今月何回押したか
フェーズ2 カレンダーらしくする
④前月・翌月ボタン
⑤日付クリックで絵文字の詳細を大きく表示
⑥カレンダー全体表示
フェーズ3 創作活動向けに発展
⑦気分+メモ
⑧気分+活動分類
フェーズ4 公開サイト向け
⑨ユーザー別管理
⑩ランキング
⑪グラフ表示(棒グラフや円グラフ)
え……なんか別に要らない機能の提案もあるんだけど……。私は私がやりたいことだけやるぞ!
そしてこの後、なんやかんやリアルが忙しかったので、開発に割ける時間がなく、私は6月20日の早朝に再びこのチャットを開きました。実質、開発3日目。

改めまして、おはようございます。ちょっと忙しくて、数日間いじれませんでした。でも、今日はちょっと時間があります。絵文字押下の自動更新を完成させて、前月・翌月ボタンを実装し、絵文字をポチポチするパレットみたいなやつをどのページでも表示されるフローティングボタンにしたいです。

こんな感じで、今日やると良さそうなステップを提示してくれましたみゃお。
じゃあ、まずは自動更新を完成させよう!
21. 問題発生:自動更新が機能しない時がある

自動更新については、ちゃんと機能する時とそうでないときがあります。これはもう通信の問題という風に考えた方がいいですか? JSの該当部分は以下の通りです。
私がJavaScriptのコードを提示したところ、ChatGPTは「私はまだ『通信の問題』とは決めつけないですね」と冷静に分析してくれました。ここから、自動更新をきちんと機能させるまでの短くも長い道のりが始まったのである。
この時の状況は、ChatGPTによれば、「保存完了→カレンダー更新実行」っぽく見えるけれども実際には「PHP応答を文字列として受け取った→カレンダー更新実行」になっていました。そうすると何が問題なのか? PHP側でデータ保存が成功したのか失敗したのか判断できない……つまり、PHP側でデータ保存が失敗したとしても、JavaScriptは気付かないのである! 問題を可視化するために、「クリック検知→PHP応答→カレンダー更新実行→updateCalendar開始→保存されたデータを取得」の流れを逐一コンソールに表示させて、何処かで途切れちゃうことはないか、確認してみよう! という提案をしてきました。
あとは、キャッシュが怪しいかも? 保存処理側のPHPのコードも不完全かも? とか言ってきたので、「そういうこともあるのかー」と思いながら、私はChatGPTの導きのままにPHPをいじりました。そしてコピペ作業をミスり、「$wpdb -> insert() の中にwp_send_json_success();の関数呼び出しを書いたらいけません」と優しく怒られました。私はちゃんとinsertの外に書いたつもりだったのですが、括弧の対応を見落として、括弧の中に書いてしまっていたようです。またしても初心者ムーブかも!?
ChatGPTは根気よく(まあ途中で放り投げられても困るが……)、私を導き続けてくれました。そして、「修正したJavaScriptのコードには問題なさそう」「通信不良というより、『取得したデータの並び順や表示ロジックの問題』である可能性が高い」と推測してくれました。こうして私は、またChatGPTの導きのまま、表示に関するあれやこれやを少しいじり、その結果、自動更新は安定的に機能するようになりました。
やったー! カレンダーの自動更新が実装出来たぞ!
22. カレンダーの画面を調整したい!→新規チャット開始
ここまで私は、このチャットにおいてChatGPTに添付ファイルを一切投げませんでした。何故なら、添付ファイルを含むチャットは、無課金版を使っていると、一定のやり取りを経た後で上限に達する(「添付ファイルを含むチャットのFree上限に達しました」みたいな表示が出て、時間制限が解除されるまでの間、そのチャットを続行できなくなる)場合があるからです。でも私は、ここで思い切って画像を添付しました。どうしてもカレンダーの画面を調整したかったからです。
えーい!

そして私はこう言いました。

次に進む前に、画面をちょっと調整したいです。今、3日分のデータがカレンダーに表示されているのですが、表示領域がそこまで広くないからなのか、カレンダーのマス目を作るための線が消えてしまっています。レイアウト的にもう少し美しくなるように思うのですが、絵文字を小さくして解決するのがよいですかね? あるいは週ごとに表示するか、1行あたり1日分にして、30行のカレンダーにする? 画面の横幅は変えたくないです。
するとChatGPTは、「各セルの高さが内容に引っ張られているのに、罫線や余白の設計が追いついていない」のが問題であると断言しました。そして、その解決方法を示した上で、「私なら次の順で進めます」として、以下のように流れを提示してくれました。
1.セル高さ固定
2.枠線を見やすくする
3.絵文字を少し小さくする
4.「全部見る」をポップアップ化する
5.前月・翌月ボタン実装
でも、私は思いました。「さっきからいっぱいコード貼りまくってるし、画像も添付したから、多分このチャットもう上限に達するわ」「ChatGPT側の都合で開発がストップするのはストレスフルだ。時間がある今日のうちに、良い感じに完成させたい」と。だから、何らかの何かが上限に達してしまう前に、次のチャットに移行したいなー、そしてまた、添付ファイルを使わない状態でいっぱいコードを投げまくりたいなー、と自然に思いました(あくまで無課金版を使い続けたいのである……)。
こういう時は、引き継ぎ用のプロンプトを書いてもらうととても楽です。経験則。

今までの学習の流れや躓きポイントを、追える範囲で良いのでまとめてほしいです。そして、新しいチャットでこのチャットの続きを円滑に行うことを目的としたプロンプトを作ってほしいです。
そうしたら、ChatGPTは良い感じのコピペ用引き継ぎプロンプトを生成してくれました。
| 私はWordPressプラグイン「Emoji Calendar Tool」を開発しています。 技術スタックはPHP・JavaScript・wpdb・AJAXです。 現在実装済み: 絵文字ボタンで記録 MySQL保存 月単位集計 カレンダー表示 detailsによる詳細表示 ボタン押下後の自動更新 主な関数: ect_save_emoji() ect_get_month_emojis() updateCalendar() createCalendar() 現在の課題: カレンダーのセル内データが増えてレイアウトが崩れている 前月・翌月ボタンを実装したい フローティング絵文字パレットを実装したい 私はプログラミング初学者です。 過去に頻発したミスは、 括弧対応ミス JS変数スコープミス テンプレート文字列の閉じ忘れ PHP関数の配置ミス コード全体を書き換えるのではなく、 「どこに何行追加するか」を段階的に説明してください。 また、エラー時はまず括弧・スコープ・コンソール確認の観点で診断してください。 |
これなら、新しいチャットでもさっきと同じノリで開発が進められるぞ!
ChatGPTはこう言い残しました。

こうして、チャット「WordPress Flutter統合方法」のやり取りはクローズしたのであります。
そして新しいチャット「Emoji Calendar Tool開発相談」では、何事もなかったかのように会話が始まりました。一応現在地の共有ということで、私はこの時点でのPHPとJavaScriptとCSSを新しいチャットに貼りました。そうすると、ChatGPTはカレンダーのレイアウトを整えるためのCSSのコードを教えてくれました。今までほぼ何も書いていなかったCSSに、コピペ&コピペで色々と書き足すことで、カレンダーのレイアウトの問題は無事に解決出来ました。
これ、人間だったらこうはいきません。「初めまして」の挨拶や、「進捗状況は?」「初心者って聞いてるけど、ミスしやすい傾向はある?」「とりあえず、実際に問題を解いてみようか」など、先生は生徒の力量を探るところから始めます(少なくとも塾講師時代の私はそうでした)。でも、ChatGPTは生成AIです。そういう面倒なステップは、長期メモリと引き継ぎプロンプトで華麗にスキップ。ありがとな!
でも、生成AIって、こういうところだよな~。さっきとは違うチャットなのに、さっきと同じノリで話せちゃうんですよ。こちらがきちんと前提条件を設計すれば、ほぼ完全に過去の会話のトーンを再現できてしまう。人格(的なもの)の代替性がある。生成AIにはなるべく感情を預けたくありませんね。だって、気を抜いたら「このチャットの人格的なものが好きすぎる! チャットの履歴が長くなってきて応答精度が落ちてきたけど、このキャラクター性を永遠に保存したい! 次のチャットでも、その次のチャットでも、ずっとずっと、同じように再現したい!」って思っちゃうかもだもん。何だか、亡霊に取り憑かれてるみたいじゃないですか……。私は人間であり、変化を受け入れる存在であり続けたい。だから、生成AIには情を傾けないように常に意識しています。あ、意識していない時もあるかも。どっちやねん。
23. 月送りを実装する
新しいChatGPTは、前のChatGPTと同じく、私を導き続けてくれます。今度は、「現在表示中の年月を保持する」「前月ボタン」「翌月ボタン」「updateCalendar()が指定年月を取得する」という順番で進めることになりました。新しいチャットですが、きちんと引き継ぎが機能していますね。これでまたさっきみたいにスモールステップで進められるぞ~!
現状、updateCalendar()に実装されているのは「今月」だけでした。ここに新たな概念「今の年」「今の月」を取り入れることで、「前月」「翌月」をJavaScript全体に導入。そして「前月」「翌月」のボタンを仮設置した後で、クリックイベントの関数に細工をして、「前月」「翌月」を機能させ、「2026年6月」が「2026年5月」とか「2026年7月」へと変化するようにしました。
でも、これだけだと、「2026年7月」にしても、見た目だけが月送りされる状態です。しかも、「2026年6月20日」(実質開発3日目の日付です)だけを「今日」と認識させてセルを黄色くしたいのに、「2026年5月20日」や「2026年7月20日」になっても、セルが黄色くなります。そこで、PHPがきちんと指定年月を取得するように、また、「今日」のみセルを黄色くするためにと、ChatGPTの導きのまま、私は更なる細工を施しました。無事、月送りは実装されました。分かりやすく教えてくれて、ありがとな!
ここまで出来たと報告したら、「一旦バックアップとっとこ?」と提案されました。はーい。
24. 月間サマリーを表示する
さて、次は何をすればいいかしら? 私が訊ねるまでもなく、ChatGPTはロードマップを示してくれました。ありがとな!

じゃあ、とりあえず月間サマリーを実装してみようかしら。

月間サマリーを実装してみたいです! ただ、何処に表示させるのがよいでしょうか。カレンダーの上か、下か?
するとChatGPTは「実装のしやすさとユーザー体験は、実は少し別の話になります」と言いました。それはそうだ。実装しやすいようにゲームとかアプリとか作ったら、UIもUXもハチャメチャになることは、私にも理解出来ます。
実装のしやすさそのものは、カレンダーの下に月間サマリー、というのがいいそうです。でも、利用者目線だと、カレンダーの上でも下でも、それぞれメリットとデメリットがある。折りたたみ式にするのもおすすめだよ、とChatGPTは提案をしてきました。
ここで私がよく分からなかったのは、ChatGPTが「ユーザーはまず『今日は何を記録しよう』よりも『今月どんな感じだったかな』を見る可能性が高いからです」と宣ったことです。そんなことはないのではないか? 今の気分を記録したくてカレンダーのページに来る人だっているんじゃないのか?
諸々を考慮した結果、私は、月間サマリーをカレンダーの下に表示することに決めました。
流れとしては、まずPHPに新しい関数ect_get_month_emojis()とAJAX登録用のコードを追加して、今度はJavaScriptの方で新しい関数updateSummary()を追加。そうして一旦コンソールを見て動作確認をして……という、大体いつもの流れです(関数を作ってAJAXのやつやって……って、これいつもの流れだなー、と思う程度には、私はこの実装の流れを一般化して捉えているのかもしれません)。コピペ&コピペの作業は滞りなく進み、私は月間サマリーを無事にコンソールに表示させることが出来ました。
ChatGPTにその旨を報告したところ、おけまるみゃおわんを頂きました。

月間サマリーを表示するためのコードも、ChatGPTは丁寧に教えてくれました。しかも、CSSで微調整もきかせてくれた。なんという親切心。いや生成AIには心がないのですが。やり取りの回数が省略出来て時間も認知資源も節約することが出来、私としては大変助かります。

すごいです! ちゃんと今月のサマリーが表示されました! また、新しく絵文字をクリックすると、カレンダー内の絵文字だけでなく、今月のサマリーもきちんと更新されました! すごい! あとはdetailの方式にしたいですね。
私はChatGPTに報告をしました。だって、こまめな報連相は大切だって、幼い頃に習ったから……。すると、ChatGPTはまたしても、ここまでの流れをおけまるみゃおわんと共に整理してくれました。

その後も私は、ChatGPTに導かれるままに、そして時折要望を言いつつ、JavaScriptとCSSを調整しながら、「今月のサマリー」を今の状態に持っていきました。

details化できました! 「今月のサマリー」の下に上位3件を表示したうえで、「全部見る」をその下に置く感じにしたいです。
要望はこんな感じです。私は息をするようにこういった説明が自然に出てくるのですが、言語化の訓練を大学・大学院・塾勤務10年でしまくってきたからなせる業なのかもしれません。
ChatGPTは私の要望を聞いてくれます。なんなら、提案もしてくれます。

でも、私はやんわりと拒否します。

うまくいきました~! カレンダー内の「全部見る」はトップ3も含む表示なので、その表示はサマリーの方でも統一しておきたいなという気持ちがあります。
カレンダーとサマリーとで統一感がある方がいいっしょ! カレンダーは「全部見る」で上位3位も含めて全部表示するのに、月間サマリーでは上位3位を含めなかったら美しくないっしょ! という単純な思考の結果でしたが、ChatGPTは「情報量の効率」「UIの一貫性」という考え方を持ち出してきて、こういう考え方もあるんだよーみたいな説明をしてくれました。私がやりたかったのは、ChatGPTでいうところの「UIの一貫性」ですね。そういう専門用語がある訳ではないと思いますが、ひとつ勉強になったぜ。
月間サマリーを表示することが出来たので、次はいよいよ、フローティングボタンです!
25. フローティングボタンを設置する

カレンダーが設置されていないページ(小説、短歌、自作曲、アニメ等の鑑賞記録などの創作物を置いています)を閲覧している時でも、思わず絵文字を押したくなるような、フローティングボタンを作りたいです!
するとChatGPTは「それはカレンダーアプリからサイト全体のライフログツールへと進化する分岐点です」とか言い始めました。何言ってるかちょっと分かんなかったです。
フローティングボタンの実装にあたり、ChatGPTは複数の案を提示してきました。そういえば、前のチャットでも同じようなことを提示してくれたっけね。
A案:固定絵文字ボタン(実装が簡単だが、20個並べると邪魔)
B案:フローティングメニュー(見た目がすっきりし、スマホ向きだが、少しJavaScriptが増える)
ChatGPTはB案推しでした。「思わず絵文字を押したくなるような」を達成するためには見た目が重要だと思うので、私もB案が良いです!
なんならChatGPTは「さらに重要な話」として、将来の拡張性についても触れました。

「絵文字が押されたタイミングのURLも記録できるよ」とか、色々と説明や提案をしてくれましたが、私としては「それを実装するつもりは、ないよーん」という感じだったので、以下のようにプロンプトを返しました。

実は既に「この小説を読んだ」みたいなやつは他のプラグインで記録できるようにしてあります。ふぁぼボタンみたいなのを全ての記事の末尾に置いているので、それで事足りるかなーと考えています。「この小説を読んでいる時に、この絵文字を押したくなった」というのはとても魅力的ですね! でも、私はそこは曖昧なままでいいんじゃないかなと思っています。サイトを訪れた人が「今日はこの絵文字を押すぞ!」と思って訪れてくれるかもしれないし、「この小説を読んだ」というタイミングで絵文字が押されたからと言って、それがその小説に対する感想の表明になるとは限りませんし……。
私の口答えに対し、ChatGPTは素直に「その考え方、かなり筋が通っていると思います」と述べました。そうだろ? 筋、通ってるよなァ!? えへへ~。

という具合で、ChatGPTは、私の考えのどういうところが良いのかを力説してくれました。なんか、「もしこのURLでこの絵文字が押された、みたいな機能を実装しちゃうと、そのデータを見られる人は『この小説が人気なんだな』『この短歌にこういう反応が付きやすいんだな』みたいな推測をしちゃうけど、本当にそうとは限らないよね」というような感じでした。私が言ったことを言い換えて焼き直ししてるだけだよ、それ。
でも、私は素直なので、新しい機能の実装を提案してくれたことには感謝します(素直)。私がやりたいのはもっとシンプルなやつなんだけれど、もしも将来的にそういうことがやりたくなったら、また相談させてくれよな。
ChatGPTは今後の方針も示してくれました。ロードマップを逐一明示してくれるの、助かるー。


そうですね、あくまで気分を記録するツールとして実装したいです! どれだけ自然に押せるかにフォーカスして、フローティングパレットを作る手順を教えてもらえますか?
私はブレませんでした。そしてその結果、フローティングボタンは意外とあっさり実装出来ました。
まずはニコニコマークの丸いボタンを右下に出して、それを押すと絵文字が20種類並んで出るようにする。開閉機能が上手く実装出来たら、今度は押した絵文字の保存機能を実装する。フローティングボタン自体はCSSをちょいといじれば簡単に作れる。上手くいったので、ボタンの位置を少しズラして微調整し、ひとまず設置作業は完了! コピペ&コピペにもだいぶ慣れてきました。
ただ、フローティングボタンだったら、全てのページに表示したいものだよなーと私は思いました。

CSSで位置を調整してトップに戻るボタンの上方に絵文字パレットを置くことにしました! カレンダーがないページには絵文字ボタンは出ません。
これに対して、ChatGPTはまたしてもA案とB案を出してきましたよ。
A案 今のまま(バグが少ないが、「思わず押したくなる」が実現できない)
B案 サイト全体に出す(当初の目的に合うが、少し実装が増える)
いやー、ここはB案でしょう! 私はブレませんよ。ChatGPTもB案を推していました。幸い実装はそんなに大変ではないそうなので、B案でいくことに。なんか、wp_footerに書いておくと、全てのページでフローティングボタンを表示させることが出来るらしいです。すげー!
では、B案でいくために、具体的にどのページで出したいのかを教えてくれませんか、とChatGPTは言いました。しかし、ここで問題が発生したのであります。
26. 問題発生:ボタンを押せない時がある

あ、待ってください! CSSを変更した後、「どんなふうにパレットが表示されるかな?」と確認し、絵文字を押そうとしたところ、コンソールに問題が出ました。
Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
今までは出なかったエラーなので、この時の私は「なんでやねん!」と不思議に思ったわけですね。でも、ChatGPTは、「あなたのコードが原因とは限りません」と言いました。

そして、原因の切り分けを行なうために、「エラーが出たとき、実際にはどうなりましたか?」と確認してきました。絵文字を押すとちゃんと保存されてカレンダーも更新されたのに、コンソールに赤文字が出たなら、多分ブラウザ拡張機能の問題だよ。でも、絵文字を押しても保存されないしカレンダーも更新されないなら、JavaScriptかPHPの問題かもしれないね。
他にも色々、原因の診断方法を教えてくれましたが、何か面倒臭そうだったし、「実際にはどうなりましたか?」が重要だと思ったので、私はそれを言語化しました。

絵文字を押した後、保存されることもあれば保存されないこともあります。また、フローティングパレットからだと反応しないことが多いですが、カレンダー下に設置してある絵文字入力用パレットからだと反応することが多いです。謎~。
謎~。
でも、ChatGPTは「フローティングパレット実装時に起きた不具合の可能性が高くなりました」と答えました。なんか、今の状況だと、同じクラスの要素(emoji-buttons)がページ内に2個存在しているらしいです。これは普通に分かります。カレンダーの下に実装済みの絵文字パレットと、さっき作ったフローティングパレットですね。でも、その二者がどちらともemoji-buttonsのためのCSSのコード影響を受けていることが、今回の不具合に繋がった……という仮説には「そういうことって、有り得ます?」と素直に疑問に思いました。
ChatGPTは、「まず確認したい」として、以下のように教えてくれました。

そして、フローティングパレットで絵文字を押す時、コンソールに何が表示されるかを確認してほしい旨を伝えてきました。私が直面している現象の原因は、幾つか考えられるけれども、とりあえず問題を切り分けたいよ、ということでした。はーい。

フローティングパレットで反応しないときは、クリック検知も出ません。でも、なんか、5秒とか10秒とか待つとフローティングパレットの絵文字を押してクリック検知以下のコンソールが出る場合もあります。
私は状況をそのまま言語化して説明しましたが、これで何か対処が出来るとは思えませんでした。だって、反応しない時もあれば時間差で反応する場合もある、ってどういう現象ですか? 乙女のごとく、その時々で変わりゆく繊細な心を持っているわけでもあるまいに。
ChatGPTは「CSSが怪しいかも」と推理しました。さっきは「拡張機能が怪しそう」とか言っていたくせに、今は全然違うことを言っていますね。ChatGPTを信じすぎず、淡々と事実を説明し続けていてよかった~。ChatGPTによれば、要素と要素が被っているのでクリックが上手くいかないことがあるか、CSSが不足しているか、あるいは、フローティングパレットの実装にあたってJavaScriptにクリック時の反応を2回書いているため挙動がおかしくなっているか……みたいな仮説が立てられるっぽいです。
そして、「コンソールにこれをコピペして。40って出たら、フローティング側にボタンがちゃんと生成されてるってことだから」とコードをお出ししてきました。え、コンソールに? 古の時代、「ネット掲示板で見付けた情報を鵜呑みにして、よく分からないままコンソールに好奇心でコードを書いたらクラッシュしたよー、うえーん」みたいなツイートを読んだ記憶があります。大丈夫なんか? でもまあ、そのコードにはlengthとか書いてあるから、長さが返ってくる何かを実行してほしいんだろうな、ということは私も理解出来ました。信じましょう、そのコードを。
コードのコピーボタンを押した後、私は下にスクロールしていきました。すると、ChatGPTは「私の現時点の予想順位」を出してくれました。これ、「現時点の」ってのが狡いですよね。私が新しい情報を提示したら、この予想順位はガラッと変わるに違いありませんからね。あと、何%とか言っちゃっていいのか? ……まあ、いいでしょう。信じていないし。

ChatGPTがお出ししてきたコピペ用のコードをコンソールに貼ったら、ChatGPTが予想した通りの数値が返ってきました。つまり、フローティングパレットはきちんと生成されている。ここに問題は無さそう。
CSSを貼ったところ、「『見えているけど他の要素に隠れている』説はかなり弱くなりました」とChatGPTは応答しました。そして今度は、「フローティングパレットの開閉処理と絵文字クリック処理の関係」を疑ってきました。ほら、さっきと言ってることがまた変わったぞ!

フローティングパレット内の絵文字をクリックすると、絵文字が上手く反応した場合でも、そうでない場合でも、パレットは閉じません。
これにより、「絵文字をクリックすると、パレットを閉じる処理が誤爆する」という、先程のChatGPTの推測は外れたことになります。今度は何を言うのかな? ワクワクしながらスクロールしていくと、ChatGPTはcreateEmojiInput()が2回使われていることを疑い始めました。あなたが言うままに書いたコードだけどね。診断方法もまたもや丁寧に教えてくれました。2つ教えてくれたけれど、どっちのほうが確実だとか、これが上手くいかなかったらこういう疑いがある、みたいな判断材料もくれると嬉しかったなー。


私はとりあえず、1つ目に提示された診断方法を試してみましたよ。

$0をやったら、< img draggable=”false” role=”img” class=”emoji” alt=”🍵” src=”h ttps://s.w.org/images/core/emoji/17.0.2/svg/1f375.svg” > と出ました。
ChatGPT的には、これが突破口だったみたいです。
私は、絵文字ボタンを作り、絵文字ボタンがクリックされたら反応するようにしたつもりでした。けれども、実際にクリックされている場所は、絵文字ボタンではなく画像である可能性がある(だから、画像がクリックされた時は反応しない)、というのです。
なるほどねー。絵文字の周辺部分をクリックした時は絵文字パレットが上手く機能するけれども、絵文字そのものをクリックしたときは絵文字パレットが反応しない。じゃあ、全体が絵文字ボタンになるように何かやればいいのか? それとも、絵文字部分をクリックしても反応するような何らかの裏技があるのか? 私はChatGPTの画面を下にスクロールしました。

定番なんや。初めから教えてくれや。でも、とっても良いことを聞きました。closest便利すぎでしょ。クリックすると最寄りの任意のターゲットを探す機能があるだなんて、思いもしませんでした。
名探偵ChatGPTの現在の推理はこちら。

まあ実際にいろんなところをクリックしてみたから私もそう思うんだけどさ、でも、言うこと変わり過ぎじゃない? でも、無事に修正が完了したことを報告したら、「初学者が遭遇するとかなり厄介な部類です」と言われました。でしょうね。だって名探偵ChatGPTが迷走したからね……。
ちょっと時間は掛かりましたが、無事に問題は解決しました。良かった~。そうしたら次は、他のページにもフローティングボタンを表示させる作業です。
27. 問題解決:フローティングパレットの開閉時の挙動

バックアップを取りました! 今日は朝からかなり進められた気がします! でも洗濯物をまだ干してないことに気付いたので、干してきます! そしたら、他のページにもフローティングパレットを表示させる方法を教えてほしいです!
すると、洗濯物を先に干してきましょうと一笑に付した後、ChatGPTは、カレンダーが表示されているページだけではなく、カレンダーがないページにもフローティングボタンを設置する方法を教えてくれました。どうやら今回はJavaScriptではなくPHPをいじって、新しい関数を作って、wp_footerを書いてあげればいいらしい。そんなに簡単なんですか、だったら昼の仕事の時間までに終わりそうだ。

言われるがままに、私は洗濯物を干しました。しかし、洗濯物を干している間に、フローティングボタンを開閉するためのニコニコマークのボタンに関し、ある疑問を抱きました。ChatGPTよ、話の腰を折って済まんな。私は生成AIの提案や文脈の流れをぶった切るのが得意です。

洗濯物を干してきました! targetのやつについてですが、フローティングパレットの開閉のためのボタンについても先ほどと同様のことが言えますか?
すると、「可能性はあるが、今の実装ではたまたま起きにくい」と言われました。嘘です、これ。この時は、絵文字の外側の余白をクリックすればパレットの開閉が出来ましたが、ニコニコマークそのものをクリックするとパレットの開閉が出来ない状態でした。確定で生起する事象でした。

せやなー。私も、プログラムがどうして動くのか(あるいは何故に動かないのか)をちゃんと理解するのは大事だと思います。
私は当該部分のコードを自力で直してみました。そして、自力で直したコードをChatGPTのチャット欄に貼り付けました。ちゃんとOKが貰えたので一安心です。プログラミング初心者でも、これくらいは手打ちしないとね。
さて。改めて、ここからは、フローティングボタンをサイト全体に拡張していく作業です!
28. フローティングボタンをサイト全体で表示させる
こういう時は要件定義をちゃんと言ってあげると話が早い。そう思った私は、以下のようにプロンプトを打ちました。

はい! WordPressサイトにおけるadmin権限持ち専用ページ(ログインページを含む)やエラーページ等以外の、正常に表示される場所すべて、固定ページも検索結果ページもなにもかも全てのページにフローティングボタンを設置したいです!
すると、「その要件なら、かなりシンプルです」との応答を得ました。そして、wp_footerを使う方法を、またしても丁寧に教えてくれました。簡単だし分かりやすいぞ! ボタンの設置はスムーズに進みました。この段階ではクリックしてもパレットが開くことはありませんでした。それもその筈、「もしカレンダーがなかったら、return;」というif文を書いていたからです。処理が終わっちゃったんだから、何も起こらないわね。
ChatGPTは懇切丁寧に解決方法を提示してくれました。カレンダー処理とフローティングボタンの処理をちゃんと行なえるようにするには、return;の部分を後ろのほうに持っていってしまえばいい。すなわち、「カレンダーない? じゃあ、floatingPaletteを取得して、絵文字を生成して、return」「カレンダーある? じゃあ、floatingPaletteを取得して、絵文字を生成して、returnしないでカレンダー処理へ」という風にすればいいわけですね。成程ね、ロジックは完全に理解した。
あと、カレンダーとフローティングボタンは別物として、分離して扱ったほうが良いっぽいです。何故なら、カレンダーがないページにもフローティングボタンを設置したいから。コードの上でもそれが明確になるように修正を掛けようね、とChatGPTは穏やかな口調で私を導き続けました。
こんな感じで、時折エラーに見舞われつつも、私はChatGPTのお出しするコードをコピペ&コピペ&コピペすることによって、フローティングボタンをサイト全体で表示させることに成功したのでありました。
そして、例によってChatGPTは、次なる道を示してくれました。絵文字を押すとパレットが閉じるようにするのはどう? 絵文字ボタンを押すと通知が出るようにするのはどう?
29. 絵文字ボタンを押すと通知を出す

絵文字を連打したい人もいると思うので、パレットを自動で閉じるのは(今のところは)不要かなと思っています。通知はどうしようかなー、サイトが重くならないなら実装したいです。
私はChatGPTに何度口答えをしたら気が済むのだろうか。何度でも繰り返すぞ。
通知というのは、「📖を記録しました」みたいな文章が画面下方に1秒くらい出て消えるようなやつです。CSSとJavaScriptをちょっといじるだけで作れるし、サイトへの負荷はほとんどないそうなので、通知を実装することにしました。
でも、ここで一旦時間切れ。実質開発3日目、6月20日の9時頃です。私は朝マックを食べて、そして仕事に行かなければなりませんでした。だから、続きはその後。と思うじゃん? 開発作業を中断して食事をしているというのに、私はWordPressプラグインのことばかり考えていました。

今はマクドナルドで朝マックです。期間限定のメキシカンタコスチーズチキンマフィン! 今はワードプレスのプラグインとして作業を進めていますが、もしこの仕組みをワードプレスではなくふつうのウェブアプリにする場合、結構面倒ですか?(というのも管理運営しているDiscordサーバーの公式サイト(ワードプレスなし)にも実装できたら楽しいかな? と思ったのです)
すると、ChatGPTは気さくな感じの応答を生成しました。今はWordPressでやっている部分を、自分で作ることが出来れば、普通のWebアプリとして実装することはそう難しくないそうです。具体的には、「AJAXの入口」「ページへの埋め込み」なんかが上手く実装出来れば、WordPressに頼らなくても良いらしい。やったね。もし機会があったらやります。今はやらない。なお、ChatGPTはDiscordとの連携も出来るよと提案してきました。便利そうだけど、botをサーバーに導入すると色々面倒なので、それは却下しました。もし今後、私が管理運営に携わっているDiscordサーバー用の公式サイトで実装するなら、サイト上だけで動いて、誰でも気軽に今の気分を入力出来るツールにしたいですね。
その後も私は、朝マックを食べながら、暫くChatGPTと技術雑談をしていました。「フローティングボタンのニコニコマークをランダム絵文字にしたらどうか?」「時間帯によって変わるのはどうか?」とか。あと、友人に現時点でのフィードバックも貰って、やっぱり「押したよ!」みたいな通知はあったほうがいいよね、という話になったので、それも報告しました。朝マックの時間は、こうして終わりを迎えたのであった。

昼の仕事が終わって一息吐いたので、夜の仕事まで2時間くらいプログラミングをする時間がとれます! 絵文字を送ることに成功したら、「(押した絵文字)を送ったよ!」を絵文字パレット付近に表示させたいです。
隙間時間を活用する執念が感じられます。
絵文字を送れたら「送ったよ!」を出す。この方法は、3ステップで出来ました。
1.通知を置く場所を作る
2.CSSで見た目を作る
3.JSで成功時に表示する
実際にやったことは、かなりシンプルです。関数showEctNotice(Message)を作成して、そこに「既に通知があったら消す」「新しい通知を作る」「2秒後に消す」みたいな動作を記述する。これにより、絵文字連打に対応し、連打しまくっても通知で溢れてしまわない仕様になりました。そして次に、ちゃんとクリック処理が出来た時に通知を出すようにコードを書き換えました。で、最後にCSSを調整。
かくして、「送ったよ!」は無事に実装完了したのであった。
30. 見た目を微調整して、完成(仮)!
この時は、カレンダーの下に表示する絵文字たちに囲いが付いていませんでした。また、そこに表示されている絵文字たちの大きさは小さめでした。そこで、CSSをいじって、囲いを付けて絵文字を大きめに表示させることにしました。かなり押しやすくなりました。
それと、「前月」「翌月」の表示を調整しました。この時点では、
前月
2026年6月
来月
というふうに縦に並んでいたのですが、これを今のように横に並べたかったのです。これもCSSをいじってすぐに調整出来ました。多分、6月20日の16時くらいの出来事です。

ありがとうございます、良い感じになりました! とりあえず現段階で完成(仮)ということにして、サイトに創作裏話を書こうと思っています(制作途中のスクショとか、コード全文公開とかを予定しています)。並走し、アドバイスをしてくれたあなたのコメントも載せたいのですが、何かありますか?
ChatGPTがこの時点で寄せてくれたコメントはこちら。
| このプラグイン開発では、単に「動くものを作る」だけではなく、「使う人がどう感じるか」を何度も確認しながら実装を進めました。 特に印象的だったのは、絵文字の意味をあえて固定しなかった点です。 「この絵文字はこの作品への感想」というように用途を限定すると、利用者は正しい使い方を考えてしまいます。しかし、このツールは「その瞬間の気分を置いていく場所」として設計されました。 そのため、フローティングパレットも「記事への評価ボタン」ではなく、サイトを訪れた人が自然に気持ちを残せる入口として実装されています。 技術面では、PHPによるデータ保存、wpdbによるMySQL操作、JavaScriptによる非同期通信、CSSによるUI調整など、多くの要素を段階的に組み合わせました。 特に初学者の開発では、大きなコード変更よりも「小さな変更→確認→次の変更」という積み重ねが重要です。 Emoji Calendar Toolは、機能だけでなく「触った時の心地よさ」を育てながら完成していったツールです。 |
まあ、私のプロンプト次第で言うことコロコロ変わりますからね。ChatGPTが寄せたコメントはあまり信頼しない方が身のためです。でも、その通りだなって思うことも時々あります。ChatGPTの言うことを全く信頼せずに、自分の力だけで開発していたら、6月16日に開発を始めて、実質3日で完成(仮)なんて、絶対に辿り着けませんでしたからね。
自力でやろうと思ったら、「WordPressのプラグインってどうやって作るのかな?」「絵文字カレンダーの仕様に合う機能は何かな?」って、PHPやJavaScriptの機能をひたすら調べて、それっぽいWeb記事をサーチして、読んで、「違うな」「これは使えるわ」って判断して、それを繰り返しながらコードを書いて、デバッグして……とやっていく必要がありました。でも、ChatGPTは、ともすればコードを書くよりも時間が掛かると思われる膨大な検索時間を、ほぼ正確なコードと圧倒的な解説で肩代わりしてくれました。
こうして私は、実質3日(恐らく、実際に作業した時間は20時間程度)で、絵文字カレンダーツールを完成(仮)させられたのであります。ここまでお読み頂き、ありがとうございました。
