高校生以下を対象としたプログラムをまとめたデータベース 「魔法のスプレッドシート U18」を作った
きっかけ
ということで、期末考査の中日の半日を使って作ってみました!!
魔法のスプレッドシート
魔法のスプレッドシート U18の「魔法のスプレッドシート」は、ITエンジニアインターン情報が集まる「魔法のスプレッドシート」から(勝手に)お借りしているものです。
どんなもの?
GitHubにJSONファイルを追加すると、GitHub Actionsがサイトのビルド・デプロイとiCalのファイルを生成してくれるようになっています!
技術的な話
自動化できることはできるだけ自動化して、辛くないサイト運営ができるようにしました。また筆者は非常に飽き性なので、最小限の機能と技術を使い、とにかく早く物が形になることを目指しました。サイトの構成はAstroというフレームワークを用いて作成しました。
JSONファイルの仕組み
AstroにはContent Collectionsと呼ばれる、複数のコンテンツを簡単に管理できる機能があります。
website/src/content/配下に、config.tsでデータスキーマを定義し、任意のディレクトリ(website/src/content/data/)にファイルを置くことで管理できます。このように管理することで、同じタイミングで作業を行なっていても、コンフリクトが起きづらいようにしています。
const ProgramCollection = defineCollection({
type: 'data',
schema: z.object({
Name: z.string(),
Target: z.string(),
Description: z.string(),
AppStartDate: z.string(),
AppEndDate: z.string(),
EventStartDate: z.string(),
EventEndDate: z.string(),
Status: z.string(),
URL: z.string(),
}),
});
iCal形式の.icsの生成
ical-generatorというnpmパッケージを使って.icsファイルを生成しています。.icsファイルには、プログラム名、応募開始日から応募締切日までの日付と、公募の概要とホームページを記載しています。ファイルの変更時にGitHub Actionsを用いて、website/src/content/data/配下にあるJSONデータをすべて読み込み、自動生成しています。
BEGIN:VEVENT
UID:8a3aeb44-6954-4070-bd29-df4b61a50c27
SEQUENCE:0
DTSTAMP:20240627T134608Z
DTSTART:20240310T000000Z
DTEND:20240406T000000Z
SUMMARY:未踏ジュニア
DESCRIPTION:独創的なアイデア、卓越した技術を持つ 17 歳
以下の小中高生や高専生などを支援するプログラム
URL;VALUE=URI:https://jr.mitou.org/
END:VEVENT
END:VCALENDAR
改善しないといけないこと
- 通年募集のプログラムに対応できていない
- 通年募集のプログラムはiCalから省くなどを行う
- 追加されたJSONファイルに対するチェックがない
- 日付がISO8601に準拠してなかったり、違うデータ形式で表されているとiCalのビルドに失敗します
- プログラム名や対象などの必須事項が欠けていても、マージをすることができてしまいます
- 絶望的な見た目
- 表形式に対するCSSをもう少し真面目にやります
- プログラム収録数の少なさ
むすびにかえて
色んな人に広めていただけると幸いです!
また、ぜひGitHubのPull Requestから、プログラムの追加をお願いします!
Discussion