
他のページよりも気軽に書かせてもらってます。
ご了承の上、お読みいただければ幸いです。
「#ソドワおみくじ」とは?
当サイトで公開している、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」している皆さんの参考になれば幸いです。
まとめ
ということで、おみくじを作った際の技術的な話でした。
改めまして、おみくじについてはこちらからどうぞ。
今後も技術的な話もたまーに投稿しようと思います。
他の記事もご覧あれ!
他にもいろいろとブログを書いてます!
ぜひ気になるものがあれば読んでいってください。