イベント情報のページからカレンダーに予定を登録する「everything-ics」を作った
イベント開催や本の発売に関する Web ニュースを見ているとき、気になった内容の開催日や発売日をカレンダーに登録したいことがあります。
このとき、カレンダーアプリを開いてイベント情報を入力して登録することは面倒なので、その作業を簡便化できる Web アプリケーション「everything-ics」を作りました。
ソースコードは GitHub に公開しています。
「everything-ics」の使い方
「everything-ics」は、iOS のショートカットでの利用を想定しています。
ショートカット使って、イベント情報をカレンダーに登録する流れは、次のとおりです。
- イベント情報などの Web ページで、共有メニューを開く
- 「everything-ics」ショートカットを選択する
- 必要に応じて、画面でイベント情報を修正する
- ics ファイルからカレンダーを登録する
「everything-ics」では、次の情報をカレンダーに登録できます。
- イベント名
- 開催日付（開始日のみ）
- 元となった Web ページの URL
デプロイ方法
「everthing-ics」を使用するには、ソースコードを Cloudflare Workers にデプロイする必要があります。
$ git clone https://github.com/chick-p/everything-ics.git
$ cd everything-ics
# 依存パッケージをインストール
$ npm install
# 事前に Cloudflare Workers への login が必要
# ログイン済みの場合は次のコマンドをスキップする
$ npx wrangler login
# デプロイ
$ npm run deploy
デプロイが終わると、Cloudflare Workers の URL が発行されます。
発行された URL にアクセスすると、ショートカットアプリのセットアップ方法を確認できます。
ショートカットの登録方法
ショートカットの登録時に Cloudflare Workers の URL を貼り付けするだけで、共有シートから「everything-ics」を利用できるショートカットも用意しました。
ダウンロード URL は、Cloudflare Workers の URL にアクセスすると確認できます。
ちなみに、ショートカットの構成は、次のようになっています。
技術的なこと
構成図
「everything-ics」の構成はシンプルです。
Cloudflare Worker 上に立てた Web アプリケーションに対し、クライントが GET リクエストで、目的のイベントページの URL を送ります。
「everything-ics」は、目的のページの URL にリクエストを送り HTML を取得します。
HTML の内容からイベント名や開催日付を取得して ics ファイルを生成し、クライアントに返します。
技術スタック
- Hono
- Cloudflare Workers
- Jest
- Tailwind CSS
行っていることはただの HTTP リクエストと文字列処理という軽い処理なので、サーバレスな Cloudflare Workers を使うことにしました。
Web アプリケーションは Hono を使って実装しています。
Hono を選んだ理由は、触ってみたかったというのが一番大きいですが、Cloudflare Workers 上で動くアプリケーションをかんたんに作成でき、Web アプリケーションでよくある処理をまとめたヘルパー関数も充実していたからです。
なお、テストを書いたときにいくつかハマったこととその解決策は、別の記事に書きました。
日付の処理
日付の処理は、単純な正規表現で行っています。
次の書式の日付に対応しています。使っていくなかで、ほかにも必要な書式があれば増やす予定です。
- 年月日
- 月日
- yyyy/MM/dd