ウェブリングの導入ガイド：自己紹介と実装手法

1. ウェブリングとは？

ウェブリング（Webring）は、特定のテーマや共通点を持つウェブサイト同士を循環的にリンクさせるリストのことです。

• 設定対象:
  • 個人ウェブサイトをお持ちの場合
  • 友達（または関係者）が N+0 名以上存在する場合
• テーマの例:
  • 趣味
  • 情熱（関心のある事柄）
  • 友人との交流
• 本質:
  • 裏側の伝説は深いが、大切なのは**「それが楽しい」**という点です。

2. 設定方法の選択肢

ウェブサイト同士を循環リンクさせるには、主に 2 つのアプローチがあります。

シンプルだが手作業による方法

• グループメンバーそれぞれに、自サイトの URL を直接共有してもらいます。
• 手動構成例:
  • サイト A → サイト B
  • サイト B → サイト C
  • サイト C → サイト A

フレキシブルな自動化方法（推奨）

• すべての参加者のサイト情報をJSON ファイルで管理するサーバーを構築します。

• /prev

  や

  /next

  という専用のパスを通じて、プログラム的に前サイト・次サイトを自動探索・表示させます。

3. Cloudflare Worker を 활용한実装例

本ガイドでは、コストが安く過負荷になりにくいCloudflare Workerを利用した自動化方法を提案します。

システム構成

• データ構造:

  ring.json

  に参加者のリストを格納。
• ロジック: Worker がリクエストを受け取って、参照元（referer）を確認し、前後のサイトへ自動リダイレクトを行います。

コード実装：

worker.js

import ring from './ring.json';

const {members} = ring;

export default {
  /**
   * Cloudflare Worker の標準 fetch ハンドラーです。
   *
   * @param request - クライアントから送信された要求オブジェクト
   * @param env - wrangler.jsonc で宣言されたバインド変数へのインターフェース
   * @param ctx - ワーカーの実行コンテキスト
   * @returns クライアントへ返すレスポンスオブジェクト
   */
  async fetch(request, env, ctx): Promise<Response> {
    const pathname = new URL(request.url).pathname;

    // 参照元の取得（優先順位：クエリパラメータ > Header: referer > Header: referrer）
    const referrer = new URL(request.url).searchParams.get('from') 
                   || request.headers.get('referer') 
                   || request.headers.get('referrer') 
                   || '';
    
    // 参照元を登録されたメンバー情報と照合
    const currentMember = members.find(member => member.url === referrer);

    if (!currentMember) {
      return new Response('Member not found', {status: 404});
    }

    switch (pathname) {
      case '/':
        // ホームページ表示（今回は「Zadu」という定数値を返す例）
        return new Response('Zadu');
      
      case '/next':
        // 次のメンバーを検索してリダイレクト
        const nextMember = members[(members.indexOf(currentMember) + 1) % members.length];
        return Response.redirect(nextMember.url, 302);
      
      case '/prev':
        // 前のメンバーを検索してリダイレクト
        const prevMember = members[(members.indexOf(currentMember) - 1 + members.length) % members.length];
        return Response.redirect(prevMember.url, 302);
      
      case '/random':
        // ランダムなメンバーを指定し、そのページへ誘導
        const randomMember = members[Math.floor(Math.random() * members.length)];
        return Response.redirect(randomMember.url, 302);
      
      default:
        return new Response('Not Found', {status: 404});
    }
  },
} satisfies ExportedHandler<Env>;

デプロイと運用のポイント

• プラットフォーム: Cloudflare Workers（無料枠で動作可能）。
• 利点: リクエスト数が多くなりにくい特性上、コスト効率が極めて高いです。
• ソースコード: 具体的な JSON データや設定詳細は、別途共有されるフルソースコードを確認してください。

---

注記: このプロジェクトの背景には、「アメリカ建国 250 周年」を記念した物語が隠されています（Moar）.