Vue Fes Japan 2024 ウェブサイトのシェア URL で遊んでみよう

当記事では技術の詳細までは触れません。昨年との差分を中心に、今年ならではの新機能をご紹介いたします。

昨年に続いて、Vue Fes Japan 2024 コアスタッフのひとりとして、またウェブサイトチームのリードとして引っ張らせていただきました。

https://yuma-kitamura.nekohack.me/

開催当日の 10 月 19 日を目前に、ウェブサイトとして今年ならではのチャレンジも多く、今回 Vue・Nuxt 情報が集まる広場 より初めて書かせていただきいております。

https://zenn.dev/p/comm_vue_nuxt

Vue Fes Japan 2024 ウェブサイト

Vue Fes Japan 2024

(OGP 画像)

https://vuefes.jp/2024

ウェブサイトでお世話になっているフレームワークは、今年も Nuxt を選定、もちろん利用するバージョンも 3 を使用させていただいております。

今回は、ウェブサイト全体の URL パス設計に触れつつ、昨年 Vue Fes Japan 2023 との差異を明らかにして、当記事を書かせていただければ考えております。

今年ならでは、新機能のご紹介

メインどころで下に示した 6 点、表に見える範囲としては前半 3 点挙げさせていただきました。

• 国際化 (英語版も提供)
• シェア URL (スピーカー、スポンサー、スタッフ、参加者)
• ジョブボード
• デザインシステム (仮) 構築
• Peatix^[1] 内にあるチケット購入状況との同期自動化
• スピーカー、スポンサー、スタッフ、参加者のデータを更新するための管理画面

後半 3 点は、また別の機会にウェブログを書かせていただくとして、今回は表に見える範囲の 3 点を中心に書かせていただきます。

国際化について

英語版の提供自体は昨年も進めていましたが、レビューチェックをはじめがっつりてこ入れさせてもらったのは今年が初めて。スピーカー募集（Call for Paper）などのタイミングで、英語版の動線を広報させてもらう機会があったかと考えています。

https://x.com/vuefes/status/1801096375381447113

シェア URL について

また、広報させてもらう機会を増やすという意味では、今回チャレンジしたシェア URL についてもたいへん意義深い企画のひとつと考えています。そもそもこのシェア URL については、各個人の好きなタイミングに X や Facebook など SNS（ソーシャルネットワーキングサービス）で共有しやすくしたのを狙って、今回機能を新設いたしました。

下記具体例を見てもらえればわかりますが、スピーカーやスポンサーの詳細ページの URL 末尾に /share を付けていただくことで、それぞれのシェア URL へアクセスできます。

シェア URL の例。

スピーカー（Vue.js や Vite の作者 Evan 氏）のシェア URL の例。

https://vuefes.jp/2024/sessions/yyx990803/share

スポンサー（プラチナスポンサー・弁護士ドットコム株式会社様）のシェア URL の例。

https://vuefes.jp/2024/sponsors/bengo4/share

スタッフ（Vue.js 日本ユーザーグループ代表・kazu_pon 氏）のシェア URL の例。

https://vuefes.jp/2024/staffs/kazu_pon/share

参加者^[2]（自身）のシェア URL の例。

https://vuefes.jp/2024/namecard/44687b52-9c76-4665-8e11-e2255a4dfc93/share

スピーカー、スポンサー、スタッフのシェア URL については、シェア URL にまとめています。

https://vuefes.jp/2024/sharemap

ジョブボードについて

そして、今年は ジョブボード といったチャレンジについても行わせていただきました。

昨今 DevRel（Developer Relations）が一般化される中、企業に対するアプローチも多様化されてきています。

https://vuefes.jp/2024/jobboard

なお、Vue fes Japan 2024 では、シルバー以上のスポンサーを対象に各社の取組を表示させていただいております。

このようにウェブサイトチームのリードとして、またコアスタッフのひとりとして、開催当日を目前にシェア URL やジョブボードのチャレンジが各所で盛り上がることを期待しています。

上の 4 点のような新機能を盛り込んだだけという訳ではなく、ネームカード周辺の動線改善にも努めさせてもらいました。

URL パス設計

ウェブサイト全体を下のツリー図で表しました。

. ... トップページ
├── namecard/
│   ├── [id]/
│   │   ├── edit/
│   │   │   ├── complete.vue ... 作成・編集完了画面
│   │   │   └── index.vue ... 作成・編集画面
│   │   ├── share.vue ... シェア URL -> 今年初の機能
│   │   └── index.vue ... ログイン後画面
│   └── index.vue ... 扉ページ
├── sessions/
│   └── [id]/
│       ├── index.vue ... 詳細ページ
│       └── share.vue ... シェア URL -> 今年初の機能
├── sponsors/
│   └── [id]/
│       ├── index.vue ... 詳細ページ
│       └── share.vue ... シェア URL -> 今年初の機能
├── staff/ ... 本番環境ではフラグを切らせてもらっています
│   ├── console.vue ... 管理画面（スピーカー、スポンサー、ジョブ、スタッフ、参加者を管理するため） -> 今年初の機能
│   └── invite.vue ... 招待 (仮機能) -> 今年初の機能
├── staffs/
│   └── [id]/
│       └── share.vue ... シェア URL -> 今年初の機能
├── code-of-conduct.vue ... 行動規範 (Code of Conduct)
├── jobboard.vue ... ジョブボード -> 今年初の機能
├── privacy.vue ... プライバシーポリシー
├── sharemap.vue ... シェア URL -> 今年初の機能
└── tokusho.vue ... 特定商取引法に基づく表記

内部的な話 (データ設計)

上の URL パス設計で記したように、スピーカー、スポンサー、スタッフ、参加者を対象にシェア URL は提供されています。

昨年と違うのは、今年 Supabase に振り切って、スピーカー、スポンサー、スタッフ、参加者全てのデータを管理させていただいており、アプリケーションとしてはプリレンダリングで事前にデータを持たせるような設計を取っております。

データベースの使用状況。

#	スピーカー[3]	スポンサー	ジョブ	スタッフ[4]	参加者[5]
Vue Fes Japan 2023	✍🏻 (local)	✍🏻 (local)	-	✍🏻 (local)	💚 (supabase)
Vue Fes Japan 2024	💚 (supabase)	💚 (supabase)	💚 (supabase)	💚 (supabase)	💚 (supabase)

6 月末の時点で、スピーカー、スポンサーのデータを Supabase で管理し始めたのを皮切りに、ネームカードやジョブなどの他ドメインへ拡大するフェーズをとりました。

OGP 画像生成でも Supabase のデータベースで全てのデータを管理したことが功を奏しており、主キーの id を Edge Functions に渡し、内部的に検索が走査され、最終的に画像を返すといった設計がとれるようになりました。

とそこで、気になる Supabase への課金事情について。

率直に 7 月末の時点で Pro プランへ引き上げる判断を下しましたが、その判断の契機となったのが egress（下り方向）のコストが、所定の 5GB の閾値を超えてきたことになります。

なお、Supabase 公式によると、この下り方向だけが課金のカウント対象になるとのこと。

https://supabase.com/docs/guides/platform/org-based-billing#unified-egress

おそらく、データ更新の操作が増えれば、こうして課金の判断まで迫られることになりますが、そうでない場合はいたって気にする必要はありません。

終わりに

個人的にはかれこれ 3 年連続、Vue Fes Japan のウェブサイトチームのひとりとして、多くことにチャレンジさせていただいておりました。

今年のウェブサイトとしては、残るタスク消化も少なくなってきて、無事イベント当日の完遂と成功を祈るだけとなりました。

私も当日、コアスタッフのひとりとして会場中をうろうろするでしょうで、気軽にお声がけいただければ。

脚注

1. 今年、お世話になっているチケットプラフォームです

2. 購入したチケットの種別よりアフターパーティーの有無を判定、データを管理する

3. 企画「次世代フロントエンドクロストーク」や「Vue.js コミュニティにようこそ！」のパネラーも含む

4. コアスタッフ、ボランティアスタッフ共に含む

5. ネームカードの作成を経て、注文番号照合完了を果たした者に限る