筆者は、Astroベースで作成した静的サイトをCloudflare Pagesで運営しています。
今回そこに置いてある記事に「いいねボタン」を設置しようと思い立ちました。
今回の記事では、要件と実装方法の検討まで記載します。
実装詳細については、別記事の予定です。
要件
なんとなく思いついた要件は以下の通りです。
- いいねボタンを押すとデータベースに「いいね」された記事識別番号と「いいね」された日時の記録が残る
- いいねボタンにはこれまで「いいね」された回数が表示される
- ボタンに表示された回数はリアルタイムで変更される
- いいねボタンの連打は5回までで、それ以上は押せなくなる
- 連打回数制限は一定時間経過後に解除される
この要件を検討してみます。
検討
いいねボタンを押すとデータベースに「いいね」された記事識別番号と「いいね」された日時の記録が残る
静的サイトのため、データベースに対する処理はJavaScriptからです。
ただのJavaScriptからデータベースにアクセスすることはできないような気がするので、データベースへアクセスするAPIを準備して、そのAPIに対して静的サイトからリクエストを送することにします。
APIのURLには記事識別番号をくっつけて、POSTすれば、受信側で記事識別番号をデータベースに登録できるでしょう。
いいねボタンにはこれまで「いいね」された回数が表示される
APIから「いいね」された回数をGETすることにします。
POSTするときと同様に取得したい記事の記事識別番号をURLにくっつけましょう。
ボタンに表示された回数はリアルタイムで変更される
GETした値を表示しておいて、POSTしたら、その値をインクリメントすることでなんとかなるでしょう。
いいねボタンの連打は5回までで、それ以上は押せなくなる
これはIPアドレスなどで送信者を識別するべきだと思います。
どうやら、JavaScriptで送信者のIPアドレスを取得するにはhttps://ipinfo.io/を利用するのがよくある手法らしいです。
ですが、結局JavaScriptでAPIを叩く以上、そこに乗せるデータはいくらでも偽装できそうな気がします。
それにIPアドレスを取得して管理するのは個人情報的な点で気が進みません。
制限が時限なことも、実装しないとならない処理がややこしくなりそうです。
ということで、完全に簡易的な制限となりますが、Cookieを利用することにします。
Cookieに記事識別番号とクリック回数を登録することで、回数制限します。
ちょっと調べればいくらでもクラックできる手法ですが、大して重要な情報を管理するわけでもありませんし、サイト自体がGoogle検索を避けていたり、ボットを回避するためのBASIC認証を設けていたりして、閲覧者の少ないサイトですので、リスクは看過できるレベルであると考えました。
連打回数制限は一定時間経過後に解除される
Cookieの賞味期限を利用します。
Cookieが存在しなければ押せる、Cookieで取得した値がN回以下なら押せる、N回より大きければ押せない、という仕組みです。
まとめ
以上の検討内容から、以下のようにしようと思います。
- Cloudflare WorkersでAPIを作成する
- 静的サイトにボタンを設置して、JavaScriptでAPIを叩く
- ボタンのdisabled制御はCookieの値を元にしておこなう
Cloudflare Workersを使うのは、現在色々なサービスをCloudflareに一括している都合上、利便性を考えたためです。他のサービスとの比較はしていません。
これを明日以降、実装していきたいと思います。
繰り返しになりますが、上記の実装予定方法は、悪意があればクラックし放題の内容となります。
そのため、閲覧者が限られているサイトで、かつ、サイト自体へ影響を与えることがない「いいねボタン」だから採用しています。
決しておすすめの方法ではないことをご承知の上、興味がある方は、以降の記事をお待ちください。