「#ソドワおみくじ」 の技術的な話

2024/1/16公開
ブログでは僕が考えたことを、基本的に考えた順に書いています。
他のページよりも気軽に書かせてもらってます。
ご了承の上、お読みいただければ幸いです。

「#ソドワおみくじ」とは?

当サイトで公開している、TRPG「ソード・ワールド2.5」(SW2.5/ソドワ)の運勢を占うことができるツールです!

ぜひ遊んでみてください。

技術的な話

前提

このウェブサイトはNuxt3+TypeScriptで書き、nuxt gererateしてGithub Pagesを使って公開しています。

Nuxt3、とっても便利なのでおすすめです。

おみくじの工夫1:再現可能な乱数

おみくじを作る際、誰かがシェアした内容を見ることができるのが大事だと考えました。
これはもちろんDBに保存するといった方法で実現可能ですが、このサイトは「完全無料公開」をモットーにしており、無料で使用できるDBサービスもいつかは有料になる可能性を踏まえ、使用しない選択肢をとることにしました。

そこでランダムな数値をURLに持たせ、これをシード値とした疑似乱数を用いておみくじの結果を生成する仕組みとしました。

シード値を用いた乱数生成の実装は「古都こと」さんのブログを参考にさせていただきました。
素晴らしいブログをありがとうございます。

Xorshiftというアルゴリズムだそうですが、解説を読んでもなーーーんも分かりませんでした……。

おみくじの工夫2:URL

今回、URLの末尾が運勢(「大吉」「小吉」「凶」など)を示す数字となるようにしました。
一方でシード値やバージョンをクエリパラメータとして持つようにしました。

これはTwitter等で運勢に応じたOGP画像を表示するための工夫です。

というのも「nuxt gererate」によって生成された静的HTMLがない場合、Twitter等はページ個別のmetaを取得できないのです。

この辺はSSR(Server Side Rendering)を使用すれば解決するのですが、このサイトはGithub Pagesを用いて完全無料でデプロイしているため、SSRできないのです。

「nuxt gererate」している皆さんの参考になれば幸いです。

まとめ

ということで、おみくじを作った際の技術的な話でした。

改めまして、おみくじについてはこちらからどうぞ。

今後も技術的な話もたまーに投稿しようと思います。

他のブログ記事もぜひ!!

他にもいろいろなブログを書いています!
ぜひいろいろと読んでいってください。

次の記事

前の記事

タグ「技術系」の最新記事

最後までお読みいただきありがとうございました。
よければ他のブログやページもご覧ください。