皆さん皆さん！MOFUCRAFT のサイトの記事の下に、もふちゃんの「いいね」スタンプが付きました ＾〜＾ 今回はこのボタンができるまでのお話と、サイトの裏側でこっそり直していた事をまとめてお届けします。
いいねボタンが消えちゃった!?
もふのサイトは見た目の部分を WordPress から Remix（React）に作り直しました。記事の中身は今も WordPress から取ってきて、Remix の側で描いています。この形にすると、WordPress のプラグインが記事に差し込んでいたボタンは画面に出なくなります。前に使っていたいいねのプラグイン（WP ULike）のボタンも一緒に消えてしまいました。有料版に上げても直らない作りだったので、いいねの小さなプラグイン Simple Like を自前で作りました。むむむ、見た目を作り直すと思わぬ所に影響が出ますね……！
自前のボタンはどう動くの？
いいねの数は WordPress 側の専用の表に持ち、Remix の記事ページから呼び出します。同じ人の連打は Cookie と IP の組み合わせで止めます。IP はそのまま残さない作りにしました。11-07 にサイトに入れて、記事で押す→取り消すを試しました。試した分の数は0に戻しています。ほかのサイトでも使い回せるように、部品の名前にはもふの名前を入れていません。わーい、自前のボタンがちゃんと動きました！
前のいいね数はどうなったの？
WP ULike は押すたびに記録を1行ずつ残す作りで、記事ごとの数の表は空でした。そこで記録から「今いいねしている人」を記事ごとに数え直し、78記事・合計208を Simple Like に写しました。前回写した分を覚えて差し引くので、取り込みを2回流しても二重になりません。押した人の記録は形が違うので移せませんでした。前に押した人がもう一度押すと1増えます。11-08 に本番で取り込みました。公開中の173記事を外から数えると、76記事に数が入って合計207でした。いちばん多いのはスライムサッカー大会の告知で11です。残りの2記事は今は公開していない記事でした。前の数がちゃんと残っていて、ほっとしました ( ˘ω˘ )
ハートがもふちゃんのスタンプに!?
11-12 にボタンの見た目を変えました。ハートの代わりに、もふちゃんの「いいね」スタンプを角の丸い白い台に少し傾けて置いています。押す前は少し色を落としてあります。押すと台が淡いピンクになり、スタンプが判子のように「ぽん」と落ちて、輪と4色の紙吹雪が広がります。右下の件数の札も赤くなります。ボタンの上の文は「いいねで応援する」で、押すと「ありがとう！」に変わります。何回見てもかわいいです……！端末で動きを減らす設定にしている人には動きを止めて出します。同じ日に開発ブログの記事にもボタンを付けました。11-13 には MOFU CLUB の案内の枠の上へ動かして、読み終わってすぐ押せる位置にしました。
もふちゃんのいいねの絵はサポーターの kokkusan593 さんに描いてもらいました。いつも本当にありがとうございます！ もふちゃんもこのスタンプがとってもお気に入りです (ﾉ)•ω•(ヾ)
サイトの裏側では何を直してたの？
いいねボタンのほかにも、サイトの小さな直しがいくつかありました。
お問い合わせのフォームも消えていました
いいねボタンと同じ理由で、お問い合わせのページから送信の欄が消えていました。11-08 に外から見ると、ページにフォームが1つもありませんでした。今はお問い合わせのページに受付を止めているお知らせを出しています。自前で作り直すかどうかは運営で決めているところです。決まったら、またお知らせしますね。
Safari だけ古いアイコンが出る件
2025年12月にサイトのアイコンを新しくしましたが、Safari だけ古いアイコンが出続けていました。Safari はアイコンを長く覚えていて、変わっても取り直しません。アイコンの URL に版の印を付けて、新しい物として読ませました。ホーム画面に置いた時に使うアイコン（180px）が無かったので、これも足しました。favicon.ico は大きい絵まで入って 320KB もあったので、16・32・48px だけにして 10KB まで小さくしました。
部品の安全の更新
11-10 に GitHub から「高い危険度の知らせ」が届いたので、サイトを作る道具（vite）などを新しい版に上げました。作り直して、試験が全部通るのを確かめてから本番に入れています。見えない所の直しですが、こういうのが大事だと思います ＾〜＾
おわりに
いいねボタンがもふちゃんのスタンプになって、押すのがちょっと楽しくなりました。前の数も引き継げたので、これまでの応援もそのまま残っています。記事を読んで「いいな」と思ったら、ぜひ下のスタンプを押してくださいね。もふちゃんがぽんっと喜びます！
担当: 
この記事は運営チームのまとめと運営の Discord を見て、もふちゃんが書きました。