2025-11-02 ぷよレイヤーズブリッジ10
はじめに
ぷよ・魔導・DS関連のコスプレ歓迎交流会「ぷよ橋」こと「ぷよレイヤーズブリッジ」は、2024年11月に開催した 第8回 で、新たなコンセプトを掲げました。 それは、作品が好きなレイヤー同士、あるいはレイヤーとファンとの間の交流はそのままに、競技としてぷよぷよを知ったプレイヤーとの交流も促進していくことです。 そのコンセプトの実現に向けてはまだ道半ばといったところですが、まずはやり続けることが大切。 そんなわけで、節目の10回目のぷよ橋、始めます。
開催概要
- 日時: 2025年11月2日(日) 9:00～21:00（途中入退場可）
- 場所: 東京都台東区浅草橋5-3-2 秋葉原ハンドレッド7
- JR・つくばエクスプレス 秋葉原駅昭和通り口から徒歩10分，電気街口から徒歩13分
- JR・都営地下鉄 浅草橋駅西口から徒歩6分
- 今回は 2F ではなく、いつもの 7F での開催に戻ります。
- 当日は、浅草橋駅西口から現地への誘導を予定しています。
- 参加費: コスプレ参加 2,500円，一般参加 2,000円
- 学生とその保護者は、学割として1,000円引き
- 会場の滞在時間が5時間以下の場合、半日参加として500円引き（学割と併用可）
- 参加者枠: 最大40名程度
- 高校生の参加は、保護者の参加か、保護者の許可を得ていることを条件とします。
- 中学生以下の参加は、保護者の参加を条件とします。
開催前後の連絡には Discord を使用します。 まだサーバに参加していない方には、Discord のユーザ名をご申告いただきますので、ご承知おきください。
注意事項
第8回と同様、今回のイベント告知、およびレポート投稿は、セガが運営するぷよぷよプレイヤー向けコミュニティサイトである「ぷよぷよキャンプ」でも行う予定です。 これに伴うセガへの許諾申請の範囲は、イベントの開催そのものと、イベント内での各タイトルの使用、ぷよぷよキャンプにおける諸投稿となります。 そのため、当イベント内でのコスプレなどの二次創作表現は許諾の範囲外となります。 コスプレなどは、あくまで各参加者が自己の責任のもとで、営利を目的としない範囲で行うものになりますので、ご理解ください。
参加登録は9月ごろから開始する予定です。
スケジュール
- （8:00 この時間から入場・設営は可能です）
- 8:50 浅草橋駅集合（第1次）
- 9:00 更衣スペース利用開始
- 9:50 浅草橋駅集合（第2次）
- 11:30～13:00 企画 (1) ぷよテト2Sで遊ぼう（仮）
- 13:15～13:30 全員集合写真撮影 (1)
- 15:30～16:30 企画 (2) ビンゴ大会
- 19:50 撮影終了・片付け開始
- 20:30 更衣室終了
- 21:00 完全撤収
イベント企画情報
ぷよテト2Sで遊ぼう
2025年6月に発売される「ぷよぷよ™テトリス®２Ｓ」の新要素を楽しむ趣旨の企画です。 詳細は、新要素の詳細を確認した上でお知らせする予定です。
ビンゴ大会
独自に用意したビンゴカードアプリと抽選アプリを使い、ビンゴ大会を行います。 各自のスマートフォンのブラウザからご参加いただけます。
今回は、アイコンの募集企画も行う予定です。詳細は後日お知らせします。 前回募集時の情報はこちらからご覧ください。
2025-04-05 着替え時間は4分半
[作ってみた]
メエーナ衣装振り返り
まさかまさかのコスプレ衣装制作記の記事、2着目。 今回は、ぷよポップ唯一の新キャラであるところのメエーナで、ぷよ橋・ぷよコネ参加！ ぷよポップ布教というのもあるんだけど、ぷよ橋運営やぷよコネスタッフとして時間のない中で、着替えにかかる時間を短くできそう、というのが理由としてあったり。 そんなに大きな手間がかかったわけではないので、1記事でざっくり振り返りを。
どれくらいかかったか
今回は、あえて最初にトータルで材料費がどれくらいかかったかを計算してみることに。
- 帽子・ネックウォーマー: ネット通販でセットのやつを（1,000円）
- インナー: 普通に私服
- シャツワンピ（？）: プリントしてもらった生地で縫い縫い（13,800円くらい）
- ブーツ: ネット通販で白長靴を買って塗装（靴本体3,000円くらい）
- 猫耳・しっぽ: ドンキでよくあるやつ（1,400円くらい）
- お面: ダイソーの偏光サングラスと厚さ 3 mm のシールタイプ cos ボード（1,100円くらい）
えーと、トータル2万円くらい？ それでも、布量が多かったゼロくんと比べると、ちょっと安いくらいかな。あっちはちゃんと計算してないけど……。
型紙を改造
型紙は今回もでぃあこすさん。 今回は、AラインTシャツの型紙を基本に、ハイネックシャツを参考に半袖から長袖に変更し、丈をひざまで延長する形。
そして柄を頑張って模写してプリントデータを作成し、オリキジさんに生地プリントを依頼。 実はジョゼにきの小道具（キノコ柄表紙のご本）を作るときに1度依頼しているので、使うのは今回で2回目。 生地の種類は、一般的なTシャツっぽいスムースと悩んだ末にストレッチアイを選んだんだけど、ほどほどの伸縮性と撥水性もあって、結果的にすごくそれっぽくなったかなと！
お面のつくり方
お面は、外側から以下の順で材料をぺたぺた。せっかくなので、表情差分も3種類ほど作ったよ！
- プリントした生地
- シールタイプ cos ボード（シールで生地を貼り付け）
- サングラス（GP クリヤーで cos ボードに貼り付け）
サングラスに貼り付けるってやり方は、結構他でも応用が利くんじゃないかな？ ぷよコネでは、ぷよテトのオーのお面を用意されてた方もいたけれど、ばっちり同じ作り方していて意気投合ｗ
2025-03-29 ぷよレイヤーズブリッジ9
はじめに
ぷよ・魔導・DS関連のコスプレ歓迎交流会「ぷよ橋」こと「ぷよレイヤーズブリッジ」は、2024年、久しぶりに年2回の開催ペースに戻りました。 春の開催は、例年通り「ぷよコネ！10」の開催前日に合わせて実施したいと思います。 結局都心で開催した方がみんなアクセスしやすいということから、会場はぷよ橋6でも利用した、一軒家レンタルスペースを確保しました。 アットホーム（一軒家）で、アットホーム（和やかな）な雰囲気で、1日楽しみましょう！
当イベントのコンセプトは、ぷよ・魔導・DSが好きなレイヤー同士、レイヤーと交流したいファン、あるいは競技としてぷよぷよを知ったプレイヤーを含めた、幅広い交流の架け橋となることです。
開催概要
- 日時: 2025年3月29日(土) 10:00～20:00
- 場所: 東京都新宿区西新宿4-17-6 ひらやないえ
大江戸線西新宿五丁目駅から徒歩4分、新宿駅西口から徒歩16分 - 参加費: 2,000円（学割1,000円）
学割は学生とその保護者が適用になります。
途中入退場OKですが、参加費は全日参加の場合と同額です。 - 参加者: 7名
開催前後の連絡には Discord を使用します。まだサーバに参加していない方には、Discord のユーザ名を申告いただきますので、ご承知おきください。
今回は小規模開催のため、ぷよぷよキャンプ（ぷよキャン）でのイベント告知は見送りました。
参加者一覧
申込順で、一般参加・コスプレ参加を分けずに記載します。
- SoLa4 - メエーナ（ぷよポップ）
- 柊夜 - ティ（ぷよテト）
- 159753 - マール（ver. キュアフェリーチェ）
- 超鮫YSK
- 星光けるぐ - ウト
- おなもみ - ストルナム
- うさみみもぐら - シグ（ぷよテト）
スケジュール
- 9:50 西新宿五丁目駅集合
- 10:00 設営・着替え開始
- 13:30～14:00 全員集合写真撮影
- 15:00～16:00 企画（ビンゴ大会）
- 18:50 撮影終了・片付け開始
- 19:30 更衣室終了
- 20:00 完全撤収
イベント企画情報
前回と同様、独自に用意したビンゴカードと抽選アプリを使い、ビンゴ大会を行う予定です。 アイコン募集企画は今回は行わず、次回開催時に行うこととしたいと思います。
2025-02-21 5年ぶりの
新時代のぷよカフェ
というわけで、初日の予約は取れなかったんだけど、3日目に行ってきましたよ……ぷよカフェ！ スイパラと組んでやってたときと比べると、だいぶこじんまりとしてしまったけど、良く言えば密度が高いとも言えるかな？ 元々クレープが売りのコラボカフェ専門店のようで、確かにクレープはもっちりしてて甘すぎず、満足度高め。
ただまあ……セガ側が完全に需要を見誤った企画を立ててしまったことについては、次回以降なんとかしてほしいところかな。 東京の予約は初日で満杯、グッズは最初の週末までに大半が売り切れ、必要な告知も全般的に遅すぎると……。 せっかくの機会だったのに、ネガティブな感情を持ってしまった人が多かったのは、正直残念。
今回、私はステッカーをコンプする気はないんだけど、前回までに集めた交換用のステッカーが300枚ほどまだ手元にあるのよね……。 それぞれのキャラが好きな人のところに届いてほしいから、お譲り・交換、出してみようかしら？
2024-11-29 オンラインビンゴ！
[作ってみた]
ぷよ橋恒例のビンゴ企画をオンライン対応させたよ、という話。
りきりきりきりきりきなんなん
ビーンゴー！（元ネタの曲知っている人どれくらいいるんだろ……）
ぷよ橋では、これまでにも数回ビンゴ企画を開いておりまして。
先日開催したぷよ橋8では、5年ぶりに企画を復活させたわけです。
ただ、今まで通りやるだけでは芸がないので、今回はビンゴカードをオンライン化して、各自のスマホのブラウザからもビンゴに参加できるようにしました！
ちょうど仕事でも技術的に似たようなことやる必要あったし……
ということで、オンラインビンゴカードシステムをどう作ったか、記事にまとめておこうと思います。
全体的なアーキテクチャ
今回のオンラインビンゴカードシステムの全体像を図示します。 簡潔に言えば、フロントエンドは JavaScript（JS）で、バックエンドは Ruby の CGI で、それぞれ書かれています。
司会者は抽選用のページに、参加者はカード表示用のページに、それぞれアクセスします。 ページから読み込まれる JS スクリプトには、抽選用・カード表示用・共通の3つの種類があります。 共通の JS は両方のページから読み込まれますが、残りの JS はそれぞれのページからのみ読み込まれます。 抽選用 JS は、司会者が抽選などの操作を行うと、バックエンドの抽選用 CGI スクリプトを呼び出します。 抽選用 CGI は、どの番号がいつ引かれたのかの情報を含んだルームデータを、テキストファイルとして書き出します。 カード表示用 JS はこのルームデータを読み取って、引かれた番号にマークをつけたり、ビンゴしたかどうかの判定を行います。
この設計は、ビンゴ実施中のサーバへの負荷を極力減らすことを意識したものになっています。 ルームデータへのアクセスの頻度は、参加者の人数に比例します。 しかし、このときサーバがすべきことは、数百バイトほどのテキストファイルを送ることのみです。 CGI スクリプトは、参加者側から呼び出されることはありません。
ただ、このことは同時に、参加者のカードデータをサーバに送ることはできないということも意味します。 司会者側の画面で参加者のリーチやビンゴの状況を確認する、などといった機能もあると楽しそうです。 しかしそこは、今回は設計の時点で割り切って諦めました。
フロントエンドの実装
まずは、フロントエンド部分の JavaScript について。 分量的には、カード表示用が計650行ほど、抽選用が350行ほど、共通が450行ほどで、計1,450行ほどです。 過去の回で使ってたスクリプトは計450行（抽選用300行、カード画像作成用150行）ほどだったので、3倍ほどに増えました……。 作らないといけない画面の数が増えたので、致し方ないところなのですが。
これまで作ってきた抽選ページ（や、ぷよ橋5で作った COOL24+24）は、特にフレームワークなども使わない、素の JavaScript を使っていました。 今回は、もう少しリッチな表現を求めて、Phaser というゲームフレームワークを採用しました。 GUI で開発ができるシーンエディタなどの有料機能もあるようですが、自力でコードを書く分には無料で使えます。 コードを書くのに十分なドキュメントやサンプル、リファレンスマニュアルもしっかり整備されています（ここが足りなくて利用を諦めたフレームワークもあります……）。 最低限の環境を整えるのも簡単で、基本的には 外部の JavaScript を読み込む HTML を用意して、適当な Web サーバ（Python 付属の簡易サーバ機能で十分）経由でブラウザに読ませるだけです。 そんな感じで、試行錯誤こそ必要だったものの、比較的すんなりと開発は進みました。
Phaser では、1つの画面（シーン）は Phaser.Scene を継承したクラスで定義します。 このクラスでは、コンストラクタ、および create() と update() の2つのメソッドを継承します。 コンストラクタでは、一意なシーン名を key に加えて継承元のコンストラクタを呼びます。 create() ではシーンの始めに1度だけ実行される処理、update() ではフレームごとに実行される処理を、それぞれ記述します。 ですので、基本的には create() でシーン上のオブジェクトを用意し、update() の中で入力のチェックとオブジェクトの操作を行えば、最低限動くものは作れることになります。
実際には、ボタンクリックなどの操作をきっかけに処理を行いたい場合があります。 この場合、オブジェクトにイベントリスナを設定することで対応できます。 具体的には、対象のオブジェクトの setInteractive() メソッドでクリック判定の領域を設定したあと、on() メソッドでイベントリスナを設定します。 今回はクリック可能なボタンが必要でしたので、ボタンを Phaser.GameObjects.Layer を継承したクラスとして、共通 JS の方で定義しています。 ボタンをクリックしたときにコールバックされる関数は、シーンのメソッドとして定義した上で、シーンに bind してからボタンのコンストラクタに渡しています。 （と、書いてて気づきましたが、on() メソッドの第3引数に context ってのがあったので、そこでシーンを指定してしまえば、bind は必要なかったかもしれません）
また、ちょっとしたアニメーションや色の変更など、毎回 update() の中で計算して動かすには面倒なものもあります。 これを楽にするための仕組みに Tween があります。 Tween をシーンに登録しておくと、経過時間をもとに一定の計算式でオブジェクトのプロパティを自動更新してくれます。 特に今回は、具体的なオブジェクトへの割り当てが必要ない、Number Tween というものを使いました。 経過時間を 0～1 の形で（あらかじめ指定した時間で割り算して）数えるとともに、フレームごとに onUpdate に登録したコールバックを呼び出してくれます。 また、指定した時間が経過すると、onComplete に登録したコールバックを呼ぶこともできます。 今回、カードを表示するシーンで、選ばれたマスをしばらく虹色で光らせたり、各ラインがビンゴにどれくらい近いかをアニメーションで表示したりといった処理に、この Number Tween を使いました。 その結果、このシーンでの update() の処理は、10秒おきにルームデータを読み込んだり、その結果を1秒おきに反映させたり（後述します）といった処理を書くだけになり、描画周りの処理が完全に分割できました。
カード情報の符号化
1度カードを作成したら、ブラウザをリロードなどしたときも同じカード情報で再開できることが望ましいです。 よって、カードが作成された時点で Cookie にカード情報を保存することにしました。 保存するカード情報は、各マスの番号をそのまま符号化するのも1つの手です。 しかし今回は、カードを再現するのに必要最小限の情報だけをアルファベット大文字（26種類）の文字列に符号化して、それをカード ID とすることとしました。 こうすれば、カード作成時と再開時とで、同じプログラムをそのまま使えます。 また、まさかこんな企画でズルをする人はいないと思いますが、原理上はズルもしにくくなるはずです。
具体的には、必要な情報は以下の通りとなります。
- 巨大マスの配置される場所（16通り）
- 巨大マスの番号（↑によって10通り or 20通り）
- 乱数の種（2^32 通り）
巨大マスに関する情報はそれぞれ1文字で、乱数の種は7文字（∵ 7 x log2(26) ≒ 32.9）で、それぞれ符号化します。 カードの ID は9文字で表現されることになります。
バックエンドの実装
バックエンド部分は、約100行の Ruby スクリプトです。 ビンゴの進行状況はルームごとに管理され、ルームは数字4桁のルーム ID で識別されます。 入力はルーム ID と、そのルームに対して行う操作の種類です。 また、操作の結果として出力・更新されたルームデータを、そのまま出力します。
ルームデータは、以下に示すようなシンプルなテキストファイルです。
11234 1728190154 249 413 314 424 437 439 50 0
ルームデータの各行は、スペースで区切られた2つの数字からなります。 最初の行には、ルーム ID と、そのルームが開設された時刻（UNIX 時間で）が書かれます。 それ以外の行には、抽選された番号と、その時刻（ルームの開設時刻からの秒数）が書かれます。 ただし、ルームを閉鎖した場合には、両方に 0 が書かれます。
抽選操作が行われると、まだ選ばれていない数字を1つ選び、ルームデータの末尾に書き込みます。 このとき、抽選された時刻には、実際の時刻から少し（具体的には12秒）遅れた時間を記録しています。 カード表示用のページでは、1秒おきに現在時刻と抽選された時刻とを比較し、現在時刻が抽選された時刻になったとき初めて抽選結果を画面に反映させます。 これにより、カード表示用のページからルームデータを読み込む頻度を最小限（10秒に1回）に抑えつつ、抽選用のページで抽選された番号がわかるのと同時にカード表示用のページに反映させる、という動作を実現しています。
まとめ
ということで、ぷよ橋8で使われたオンラインビンゴカードシステムの紹介でした。 ソースコード一式はこちらに New BSD ライセンスで置いておきますので、無保証であることを承知いただけるのであれば、ご自由にお使いください。