1. どんなプロダクトか

Easy Event というプロダクトを作りました。これは主に飲み会や遊びなどのプライベートでの日程調整をできるだけ負担なく行うことを目的にしたWebアプリケーションです!

主な機能

カレンダーをポチポチするだけで候補日程を入力できる

イベント作成時に、カレンダーUIから日付をクリックするだけで候補日程が自動的にテキストエリアに追加されます。時刻も指定でき、「1/25(土) 19:00」のようなフォーマットで入力されます。もちろん、テキストエリアに直接自由記述することも可能です。

Googleカレンダー連携で自動回答

回答時に「カレンダー連携」ボタンを押すと、Googleカレンダーの予定と候補日程を照合し、予定がある時間帯は自動的に「×」、空いている時間帯は「○」が入力されます。忙しい人でもワンクリックで回答できます。また予定がカレンダーには入っているけどいけるなあという場合はカレンダー連携機能で入力されたものをあとから変更することも可能です。

参加しやすい日程がひと目でわかる

回答が集まると、参加者が多い候補日程にはマークがつき、最適な日程がすぐにわかります。

2. なぜ作ろうと思ったか

日程調整をするとき、回答がなかなか集まらずにリマインドを送った経験はないでしょうか？

回答が集まりにくい原因の一つに、自分の予定とにらめっこしながら回答するのが面倒だからというものがあると思います。カレンダーアプリを開いて、候補日程を一つずつ確認して、○×を入力して...この作業が地味に手間なんですよね。

そこで、この問題を解決するプロダクトを作ろうと思いました。Googleカレンダーと連携して、ボタン一つで自動的に○×が入力されれば、回答のハードルがグッと下がるはずです。

候補日程の入力UIについては、皆さんもよく使っているであろう「調整さん」の体験が良いと思っていたので、それをベースにしています。カレンダーから日付を選ぶだけで候補が追加され、自由テキストでの入力もできる。このシンプルさは踏襲しつつ、カレンダー連携という新しい価値を加えた形です。

3. 技術的な詳細

技術スタック

• フレームワーク: Next.js (App Router) + React
• データベース: Cloudflare D1
• ORM: Drizzle ORM
• インフラ: Cloudflare Workers
• UI: TailwindCSS + shadcn/ui
• 認可(今は認証としては利用していません): NextAuth.js

候補日程の文字列パース

Easy Eventでは、候補日程を自由テキストで入力できます。しかし、カレンダー連携機能を実現するには、このテキストを日時としてパースする必要があります。

対応フォーマット

以下のような様々なフォーマットに対応しています：

また日本語の場合は昼、夜などのテキストも12:00, 20:00に対応する時間としてパースされます。

i18nとタイムゾーン対応

Easy Eventは日本語と英語に対応しており、タイムゾーンも正しく処理する必要があります。

候補日程のi18n対応

候補日程を入力するテキストは日本語を利用するユーザなら日本語で、英語のユーザなら英語で表示してほしいですよね。カレンダーの日付を押したときにそれぞれの言語に対応した候補日程テキストを表示するようにしました。

ユーザーのタイムゾーンを考慮したパース

候補日程をパースする際、ユーザーのタイムゾーンを考慮する必要があります。例えば、「1/25 19:00」という入力は、日本のユーザーなら JST (UTC+9) の19:00、アメリカのユーザーなら現地時間の19:00として解釈されるべきです。

カレンダーイベントとの衝突判定

カレンダープロバイダからイベント情報をOAuthトークンを利用して取得し、候補日程との重複判定を行います。候補日程に終了時刻がない場合（例：「1/25 19:00」のみ）は、デフォルトで1時間の長さとして計算しています。

4. おわりに

Easy Eventは日程調整の「回答する側」の負担を減らすことを目指して作りました。ぜひ次の日程調整で使ってみてください。

フィードバックや改善要望があればお気軽にどうぞ。