自己のリポジトリでGitHubスタイルのリアクションのいいね機能

前書き#

さまざまな方法で記事のいいね機能を実装している方々がいます。
ブログシステムに組み込まれているものもありますし、コメントシステムに統合されているものもあります。
統計コードの API を使用して実装しているものもありますし、サードパーティの SaaS サービスを使用しているものもあります。

最近、空白大佬の Memos でemaction/emaction.frontend を知りました。
このプロジェクトはバックエンドのコードも提供しています。emaction/emaction.backend 。

このバックエンドのコードは、現時点ではデータベースの初期化コードを提供していませんが、ソースコードを逆解析して Cloudflare D1 の初期化コマンドを見つけました。

なぜこれを選んだのか？#

なぜこのいいね機能を選んだのか。
これは GitHub のいいね機能を模倣しており、ほぼ 1:1 で再現されています。
GitHub は正義です！

手順#

1. バックエンドのデプロイ（オプション）#

バックエンドのデプロイは必須ではありません。公式の API を使用することもできます。

前提条件：

Cloudflare アカウントが必要です
パソコンに Node.js 環境が必要です

まず、Cloudflare で名前を emaction とする D1 データベースを作成します。
このデータベースの ID をコピーします。例：acf6da62-7777-4459-a579-123456789012

次に、ローカルのパソコンでコードをクローンします：

git clone https://github.com/emaction/emaction.backend.git

依存パッケージをインストールします：

cd emaction.backend

# パッケージをインストール
npm install

# Wranglerをグローバルにインストール
npm install -g wrangler

注：ここで Wrangler をグローバルに -g インストールする必要があるという報告がありましたが、理由がわかりません。

クローンしたコードの wrangler.toml ファイルの database_id を自分のものに変更します：

name = "api-emaction"
main = "src/worker.js"
compatibility_date = "2023-07-25"
usage_model = "bundled"
env = { }

[[d1_databases]]
binding = "d1" # i.e. available in your Worker on env.DB
database_name = "emaction"
database_id = "acf6da62-7777-4459-a579-123456789012" # 自分のものに変更する

[triggers]
crons = [ ]

Wrangler にログインします：

wrangler login

表示されるブラウザのページで Allow をクリックして認証します。

自分のパソコンのターミナルで（Cloudflare のウェブページではなく）データベース（名前を emaction とします）にテーブルを作成します：

wrangler d1 execute emaction \
  '--command=CREATE TABLE reactions (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    target_id TEXT NOT NULL,
    reaction_name TEXT NOT NULL,
    count INTEGER NOT NULL DEFAULT 0, 
    created_at INTEGER NOT NULL,
    updated_at INTEGER NOT NULL
  )'

プロジェクトを Cloudflare Worker にデプロイします：

wrangler deploy

そして、Cloudflare Worker にログインすると、api-emaction という名前の Worker が見つかります。
この名前は、クローンしたコードの package.json ファイルの名前と対応していますが、必要に応じて変更することができます。
この Worker のドメインを覚えておいてください：https://api-emaction.xxxxxxx.workers.dev。
ユーザーの大半が国内の場合、快適にアクセスするためにカスタムドメインをバインドする必要があるかもしれません。

2. フロントエンドの使用#

フロントエンドの使用方法は、emaction/emaction.frontend のドキュメントと同じです。
ただし、カスタムの endpoint を JS コードに渡す必要があります。

HTML で JS モジュールをインポートします。
この JS はダウンロードして自分で変更してデプロイすることができます：

<script type="module" src="https://cdn.jsdelivr.net/gh/emaction/[email protected]/bundle.js"></script>

HTML でこのモジュールを使用します：

<emoji-reaction endpoint="https://api-emaction.xxxxxx.workers.dev"></emoji-reaction>

この endpoint にはエラーチェックのデザインがないため、末尾の「/」スラッシュは入力しないでください。
カスタム ID reacttargetid は任意で変更できますが、同じページ内に複数のリアクションがある場合は、できるだけ異なるものを使用してください。