私たちは都内を中心に活動しているアマチュアオーケストラの Orchestra Canvas Tokyo です。
今回、弊団のホームページ、ブログをリファクタリングし、パブリックリポジトリとして公開しました 🎉
homepage / blog
この中で、お問い合わせフォームを SvelteKit と Cloudflare 系のサービスで構築しました。
今回は、実際にお問い合わせフォームをつくっていきながら、ここで得た知見を共有していきます！
このシリーズの記事一覧
- ① サイト作成：SvelteKit x Cloudflare Pages ← 今回の記事
- ② フォーム作成：SvelteKit x Zod x Google reCAPTCHA v3
- ③ セッション：SvelteKit x Cloudflare KV
- ④ データベース：SvelteKit x Cloudflare D1
- ⑤ メール送信：SvelteKit x Resend
このシリーズの完成物
はじめに
お問い合わせ窓口
しばしばお問い合わせは来るものです。
弊団のようなアマチュアオーケストラでは、演奏会に関する質問、参加希望、チラシの掲載依頼などなど……
このようなお問い合わせを受け付ける窓口をどのように掲載するか。悩みどころです。
大きく選択肢は 2 つでしょうか。
- メールアドレスを掲載する
- フォームを用意する
1. メールアドレスを掲載する
シンプルな方法に見えますが、やや考慮事項が多いです。
直接メールアドレスを掲載するのは避けたほうがよいです。
Web 上を回遊しているアドレス収集 bot に捕まってしまい、スパムの標的とされてしまうからです。
対策として、メールアドレスの難読化があげられます。
古典的にメールアドレスの @ を ★ などの代替文字に置換したり、メールアドレスの一部や全部を画像に置換したり、はたまた JavaScript を用いて難読化処理をかけます。
最近、Cloudflare による難読化サービスの紹介記事も話題になりましたね！
Cloudflare による難読化サービスを用いれば、非 bot に対してはコピー可能な文字列を描画するため、ユーザビリティをそこまで損ねません。
しかし、それ以外の方法では、基本的にユーザーはメールアドレスを直接入力する必要があります。
特に、最近のユーザーの多くが使用しているスマートフォンでは、多くの場合ブラウザとメーラーを行き来して入力する必要があるでしょう。
これでは、ユーザビリティを大きく損ねてしまいます。
2. フォームを設置する
お問い合わせフォーム・メールフォームを掲載する方法です。
実装の工数はかかってしまいますが、きちんと設計・実装すればユーザービリティをかえって高めることが可能です。
必要な情報を別入力欄として切り出したり、カテゴリーに応じて動的に入力欄を調整したり……
問い合わせる側、問い合わせを受ける側双方が便利な内容にできます。
今回採用した技術構成
お気に入りの SvelteKit を用います。
Cloudflare Pages が開発に際し大変便利ですので、それを軸に構成していきます。
詳しくはこの記事で述べていきます！
| 種類 | 仕様技術 | 備考 |
|---|---|---|
| フレームワーク | SvelteKit | Svelte4(TypeScript, HTML, CSS) |
| リポジトリ | GitHub | |
| ホスティング | Cloudflare Pages | GitHub と連携 |
| セッション管理 | Cloudflare KV | パッケージとしてsvelte-kit-sessionsを使用 |
| データベース | Cloudflare D1 | ORM としてDrizzleを使用 |
| CAPTCHA | Google reCAPTCHA v3 |
価格
ここでは、今回セットアップする Cloudflare Pages についてまとめます。
次々回以降で触れる Pages Functions、KV、D1 などについては、都度提示します。
無料プランでは次のような仕様となっています。
参考: Cloudflare Pages
- 同時ビルド数: 1 件
- ビルド上限: 500 件/月
- カスタムドメイン数上限: 250 個/プロジェクト
- サイト数、静的アセット容量、帯域幅: 無制限
なんと太っ腹な！
大抵のサイトに十分耐えうる水準ではないでしょうか。
環境構築
SvelteKit プロジェクトの作成
まずは SvelteKit のプロジェクト作成します。
参考：Creating a project • Docs • Svelte
今回は次のような設定としました。
- SvelteKit demo テンプレート
- TypeScript を使用
- Prettier、ESLint を使用
npx sv create my-app
cd my-app
npm install
npm run dev
この後、画面の指示にしたがって Git へのコミットまで済ませます。
adapter-cloudflare の導入
Cloudflare Pages 向けにビルドするための adapter が用意されています。
ありがたく使わせていただきます。
npm i @sveltejs/adapter-cloudflare
SvelteKit のコンフィグファイルも更新します。
参考：Cloudflare Pages • Docs • Svelte
import adapter from '@sveltejs/adapter-cloudflare';
export default {
kit: {
adapter: adapter({
// See below for an explanation of these options
routes: {
include: ['/*'],
exclude: ['<all>']
},
platformProxy: {
configPath: 'wrangler.toml',
environment: undefined,
experimentalJsonConfig: false,
persist: false
}
})
}
};
GitHub リポジトリとの作成
GitHub でリポジトリを作成します。
表示されたガイドに従い、ローカルの Git に origin として設定します。
git remote add origin git@github.com:horn553/zenn-contact-form.git
git branch -M main
git push -u origin main
Cloudflare Pages アプリケーションの作成
Cloudflare ダッシュボードにログインし、Pages アプリケーションを作成します。
GitHub との連携を選択し、認可を進めていくと、先ほど作成したリポジトリを使用したアプリケーションを作成できます。
「ビルドとデプロイのセットアップ」でビルドの設定をする必要があります。
フレームワーク プリセットに SvelteKit が用意されているので、それを選択します。
（他の項目は自動的に埋められます）
「保存してデプロイ」を行うことで、プロジェクトの作成と最初のビルド・デプロイが行われます。
デプロイ成功後にデプロイ先の URL へアクセスすると、元気に動く SvelteKit の姿を見ることができます！
デプロイの仕様
管理画面で確認できるように、GitHub と連携して各プッシュに対し、ビルド・デプロイが自動実行されます。
本番環境として設定したブランチに対するプッシュは本番環境に、それ以外はプレビュー環境にデプロイされます。
本番環境、プレビュー環境、ブランチエイリアスの他、各プッシュごとの URL も発行され、大変便利です。
デプロイ完了メール（デフォルトでは送られない）
プレビュー環境として一部のブランチのみを（allow list / deny list で）指定したい場合など、詳細な設定も用意されています。
カスタムドメインを使用
Pages プロジェクト作成時は、*.pages.devドメインが設定されています。
これにカスタムドメインをあてることが可能です。
アプリケーションのページの「カスタムドメイン」タブから管理できます。
画面の指示に従うことで、セットアップは簡単に終了します。作業自体は 10 分もあれば終わります。
他社のネームサーバーを使用しているドメインの場合も、CNAME レコードを設定することで簡単にセットアップができます！
おわりに
今回は、SvelteKit プロジェクトを Cloudflare Pages にデプロイする方法についてまとめました。
セットアップの簡便さ、プレビュー環境の自動生成、カスタムドメインの適応……
開発に便利ながら本番仕様にも耐えうる、ありがたいプロダクトではないでしょうか！
次回からは本格的にフォームの作成を進めていきます！
- ① サイト作成：SvelteKit x Cloudflare Pages
- ② フォーム作成：SvelteKit x Zod x Google reCAPTCHA v3 ← 次の記事
- ③ セッション：SvelteKit x Cloudflare KV
- ④ データベース：SvelteKit x Cloudflare D1
- ⑤ メール送信：SvelteKit x Resend
Discussion