【朗報】おんＪ民が匿名掲示板を作ってみた

# TL;DR
+ Svelteを勉強し始めて2か月で完成
+ フロント・バック・DBそれぞれの専用マネージドサービス無料枠のツギハギで完成まで漕ぎ着く
+ 競合サイトのおんJとエッヂ掲示板の劣化版になり無事死亡
+ 公開後1時間でおんJ民に飽きられる

---

:::note info
ワイは野球に興味ない系のおんＪ民やで
Qittaに初めて顔出すんでお手柔らかに頼むで～
:::

# ワイのスペック
+ 無収入ニート
+ 独学でプログラミングを勉強中
+ 無料のChatGPT愛用


# 完成したもの
アプリURL：https://unj-i1v.pages.dev/
ソースコード(AGPL)：https://github.com/onjmin/unj/tree/main

後の章で追って解説するやで～

## 見た目
### エントリページ
![スクリーンショット_29-3-2025_15387_unj-i1v.pages.dev.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4048348/21aff267-08fc-4369-88db-cc53b8217462.jpeg)

### スレッド一覧ページ
![スクリーンショット_29-3-2025_153831_unj-i1v.pages.dev.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4048348/73625914-12dd-49aa-9f25-8c09ce43bc4a.jpeg)

### スレッド個別ページ
![スクリーンショット_29-3-2025_153922_unj-i1v.pages.dev.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4048348/ac8cc655-03e5-4fd6-8d35-2f7f2eeb3452.jpeg)

**特殊なスレ（背景にYouTubeが埋め込まれる）**
![スクリーンショット_29-3-2025_153949_unj-i1v.pages.dev.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4048348/de9a1aa4-32df-41ee-93e3-1790ecbd9ceb.jpeg)

## 計画の軌跡

+ 2月3日 初コミット
+ 2月12日 最初のモック作成
+ 3月2日 モックと`Glitch`の疎通完了
+ 3月10日 モックと`Glitch`と`Neon PostgreSQL`の疎通完了
+ 3月29日 一般公開

:::note info
まともなスケジュールを立てず`3月29日一般公開`という線だけ引いて頑張ったやで
無計画ニートだからこそ成せる技やな
:::

# 成功した部分
無料でサービスが作れるとは思わんかったけど何とかなったわ
## 構成図
+ フロント：`Cloudflare Pages`
  + 静的サイトをホスティングできる無料サービスやで
+ バック：`Glitch`
  + Node.jsのプロセスの稼働時間に制約がない、パワフルな無料サービスやで
+ DB：`Neon PostgreSQL`
  + PostgreSQL単体が使える無料マネージドサービスやで

:::note info
分散されたフロントサーバーから中央集権的に1つの`Glitch`にアクセスする構成やで
フロントのURLにDDoSされても無傷な構成になっているんや（俗にいう避難所やな）

もちろん開発者ツールのNetworkを見られるとバックのURLがバレるんやが
少なくとも機械的なDDoS相手には耐性がありそうな構成やと思っとる
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4048348/cb7ff260-da20-4777-99a8-2b1e4488a680.png)

（`Pipedream`は無料枠が渋すぎて疎通させてないやで）

# 失敗した部分
## 競合サイトの劣化版になったこと
+ おんJ
  + アプリURL：https://hayabusa.open2ch.net/livejupiter/
  + オープンソース？：https://github.com/satorunet/open2ch/
  + CGIとAjaxとSocket.IOを組み合わせた掲示板
+ エッヂ掲示板
  + アプリURL：https://bbs.eddibb.cc/liveedge/
  + オープンソース：https://github.com/edginer/eddiner
  + エッジコンピューティング技術を使った掲示板（Rust製）

実際にアクセスすると分かるんやが、スレの読み込みに決定的な差が出とる…
ユーザーにもしっかり指摘されてるで

![スクリーンショット 2025-03-29 162715.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4048348/7cbdf7af-8087-4302-a41d-82ce52ff72d3.png)

### 分析

+ おんＪ
  + CGIなので初動は爆速
+ エッヂ掲示板
  + `Cloudflare Workers`を使っており、典型的なアーキテクチャのバックエンドに相当する部分がなく爆速
+ ワイの掲示板
  + `Cloudflare Pages`は高速で疎通
  + `Neon PostgreSQL`も高速で疎通
  + `Glitch`がボトルネックになっている

ワイの掲示板も開発環境なら高速（1秒弱）で描画できるんやが、
本番環境(`Glitch`)やと（2～3秒）かかってしまっとる…

CGI、エッジコンピューティングどっちもつかずのアーキテクチャだから負けてしまったんや…

---

**ちなワイが`Glitch`を間に挟んだ理由**
+ DBのアクセス回数を減らす（サーバー上の変数にキャッシュする）
+ JWT認証を採用しているので、JWT失効用に中央集権でアクセス制御したい
+ Socket.IOでリアルタイム更新したい（`Cloudflare Workers`は力不足）

:::note warn
これらの要件は個人運営サービスやとやや過剰品質だったかもしれん…
ユーザーの人数なんて知れてるからキャッシュ層なんて要らなかったかもしれん
:::

---

無料枠で完結すると限界があるんかなあ
ここはもう少し拘ればユーザーのウケが良かったかもしれんわ…

## 最初の利用規約要らなくね？

初回アクセス時こういうのが表示されるで～
![スクリーンショット_29-3-2025_163536_unj-i1v.pages.dev.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4048348/2f0b0a60-0cd6-40ec-915e-0caf24a0417c.jpeg)


![スクリーンショット 2025-03-29 163405.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4048348/41775e3c-ff56-4697-a879-ab915c7016a5.png)

明らかに新規ユーザー獲得の弊害になっとる…

:::note warn
ただ、「みなし同意」は法的によくなく、
一方で、匿名掲示板というテイでIPアドレス等を記録しないのも法的機関の要請に応えられなくなってしまう

開示請求に応じられないと最悪運営の責任が問われる可能性があるんやで

**法的根拠**
+ 刑事訴訟法
+ 電気通信事業法
+ プロバイダ責任制限法
:::

サービス運営する上でこういった暗黙的な努力義務の板挟みになって
ユーザー体験最悪なモンができてしまったんや…

ユーザー体験最悪やけど誰か使ってクレメンス

# まとめ
今回は**TL;DR**の解説に留めて、
詳細な実装を含む技術的な解説は飛ばしたわ

その辺はREADMEに書いてるので暇があったら読んでクレメンス
ソースコード(AGPL)：https://github.com/onjmin/unj/tree/main

コントリビュートも受け付けてるやで～
ほな、また……