フレームワーク選定

「Deno のイベントですし、Deno のフレームワークで用意したいですよね」ということで、Fresh を使用しました。

https://fresh.deno.dev/

Freshは、Fresh1.3 を使用しています。最近、更新が非常に活発でページ公開からDeno Festの開催までの約2ヶ月の間でに、1.5.2までバージョンアップされ機能更新がされています。

Fresh のホームページに記述もあるのですが、Built for speed, reliability, and simplicity. とある通り、シンプルがウリの一つです。
Deno Fest 特設サイトはいわゆるペライチページですが、Freshは機能が過剰すぎることもなく使いやすかったです。

ソースコード

ディレクトリの構造は次のとおりです。

# ディレクトリ構造(一部省略)
$ tree
.
├── components
│   ├── LinkButton.tsx
│   ├── SpeakerItem.tsx
│   └── TimeTableItem.tsx
├── data
│   ├── SpeakerItems.ts      # 登壇者情報
│   └── TimeTableItems.ts #  タイムテーブル情報
├── deno-fest-logo.png
├── deno.json
├── dev.ts
├── fresh.gen.ts
├── islands
│   └── ModalMounter.tsx
├── main.ts
├── middlewares
│   └── basic_auth.ts         # basic auth ミドルウェアの定義
├── routes
│   ├── _404.tsx
│   ├── _app.tsx
│   ├── _middleware.ts
│   └── index.tsx
├── static
│   ├── favicon.ico
│   ├── images
│   │   └── 画像素材群
│   └── logo.svg
├── twind.config.ts
└── utils
    └── config.ts                # 環境変数の読み込み処理

先の通り、Deno Fest 特設サイトはいわゆるペライチページです。 dataディレクトリの更新とstatic/imagesへの画像の追加だけで登壇者とタイムテーブルを更新できるようにしていました。

この構造は、Fresh - Showcaseのいくつかを参考に調整しました。

fresh.deno.dev

components 以下の、コンポーネント実装はデザインチームにお願いしました。

ロゴデザイン

ページの制作と並行または少しだけ先行をしていたのがDeno Fest ロゴのデザインでした。こちらは、とらのあなラボデザインチームにイメージを伝えて作成をお願いしました。

完成したのがこちらです。

担当していただいた、とらのあなラボデザインチームからのコメントです。

ロゴは、Denoのイメージを取り入れ、交流の場としての親しみやすさと文字の流れを考慮しデザインしています。

・"D"は恐竜を、"F"は雨を表現しており、Denoの特徴的なイメージです。

・"O"は雲形の吹き出し、"C"は"！"を入れて、交流イベントでの質問や会話を象徴しています。

ページデザイン

デザインについては、これまでのdeno.comのアートの内容や雰囲気を見ながら数点の候補を用意しました。
初期は、もっと東京感あるもの(東京タワーの意匠があったりなど)も候補にありました。

これが決定稿です。

担当していただいた、とらのあなラボデザインチームからのコメントです。

公式Denoくんのロゴに雨が降っているので、LPのデザインにも雨を降らせています。

ページを下にスクロールするにつれ、雲が晴れ青空の印象が出るようにし、

Deno Festを通じてエンジニアさんたちの交流やDenoへの理解が深まる様子を表現しています。

インフラ

ここも、「Denoのイベントですし、Deno Deployを使いたいですよね」ということで、Deno Deployで準備しています。とらのあなラボ初のDeno Deployを使ったWebサイトとなりました。

先のソースコードの紹介の通り、タイムテーブルの情報などはすべてコードとして持っているため、データベースへの変更がかかる仕組みはありません。
それもあり、ほぼ純粋にDeno Deployのへの展開だけがリリースブランチへマージしてgithubへpush してから、デプロイ完了するまでにかかる処理になっています。たいてい1分待たずに更新されていました。

最近では各種フレームワークのテンプレートも増え、以前よりも利用のハードルが下がっているのではと感じます。

まとめ

今回は、Deno Fest 特設サイトのソースコード公開にあたって、制作の様子やフレームワーク選定について紹介してきました。
Fresh は、かなり扱いやすい部類のフレームワークだと思います。 Deno Deployと組み合わせると「とりあえず公開する」だけなら数分でできてしまいます。「こんなサイトがFreshで作れるんだ」と思っていただければと幸いです。