いいねカウンタ @piyoppi/counter-tools を作りました
先日の記事 でブログにいいねできるようになった旨お知らせしましたが、このために @piyoppi/counter-tools を作りました。
せっかくつくったので、このアプリケーションについてご紹介します。
(このページは @piyoppi/counter-tools の実装の変更に伴い更新される可能性があります。)
@piyoppi/counter-tools とは?
Webページ(=URL)ごとに「いいね」を受け付けたり、現在の「いいね」の数を取得したりするアプリケーションです。
各ページに「いいね」ボタンを設置したり、カウント値を表示するカスタム要素を設置することができます。
@piyoppi/counter-tools の構成
このアプリケーションは以下の要素で構成されています。
- @piyoppi/counter-api カウント値を素得したり、カウントをインクリメントしたりするAPI
- @piyoppi/counter-button カウント値を表示したり、カウントをインクリメントするボタンを提供するカスタム要素
- actions-upload-url-whitelist-to-s3 sitemap.xmlからURLホワイトリストを生成して登録するGitHub Actions
各種サーバサイドのリソースにAWSが提供するサービスを用いています。
@piyoppi/counter-api は「カウント値の返却」「インクリメント」のエンドポイントを持っており、いずれもURLをリクエストパラメータとして受け付けます。 このURLは「現在表示中のウェブページのURL」が設定されることを期待しています。 このURLがStorage(S3)に配置されたURLホワイトリスト内に存在すれば、データベース内のカウンタをインクリメントします。
actions-upload-url-whitelist-to-s3 にサイトマップを入力することで、URLホワイトリストをGitHub ActionsのWorkflowで生成し、Storage(S3)にアップロードできます。
@piyoppi/counter-button はこれらのエンドポイントを利用してカウント値を表示したり、カウンタをインクリメントするUIを提供します。