v1.10.0リリースノート: お問い合わせ機能の追加

この記事はNext.js版の内容です。現在はAstroで構築し直したため、情報が古い可能性があります。当時のリポジトリはこちらにあるので参考にしてください。

一方的にコンテンツを積み上げていく単方向的なアプローチから脱却すべく、重い腰をあげてお問い合わせ機能を実装した。特にこだわりがないのであればリッチなUIを標準装備したGoogleフォームを使えば面倒な機能を実装せずに、はい終わりである。

しかし、エンジニアの個人サイトのお問い合わせフォームがGoogleフォームというのはちょっと寂しい。せっかくなので自分が理想とするお問い合わせフォームを作ってみることにした。一から実装するとなるとボット対策や自動返信メール、管理者（私）への通知をどうするかなど意外と考えることがあって面倒だったが楽しかった。

一気に実装してしまったので思い出しながら要点だけまとめていく。

全体の処理の流れ

上記が全体の処理をまとめたシーケンス図になるのだが、レンダリングして初めて文字の小ささに気づいた。今のところズーム機能はないため、目を凝らして見ていただく他ない。

さすがにこれでは使い物にならないので各々の処理ごとにシーケンス図を書き直した。ただ、全体の処理を分割するとライフラインの実行仕様が把握しにくくなるので一応残してある。

エラーの箇所を省いて簡単に流れを箇条書きすると以下のようになる。

ユーザがお問い合わせページにアクセスする
Vercel Edge ConfigからブロックしているIPアドレスリストを取得して判定する
お問い合わせページを表示する
ユーザがお問い合わせフォームに入力して送信する
クライアント側でreCAPTCHAトークンを取得する
バックエンド側に5を含むリクエストを送信する
Upstashでレートリミットを確認する
reCAPTCHAにリクエストの判定を依頼する
Google API OAuth 2.0を利用してアクセストークンを取得する
Google Sheetsにお問い合わせ内容を記録する
Google Apps Scriptが確認メールの送信をGmailにリクエストする
Gmailから管理者へメールが送信される
LINEから管理者へメッセージが送信される
ユーザが確認メールの送信を希望する場合はResendからメールを送信する
ユーザに成功メッセージを表示する
お問い合わせ内容が不適切だった場合は手動でVercel Edge ConfigのブロックIPアドレスリストに登録する

IPアドレス制限

あまり考えたくないが、お問い合わせフォームを使って嫌がらせが行われる可能性は万が一にもある。そうなってからコードを書いて対応するのは面倒くさいのであらかじめIPアドレス制限機能を追加しておく。

悪意のあるIPアドレスを毎回ビルドに組み込むのでは待ち時間が長く即効性に欠けるのでVercelのグローバルデータストアである Edge Config を利用する。

以下のようにJSON形式で記述できる。

{
  "blockIps": ["127.0.0.1"]
}

上記で設定した値をNext.jsのアクション実行前に読み取って適切なルーティングを行う。具体的にはリクエスト完了前にコードを実行可能な Middleware に処理を追加する。

1
import type { NextRequest } from 'next/server';
2
import { NextResponse } from 'next/server';
3
import { get } from '@vercel/edge-config';
4

5
export const config = { matcher: '/((?!api|_next|static|public|favicon).*)' };
6

7
export const middleware = async (request: NextRequest) => {
8
  const blockIps = await get<string[]>('blockIps');
9
  const accessIp = request.ip;
10

11
  if (accessIp && blockIps?.includes(accessIp)) {
12
    request.nextUrl.pathname = '/forbidden';
13
    return NextResponse.rewrite(request.nextUrl, { status: 403 });
14
  }
15
};

8行目でEdge ConfigからブロックしているIPアドレスリストを取得して、9行目でリクエスト時のIPアドレスを取得している。リクエスト時のIPアドレスがブロック対象のIPアドレスリストに含まれる場合は/forbiddenページに飛ばす。

嫌がらせをしてくるような人にはびっくり系のブラクラを用意してあげても良いのだが、それはちょっとやりすぎなのでシンプルなページを表示するに留めた。

ちなみにEdge Configを利用してメンテナンスモードの実装も行っている（なかなか使う機会がないけど）。

入力値のバリデーション

フィールドには自由に入力させてあげたいのは山々だが、制限を設けておかないととんでもない使い方をされる可能性がある。とはいえ、あくまでお問い合わせフォームなので特に複雑なバリデーションは施していない。

今回はスキーマ宣言とバリデーション定義を一度に行える Zod を利用した。昔は似たようなライブラリの Yup を使ったこともあるが、今はスキーマファーストなバリデーションを実装したければZodを選ぶ方が無難かも¹。

定義したスキーマ（以下参照）はクライアントだけではなくtRPCでのサーバ側バリデーションやメール送信時の型定義まで幅広く使っている。

1
import { z } from 'zod';
2

3
export const ContactSchema = z.object({
4
  email: z
5
    .string()
6
    .min(1, { message: 'メールアドレスを入力してください' })
7
    .max(255, { message: 'メールアドレスは 255 文字以内で入力してください' })
8
    .email({ message: 'メールアドレスの形式が正しくありません' }),
9
  name: z
10
    .string()
11
    .min(1, { message: '名前を入力してください' })
12
    .max(255, { message: '名前は 255 文字以内で入力してください' }),
13
  type: z.enum(['jobScouting', 'projectConsultation', 'feedback', 'collaboration', 'other'], {
14
    message: 'お問い合わせ種別を選択してください',
15
  }),
16
  content: z
17
    .string()
18
    .min(1, { message: 'お問い合わせ内容を入力してください' })
19
    .max(2000, { message: 'お問い合わせ内容は 2000 文字以内で入力してください' }),
20
  shouldSendReplyMail: z.boolean(),
21
  recaptchaToken: z.string().optional(),
22
});

Next.jsを使っていることだし、プログレッシブエンハンスメントなフォームを実現できるServer Actionsを使おうと思ったが、shadcn/uiがreact-hook-formに依存しているため今回は見送った。 react-hook-formでもServer Actionsへの対応は進みつつあるようだが、もうしばらく時間がかかりそう²。

useActionState を使った実装に書き換えようと試みてはみたものの、思いの外複雑な実装になったため止めた。 shadcn/uiを使っていなかったらスムーズに導入できたと思うが、いかんせん便利すぎるので離れられない。

App Routerがリリースされて早くも1年近く経過したにもかかわらず、未だにベストプラクティスとなるバリデーションの実装方法が確立されていないので毎回悩む。納得できる実装方法が見つかれば、Server Actionsを使うように修正する予定。

クライアント側のバリデーションが終わったらreCAPTCHAにトークンのリクエストを行う。このトークンはバックエンド側で使うのでリクエストボディに含めておく。

reCAPTCHAトークンの取得には react-google-recaptcha-v3 を利用している。

レートリミット

このお問い合わせフォームは複数の外部APIを無料枠の範囲で使っているため、大量のリクエストが送信されるとすぐに無料枠をオーバーしてしまう。それは避けたいので Upstash のRedisを使ってレートリミットを実装した。

IPアドレスをキーとして1分間に1回までフォームの送信を可能にしてある。

使用方法をイメージしやすいように1つのファイルにまとめてみた。

1
import { Ratelimit } from '@upstash/ratelimit';
2
import { Redis } from '@upstash/redis';
3

4
type SlidingWindowProps = Parameters<typeof Ratelimit.slidingWindow>;
5

6
const rateLimiter = (tokens: SlidingWindowProps[0], windowValue: SlidingWindowProps[1]) =>
7
  new Ratelimit({
8
    redis: Redis.fromEnv(),
9
    limiter: Ratelimit.slidingWindow(tokens, windowValue),
10
  });
11

12
const getIpHash = async (ip: string) => {
13
  const buffer = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(ip));
14
  return Array.from(new Uint8Array(buffer))
15
    .map((b) => b.toString(16).padStart(2, '0'))
16
    .join('');
17
};
18

19
export const contactRouter = {
20
  send: publicProcedure.input(ContactSchema).mutation(async ({ input, ctx }) => {
21
    if (!ctx.ip) {
22
      throw new TRPCError({ code: 'BAD_REQUEST' });
23
    }
24

25
    const ip = ctx.ip;
26
    const ipHash = await getIpHash(ip);
27
    const { success } = await rateLimiter(1, '1 m').limit(ipHash);
28

29
    if (!success) {
30
      throw new TRPCError({ code: 'TOO_MANY_REQUESTS' });
31
    }
32

33
    // ...
34
  }),
35
};

Upstashには@upstash/ratelimitという便利なライブラリがあるのでシンプルに実装が可能。他のAPIでも利用しやすいように関数rateLimiterとして汎用化している。また、念の為IPアドレスはSHA-256でハッシュ化してからRedisに保存している。

お問い合わせフォームを送信してから1分以内に再度お問い合わせを送信すると「お問い合わせの送信回数が上限に達しました。しばらくしてから再度お試しください。」とエラーが表示される。

Botからの保護

機械的にPOSTできる窓口を設けている以上、ボット対策を考えなければならない。レートリミットを設定しているとはいっても1分ごとに送信するみたいな設定をされたら1時間に60回リクエストを投げられてしまう（そう考えるとレートリミットのコードを公開しているのは悪手だ）。さすがに何の利益もないのでそのようなことはあるはずもないのだが心配性なので念には念を入れておく。

Bot対策としてGoogleの reCAPTCHA Enterprise を導入した。先ほどクライアント側の処理でreCAPTCHAトークンを取得していたが、それをサーバ側で利用する。

サーバ側からreCAPTCHAにリクエストを投げると0.0 ~ 1.0の判定結果が返ってくる³。値が低くなるほどボットの可能性があるリクエストということになる。ひとまずスコアが0.7未満であればエラーメッセージを返すようにしている。

当初はスコアを取得するためにGoogleから提供されている @google-cloud/recaptcha-enterprise を利用しようとした。

前提として当サイトのtRPC経由のAPI作成にはNext.jsのEdge Runtimeを使っている。 Edge Runtimeはパフォーマンスに優れているがNode.js APIを全てサポートしていない⁴。そのため、パッケージ内部においてEdge RuntimeでサポートされていないAPIを利用しているとエラーが発生してしまう。

今回は不幸にもそのエラーに当たってしまった。そうなった場合はWeb標準の fetch API を使って処理を自分で書く必要がある。あくまでもSDKはREST APIのラッパーに過ぎないため記述量は多くなるが何とかなる。以下がその処理。

1
export const verifyRecaptcha = async ({
2
  recaptchaToken,
3
  expectedAction,
4
}: {
5
  recaptchaToken: string;
6
  expectedAction: string;
7
}) => {
8
  const request = {
9
    event: {
10
      token: recaptchaToken,
11
      expectedAction,
12
      siteKey: env.RECAPTCHA_SITE_KEY,
13
    },
14
  } satisfies RecaptchaRequest;
15

16
  const response = await fetch(
17
    `https://recaptchaenterprise.googleapis.com/v1/projects/${env.GCP_PROJECT_ID}/assessments?key=${env.RECAPTCHA_SECRET_KEY}`,
18
    {
19
      method: 'POST',
20
      headers: {
21
        'Content-Type': 'application/json',
22
      },
23
      body: JSON.stringify(request),
24
    },
25
  );
26

27
  if (!response.ok) {
28
    throw new Error('Failed to verify recaptcha');
29
  }
30

31
  return (await response.json()) as RecaptchaResponse;
32
}

これでスコアを取得できる。

Google Sheetsにお問い合わせ内容を記録

ユーザから送信されたお問い合わせ内容はGoogle Sheets（スプレッドシート）に保存する。 RDBMSに保存しても良かったが、確認用のAPIとUIを作成しなければならず面倒だ。

Google Sheetsであればソートや絞り込みができたり、後述するGAS（Google Apps Script）と連携できるので色々とデータ活用の幅が広がる。

Node.jsからお手軽にAPIを扱える google-api-nodejs-client を使って一旦実装してみたが、reCAPTCHAと同様にEdge Runtimeに起因するエラーが発生した。面倒だが直接REST APIを叩く実装に書き換えた。

はまりどころとしてGoogle Sheetsにアクセスするためには JWTトークンが必要になる。このトークンは、サービスアカウントの秘密鍵で署名する必要があったのでEdge Runtimeでも使用可能な jose を使って生成した。

1
import { importPKCS8, SignJWT } from 'jose';
2

3
import { env } from '../../../env';
4

5
interface Token {
6
  access_token: string;
7
  expires_in: number;
8
  token_type: string;
9
}
10

11
type TokenWithExpiration = Token & {
12
  expires_at: number;
13
};
14

15
const payload = {
16
  iss: env.GCP_CLIENT_EMAIL,
17
  scope: 'https://www.googleapis.com/auth/spreadsheets',
18
  aud: 'https://www.googleapis.com/oauth2/v4/token',
19
  exp: Math.floor(Date.now() / 1000) + 60 * 60,
20
  iat: Math.floor(Date.now() / 1000),
21
};
22

23
const createToken = async () => {
24
  const privateKey = await importPKCS8(env.GCP_PRIVATE_KEY, 'RS256');
25

26
  const token = await new SignJWT(payload)
27
    .setProtectedHeader({ alg: 'RS256' })
28
    .setIssuedAt()
29
    .setIssuer(env.GCP_CLIENT_EMAIL)
30
    .setAudience('https://www.googleapis.com/oauth2/v4/token')
31
    .setExpirationTime('1h')
32
    .sign(privateKey);
33

34
  const form = {
35
    grant_type: 'urn:ietf:params:oauth:grant-type:jwt-bearer',
36
    assertion: token,
37
  };
38

39
  const tokenResponse = await fetch('https://www.googleapis.com/oauth2/v4/token', {
40
    method: 'POST',
41
    body: JSON.stringify(form),
42
    headers: { 'Content-Type': 'application/json' },
43
  });
44

45
  if (!tokenResponse.ok) {
46
    throw new Error('Failed to get token');
47
  }
48

49
  const json = (await tokenResponse.json()) as Token;
50

51
  return {
52
    ...json,
53
    expires_at: Math.floor(Date.now() / 1000) + json.expires_in,
54
  };
55
};
56

57
let token: Promise<TokenWithExpiration> | null = null;
58

59
export const authenticate = async () => {
60
  if (token === null) {
61
    token = createToken();
62
  }
63

64
  let resolvedToken = await token;
65

66
  if (resolvedToken.expires_at < Math.floor(Date.now() / 1000)) {
67
    token = createToken();
68
    resolvedToken = await token;
69
  }
70

71
  return resolvedToken;
72
};

これでAPIに必要な認証用トークンを取得できた。次にGoogle Sheetsに追加するための処理を書いていく。

1
import { env } from '../../../env';
2
import { GoogleSheetsError } from '../../exceptions';
3
import { authenticate } from './token';
4

5
export const appendGoogleSheets = async ({ sheetName, values }: { sheetName: string; values: string[][] }) => {
6
  const { access_token } = await authenticate();
7

8
  const params = {
9
    range: `${sheetName}!A2`,
10
    insertDataOption: 'INSERT_ROWS',
11
    valueInputOption: 'USER_ENTERED',
12
    resource: {
13
      values,
14
    },
15
  };
16

17
  const response = await fetch(
18
    `https://sheets.googleapis.com/v4/spreadsheets/${env.GOOGLE_SHEETS_ID}/values/${encodeURIComponent(params.range)}:append?valueInputOption=${params.valueInputOption}&insertDataOption=${params.insertDataOption}`,
19
    {
20
      method: 'POST',
21
      headers: {
22
        Authorization: `Bearer ${access_token}`,
23
        Accept: 'application/json',
24
        'Content-Type': 'application/json',
25
      },
26
      body: JSON.stringify(params.resource),
27
    },
28
  );
29

30
  if (!response.ok) {
31
    throw new GoogleSheetsError('Google Sheets API request failed: ' + response.statusText);
32
  }
33

34
  console.log('Append to Google Sheets was successful');
35
};

Google Sheetsの1行目にはカラム名を設定するため2行目から下に追加していく。本当は降順になるようにしたかったが、そのようなオプションはなかった。毎回全ての行を取得して降順に成形してからAPIを投げるのはデータが多くなってきたときの処理が重そうなので止めた。

Gmailで確認メールを管理者に送信

後述するLINEにも通知メッセージを送信するようにしているが、仮にLINE APIが機能しなかった場合、お問い合わせが来ていることに気づかずビッグチャンスを逃す可能性がある。そうならないためにもGoogle Sheetsにデータが登録されたタイミングで管理者（私）にお問い合わせ内容が記載されたメールを送信されるようにした。

実装方法としてはGASを使用する。 GASにはブラウザで記述可能なエディタが付属しているけどTypeScriptが使えなかったり、モジュール化できなかったりと使いずらい。なのでViteでトランスパイルしてから clasp を使ってGASにデプロイする方法をとることにした。

@google/claspをインストールすれば型補完が効いて書き心地が良いので必ず入れておきたい。実装内容は以下のとおりでシンプルにまとめてある。

1
import type { z } from 'zod';
2

3
import type { ContactSchema } from '@kkhys/validators';
4

5
type SendEmailParameters = Parameters<typeof GmailApp.sendEmail>;
6
type ContactSchemaProps = z.infer<typeof ContactSchema>;
7

8
const sheet = SpreadsheetApp.openById(import.meta.env.VITE_GOOGLE_SHEETS_ID).getActiveSheet();
9
const lastRow = sheet.getLastRow();
10

11
const emailColumn = 1;
12
const nameColumn = 2;
13
const typeColumn = 3;
14
const contentColumn = 4;
15

16
export const sendContactEmail = () => {
17
  const recipient = '[email protected]' satisfies SendEmailParameters[0];
18
  const subject = 'お問い合わせがありました' satisfies SendEmailParameters[1];
19
  const body = generateBody() satisfies SendEmailParameters[2];
20
  const options = {
21
    // from: '[email protected]',
22
    name: 'Keisuke Hayashi',
23
    // htmlBody: html,
24
  } satisfies SendEmailParameters[3];
25

26
  const lock = LockService.getScriptLock();
27
  if (lock.tryLock(1000)) {
28
    GmailApp.sendEmail(recipient, subject, body, options);
29
    lock.releaseLock();
30
  }
31
};
32

33
const generateBody = () => {
34
  const email = sheet.getRange(lastRow, emailColumn).getValue() as ContactSchemaProps['email'];
35
  const name = sheet.getRange(lastRow, nameColumn).getValue() as ContactSchemaProps['name'];
36
  const type = sheet.getRange(lastRow, typeColumn).getValue() as ContactSchemaProps['type'];
37
  const content = sheet.getRange(lastRow, contentColumn).getValue() as ContactSchemaProps['content'];
38

39
  return `kkhys.me にお問い合わせがありました。
40

41
# 名前
42
${name}
43

44
# メールアドレス
45
${email}
46

47
# お問い合わせ種別
48
${type}
49

50
# お問い合わせ内容
51
${content}
52
`;
53
};

Google SheetsとGASを連携される際の注意点として、変更をトリガーに処理を行いたい場合はLockService.getScriptLockを使って排他制御を行う必要がある。でないと、データが追加されたときに複数回トリガーが発火する可能性がある。

デプロイ後はGAS側でトリガーを設定する。仮にGASの実行に失敗した場合でもエラー通知を送信できるので、不具合に気づかず日々過ごしていくという心配はない。

LINEで確認メッセージを管理者に送信

残念ながらメールをすぐに確認する習慣は今までの人生で身に付かなかった。最も早く反応できるサービスを考えるとLINE一択である。そのため、お問い合わせがあった場合はLINEに通知メッセージを送信する。

GmailはサブでLINEをメインとして運用していく。

LINEにも line-bot-sdk-nodejs という便利なライブラリがあるが、ご多分に漏れずEdge Runtimeでは使えなかった。そのため、今までと同様にfetch APIを使って実装した。

1
export const sendLineMessage = async ({ message }: { message: string }) => {
2
  const response = await fetch('https://api.line.me/v2/bot/message/push', {
3
    method: 'POST',
4
    headers: {
5
      'Content-Type': 'application/json',
6
      Authorization: `Bearer ${env.LINE_CHANNEL_ACCESS_TOKEN}`,
7
    },
8
    body: JSON.stringify({
9
      to: env.LINE_USER_ID,
10
      messages: [
11
        {
12
          type: 'text',
13
          text: message,
14
        },
15
      ],
16
    }),
17
  });
18

19
  if (!response.ok) {
20
    throw new LineError('Failed to send a message to LINE');
21
  }
22

23
  console.log('Successfully sent a message to LINE');
24
};

お問い合わせ用のお一人様チャネルを作成してそこにメッセージを送信している。仮に送信に失敗してもGmailは送信されているため、catchブロックでエラーを捕捉してエラーログを出力するに留めている。

Resendで確認メールをユーザに送信

お問い合わせしたユーザが入力内容確認メールの返信を希望する場合は Resend を使ってメールを送信している。自動返信メールはスパムに利用される可能性もあるため、導入するか迷ったが、ユーザの利便性を考えてオプトインできるようにした。

大抵の場合、お問い合わせフォームを悪用したスパムはbotから行われるのでreCAPTCHAを実装しておけば大丈夫だろうと思っている。人力で送信されたらIPアドレスでブロックする。今回は実装していないが、海外からの不正なリクエストがあればお問い合わせ可能な地域を日本だけにするとか色々と考えないといけないことが多くて面白い。

閑話休題。 Resendは幸いにもEdge Runtimeにも対応していたため非常に楽に実装できた。

1
import { Resend } from 'resend';
2

3
const resend = new Resend(env.RESEND_API_KEY);
4
const administrator = {
5
  name: 'Keisuke Hayashi',
6
  email: '[email protected]',
7
};
8

9
export const sendEmail = async ({
10
  to,
11
  subject,
12
  body: { html, text },
13
  tags,
14
}: {
15
  to: string;
16
  subject: string;
17
  body: Record<'html' | 'text', string>;
18
  tags?: { name: string; value: string }[];
19
}) => {
20
  const { data, error } = await resend.emails.send({
21
    from: `${administrator.name} <${administrator.email}>`,
22
    to,
23
    subject,
24
    html,
25
    text,
26
    tags,
27
    headers: {
28
      'X-Entity-Ref-ID': new Date().getTime().toString(),
29
    },
30
  });
31

32
  if (error) {
33
    throw new EmailError(`Failed to send email to ${to}. Error: ${JSON.stringify(error)}`);
34
  }
35

36
  console.log(`Successfully sent email to ${to}. Response: ${JSON.stringify(data)}`);
37
};

メールヘッダにX-Entity-Ref-IDを付与しているのはGmailのスレッド化を防ぐためである。お問い合わせフォームなら何度も送ることはないと思うのでなくても問題ないが。

メール本文にはHTMLとプレーンテキストの両方を設定している（マルチパートメール）。これらを作成するのは面倒だが、react-email というライブラリを使うことでTSXとTailwind CSSを使いつつ楽に実装できた。 1つのソースからHTMLとプレーンテキストの両方を出力可能なのは素晴らしい。開発サーバを立ち上げてプレビューもできる。

そもそもユーザにもGmailを使ってメールを送信すれば良いじゃないという意見もあると思う。しかし、Resendの管理画面の使いやすさやトラッキングできる点を考えると外部に送信するメールであればResendを使っていく方がベターだ。

最後にクライアントからユーザに成功メッセージを返せば一連の流れは完了する。仮に自動返信メールの送信に失敗した場合は、「お問い合わせは成功したが、メールの送信には失敗した」旨を伝えるエラーメッセージを表示する。ここでお問い合わせ自体が失敗したとエラーメッセージを表示させたらユーザが何度も送信しないといけない羽目になるので注意。

もし、不適切なお問い合わせがあった場合はIPアドレスをGoogle Sheetsに保存しているため、それをEdge Configに登録する。そうすれば、このサイトにリクエストがあった段階で弾ける。

さいごに

気軽に実装する機能にしては重かったが、色々なAPIを使うのは楽しい。

npm trendでは2023年7月ごろにZodがYupを抜き去っている（参考） ↩
GitHub Issue: Support Server Actions ↩
デフォルトで使用できるスコアレベルは、0.1、0.3、0.7、0.9の4つのみ（ソース）。全てのスコアを使いたければGoogleのセールスチームに連絡が必要。面倒なのでしていない ↩
Edge RuntimeでサポートされているAPI ↩