Web開発
ウェブリングが必要だ
You need a webring (shub.club)
要約
ウェブリングとは、共通のトピックを持つウェブサイトを円環状にリンクさせたもので、個人のウェブサイトと友人を持つ人々に推奨されます。手動でリンクを張るか、JSONファイルとCloudflare Workerを使ったサーバーで自動化する方法があり、後者の例としてコードが示されています。
全文翻訳
ウェブリングが必要だ！ 2026年7月5日投稿 • 0ビュー
ウェブリングが必要だ！ そう、あなたにだ！ 個人のウェブサイトを持っていて、友人が一人でもいるなら、ウェブリングをセットアップすべきだ。ウェブリングとは何か？ それは、特定のトピックが割り当てられたウェブサイトの円環状のリンクリストにすぎない。趣味、情熱、あるいは単に友人たちでも良い！ ウェブリングの歴史はかなり奥深いので、ここで詳しく読むことをお勧めする。しかし、知っておくべきことは、それが単に楽しいということだけだ。
どうすればウェブリングをセットアップできるのか？ 簡単だが手間のかかる方法：グループに、お互いのウェブサイトにリンクするように手動で伝えるだけだ。サイトAがサイトBにリンクし、BがCに、CがAにループする。より複雑な方法：友人のウェブサイトのJSONファイルを保存するウェブサーバーをセットアップし、/prevと/nextルートを用意して自動ナビゲーションできるようにする。
```javascript
import ring from './ring.json';
const {members} = ring;
export default {
/**
* これはCloudflare Workerの標準的なfetchハンドラです
*
* @param request - クライアントからWorkerに送信されたリクエスト
* @param env - wrangler.jsoncで宣言されたバインディングを参照するためのインターフェース
* @param ctx - Workerの実行コンテキスト
* @returns クライアントに送信されるレスポンス
*/
async fetch(request, env, ctx): Promise<Response> {
const pathname = new URL(request.url).pathname;
// リファラーを取得
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 '/':
return new Response('Zadu');
case '/next':
const nextMember = members[(members.indexOf(currentMember) + 1) % members.length];
// 次のメンバーのURLにリダイレクト
return Response.redirect(nextMember.url, 302);
case '/prev':
const prevMember = members[(members.indexOf(currentMember) - 1 + members.length) % members.length];
// 前のメンバーのURLにリダイレクト
return Response.redirect(prevMember.url, 302);
case '/random':
const randomMember = members[Math.floor(Math.random() * members.length)];
// ランダムなメンバーのURLにリダイレクト
return Response.redirect(randomMember.url, 302);
default:
// パス名が既知のルートに一致しない場合、404レスポンスを返す
return new Response('Not Found', {status: 404});
}
},
} satisfies ExportedHandler<Env>;
```
私は個人的にCloudflare Workerを使用しました。これは無料であり、重い使用量は予想していません。完全なソースコードはここで見ることができます。