低志会用語集というwebサイトを作りました

低志会（ていし-かい）とは志が低いアニメ作品を愛好する人たちの集まりです。てらまっと、noirse、安原まひろ、オガワデザインの4名でスペース（twitterの音声会話）上で不定期に活動しています。
内容としては、今期おすすめの志の低いアニメ作品の紹介や、蟹アニメ認定作業など。

回を重ねるごとにハイコンテクスト化していくのでとTwitterで用語解説を投稿していたのを見かけて、流れていって見られなくなると勿体無いなと思い、ちょうどWorkersでサイト作ってみたかったのでサクッと。

低志会用語集

技術的なこと

技術スタック

Cloudflare Workers®

Nano JSX • Lightweight 1kB JSX library

GitHub - honojs/hono: Ultrafast web framework for Cloudflare Workers. Fast, but not only fast.

Bulma: Free, open source, and modern CSS framework based on Flexbox

解説

Cloudflare Workers上でSSR（サーバーサイドレンダリング）されています。
Next.js や Remix を使うほどでもない…Pagesの設定するのもめんどい…というときにサクッと作れないかなと思って、Workersだけで完結するように作りました。

Workersだけだと静的ファイルが置けないので、画像はR2に保存。毎回R2にアクセスすると重いので、WorkersKV を使ってCacheしています。

最初は素のhtmlを作って返すようにしていましたが、条件分岐による出し分けとかがめんどくさいので、NANO JSXを使ってJSX記法で書けるようにしました。参考にしたのはこちら。

CDNのエッジで実行されるので、とても速いです

投げ銭と広告

Stripe Payment Links

支援のお願いページ に100円と100円/月の支援プランを用意して、クレジット決済で支援できるようにしました。
クリックすると、画像のようなちゃんとしたネットショップlikeな決済画面が開いて支払いをすることができます。
ガリガリコードを書いているわけではなくて、Stripeの機能を使ってノーコードで作ってます。管理画面からぽちぽちやっただけです。簡単。

Stripe Payments | ノーコードリンク型決済を5分で導入

Amazon アソシエイト

低志会フォロワーには学生さんとアニメ好きが多そうだったので、用語ページにprime studentのバナー、おすすめ作品ページにprime videoのバナーを貼りました。
あまり広告が目立つとユーザー体験が悪くなるのでほどほどに。
prime studentは学生向けのAmazon primeで、最初6ヶ月お試しで無料、その後は年会費がprimeの半額ととてもお得なので学生の方はぜひ。

Amazon.co.jp: Prime Student - 学生のためのお得なプログラム

まとめ

• 低志用語集にアクセスしよう！

• webサイトはCloudflare Workersで割と作れる

• Stripe Payment Linksおすすめ

• カニ