PyCon JP 2025のウェブサイトを支えた技術

2025/11/16のLT会で使用した資料です

Transcript

1. PYCON JP 2025 WEBTECH PyCon JP 2025 Webサイトを 支えた技術 広島市立大学 いちぴろ・エクスプローラー 立石 琢磨
2. 01 | 02 | 自己紹介 PyCon JP 2025について 03 | PyCon JP 2025 Websiteの技術スタック 04 | 工夫した点 01 | Google Drive×Cloudflare Images 03 | Google Spreadsheetでの情報掲載管理 05 | まとめ 02 | MDXを活用した文章管理 00 目次
3. 01 自己紹介 名前 立石 琢磨 学年 学部1年 所属 いちぴろ・エクスプローラー X @T_taku0427
4. WHAT’S PYCON JP 02 PyCon JP 2025について
5. 02 PyCon JP 2025について 01 | 開催期間 2025.09.26 ~ 2025.09.28(Sprint) 02 | 開催場所 広島国際会議場 03 | URL https://2025.pycon.jp/
6. TECHNOLOGY STACK 03 PyCon JP 2025 Websiteの技術スタック
8. 03 PyCon JP 2025 Websiteの技術スタック フレームワーク Next.js 15.3.2 Pages Router (SSG - Static Site Generation) 言語 TypeScript 5, React 19 スタイリング Tailwind CSS 4 コンテンツ管理 MDX CDN Cloudflare Images 外部API Google Sheets API, Blogger API デプロイ Cloudflare Pages
9. 03 PyCon JP 2025 Websiteの技術スタック フレームワーク Next.js 15.3.2 Pages Router (SSG - Static Site Generation) 言語 TypeScript 5, React 19 スタイリング Tailwind CSS 4 コンテンツ管理 MDX CDN Cloudflare Images 外部API Google Sheets API, Blogger API デプロイ Cloudflare Pages Pages Router? プロポーザルの情報登録/取得にPretalksを使用してい たが、登壇者が入力したMarkdownを反映させる際、 Cloudflare側でリモートから取得したMarkdownの HTMLレンダリングがApp Routerだとブロックされて いた(XSS対策)ため、Pages Routerを採用。 ※XSS: クロスサイトスクリプティング
10. DEVELOPMENT HIGHLIGHT 04 開発の上で工夫した点
11. プログラムチーム タイムテーブル スポンサーチーム スポンサーページ 04-1 Google Spreadsheetでの情報掲載管理 PyCon JP 2025の各ページの掲載情報はそれぞれのチームが管理 会場チーム 当日企画ページ
12. 04-1 Google Spreadsheetでの情報掲載管理 これらの情報をすべてスプレッドシート上で管理
13. Fetch 04-1 Google Spreadsheetでの情報掲載管理 定期デプロイでデータ取得→キャッシュ保持 GitHub WorkflowsでCloudflare Pagesを定期デプロイ(1日2回)
14. 04-1 Google Spreadsheetでの情報掲載管理 キャッシュを元にコンテンツとして表示
15. 04-2 Google Drive×Cloudflare Images 共有ドライブ内の特定のフォルダに画像を配置 →定期デプロイの際にGoogle Driveからデータをダウンロード& 　Cloudflare Imagesにアップロード →スプレッドシート内でファイル名を記入することで、 　自由に画像の差し替えができるように (具体的な仕組みは次のページ)
16. 04-2 Download Upload Google Drive×Cloudflare Images
17. 04-3 MDXでの文章管理 MDX・・・MDX = Markdown + JSX Markdownファイル上でJSX記法も使用できるもの
18. 04-3 MDXでの文章管理 MDX・・・MDX = Markdown + JSX Markdownファイル上でJSX記法も使用できるもの
19. 05 まとめ
20. 05 まとめ 実際にカンファレンスに運営として参加することで、大きなイ ベントを運営していく難しさ&楽しさを学ぶことができた 実際にプロのエンジニアの方と一緒に作業できたことで、 　 たくさんのことを学ぶことができた
21. おしらせ GitHubにてリポジトリ公開中です 今回のLTで触れた部分以外にも i18n(国際化)等さまざまな工夫をして実装を 行いました。 詳しくコードを見たい方はぜひご覧ください 👀 https://github.com/pyconjp/pycon.jp.2025