「#ソドワおみくじ」 の技術的な話
他のページよりも気軽に書かせてもらってます。
ご了承の上、お読みいただければ幸いです。
技術的な話
前提
このウェブサイトは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」している皆さんの参考になれば幸いです。
他のブログ記事もぜひ!!
他にもいろいろなブログを書いています!
ぜひいろいろと読んでいってください。