ワタタツの日記

☆ PyCon JP 2025で「Pythonのピース」を集めるウェブアプリを作って運用した

こんにちは。PyCon JP 2025のもう一人の副座長のNyohoです。

今年のPyCon JP 2025のテーマは「あつまれPythonのピース」でした。せっかくこんなエモーショナルなテーマですので、このテーマを仮想的に実現するような、参加者の皆さんが持ち寄った「Pythonのピース」を仮想的に集めるウェブアプリを作って会場で使っていただきました。

テーマの思い

「あつまれPythonのピース」というテーマには、Pythonの得意な使い方、愛用しているライブラリ、考え方、立場の違い(エキスパート・入門者・教育者・コミュニティ運営者など) といった、Pythonに関するさまざまな “ピース” を参加者が持ち寄って、集まり、それらの異なるピースがPyCon JPの会場で出会い、複雑にコミュニケーションが起こるというイメージの想いが込められています。

パズルのピースのように、それぞれの個性が噛み合って新しい何かが生まれる……そんなイメージを形にしたのが、今回のロゴです。エモーショナル!

テーマの思いのこもったロゴ

今回のロゴは、Pythonのロゴをモチーフにして、テーマに合わせてパズルピースになっています! しかも平面を無限に敷き詰められるようにデザインされています。すべて、デザイナの柳谷さんのアイディアです。

当初は、このロゴをアクリル製のピースにして、
そこに参加者が自分の“Pythonのピース”を書き込むという企画を考えていました。しかし、アクリルの制作はスケジュールやコストや使用法の面で難しく、実現を断念しました。

ところが、座長が「このロゴに込めた意味はまだ諦めていない」と言っていたのをわしが思い出し、その想いをオンラインで形にするために、このウェブアプリを作ることにしたのです。

ウェブアプリの仕組み

このウェブアプリは2つのサイトから成っています。

集める方

集める方のアプリでは、

• 参加者が自分の“Pythonのピース”を入力できます。
• 認証は不要で誰でも投稿できます。
• いたずら防止のために管理者ページを設け、投稿内容を承認したら表示するアプリに出てくるようにしました。
• 投稿があるとわしに通知が届き、承認されたものだけがAPI経由で表示する方で公開されます。

表示する方

表示する側は、アクリルにしたかったこのピースを、できるだけ美しい3DCGになるように心がけました。

公開APIを通じて表示する側ののサイトがピースの名前たちを取得し、3Dで表現された美しいクリスタルのようなピースに名前を刻んで表示します。

新しいピースが追加されると、画面上に上から降ってきて集まっていく―― そんな、ちょっとエモーショナルな演出にしています。

こんな感じです。

当日の様子

当日は、入力フォームのQRコードと説明書き印刷して、会場のあちこちに貼ったり、参加者に直接お伝えしたりしました。

参加者の皆さんにも随時紹介し、表示する側の3DCGはメイン会場のスクリーンで幕間にループ再生してもらいました。ウェブアプリにしたことで、配信チームにループ再生してもらうことが容易になっています。たぶん。

入力があ(って承認され)るたんびに、ピースが一つ、また一つと画面の上から降り、増えていく様子がリアルタイムで見えて、とても印象的な光景になったと思います。

公式パーティー会場でもピースを表示し、最終的には2日間で約60個のピースが集まりました。さらに翌日のスプリントでも紹介し、合計80個以上のピースが集まりました。やった!

もう少し広報を強化したらもっと使っていただけたかもしれませんが、多くの方が参加してくださり、とても嬉しかったです。

感想

このアプリを通じて、みんなのPythonへの思いやピースがどんどん集まっていくというアイディアが、仮想的にでも形になっていく様子を見られたのは、とても感慨深い体験でした。PyCon JP 2025の「あつまれ Python のピース」というテーマが、まさにそのまま具現化できたと思います。楽しかったです。コナミ環

【後半】PyCon JP 2025「あつまれPythonのピース」技術構成

後半は、技術的な構成を書きます。

上の記事に出てきたウェブアプリの技術構成を簡単にメモいたします。

概要

PyCon JP 2025のテーマ「あつまれPythonのピース」を体現する、参加者からキーワードを収集し、3D空間で可視化するインタラクティブシステムを構築しました。システムは2つの独立したウェブアプリケーションで構成されています。

システム構成図

[参加者]
    ↓ 「Pythonのピースの名前」を投稿
[gathering-names-of-pieces-2025] (FastAPI)
    ↓ 承認されたキーワード
[collected-pieces-2025] (React Three Fiber)
    ↓ 3D可視化
[参加者が閲覧]

1. ピースの名前を集めたり管理するシステム (gathering-names-of-pieces-2025)

参加者から「あなたのPythonのピース」の名前を収集し、管理者が承認を行うシステムです。

技術スタック

• Python
• FastAPI
• Jinja2
• データベース: PostgreSQL (Supabase)
• Docker
• Google Cloud Run
• Supabase
• GitHub Actions

あつまる側のアプリは、せっかくなので、Next.js, ReactのようなJavaScriptのフレームワークを全く使わずに、Python、FastAPIで作ってみました。

また、クラウド的にSupabaseというウェブサービスがPostgreSQLを簡単に使えそうでしたので今回初めて使ってみました。

また、認証画面は自分だけですが、わざわざGoogle OAuthで認証するように作ってみました。

今回、pycon.jpのドメインで公開するためにCloud Runだけだとhttpsの証明書の名前が付けにくかったので、Cloud Runの前に、ロードバランサを入れました。これはPeacock氏のアドバイスです。

2. あつまったPythonのピースを3Dで可視化システム (collected-pieces-2025)

承認された「ピースの名前」を3D空間に「ピース」に書き込んで降らせ、物理演算でインタラクティブに表示するビジュアライゼーションシステムです。

技術スタック

• フレームワーク: React 18 + TypeScript
• ビルドツール: Vite
• 3Dレンダリング: Three.js (React Three Fiber)
• 物理エンジン: Rapier (@react-three/rapier)
• 3Dユーティリティ: @react-three/drei
• ホスティング: Cloudflare Pages

これはさすがにJavaScriptを使いました。

Three.jsとそのReactで使えるもの自体は使ったことがあったのですが、物理エンジンにRapierを使ったのが初めてでした。

こちらはViteで静的サイトとしてビルドし、CloudFlare Pagesにデプロイしました。

パフォーマンス最適化

数百の入力があることを想定して、パフォーマンスについても考慮していました。数百を超えている場合は、ピースの方を、丸みなど少し簡素化して、より滑らかに動くようにするというものです。

何も最適化しないと、500個ぐらいのピースでもうガクガクになりました。

アニメーション

一定の時間の操作がないと、自動的にアニメーションするようにしました。

ゆっくりカメラが周りを回り、ときどき一つのピースをランダムで選んでカメラに見せるというものです。カメラに見せ終わったら、ぽーんと中央に飛ばすようにしてみました。

まとめ

このプロジェクトでは、FastAPIとReact Three Fiberを組み合わせることで、参加者の皆さんの「Pythonのピース」を仮想的に、かつ、インタラクティブに3DCGでお見せすることを実現しました。

新しい技術も学べて面白かったです。コナミ環