rpine lab Blog

初めまして、こちらは個人事業としてやっているrpine labのブログサイトです。

このページではrpine labのホームページ(https://www.rpine.net/)に利用している各種技術スタックや構成を紹介します。

トップページ（https://www.rpine.net/）

❓お問い合わせフォームの実装

BOT排除のためにreCAPTCHAの代替サービスであるCloudflare Turnstileを利用しています。

MailChannelsを利用して（Cloudflare Workersからだと無料で利用可能：参考情報1、参考情報2）、お問い合わせの内容が自分にメールとして届くようにしています。

送信ボタンを押すとNext.jsのServer Actionを利用して、TurnstileによるBOT判定とメール送信のAPIがWorkersのエッジ環境で呼ばれるようになっています。

お問い合わせページ

daisyUIのテーマ機能やReactのContextなどを活用して、画面のダークモード対応を実現しています。

デフォルトはOSのダークモード設定を参照し、フッターのアイコンを押すことでContextを通して手動切り替えできます。手動設定値はブラウザのLocalStorageに保管されます。

色の切り替えにはdaisyUIのテーマ機能を主に使っており、テーマの色選択を利用して最小限にしています。

ライトモード（右の太陽マークを押すとダークモードに）

ダークモード（右の月マークを押すとダークモードに）

Tailwind CSSのブレークポイントプレフィックス (md:など) とdaisyUIのコンポーネントクラスを利用してレスポンシブデザインを実現しています。

PC表示

スマートフォン表示

GitHubのレポジトリをCloudflare Pagesに連携させることにより、プッシュ後の自動ビルド＆デプロイ・開発ブランチのプレビュー環境自動作成などが可能となっています。プレビュー環境はCloudflare Zero Trustを利用して自分以外の閲覧を制限しています。

GitHubの方では、PR作成やプッシュの度にLinterやVRTをGitHub Actionsで自動実行しています。

Mend Renovateを導入してパッケージの自動更新を実現しています。（VRTのスナップショットテストを併用しているので一応レイアウトが壊れたりはしないはず…）

• Next.js 14 (with App Router)
• React
• Tailwind CSS：ユーティリティファーストなCSSフレームワーク
• daisyUI：Tailwind CSSフレンドリーなUIコンポーネントライブラリ
• Cloudflare Web Analytics：アクセス解析（Pagesの機能でスクリプトを自動挿入）

• Next.js (Server Actions)：お問い合わせの送信処理（BOT判定・自分へのメール送信）
• Cloudflare Turnstile：BOT排除用のCloudflare製reCAPTHA代替サービス
• MailChannels：Cloudflare Workersと連携すると無料で利用できるメール送信サービス

• Cloudflare Pages：Next.jsで作成したページの自動デプロイ・配信
• Cloudflare Workers：Pagesでデプロイしたページのバックエンド実行環境

• GitHub：PR作成やプッシュの度にLinterやVRTをGitHub Actionsで自動実行
• Mend Renovate：パッケージの更新PR自動作成・自動マージ
• PlayWright：VRT (Virtual Regression Test) のために試験導入（現在はスクリーンショットのスナップショットテストのみ実行）
• Visual Studio Code：テキストエディタ

TypeScript