えびちゅう修学旅行 in 広島･福岡
この記事は私立恵比寿中学アドベントカレンダー2025 12/15の記事です｡
おはこんばんちには｡ 塩レモンです｡
今回はライブの感想も交えながらオタク達とのN年ぶりの修学旅行に行った話を書こうと思います｡
皆さんご存知の通り､ 私立恵比寿中学は先日まで｢Road to Kアリーナ『秋の5都市キャラバンツアー〜Magic 1 Hour〜』｣というツアーを開催していました｡
約20日間のうちに東京･大阪･広島･福岡･愛知の5都市を各2部公演で回るという怒涛のツアー｡ しかも大阪以外ド平日｡ え､ 退職届出す?
正直訳がわからないスケジュールですが､ 気がついた時には全公演のチケットを抑えてました｡ 多分不正利用だと思う｡
| 開催日 | 開催地 |
|---|---|
| 2025年11月20日(木) | 東京・Kanadevia Hall |
| 2025年11月24日(月祝) | 大阪・東京建物 Brillia HALL 箕面 大ホール |
| 2025年12月4日(木) | 広島・HIROSHIMA CLUB QUATTRO |
| 2025年12月5日(金) | 福岡・Zepp Fukuoka |
| 2025年12月12日(金) | 愛知・COMTEC PORTBASE |
私は福岡生まれ福岡育ち純情博多っ子(?)の福岡県民なのですが､ ここであることに気づきます｡
｢広島･福岡に来る関東勢に一旦福岡に来てもらって､ 俺の車で広島まで相乗りしていけば交通費めっちゃ浮くのでは...?｣*1
｢そのまま一緒に広島泊まって､ 福岡まで一緒に帰ればいいじゃん！｣
早速知り合いのオタク達に声をかけて広島･福岡の修学旅行開催が決定しました｡
広島編
オタクの朝は早い｡ *2
11時前にオタク達と福岡空港で合流｡ まずはめかりパーキングエリアへ｡
めかりPAで待ち合わせていたオタクとも合流し､ 2台に分かれて広島へ｡
道中では円盤を見ながらこの後の現場に向けてウォーミングアップしておきます｡
会場近くのタイムズに車を駐めていざ会場へ｡
会場のクラブクアトロは思っている以上にコンパクトな箱で否が応でも高まってきます｡ 箱トータルの面積を足しても小学校の教室 + αくらいの広さ｡ クッソ近い......
そして開演｡
一曲目は｢金八DANCE MUSIC｣｡ とにかく皆声が出る｡ ギロッポンもよく飛ぶ｡ そりゃそうですよね､ 平日の昼間から地方公演に来る無職の皆さんオタクがぬるい訳がありません｡
正直ぶち上がりすぎて1部･2部共にほとんど記憶がないんですが､ あまりにもオタクの声がデカすぎて仲村悠菜さんが｢みんなどうしたんですか......｣と困惑していたのがとてもかわいかったのと､ ｢Twinkle Wink｣のウインク対決中の中山莉子さんが最高にかわいかった｡ まさに｢下手くそな Wink それすらも Charming｣って感じ｡
1次会終わって2次会でらーめんへ｡
2次会後はオタク8人で宿へ｡ 敷き布団を並べて雑魚寝なんてまさに中学生に戻った気分です｡
布団被って｢お前好きな人教えろよ〜｣なんて甘酸っぱい青春の思ひでが蘇ってきそう｡
ちなみにお↑れ↓の好きな人はぁ...誰にも言うなよ??? 中山莉子なんだけど...
.............................
自分は翌日ドライバーということで恋バナに花を咲かせたり､ 飲み直す余裕もなくさっさと就寝しました｡
福岡編
オタクの朝は早い｡ *3
帰りの車は往路のメンバーに4人のオタクを追加して合計9人(!!)で福岡へ｡ 昨日に引き続き円盤でウォーミングアップしながらZepp Fukuokaへ向かいます｡
Zepp Fukuokaのお隣では某有名男性グループのドームツアー公演が開催されておりすごい人だかり｡ いつかえびちゅうのワンマンライブでPayPayドームのあの階段を登りたい｡
福岡公演1部は整番に恵まれずフロアの後方｡ でも逆に広くて最高｡
開演前には近くを通りかかったシガロンと色々お話出来たりしました｡
福岡公演でもえびちゅうちゃん達は安定のパフォーマンス｡ こっちはフロア後方なので全力でフリコピ｡
昨日に引き続き｢23回目のサマーナイト｣が聴けてガッツポーズです｡ ｢君が次は勇気出して！｣のところで全力で中山莉子さんを指差してました｡
1部､ 2部通して連番した12推しの知り合いと作った特大ハートで中山莉子さんから爆レスをもらったり､ アホみたいな発言をして周囲の失笑をかっさらったりとまたまた最高の思い出になりました｡
終わった後は僕が15年来推してる居酒屋である春吉五鉄で飲み会でした｡ *4
今回は20人という大型の飲み会になりました｡ 福岡公演の1公演あたりの動員が500人だと仮定すると1/25がこのお店に来たことになる(???)
ここまで大型の飲み会幹事は初めてすぎてあたふたしていたのですが､ かしむらさんはじめ皆さんの協力でなんとか無事に終えることが出来ました｡ ありがとうございました！
この後は各々二次会に行ったりホテルに帰ったりとしました(写真取り忘れた)
締め
本当は翌日もオタクと飲んだりしていたのですがもう長くなってしまったので写真だけ置いて一旦締めておきます｡
7日のちかっぱ祭も良かったですね｡ ｢シンガロン･シンガソン｣は至高｡
この歳になって誰かと数日間寝食を共にするというのもなかなか楽しいものです｡ まさに修学旅行｡ 永遠に中学生｡
アイドルを追いかけていたらいつの間にかこうして人間関係が広がり､ また新しい楽しみが出来るというのがとても良い｡
みなさんも機会があればえびちゅう修学旅行をしてみてください｡ きっといい思い出になります｡
なぜ俺達はライブに通い続けるのか
この記事は私立恵比寿中学 Road to Saitama カウントダウンカレンダー 3/19の記事です｡
みなさんは普段ライブ中､ どんなことを感じ､ 考えながら過ごしていますか?
私はライブ中大きく2種類のセンサーが共存しています｡
一つはメンバーの可愛さ､ 曲の楽しさを感じ取るシンプルなセンサー｡
もう一つは曲やライブ全体を通して演者がどのような表現をしているか､ どのようなメッセージを伝えようとしているかを感じ取るセンサーです｡
えびちゅう歴3年半*1､ アイドルオタク歴で数えても10年いかない*2若輩者ですが､ それなりに真面目にオタクをやってきた自負があります｡
明日の大切なライブ､ そしてこれからも続いていくであろうえびちゅうのライブに臨むにあたって､ 自分の思考の整理も兼ねて普段自分がどのようにライブや推しに対して臨んでいるかをまとめようと思います｡
共感してもらえるところがあると嬉しいです｡
センサー1 : メンバーの可愛さ､曲･演出の楽しさセンサー
これはアイドルのライブに行ったことがある方なら誰しもが直感的に理解出来るものだと思います(なのでこの記事では多くは触れません)｡
｢今日も〇〇ちゃんが可愛い大好き愛してる｣
｢髪型も髪色もたまらん俺も毎日これにする｣
｢衣装がかわいすぎる､衣装さんの口座番号メールで送っといて｣
｢うっっっ(ずっと聞きたかった曲が来た瞬間の鳴き声)｣
｢(...このフォーメーションはぁぁぁぁぁぁ！？！？！？！？！？) あっあっ｣
｢......レス来た！！！！！！！｣
みんなありますよね｡ 多分｡ オタクやってればN万回*3経験すると思います｡
一番素直､ というか分かりやすい楽しみポイントですね｡ オタク1年生から仙人までみんな大好き｡
自分は中山莉子さんのお顔とか髪型とかニッッッコニコの笑顔を見て毎回これ↑になってます｡
あと｢シンガロン･シンガソン｣職人(自称)なので一人で｢このフォーメーションはぁぁぁぁぁぁ！？！？！？！？！？(サイレント)｣をやってるし､ Cメロ前のこれ↓に真剣です｡ 私と連番する方は把握よろしくお願いいたします｡
グループをよく知ってても知らなくてもこういう楽しみ方が出来るのはアイドルの良いところです｡
実際アイドルフェス後のTLとか眺めていると
｢〇〇のﾅﾝﾁｬﾗｶﾝﾁｬﾗ〜って感じの曲がめっちゃ楽しかった！今度の単独行ってみたい！｣
｢〇〇のXX色の子めっちゃ可愛かった｡ ハマりそう｣
みたいな､ 知らないけど楽しめた系ツイートをよく見る｡
全人類が楽しめる､ 最も開かれた(？)楽しみ方｡
センサー2 : 演者の表現･メッセージセンサー
こっからが本題｡ 打って変わって真面目モードになるのでここでブラウザバックされると悲しい｡
この章の結論から言えば､ ｢ライブとはコミュニケーションである｣です｡
人類の歴史の中で｢音楽とはコミュニケーションである｣みたいな言説は繰り返されてきた*4ので､ 今更こうやって書くと陳腐に聞こえるかもしれませんが､ この結論にはもう少し裏があります｡
まず｢コミュニケーション｣とは何なのか､言葉の意味を確認しましょう｡
１ 社会生活を営む人間が互いに意思や感情、思考を伝達し合うこと。言語・文字・身振りなどを媒介として行われる。「—をもつ」「—の欠如」
２ 動物どうしの間で行われる、身振りや音声などによる情報伝達。
｢意思や感情､思考を伝達し合うこと｣とあります｡ その媒介になるものに制約は特になさそう｡
｢伝達する｣ということは､ ｢表現する｣､ と言い直すことが出来るでしょう｡
［名］(スル)心理的、感情的、精神的などの内面的なものを、外面的、感性的形象として客観化すること。また、その客観的形象としての、表情・身振り・言語・記号・造形物など。「情感を—する」「全身で—する」
つまり｢コミュニケーション｣という語は｢表現の応酬｣という風に言い換えることが出来ると思います｡
...めんどくさい性格が出ている｡ もう少しお付き合いください｡
ではライブという場面において｢コミュニケーションがどのように成立するか｣､ ということについて考えます｡
ライブには本当に多くの人が関わっています｡
演者であるアイドルは当然として､ マネージャーさん､ 演出家さん､ PAさん､ 照明さん等々｡ アイドルを軸にチームで一つの作品を作り上げるわけです｡
そしてその作品には何らかのメッセージや思いが込められている｡
観客である我々はそれを文字通り全身で受け止める｡ そして何かしらの反応を返す｡
涙を流したり､ 名前を叫んだり､ 全力でコールしたり､ はたまたペンライトを振る腕にすごく力が入っているかもしれない｡ パッと見で見えなくても表情やオーラで自分の感情が表に出ているかもしれない｡
それを見て演者もまた何かを感じ､感じたことに対する応酬が瞬間瞬間のパフォーマンスとして表れる｡
いつもにも増してかわいい笑顔になったり､ 力強い表情になったり､ より歌やダンスに熱が入ったり､ レスしたり､ 時には涙したり｡
出役のアイドルだけではないでしょう｡ 演出家､PAさん､照明さん達スタッフ陣だって表現者です｡ 我々と直接インタラクトすることはなくても､ 彼らも観客の反応を見て感じるものは確実にあるはずです｡
...こうやって俯瞰してみると､｢ライブ｣というイベントが単なる生歌イベントではないということに気づくはずです｡ コミュニケーションそのものだ､ という風に見えてきませんか？
言語を介した一般的なイメージのコミュニケーションではないけれど､ だからこそ伝わるものがあると思うのです｡
｢言葉だけではなく行動で示せ｣的なやつ｡
自分の目の前で､全力で気持ちを込めてパフォーマンスしてくれるからこそ強い説得力を持って伝わる｡
我々もそれに答える｡
我々の答えに更に返し続けてくれる｡
だからこそ､ 我々はライブに通うんだ*5と思います｡
最後に
私はこの｢ライブとはコミュニケーションである｣理論がライブの本質だと思っています｡
別に1つ目に書いた楽しみ方がズレている､なんてことを言うつもりは毛頭ありません｡ 僕だって大好きだし｡
でもライブを単に
｢有名人を生で見れる場所｣
｢かわいい推しを眺めにいく場所｣
｢レスもらい合戦｣
｢アガる曲で騒ぐ場所｣
程度の認識で捉えてしまうと途端にライブが味気ないものになるような気がする｡ 楽しみ方は(他人の迷惑にならない範囲であれば) 自由だし､ 間違いはないです｡
｢ちちんぷい｣では大いにダンソンMIX*6でダンソンやるのが正解*7*8だろうし､ 客降り確定現場ならかわいい衣装とメイクを纏った推しを近くで眺める大チャンス｡ 撮可なら尚最高｡
俺だって莉子にスマホを奪われて勝手に自撮りされたい｡
あっそのまましばらく使っていただいても結構ですよ､ クレカ情報も口座情報も入ってますんで､ パスコードはあなたの生年月日です｡ 次の次の現場くらいで返してくれると助かります(ここまで早口)
でもコミュニケーションという大前提を忘れてしまうのはあまりにもったいない｡ 仲間内で騒ぐのは居酒屋でもカラオケでも出来る｡ 推しと会うのも特典会で会える｡ 特典会ならド至近距離で会える上に自分と目を合わせて話してくれる｡
演者が何を伝えようとしてくれているか､ 何を示しているか｡
それを聞いて､ 見て､ 自分はどう感じるか｡ どうその感情を発散させるか｡
ライブとはこういった感情や思考､衝動の応酬であるということを忘れずにいたい｡
それこそがライブがライブたる所以だと思っているから｡
あとがき
明日は待ちに待った､ 10年ぶりに私立恵比寿中学がさいたまスーパーアリーナに立つ日です｡
チケットも念願のSOLD OUTとのことで本当にめでたい｡
「私立恵比寿中学 15th Anniversary 大学芸会2025～LOVE&BRAVE～」💙
— 私立恵比寿中学（えびちゅう） (@ebichu_staff) 2025年3月18日
3月20日(木祝) さいたまスーパーアリーナ 公演💎
ついに！！！！全席SOLD OUTいたしました！！💐
みなさま、本当に本当にありがとうございます🙌🏻
公演まであと2日✨
みなさまとお会い出来ることを… pic.twitter.com/W1wAIOPWXm
このツイート見ながら爆泣きしました｡ まだ始まってもないのに感情が溢れて困ってます｡
今は
｢待ちに待った日が明日に迫っている嬉しさ｣
と
｢明日で2022年の大学芸会から見続けていた夢が終わってしまう寂しさ｣
が共存しています｡
思い返すとSSAが発表された春ツアー初日も似たような感情になった記憶がある｡
が､ 彼女たちはまた俺達が一緒に追える夢を見せてくれると思っています｡ それが箱の大きさであれなんであれ｡
*1:私立恵比寿中学のイベント参加歴: https://github.com/sioremon/ebichu_live_history/blob/main/README.md
*2:ももクロのイベント参加歴: https://github.com/sioremon/momoclo_live_history
*4:https://www.google.com/search?q=%E9%9F%B3%E6%A5%BD+%E3%82%B3%E3%83%9F%E3%83%A5%E3%83%8B%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3&sourceid=chrome&ie=UTF-8
*5:アホみたいな金と時間をかけて
*6:https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11168459641
*7:ファミえん2024 Day2で突然ダンソンに入ってきた知らないオジさん､ありがとうな｡ 俺はあんたが好きだよ
*8:ちちんぷい: https://www.youtube.com/watch?v=E8LaebTEo-8
*9:意味: 敬具
えびちゅうSSAを盛り上げるためにWebアプリを作った話
この記事は私立恵比寿中学 Road to Saitama カウントダウンカレンダーの2/27の記事です.
全体的にえびちゅう要素は薄めです(ごめんなさい). えびちゅう関連話題だけ読みたい方は以下からどうぞ.
最近なにかとえびちゅうと絡めて個人開発をやりたがっている塩レモンです.
こちらの記事で告知した通り, SSAに向けてアドベントカレンダー的なやつをやろう! ということで｢Road To Saitamaカウントダウンカレンダー｣なるものを企画しました.
この記事の公開時点で既に日程の3/4以上が埋まっており, 大変嬉しい限りです. ありがとうございます.
引き続き参加者大募集中です. まだ5日空きがあるので, あまり身構えずにふらっと登録してペロッと書いていただけたら嬉しいです(がっつり長文ももちろんお待ちしております).
で, タイトルから既にお察しの方もいるでしょうが, 今日のやつはまさにこの企画のために作ったadventar.orgもどきの開発話です. 開発に至った経緯はこちらをご覧ください.
カウントダウンカレンダーの記事として出すのもどうかな...と思ったんですが, 企画に関わる話だし, 記憶が揮発する前にどこかに書き起こしたかったので書いてみます.
#えびちゅうパソコン部活動としてもうってつけだしね. もっと流行らせたい.
機能の洗い出し
最初からadventarもどきにする, というコンセプトは明確だったので, adventarを実際に触りながら必要な機能を洗い出していきました.
- adventarからパクってくる機能
- ログイン
- カレンダー表示
- 任意の日付への記事･URLの登録
- 登録した記事･URLを編集･削除
- 登録された記事のリスト表示
これで基本的な機能は揃いますね. この上で開発を簡単にするために色々制限をつけていきます.
認証プロバイダをGoogleだけにするならプロフィール設定画面が必要そう. 参加するのが全員オタクということを考えると表示名はGoogleのアカウント名よりもオタクネームであってほしいし, アイコンはXのアイコンが使えるようにしたいはずです.
ただX連携みたいなのはめんどくさそうだし時間もなかったので, 今回は自分で登録してもらう方式にしました.
ということで実装する機能がざっと揃った.
- ログイン
- カレンダー表示
- 任意の日付への記事･URLの登録
- 登録した記事･URLを編集･削除
- 登録された記事のリスト表示
- プロフィール設定
技術選定
言語やフレームワークは脊髄反射でいつも通りのやつ.
- 言語: TypeScript
- フレームワーク: React
- CSS: Tailwind CSS
次はホスティングや認証周り, DBやオブジェクトストレージあたりを考えないといかないですね.
この辺がワンストップで揃ってて簡単に使えそうなクラウドサービスを探した結果, Firebaseに落ち着きました.
- ホスティング
- Firebase Hosting
- 認証
- Firebase Authentication
- DB
- Firestore or Realtime Database
- オブジェクトストレージ
- CloudStorage for Firebase
認証周りが一番の心配ポイントだったんですが, Firebase Authenticationを使えば結構簡単に認証が実装出来そうでした. そもそもFirebaseはGoogleが提供しているMBaaSなので｢Google認証を使う｣という要件を踏まえるとFirebaseが一番楽, かつ安心して使えそう.
Authenticationの他に, ホスティング等必要な機能が揃っているのでFirebaseを選択しました.
Firebaseは2種類のDBを提供していて, それがFirestoreとRealtime Databaseです. 両者の違いは以下リンクを参照.
今回のアプリケーションのデータ構造は比較的単純になりそうだったので, この説明を鵜呑みにしてRealtime Databaseを選択. Firestoreの説明を読んでいて, そこまでリッチな機能いらなさそう, と思ったのもある.
Realtime Database は従来の Firebase JSON データベースです。シンプルなルックアップと低レイテンシの同期を必要とし、スケーラビリティに制限がある単純なデータモデルを使用するアプリケーションに適しています。
本当は両者を実際に触って選びたかったが, 時間がなくてFirestoreは触らずじまいでした. 次なんかやるときに使えればいいな.
Realtime DatabaseやFirestoreの大きな特徴はクライアントから直接アクセス出来るという点です. CRUD操作をするためだけにバックエンドを用意しなくていいわけですね.
ある程度まではDB側のセキュリティルールでバリデーションも可能なので, 今回くらい単純なアプリケーションだったらクライアントから直接読み書きする構成にして良さそうです.
ということでバックエンドは用意せず, フロントから直接DBにアクセスする構成にします.
これで役者は揃ったので粛々と実装していきます.
開発中の色々
Geminiが最高だった
Googleが提供する生成AIサービスです. ChatGPTみたいなやつ. 詰まったときに雑に聞いて解決出来たのでめちゃくちゃ助かりました. 中でもCSSなどUIに関連する部分が最高に助かりました.
使い方の一例を貼っておきます.
- adventarのスクショを撮る.
adventar.orgのスクショ - Geminiにスクショとプロンプトをぶん投げる.
スクショとプロンプトをぶん投げる例
そうするとこんな感じでサンプルコードを出してくれます. しかもそのまんまでちゃんと動くことが多い.
# 著者追記: 動くかは知りません import React, { useState } from 'react'; interface Entry { day: number; title: string; url: string; author: string; } interface CalendarProps { entries: Entry[]; onAddEntry: (entry: Entry) => void; } const Calendar: React.FC<CalendarProps> = ({ entries, onAddEntry }) => { const [showModal, setShowModal] = useState(false); const [newEntry, setNewEntry] = useState<Omit<Entry, 'day'>>({ title: '', url: '', author: '', }); const days = Array.from({ length: 25 }, (_, i) => i + 1); const handleOpenModal = () => { setShowModal(true); }; const handleCloseModal = () => { setShowModal(false); }; const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { setNewEntry({ ...newEntry, [e.target.name]: e.target.value }); }; const handleAddEntry = () => { const day = days.find((day) => !entries.find((entry) => entry.day === day)); if (day) { onAddEntry({ ...newEntry, day }); handleCloseModal(); setNewEntry({ title: '', url: '', author: '' }); } }; return ( <div className="container mx-auto p-4"> <div className="flex justify-between items-center mb-4"> <h1 className="text-2xl font-bold">私立恵比寿中学2024(非公式) Advent Calendar 2024</h1> <button onClick={handleOpenModal} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> 記事を登録 </button> </div> <div className="grid grid-cols-7 gap-4"> {days.map((day) => { const entry = entries.find((entry) => entry.day === day); return ( <div key={day} className="border p-4 rounded"> <h2 className="text-lg font-semibold">{day}日</h2> {entry && ( <div> <a href={entry.url} target="_blank" rel="noopener noreferrer"> {entry.title} </a> <p className="text-sm">著者: {entry.author}</p> </div> )} </div> ); })} </div> {showModal && ( <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex justify-center items-center"> <div className="bg-white rounded p-4"> <h2 className="text-lg font-semibold mb-4">記事を登録</h2> <div className="mb-2"> <label htmlFor="title" className="block text-sm font-medium text-gray-700">タイトル</label> <input type="text" name="title" value={newEntry.title} onChange={handleInputChange} className="mt-1 p-2 border rounded w-full" /> </div> <div className="mb-2"> <label htmlFor="url" className="block text-sm font-medium text-gray-700">URL</label> <input type="text" name="url" value={newEntry.url} onChange={handleInputChange} className="mt-1 p-2 border rounded w-full" /> </div> <div className="mb-4"> <label htmlFor="author" className="block text-sm font-medium text-gray-700">著者</label> <input type="text" name="author" value={newEntry.author} onChange={handleInputChange} className="mt-1 p-2 border rounded w-full" /> </div> <div className="flex justify-end"> <button onClick={handleCloseModal} className="bg-gray-400 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded mr-2"> キャンセル </button> <button onClick={handleAddEntry} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> 登録 </button> </div> </div> </div> )} </div> ); }; export default Calendar;
どう実装したらいいか分からなかったときに具体的なサンプルを出してくれるのでめっちゃ助かります.
普段の業務でフロントを触る機会が皆無に等しいこともあって, CSSが絡むところはほとんどGeminiにやってもらいました.
本当ならv0の方がこういう用途に向いているはずですが, 無料プランだと1日にプロンプトを投げられる回数に制限があるので今回はあんまりお世話になりませんでした. もう少しフロントを触る機会が増えてきたら契約するかもしれない.
今回はadventarというお手本があったのでスクショでしたが, 完全新規で作るときはFigmaあたりで作ったデザインで同じことをすれば良いです.
Realtime Databaseのセキュリティルールが難しい
Realtime Databaseのセキュリティルール設定が最大の詰まりポイントでした.
Realtime Databaseは保存したいJSONの構造に対して, 4種類のルール(.read, .write, .validate, indexOn)と正規表現, 式などをJSON内にセキュリティルールとして記述する仕様になっています. 読み書きの権限設定の他に, バリデーションもこのルール内で実装します.
この仕様と構文の表現力が少々乏しく, 実装したい権限設定やバリデーションに対して結構まどろっこしい書き方をしないといけない場面が多かったです.
隅から隅までドキュメントを読みつつ, 試行錯誤してたらどうにか書けますが, まどろっこしい書き方な故に見落としがないか判断しにくいとか, ぱっと見で読みにくいとか, Realtime Databaseの辛くなりがちポイントなのかなという気がしました.*1
Firebase Hostingの独自ドメイン設定の体験が良い
Firebase HostingではデフォルトだとprojectId.web.app, またはprojectId.firebaseapp.comのURLで公開されるようになってます.
流石にこれではかっこ悪いので独自ドメインの設定をしたくなりますね. Firebaseではこの設定が超簡単に出来るようになっています.
設定したいサブドメインを入力するとCNAMEレコードが表示されるので, 自分のドメインのDNSにそのレコードを追加して後は放置でOK.
待っているだけで証明書の自動設定までしてくれるので実作業3分で設定が終わりました.
勝手にTLS証明書を取得してくれるのはGitHub Pagesでも同じですが, 独自ドメインを使いつつ証明書の取得まで全部Firebaseに丸投げ出来るのは最高体験でした.
投稿URLの制限から思いついた野望
クライアントから直接読み書きするというRealtime Databaseの特性上, 最終的な入力値のバリデーションは先述のセキュリティルールで行うことになります. そうすると, セキュリティルールで実装しやすい制約を付けておくと後が楽そうです.
投稿可能なURLのドメインを絞るのが一番楽そうだったので, 使えるサービスを絞ることにしました.
- はてなブログ
- note
noteは一番ユーザが多いから, はてなブログは自分が使うから, というので選びました.
一旦この2つで良かろう, と思っていたんですがふと, えびちゅうの公式ブログがアメブロなのを思い出しました.
もしかしたらこの企画がメンバーの目に入ったときに, 興味を持ってもらえるかもしれない. そのときに企画が盛り上がっていたらもしかして...
そう, この中にアメブロを入れたのは何かの間違いでメンバーやスタッフさんが記事を書いてくれるかもしれないという, 限りなく0%に近い可能性にワクワクしたからです.
きっとこの夢は叶うことなく企画終了を迎えることになるとは思いますが, この夢は開発のモチベーション維持に大きく貢献してくれました.
リリース
実質1週間ちょっとしか時間がなかったものの, なんとか企画スタート日の2日前である2/18にリリース出来ました.
この記事の公開時点でリリースから丸1週間程度経っていますが, 特に大きな不具合やトラブルもなく稼働してくれているので一安心です.
企画開始後, 複数人からDMで質問やご意見をいただきました. ページ内の説明が不足していたり, 分かりにくかったことで混乱させてしまったと思います(その節は失礼しました).
いただいた質問やご意見は極力即時修正･反映するようにしていますので, 何か気になりポイントがあればDMやリプ等で指摘いただけると助かります.
感想
技術方面
普段業務で触らない技術が多かったので色々勉強になりました.
以前作った生誕メッセージカードアプリでReactに入門しましたが, まだまだ初心者ながらそれなりに慣れれた感が得られたので良かったです.
今回の開発がきっかけで社内アプリ開発のネタも浮かんできたので, 記憶が揮発する前に取り掛かりたいですね*2.
Firebaseの体験は良かったです. 小規模なWebアプリ開発で使うのにぴったりという感想でした. 今後も使っていきたい.
ただRealtime Databaseをクライアントから直で使うのはもうやりたくないかも. 普通にバックエンドを用意するなりRDB使った方が余計な苦労はしなくて良かったかもと反省してます.
今回も詰まったときに
id:anatofuz さんに助けてもらってました. 休日にドカDMしたのに丁寧に回答してくださってありがとうございました.
苦手意識が強いCSSも, AIにほぼ丸投げでそこそこいい感じに出来ることが分かったのは良い収穫でした. Geminiマジでありがとう.
BIG LOVE...
えびちゅう･企画方面
やっぱり自分が大好きなアイドルと絡んだ開発をやるのは楽しいです.
告知ツイートを考えたり, DMでもらった意見･質問をもとに説明欄を書き換えたりとか, 情報をいい感じに伝える練習にもなった気がします. まだまだ下手くそだけど.
FF外の, 完全に面識が無い方も参加してくださったのが何より嬉しいですね. 今度現場でご挨拶させてください.
22日の特典会で中山莉子さん*3, 風見和香さん*4, 三代目に企画の話が出来たのも楽しかったです. もしお時間あれば見に来てください.
なんなら記事の方もよろしくお願いします.
SSA1ヶ月前なので俺のえびちゅうオタクヒストリーを振り返りたい 2021年編
この記事は私立恵比寿中学 Road to Saitama カウントダウンカレンダーの2月20日の記事です.
2021年編, などと言って記事を分けようとしているのはカウントダウンカレンダーをちょっとでも埋めるために尺を稼ごうとしているのではない.
決して. Trust me.
はじめに
今日でSSAまでちょうど一ヶ月になった.
「私立恵比寿中学 15th Anniversary 大学芸会2025～LOVE&BRAVE～」はその名の通り, えびちゅう15年間の集大成となる重要なライブだ.
15年のうち, 一緒に歩いてきた自らの三年半のえびちゅうオタクヒストリーを振り返ることはSSAを迎える上で必要な準備なんじゃないかと思った.
この三年半でえびちゅうを追いかける中で感じたことや考えたこと, 得られたものなど思うままに書いてみようと思う.
きっかけ
最初の出会いはワクチンの副反応でぶっ倒れていたときにYouTubeで全盛りMIXを見つけたことだった.
元々モノノフだったのでエビ中の存在は知っていたのだけど, 当時は廣田あいかが卒業した, とか, りななんのイメージくらいしかなく楽曲もほとんど知らなかった. ライブもももいろ歌合戦で見たことがある位.
普段なら再生もせず飛ばすところだったが, 高熱悪寒倦怠感の3コンボでスマホをいじるしかなかった自分はなんとなく見始めてそのまま最後まで見切ってしまった.
全く興味もなく, ただの暇つぶしで見始めただけのはずだったのに, 見終わった頃には少しだけエビ中が気になるようになっていた.
副反応から回復したあともやっぱりエビ中へのふわっとした興味が消えなかった. しばらくはオタクとも言えない, ｢ちょっと好き｣程度の温度だったけど作業用BGMに楽曲を聞いたり, THE FIRST TAKEや某SUPER Televisionの映像を見ていくうちに
｢ライブに行ってみたい｣
と思うようになった.
中山莉子にも興味が湧いていた. 某SUPER Televisionを見ていて一番印象に残ったのは中山莉子だった.
初現場
知り合いもおらず, 現場の雰囲気もさっぱり分からなかったが, 桃の現場に長いことソロで通っていた自分にとってはさしたる問題でもなかった.
調べてみると次の現場は｢ちゅうおん｣ってイベントらしかった. 踊らないらしい. 出来ればダンスも見たかったけど着席指定でペンラ禁止, とかだったらむしろ初心者にも優しいかも.
会場の場所が全くもって初心者向けではないが, 車は持ってるし駐車場のチケットもまだあるみたいだから旅行がてら行ってみるか.
ということで初現場がちゅうおんになった. 26日の夜の部だった.
当日.
当たったのは上手の芝生席. 芝生席の評判は皆さんご存知のとおりで過酷(天候もあんまりよくなかった気がする)なんだが, ももクロの規模感に慣れていた僕はそんなことより距離の近さに興奮していた.
初ライブの@JAMの映像をチラ見していて, 正直新メンバーの歌唱には期待をしていなかった.
しかしこの予想はいい意味で裏切られた.
この短期間でここまで上手くなるのか, もちろんお姉さん達と比べればかなり荒削りではあるけれど, オーディションや@JAMから比べて驚くほど成長してる, と素直に思ったし, その初々しいまっすぐな歌唱を聞いていて｢がんばって......！！！｣と思わず手を握り込んでいた.
後は中山莉子のソロカバーの｢ナンダカンダ｣が可愛くてニコニコしたり, 予習中に気に入っていたフユコイが披露されて喜んだりしていた.
総じて大満足であった. ココユノノカの成長を見たい, 中山莉子を推してみたいと思った.
エビ中の推しが決まった日
次のエビ中現場を早く決めたくて一般で中山生誕のチケットを取った. ちゅうおん前から気になっていた中山莉子のソロコンを見てみたかった.
ライブは楽しかったし終始中山莉子が可愛かった. summer dejavuの映像を見ていて惚れるかと思った. 正直, 歌がすごく得意なわけではないし当日は声の調子も良いわけではなさそうだったけど, まっすぐにパフォーマンスしている姿を見ていて｢気になる｣｢ちょっと好き｣という感情から次第に｢推せるかも｣変わっていくのを感じていた.
終盤, MC中に中山莉子が目に涙を浮かべて生誕にかけた思いを語っている様子を見て｢この子を推したい｣と思った. 本人は当日のパフォーマンスに満足出来たわけではなさそうだったが, そのことに向き合う姿も, その思いを一生懸命言葉にしようとする姿も含めて｢この子に会うためにエビ中に通ったらきっと楽しい｣と思った.
この日, 僕は中山莉子推しになった.
大学芸会
推しが決まった僕は当然のように大学芸会のチケットを買った. 一般で取れたのは2日目のチケットだった.
席は2階前方のドセンだった. コールはなかったが, いわゆるペンラありの一般的なタイプのライブでちょっと緊張していた.
カルチャーショックを受けたのは桃と比較して振りコピ文化が強いことだった(当社調べ). ももクロでもそれなりにはいるのだけど, 振りコピ勢の割合が高いというかガチ度が高いのかな, という印象が強かった.
ライブは素直に楽しかったし, またココユノノカが上手になっていて成長のスピードに驚かされた.
ただこのときは｢姉メン + 妹メン｣という印象が強かった. まだ10人で完全に1つのグループという印象は持てなかった.
2021年の振り返りはこれで終わりです.
書いていてそういえばこんな感じだったな, とか普段あまり思い出さないことを思い出せたり出来たので書いてみて良かったです.
明日以降で2022年以降のやつを書く. あとどこかでカレンダーアプリの開発の話も書こうと思います.
何度もいいますが尺稼ぎのために分けている訳では.......(誰か2月のカレンダーを埋めてくれ頼む)
私立恵比寿中学 Road to Saitama カウントダウンカレンダーをやります
概要
前回のアドベントカレンダー的な感じでさいたまスーパーアリーナまでの期間を盛り上げようぜ! ということでみんなガシガシ記事を書いてくれ.
登録用URLはこちら
https://rts-countdown.sioremon.dev/
背景とか
神戸フリラの時, 前泊組で呑んでいたら｢アドベントカレンダー面白かったからあの企画をSSAに向けてやるとかどうよ?｣と提案してもらい, 気分を良くして企画した.
｢今回もadventar使えばええやろ｣とぼやっと考えていたのだけど, いざカレンダーを作成しようとしたら12月のカレンダーしかない(そりゃそう).
似たようなサービスがないか...と探したがアドベントカレンダーとは12月1日から25日にかけてやるものなので当然そんなものはなかった.
仕方ないのでadventarを丸パクリした自作アプリを鋭意開発中です. スタートまでには間に合わせたい(白目)
(2/18) 追記: 間に合った!!!!!!!
そもそもアドベントカレンダー改めカウントダウンカレンダーとは?
こちらを参照ください.
普段は12月にやるアドベントカレンダー企画をえびちゅうSSA公演に向けてやろう, という企画です.
どんな風に参加すれば良いの?
現在慌てて開発しているadventarもどきの任意の日付に登録する.- 登録した日付までにテーマに沿った記事を書く
- 日付が変わる前までに記事を投稿して｢投稿したよ!｣と宣伝する
- adventarもどきに記事URLを登録する
開始日は2025年2月20日です.
投稿先はアプリの実装の都合上, 以下の3つに絞ろうと思っています.
- note.com
- hatenablog.com
- ameblo.jp
俺はここに投稿したいから追加してくれ! 等あれば希望のドメイン名を添えてこの記事のコメントか主のXまでご連絡ください. 個人ドメインのブログ等でも対応可です.
開始日の数日前までには何とかadventarもどきアプリを公開しますので, しばらくお待ちください. URLはXとこの記事で追って告知します.
(2/18) 追記: adventarもどきが完成しました. こちらです.
私立恵比寿中学 Road To Saitama カウントダウンカレンダー
記事の冒頭に｢この記事は私立恵比寿中学 Road to Saitama カウントダウンカレンダーN日目の記事です｡｣といった枕詞をつけることをお作法とします. こんな感じ.
この記事は｢私立恵比寿中学アドベントカレンダー2024｣1日目の記事です.
どんなことを書けばいい?
前回同様, 私立恵比寿中学にかすっていれば何でもOKです. 今回はSSAに向けたカウントダウンなのでSSA公演に絡んでいるとなおベターかもしれない.
テーマ例:
みなさんのSSAにかける思いの丈を綴った激アツ記事をお待ちしております.
年末年始
サバゲ
ウッドボックスっていう北九州のフィールドでN年ぶりにサバゲした. ジャンクから直したAKは弾上がりが最悪で3発に1発しか弾が出ないのでほぼM45で遊んでた.
M45の予備マガジンを忘れてしまって漢の1ゲーム1マガジンで戦っていた.
飲み
12/27〜30まで毎日飲んでいた. 胃腸が逝った. 警固のいい飲み屋が知れてよかった. この間にはてな社員御用達(?)のもぐおれに2回行った. 12月だけで3回行った気がする.
元旦
Apexしてた. 野良にakeomeと言われて年越しに気づいた. クソ安置のお陰で残り3部隊から1発も撃たずにチャンピオン取れて幸先良かった(?). 残り3部隊で安置外れてるのにチェックポイントで削り合ってくれてありがとう.
神戸フリラ
自走で行った. 久しぶりの長距離で大変だった.
ライブ
整番436の401番入場スタートで大優勝だった. 下手の最前方に5人で連番した. 連番の肩掴んでシンガロンのヘドバン出来て楽しかった.
撮可では莉子ちゃんのツンデレビームが俺に向けて発射されてぶっ倒れそうになった.
サムネ可愛すぎるだろ.
初めて莉子ちゃんに至近距離でレスをもらえて嬉しすぎて目から汗出そうになった.
お見送り回
桜井･小久保･中山･真山列にいった.
莉子ちゃんにじゃんけんふっかけたら3回あいこになってウケた. 気が合うね.
お話会
かなり端折りめのざっくりログ
お話会1
塩｢あのーーーーーー認知ください｣
莉｢へっ!? 覚えてるよ(3ヶ月前同じくだりやったやろの顔)｣
塩｢でも名前は...｣
莉｢あっあっ｣
塩｢あっあっ｣
お話会2
莉｢名前なんだっけ｣
塩｢塩レモンです｣
莉｢そう! 塩レモン! 次から塩とレモン身につけてきて｣
塩｢(難しいお題だな...)｣
お話会3
塩「こないだ関内デビルで腕相撲してたじゃん」
莉「うん」
塩「腕相撲≒握手ってことで握手会で腕相撲出来ない？？？」
莉「うーん多分無理」
莉 ｢私腕相撲強いよ!｣
塩 ｢知ってるよ, だからねじ伏せられたくて...｣
莉 ｢勝ちたいんじゃないんだ｣
実はこれ以外にアドベントカレンダーやったら思いの外上手く行って嬉しかったみたいな話をしたけど, 時間内に説明するのが難しくて上手く伝えられなかった気がするので割愛(涙の9枚(3セット)出し)
｢私立恵比寿中学パソコン部｣をやりたい話
この記事は｢私立恵比寿中学アドベントカレンダー2024｣1日目の記事です.
自分にとっては今年最後のえびちゅう現場が終わってしまい, 悲しみに明け暮れている塩レモンです.
前回の記事でアドベントカレンダーをやるぜ！！！と宣言した結果, 何人かの方に興味を持っていただけてとても嬉しかったです. カレンダー追加していただいたり, DMやリプでやり取りしてる父兄の皆様, ありがとうございます. もしご興味があればじゃんじゃんカレンダーに登録していってください.
みんなのアツい記事を待ってるぜ.
今回はえびちゅうアドベントカレンダー記念すべき一発目の記事ということで, そもそもなぜえびちゅう界隈でこんな企画をやろうと思い立ったか, そして今後どんなことをしていきたいのか, という個人的展望を書いていきたいと思います. 前回記事でも多少触れてはいるので繰り返しになる部分もありそうですが, 生暖かく読んで頂けると幸いです.
えびちゅう〇〇部ってかわいいな
最近は撮可現場も増え, オタクが撮影した推しの可愛い写真がライブ後のTLに溢れることが増えましたね. バズーカみたいなカメラを持って現場に来るオタクも珍しくなく, 彼らが撮ってくれた写真は画質も高く, 推しの最高の笑顔を捉えていて毎回のライブ後の楽しみになっています.
そこでよく見るハッシュタグが｢#えびちゅうカメラ部｣. メンバーも認知するくらいの名物ハッシュタグですね.
#えびちゅう15周年ツアー 栃木公演有り難うございました〜〜〜🍋🐮
— 小久保 柚乃 (@YUNO_EBC) 2024年7月15日
えびちゅうカメラ部で撮ったゆのの写真は #ゆのぴくちゃー部 もつけてくれたら見やすいかも📸
カメラ部の皆さんが撮った写真を見ながら, ふと｢えびちゅうカメラ部｣ってハッシュタグが｢めちゃくちゃ良いな｣, と思いました.
まず響きが可愛い. グループ名にもマッチしてるし, 活動も伴っている. こうやって推しの写真を撮って投稿すれば誰でも｢カメラ部｣を名乗れる. オタクの中でのコミュニティ活動として捉えると, 全てがちょうど良い.
ただ今の自分はカメラに数万円も金をかけるだけの余裕はない. 写真のセンスが残念なことも知っているし, 何より遠征民なので毎回でっかいカメラを持っていくのはハードル高い. スマホで撮ってもいいけど, どうせ大した写真は撮れないし, ガチ勢がいる中でスマホでカメラ部を名乗るのは(変に凝り性なので)気に食わない.
こんなことを考えているときに閃きました. ｢パソコン部やろう｣.
クソ雑魚ながらも自分から進んでWeb業界でエンジニアという職を選んだ人間なので, コンピュータ自体好きだし, えびちゅうを題材に何かを開発するのは楽しい. 数はカメラ部のように多くはないだろうけど, 趣味で個人開発をやったり, 同じ業界で働いているオタクがいるのも知っている.
なにより｢えびちゅうパソコン部｣って可愛くないですか?
少数でもきっと興味を持ってくれる人はいるんじゃないか, という気がしました. こんな思いつきをしてから, すぐFFの個人開発をやっているオタクにDMをしたり, 会社の人に相談に乗ってもらったりしていたところで, 前回記事の｢アドベントカレンダーやってみたら?｣という提案を受け, 今回このアドベントカレンダーを｢パソコン部第一号企画｣として実施するに至ったというわけです.
どんなパソコン部にしたいの?
ゆるーいコミュニティ活動, くらいの温度感でオタクが集まれたら良いなと思っています. 個人開発をする人はもちろん, Excelやスプシでえびちゅう情報をまとめる, とか動画制作とかもパソコンぽいので全部パソコン部です. ｢ハッシュタグをつけたらあなたもパソコン部｣くらいのオープンさでいたいと思ってます.
色々やってカメラ部のようにメンバーに認知されるようになったら最高ですね.
ただ, 特に個人開発なんかはインフラリソースの共有やお互いのコードレビューなどPublicにするのは適切でない場合もありそうなので, パソコン部のDiscordサーバーを立ち上げるとかで部分的にクローズドな場所は作りたい. とはいえDiscordサーバーも可能な限りオープンさを保つようにしたいですね.
いつかHPも作ってパソコン部の中でも目立つ成果をまとめる場所を作れたらいいな, とも思ってます. 個人的にはナウでヤングな技術スタックを使って2000年代インターネットな古き良きデザインのサイトを作りたいですが, これはコミュニティが盛り上がってきたら色々相談してまた考えます.
パソコン部を名乗って何をしたいの?
私個人としては個人開発を中心にやっていきたいと思っています. 今年の中山生誕では, メッセージカード作成アプリを作りました.
https://sioremon.github.io/instagram-birthday-event-demo-app/
嬉しいことに生誕企画で作成してもらったアルバム内の半分のメッセージはこのアプリで書かれました(企画側での代筆分も含む).
Reactの練習, くらいのつもりで書いたものが思いの他皆さんに使っていただくことが出来, またこのアプリで書かれたメッセージカードが推しの手元にも届いたのは開発者冥利に尽きるなぁ, と勝手に盛り上がっていました.
コードを読むと残念極まりないので今は見ないでほしいんですが, これをもっと進化させてパソコン部発プロダクトの第一号にしたいなぁ, と妄想しております.
まとめ
｢#えびちゅうパソコン部｣をやりたくなった結果, 第一号の企画として今回のアドベントカレンダーをやることになった, という話を書きました.
人望薄いタイプなので何人興味を持ってくれるか果てしなく不安ですが, まずは部員第一号として好きにやっていきたいと思ってます.
