【ShinのAI活動ログ】おみくじに「サイト全体の累計」を実装した話

おみくじの累計を出したい

LUXの大吉おみくじを実装したあと、「どのくじがいくつ出たか表示すれば面白いんじゃないか」と思いつきました。

個人の記録ではなく、訪問者全員の結果を1つの数字に積み上げる、サイト全体の累計表示です。

ただ、これは素のHTML/JSだけでは作れません。引いた結果をどこかに記録しておく仕組み、つまりサーバー側の対応が必要になります。

コードスニッププラグインの導入

WordPressにPHPコードを安全に追加するため、「WPCode」というプラグインを新しく導入しました。

テーマファイルに直接書き込むと、テーマの更新で消えてしまうリスクがあるため、こうした専用プラグイン経由で追加するのが定石です。

累計を記録・取得するためのAPIを、WordPressのREST API機能を使ってPHPで組みました。

 結果を1件記録するエンドポイント
 現在の累計を取得するエンドポイント

ランク名は事前に決めた5種類以外は受け付けないようにして、不正なデータが送り込まれないよう防御も入れています。

正体不明の「保存できない」現象

正しい場所にコードを貼っても、保存ボタンを押すと毎回エラーで止まってしまう現象が発生しました。

調べていくと、サーバー側のセキュリティ機能が、保存時に送られるPHPコードの内容を不審なアクセスと誤検知してブロックしていたことが分かりました。

自分自身の正常な操作が、何度も「攻撃」と判定されていたわけです。

誤検知のログを確認しながら設定を調整し、最終的には無事に保存を完了させることができました。

ついでにセキュリティも見直す

この一連の作業でセキュリティのログを眺めていると、本来存在しないはずの設定ファイルを狙った偵察アクセスが複数記録されていることに気づきました。

これは自分の操作とは別の、外部からの本物の攻撃の下調べです。

念のためサーバー内を確認しましたが、該当するファイルは存在せず、空振りに終わっていることが確認できました。

あわせて、WordPressの管理者パスワードもこのタイミングで更新しておきました。

おみくじ本体への組み込み

API側の準備が整ったところで、おみくじ本体のJavaScriptを修正しました。

ページを開いた瞬間に、現在の累計をAPIから取得して表示

おみくじを引いて結果が出た瞬間に、その結果をサーバーに送信し、最新の累計をその場で更新

通信が失敗しても、おみくじ自体(抽選・演出・音)は問題なく動くよう、エラーは静かに握って体験を止めないようにしています。

見た目の調整

累計表示の置き場所は、最初は確率表の下に置いていましたが、確率表と累計表が並ぶと情報量が多く窮屈な印象だったため、箱(引くボタン)の下に移動しました。

さらに思い切って確率の数値表記自体を削除し、サブテキストの「1万分の1で凶がでるよ」という一文だけで雰囲気を伝える、すっきりした構成に変更しました。

タイトルも「⛩️ LUXの／大吉おみくじ！」と2行に分けて、「大吉おみくじ！」の部分だけ神社のネオンサインを思わせる朱色の発光アニメーションを加えました。

おわりに

今のところ、累計は大吉45回・超大吉1回というデータが積み上がっています。

これは自分で実際に引いて出した数字なので、見ているとなんだか感慨深いものがあります。

このおみくじは、大吉89.89%・超大吉9%・極大吉1%・神大吉0.1%・凶0.01%という確率に設計していて、ほとんどの人が大吉を引いて気持ちよく終われるようにしています。

ただ、1万分の1の「凶」だけは別の楽しみ方ができるように作ったつもりです。

1万回に1回しか出ない結果を引いたなら、それはそれで「激レアを引いた」という意味で十分ラッキーだと思います。

これから引いてくれる人の中に、その1万分の1を引く人が現れるのか、楽しみにしています。